/* ============================================================ PAGE HERO
   The interior pages' hero (2026-09-24). Same grammar as the home hero, one
   size down:

     picture or film, full bleed
     navy wash rising from the foot, light cap at the head
     eyebrow on a gold rule, italic headline, gold second word (.b8)
     one line of copy, optional

   Plus a trail above the eyebrow, which the home page does not need.

   Height is a third under the home hero's (560-720) so the page's own content
   starts above the fold. The film layer is the same .surface loop the rest
   of the site uses; its poster still is the frame on a slow link.

   Variants
     .phero--person   physician bio: matted headshot on the right
     .phero--article  news post: longer headline, smaller, tag + date eyebrow
     .phero--specimen specialty: histology held down, same rule as the tiles
*/
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-brand-navy);
  min-height: clamp(440px, 38vw, 600px);
  display: flex; align-items: flex-end;
}

/* Picture (or the film's poster frame) and film share one layer. */
.phero__media,
.phero__media > img,
.phero__film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.phero__media > img { object-fit: cover; object-position: center 46%; display: block; }
.phero__film { z-index: 0; --surface-veil: none; }
/* The poster is the <picture> under this layer, not --surface-poster: a url()
   in a custom property resolves against the stylesheet, not the page. */
.phero__film::before { content: none; }
.phero__film .surface__video { opacity: 1; }

/* No wash over the picture (client review 2026-09-24: "you don't need to
   cover up the whole photo"). The type sits on its own light glass panel,
   sized to the copy; the rest of the frame shows as shot. A faint cap at the
   head keeps the white nav band off a bright sky. */
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 20, 52, .18) 0%, rgba(0, 20, 52, 0) 18%);
}
.phero__copy {
  justify-self: start; width: fit-content; max-width: min(760px, 100%);
  padding: var(--sp-6) var(--sp-7);
  background: rgba(0, 24, 62, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .10),
              0 18px 40px -18px rgba(0, 10, 30, .55);
  border-left: 3px solid var(--c-brand-gold);
}
.phero__copy .phero__trail { margin-bottom: var(--sp-4); }
/* The type no longer needs the heavy four-layer shadow the wash used to back. */
.phero__title { text-shadow: 0 1px 2px rgba(0, 8, 24, .45); }
.phero__eyebrow, .phero__sub, .phero__trail { text-shadow: none; }
/* Gold reveal along the foot: the seam into the page. */
.phero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 3px; background: var(--c-brand-gold);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .18);
}

.phero__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--layout-max);
  margin-inline: auto; padding-inline: var(--layout-gutter);
  padding-block: var(--sp-8) clamp(36px, 4.4vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: end;
  gap: var(--sp-7);
}


/* Where you are. */
.phero__trail {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-5); padding: 0; list-style: none;
  font-size: var(--fs-xs); color: rgba(232, 239, 248, .78);
  text-shadow: 0 1px 2px rgba(0, 8, 24, .8);
}
.phero__trail li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-gold-1); }
.phero__trail a { color: inherit; text-decoration: none; }
.phero__trail a:hover, .phero__trail a:focus-visible { color: var(--c-white); text-decoration: underline; }
.phero__trail [aria-current] { color: var(--c-white); }

.phero__eyebrow {
  margin: 0 0 var(--sp-4); padding-left: var(--sp-4);
  border-left: var(--line-fin) solid var(--c-brand-gold);
  font-size: var(--fs-label); font-weight: var(--fw-black);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-gold-1);
  text-shadow: 0 1px 2px rgba(0, 8, 24, .85), 0 2px 10px rgba(0, 8, 24, .70);
}
.phero__title {
  margin: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2.125rem, 1.35rem + 2.3vw, 3.25rem);
  line-height: 1.06; letter-spacing: var(--ls-hero);
  color: var(--c-white);
  text-shadow:
    0 1px 2px rgba(0, 8, 24, .80),
    0 3px 10px rgba(0, 8, 24, .62),
    0 10px 36px rgba(0, 8, 24, .68);
}
.phero__title .b8 { font-weight: var(--fw-bold); color: var(--c-gold-1); }
.phero__sub {
  margin: var(--sp-4) 0 0; max-width: 56ch;
  font-size: var(--fs-body); line-height: 1.5; color: #E8EFF8;
  text-shadow: 0 1px 2px rgba(0, 8, 24, .80), 0 2px 14px rgba(0, 8, 24, .60);
}

/* ------------------------------------------------------------ physician */
.phero--person .phero__in { grid-template-columns: minmax(0, 1fr) auto; }
.phero--person .phero__copy { align-self: end; }
.phero__portrait {
  width: clamp(150px, 15vw, 210px); margin: 0;
  justify-self: end; align-self: end;
  padding: 6px; background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(0, 36, 93, .18), var(--cast-3);
}
.phero__portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.phero__facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-sm); color: #E8EFF8;
}
.phero__facts li { padding-left: var(--sp-3); border-left: 1px solid rgba(186, 151, 101, .7); }

/* ------------------------------------------------------------- specimen
   A histology section at full strength fights the headline. Same treatment
   the specialty tiles get at rest. */
.phero--specimen .phero__media > img,
.phero--specimen .surface__video { filter: none; }   /* shown as shot (2026-09-24) */

/* -------------------------------------------------------------- article */
.phero--article .phero__title { font-size: clamp(1.875rem, 1.2rem + 1.9vw, 2.75rem); max-width: 26ch; }

/* --------------------------------------------------------------- phones
   Client review 2026-09-25: two thirds picture or film, one third headline,
   then the page. The picture is its own row, shown whole, nothing laid over
   it. The headline sits under it on navy, centred. A pathologist's photo is
   centred on the seam between the two. .phero__in steps aside
   (display: contents) so the photo and the copy can take a row each. */
@media (max-width: 760px) {
  .phero {
    --phero-screen: calc(100svh - var(--masthead-h, 120px));
    display: grid; grid-template-columns: minmax(0, 1fr);
    /* exactly one screen: the copy takes what it needs (a third or more),
       the picture takes the rest, so the headline is always on the first screen */
    grid-template-rows: minmax(240px, 1fr) auto;
    min-height: var(--phero-screen); align-items: stretch;
  }
  .phero__media, .phero__film, .phero__need {
    position: relative; inset: auto; grid-row: 1; grid-column: 1;
  }
  .phero__media > img { position: absolute; inset: 0; object-position: center; }
  .phero::after { bottom: auto; height: 30%; }

  .phero__in { display: contents; }
  .phero__copy {
    grid-row: 2; grid-column: 1; position: relative; z-index: 2;
    width: 100%; max-width: none; min-height: calc(var(--phero-screen) / 3);
    padding: var(--sp-6) var(--layout-gutter) var(--sp-7);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    background: var(--c-brand-navy);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border-left: 0; border-top: 3px solid var(--c-brand-gold);
  }
  .phero__trail { justify-content: center; margin-bottom: var(--sp-4); }
  .phero__eyebrow { display: inline-block; margin-inline: auto; padding-inline: var(--sp-3); border-left: 0; }
  .phero__title { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .phero__sub { font-size: var(--fs-sm); margin-inline: auto; }
  .phero__facts { justify-content: center; }
  .phero__facts li { padding-inline: var(--sp-3); border-left: 0; }
  .phero__facts li + li { border-left: 1px solid rgba(186, 151, 101, .7); }
  .phero .paybtn { margin-inline: auto; }

  /* physician: photo centred on the seam, half over the picture */
  .phero__portrait {
    grid-row: 1; grid-column: 1; z-index: 4;
    justify-self: center; align-self: end;
    width: 116px; padding: 4px;
    transform: translateY(50%);
  }
  .phero--person .phero__copy { padding-top: calc(116px * 1.25 / 2 + var(--sp-4)); }
  .phero--person .phero__trail { margin-bottom: var(--sp-3); }
}

/* A page with no image on hand yet: a tagged placeholder that names the shot
   to source. Review builds only; map.html lists every one. */
.phero__need {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
  gap: 8px; padding: 28px clamp(16px, 4vw, 64px);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, rgba(255,255,255,0) 14px 28px),
    linear-gradient(160deg, #2A4677, #0B2552);
}
.phero__need-tag {
  padding: 6px 12px; border: 2px dashed var(--c-brand-gold);
  font-size: var(--fs-label); font-weight: var(--fw-black); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--c-gold-1);
}
.phero__need-shot { max-width: 34ch; text-align: right; font-size: var(--fs-sm); color: #C6D2E2; }
@media (max-width: 760px) { .phero__need { align-items: flex-start; } .phero__need-shot { text-align: left; } }

/* Mirrored hero: the clip's subject would sit under the text panel. */
.phero--flip .phero__media img,
.phero--flip .phero__film video { transform: scaleX(-1); }

/* ------------------------------------------------------------ pay button
   The thing most patients come for. Green (the Pay Bill colour), large,
   first on the billing pages, in the hero. 64px tall; white on #2E7D5B is 5.1:1. */
.paybtn { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; margin-top: var(--sp-5, 24px);
  padding: 14px 26px 14px 20px; background: var(--c-green-1); color: #fff; text-decoration: none;
  border: 1px solid var(--c-green-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px -14px rgba(0,0,0,.6);
  transition: background .2s, transform .2s; }
.paybtn:hover { background: var(--c-green-2); transform: translateY(-1px); color: #fff; }
.paybtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px var(--c-brand-navy); }
.paybtn__ico { grid-row: span 2; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; }
.paybtn__t { font-size: 22px; font-weight: 800; letter-spacing: .01em; line-height: 1.15; }
.paybtn__s { font-size: 14px; font-weight: 500; opacity: .92; }
.paybtn--big { min-height: 72px; }
.paybtn--big .paybtn__t { font-size: clamp(22px, 2.4vw, 28px); }
@media (max-width: 620px) { .paybtn { display: grid; width: 100%; } }

/* News post header: same rule as the cards; keep heads in frame. */
.phero--article .phero__media > img { object-position: 50% 22%; }