/* ============================================================
   IMAGE COMPONENTS + HERO VARIANTS
   Shared by the service, location and utility templates. Four
   hero treatments and five image components are combined per
   page by inc/media-pages.php so neighbouring pages do not read
   as the same page with different words.
   ============================================================ */

/* ---------- image sizing base --------------------------------------
   Every <img> carries real width/height attributes so its box is reserved and
   nothing shifts on load. Those attributes map to a presentational `height`,
   which BEATS `aspect-ratio`, so any component that crops with aspect-ratio
   must reset height to auto first or the image renders at full intrinsic
   height (a 2336x1744 photo came out 530x1744 in a split panel).
   ------------------------------------------------------------------- */
.tc-fig img,
.tc-split-media img,
.svc-hero-media img,
.post-open-media img,
.post-next-card img,
img.tc-post-thumb{display:block;width:100%;height:auto}

/* ---------- figure base ------------------------------------------- */
.tc-fig{margin:0}
.tc-fig img{border-radius:var(--radius)}
.tc-fig figcaption{
  margin-top:10px;font-size:.84rem;color:var(--muted);line-height:1.45;
  padding-left:14px;border-left:2px solid var(--coral);
}

/* ---------- split: image beside text ------------------------------ */
.tc-split{padding:clamp(52px,6.5vw,96px) 0;background:var(--paper)}
.tc-split.is-mint{background:#EFF6F5}
.tc-split.is-sand{background:var(--sand)}
.tc-split .wrap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4.5vw,64px);align-items:center;
}
.tc-split .tc-split-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-md);aspect-ratio:4/3;object-fit:cover}
.tc-split.rev .tc-split-media{order:2}
.tc-split h2{font-size:clamp(1.45rem,2.45vw,2.05rem);color:var(--navy);line-height:1.12;letter-spacing:-.022em}
.tc-split p{color:var(--muted);font-size:1.02rem;line-height:1.7;margin-top:16px}
.tc-split .svc-kicker{margin-bottom:12px}

/* ---------- full-bleed figure band -------------------------------- */
.tc-figband{position:relative;background:var(--navy-deep)}
.tc-figband img{
  display:block;width:100%;height:clamp(260px,38vw,520px);object-fit:cover;border-radius:0;
}
.tc-figband figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;border:0;padding:clamp(16px,2.4vw,26px) 0;
  background:linear-gradient(to top,rgba(15,49,64,.82),rgba(15,49,64,0));
  color:rgba(255,255,255,.94);font-size:.88rem;
}
.tc-figband figcaption span{
  display:block;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;
}

/* ---------- gallery ------------------------------------------------ */
.tc-gallery{padding:clamp(48px,6vw,88px) 0;background:var(--sand)}
.tc-gallery.is-paper{background:var(--paper)}
.tc-gallery-head{max-width:60ch;margin:0 auto clamp(26px,3.2vw,40px);text-align:center}
.tc-gallery-head h2{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--navy);line-height:1.14}
.tc-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.tc-gallery-grid .tc-fig img{aspect-ratio:3/2;object-fit:cover;box-shadow:var(--shadow-sm)}

/* ---------- pull quote over an image ------------------------------ */
.tc-quote{position:relative;overflow:hidden;background:var(--navy)}
.tc-quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26;border-radius:0}
.tc-quote .wrap{position:relative;z-index:1;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.tc-quote blockquote{
  margin:0 auto;max-width:56ch;text-align:center;color:#fff;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.34;letter-spacing:-.015em;
}
.tc-quote cite{
  display:block;margin-top:20px;font-family:'Instrument Sans',system-ui,sans-serif;
  font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--soft-teal);
}

/* ---------- hero variants ------------------------------------------ */
/* overlay: full-bleed photo, copy over a gradient (the default) */

/* split: copy left, photo right in a rounded panel on sand */
.svc-hero.svc-hero--split{
  display:block;min-height:0;background:var(--sand);
  padding:clamp(104px,12vw,150px) 0 clamp(44px,5.5vw,76px);
}
.svc-hero.svc-hero--split::after{content:none}
.svc-hero.svc-hero--split .wrap{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;
}
.svc-hero.svc-hero--split .svc-hero-in{max-width:none}
.svc-hero.svc-hero--split .svc-kick{color:var(--navy)}
.svc-hero.svc-hero--split h1{color:var(--navy);max-width:none}
.svc-hero.svc-hero--split .svc-hero-lede{color:var(--muted)}
.svc-hero.svc-hero--split .svc-hero-media img{
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/5;object-fit:cover;
}
.svc-hero.svc-hero--split .btn-outline2{background:#fff;color:var(--teal);border-color:rgba(5,127,126,.35)}

/* band: short teal hero, the photo arrives immediately after as a band */
.svc-hero.svc-hero--band{
  display:block;min-height:0;background:var(--teal);
  padding:clamp(104px,12vw,148px) 0 clamp(40px,5vw,66px);
}
.svc-hero.svc-hero--band::after{content:none}
.svc-hero.svc-hero--band .svc-hero-in{max-width:none}
.svc-hero.svc-hero--band h1{max-width:20ch}
.svc-hero.svc-hero--band .svc-hero-lede{max-width:62ch}

/* frame: photo inset in a sand frame, title underneath */
.svc-hero.svc-hero--frame{
  display:block;min-height:0;background:var(--paper);
  padding:clamp(104px,12vw,146px) 0 0;
}
.svc-hero.svc-hero--frame::after{content:none}
.svc-hero.svc-hero--frame .svc-hero-in{max-width:none}
.svc-hero.svc-hero--frame .svc-kick{color:var(--navy)}
.svc-hero.svc-hero--frame h1{color:var(--navy);max-width:24ch}
.svc-hero.svc-hero--frame .svc-hero-lede{color:var(--muted)}
.svc-hero.svc-hero--frame .svc-hero-media{
  margin-top:clamp(28px,3.4vw,44px);background:var(--sand);border-radius:var(--radius-lg);
  padding:clamp(14px,1.6vw,22px);
}
.svc-hero.svc-hero--frame .svc-hero-media img{
  border-radius:var(--radius);aspect-ratio:21/9;object-fit:cover;box-shadow:var(--shadow-sm);
}

/* ---------- responsive --------------------------------------------- */
@media (max-width:980px){
  .tc-split .wrap{grid-template-columns:1fr;gap:24px}
  .tc-split.rev .tc-split-media{order:0}
  .tc-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-hero.svc-hero--split .wrap{grid-template-columns:1fr}
  .svc-hero.svc-hero--split .svc-hero-media img{aspect-ratio:16/10}
}
@media (max-width:640px){
  .tc-gallery-grid{grid-template-columns:1fr}
  .tc-figband img{height:clamp(220px,52vw,320px)}
  .svc-hero.svc-hero--frame .svc-hero-media img{aspect-ratio:3/2}
}