/* Photo header, shared by inner pages (contact, legal).
   Namespaced as .hero-pic so it does not collide with the older
   .hero-photo / .hero-img / .hero-scrim rules in pages.css.

   Markup:
   <section class="hero hero-pic [hero-pic--tall]">
     <picture class="hero-pic-media"> <source ...> <img ...> </picture>
     <div class="shell"> ... </div>
   </section>

   The image is a real <img>, not a CSS background, so it loads with
   fetchpriority="high" and counts properly for LCP. */

.hero.hero-pic {
  /* No height or padding set here on purpose. pages.css already gives
     .hero-sub / .hero-legal the top padding that clears the fixed nav;
     adding a second padding and a min-height on top of it is what
     produced the empty band above the breadcrumb. The photo layers are
     absolutely positioned, so they follow whatever height the content
     and pages.css give the header. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.hero.hero-pic > .shell { width: 100%; position: relative; }

/* Distance control.
   The photo is NOT stretched to cover the header. It is sized by the
   header's height (--hero-pic-h) and pinned bottom-right, so the building
   stays the same apparent size however wide the screen is. Lower the
   value to push the building further back, raise it to bring it closer.
   The space it leaves on the left is filled by a blurred copy of the same
   photo, and the photo's left and top edges are feathered into it. */
.hero-pic {
  /* Space kept clear above the photo for the fixed nav + section nav.
     The photo's own sky covers ~20% above the flag, so the photo may tuck
     under the nav by that much without hiding the flag or sign. */
  --hero-pic-top: 120px;
  --hero-pic-h: calc(100% - var(--hero-pic-top));
}

.hero-pic .hero-pic-blur {
  position: absolute;
  inset: -40px;                      /* hides the blur's soft edges */
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  z-index: -3;
  object-fit: cover;
  object-position: 50% 20%;
  filter: blur(28px) saturate(.9) brightness(.8);
}

.hero-pic .hero-pic-media {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -2;
  height: var(--hero-pic-h);
  width: auto;
  max-width: none;
  aspect-ratio: 1280 / 920;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%),
    linear-gradient(180deg, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 22%),
    linear-gradient(180deg, transparent 0%, #000 14%);
          mask-composite: intersect;
}
.hero-pic .hero-pic-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: strong bottom fade where the text sits, light wash from the
   left. Keeps white type above 4.5:1 whatever is behind it. */
.hero-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 35%, rgba(0,0,0,.18) 70%, rgba(0,0,0,.05) 100%),
    linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 60%);
}

/* Text */
.hero-pic h1 { color: #fff; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.hero-pic .art-head,
.hero-pic .hero-in { max-width: 660px; }
.hero-pic .art-cat {
  color: #fff;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-pic .art-cat::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  background: #CC0000;
}
.hero-pic .art-meta,
.hero-pic .art-meta span,
.hero-pic .hero-lead { color: rgba(255,255,255,.86); }
.hero-pic .hero-bold { color: #fff; }

.hero-pic .crumb,
.hero-pic .crumb span { color: rgba(255,255,255,.75); }
.hero-pic .crumb a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.hero-pic .crumb a:hover,
.hero-pic .crumb a:focus-visible { text-decoration-color: #fff; }
.hero-pic .crumb [aria-current="page"] { color: #fff; }

/* Tall variant: pages with a lead paragraph and buttons (contact).
   Only the scrim differs: the text block is tall, so the left wash
   does more of the work. */
.hero-pic--tall::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.66) 40%, rgba(0,0,0,.2) 72%, rgba(0,0,0,.05) 100%),
    linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 45%);
}

/* Photo caption, bottom right */
.hero-pic .hero-pic-cap {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 1;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* Ghost button must read as white on the photo */
.hero-pic .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.7);
  background: transparent;
}
.hero-pic .btn-ghost:hover,
.hero-pic .btn-ghost:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

@media (max-width: 640px) {
  /* phones: full-bleed again, no feathering; show the tower */
  .hero-pic .hero-pic-media {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero-pic .hero-pic-media img { object-position: 72% 30%; }
  .hero-pic .hero-pic-blur { display: none; }
  /* text spans the full width on phones, so darken top to bottom */
  .hero-pic::after,
  .hero-pic--tall::after {
    background: linear-gradient(0deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.3) 100%);
  }
  .hero-pic .hero-pic-cap { display: none; }
}