/* Full-bleed feature split — image on one half, colour on the other, both
   running to the edge of the viewport.

   Taken from the Medicine in New Zealand layout direction, 18 Oct 2026.
   The prototype that introduced it hotlinked three Unsplash photographs;
   this uses the site's own clinical and lifestyle libraries instead, which
   are specialty-matched and already on the server.

   Use it sparingly. The pattern works because it interrupts a column of
   text — two or three on a long page, never one after another. A page that
   is all full-bleed splits is a slideshow, not a guide.

   Colours come from destination.css via the body class, so the same markup
   is teal on an Ethicare page and takes the destination accent where one
   is used. Nothing here hard-codes a hue.

   Markup:
     <section class="fsplit">            (add .flip to put the image right)
       <div class="pic"><img src="…" alt="…" loading="lazy"></div>
       <div class="say"> … </div>
     </section>
*/

.fsplit{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:clamp(360px,44vw,520px);
  /* escape the page container and run to both edges */
  width:100vw;
  margin-inline:calc(50% - 50vw);
  margin-block:clamp(46px,6vw,86px);
}

.fsplit .pic{position:relative;overflow:hidden;background:#D7E2DC}
.fsplit .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.fsplit .say{
  background:var(--teal,#02615D);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(32px,5vw,74px) clamp(26px,5vw,72px);
}
.fsplit .say h2{color:#fff;margin:0 0 14px}
.fsplit .say p{color:#DCEAE7;margin:0 0 14px;max-width:48ch}
.fsplit .say p:last-of-type{margin-bottom:0}
.fsplit .say .eyebrow{color:var(--lime-pale,#E7F5C8);margin-bottom:12px}
.fsplit .say a:not(.btn){color:#fff}

/* The quieter variant, for when two splits sit on the same page and a second
   block of teal would be heavy. */
.fsplit.light .say{background:var(--soft,#F3F7F4);color:var(--text,#333)}
.fsplit.light .say h2{color:var(--teal,#02615D)}
.fsplit.light .say p{color:var(--muted,#555)}
.fsplit.light .say .eyebrow{color:var(--accent-ink,#2F5E49)}
.fsplit.light .say a:not(.btn){color:var(--teal,#02615D)}

/* Image to the right instead of the left. Alternating down a page reads as
   rhythm; the same side twice reads as a mistake. */
.fsplit.flip .pic{order:2}

.fsplit .say .cta{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  margin-top:20px;padding:13px 22px;border-radius:8px;text-decoration:none;
  font-family:var(--display),'Work Sans',sans-serif;font-weight:700;font-size:15px;
  background:var(--lime-pale,#E7F5C8);color:#2F5E49;
}
.fsplit.light .say .cta{background:var(--teal,#02615D);color:#fff}
.fsplit .say .cta:hover{filter:brightness(.95)}

/* On a phone the image stacks above the words and keeps a usable height
   rather than collapsing to a letterbox. */
@media (max-width:820px){
  .fsplit{grid-template-columns:1fr;min-height:0}
  .fsplit .pic{height:clamp(220px,52vw,300px);position:relative}
  .fsplit.flip .pic{order:0}
  .fsplit .say{padding:34px 22px}
}

@media print{
  .fsplit{display:block;width:auto;margin-inline:0}
  .fsplit .pic{display:none}
  .fsplit .say{background:none;color:#000;padding:0}
  .fsplit .say h2,.fsplit .say p{color:#000}
}

/* The section's own buttons, on the teal half. A teal primary button on a
   teal panel is invisible, so the roles invert here. */
.fsplit .say .btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.fsplit .say .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;
  border-radius:8px;text-decoration:none;font-family:var(--display),'Work Sans',sans-serif;
  font-weight:700;font-size:15px}
.fsplit .say .btn-primary{background:var(--lime-pale,#E7F5C8);color:#2F5E49;border:0}
.fsplit .say .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.fsplit .say .btn-ghost:hover{background:rgba(255,255,255,.12)}
.fsplit.light .say .btn-primary{background:var(--teal,#02615D);color:#fff}
.fsplit.light .say .btn-ghost{color:var(--teal,#02615D);border-color:rgba(2,97,93,.4)}