/* Generic .hero/.hero__* intro-grid layout lives in
   assets/css/parts/hero-intro.css (shared with the coming-soon
   template) — this file holds the reusable .section-hero frame itself,
   used on the front page and the about page. Page-specific overrides
   (background photo via --theme-section-hero-bg, load-in timing) live
   in each page's own CSS file. */

/* Hero's own image wrapper — independent from .section-cta__image so
   editing one never touches the other. */
.section-hero__image {
  position: relative;
  height: calc(100svh - (var(--theme-section-padding) * 2));
  /* margin-bottom: var(--theme-section-padding); */
}

/* Full-bleed sticky backdrop photo (About page only — front-page's
   .section-hero__video plays the same role there) — a real
   position: sticky element instead of .section-hero's own
   background-attachment: fixed (kept below only as a no-flash fallback
   until this loads), which has long-standing rendering bugs on mobile
   Safari (incorrect scaling/blur, especially with background-size:
   cover and dynamic viewport height). Sticky gives the same "pinned
   while the rest of the hero scrolls past" parallax read without that
   bug — exact same technique/values as .section-hero__video below.
   Lives outside .section-hero__inner (and outside the view-transition-
   named .section-hero__image) for the same reason the video does:
   sticky elements don't reliably animate in a cross-document view
   transition, so the morph target must stay a plain positioned
   element with no sticky content of its own. */
.section-hero__image-bg {
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  /* 100% not 100vw — .section-hero is already full-bleed (no
     horizontal padding on any ancestor) so this fills the viewport
     either way, but 100vw combined with position: sticky is a known
     iOS Safari quirk: vw gets computed against a different viewport
     than what's actually rendered, pushing the whole page a few px
     wider than the real viewport (horizontal scroll on mobile). */
  width: 100%;
  height: 100svh;
  margin-bottom: calc(-1 * 100svh);
  object-fit: cover;
}

.section-hero__image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-sm);
  text-align: center;
  padding: var(--theme-section-padding);
  color: #fff;
  top: var(--theme-header-height);
  transition: opacity 1s var(--theme-ease-signature);
}

.section-hero__image-overlay .hero__heading {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s var(--theme-ease-signature) 2.5s, transform 1s var(--theme-ease-signature) 1.5s;

  @starting-style {
    opacity: 0;
    transform: translateY(2rem);
  }
}

/* Self-contained frame (inset padding, hairline border, sticky
   bottom-edge line) shared only between the front-page hero and the
   about-page hero — every other former "brand frame" usage on the
   site now has its own page-scoped frame class instead.

   Backdrop fallback — same hero photo as the <img> inside, shown as a
   CSS background on the frame itself so there's no gap/flash before
   the <img> paints (or if it fails to load). --theme-section-hero-bg
   is set inline per page (each .section-hero usage has a different
   photo). Front-page overrides this to a solid color instead — see
   front-page.css — since its "photo" would otherwise be the video's
   own fallback fade-through backdrop, and a competing still photo
   there just looks like a mismatched double-exposure. */
.section-hero {
  position: relative;
  overflow: clip;
  background: fixed var(--theme-section-hero-bg, url("../../media/images/DSC00689.webp"));
  background-size: cover;
  background-position: center;
}

/* background-attachment: fixed is a well-known rendering quirk on
   mobile browsers (iOS Safari especially, some Android Chrome
   versions too) — the image can paint blurry/oddly scaled instead of
   the plain cover fit it gets everywhere else. Plain background-
   attachment: scroll on mobile — no parallax there anyway, since this
   background is only ever the still-fallback behind the actual
   content (an <img> on the About page, a video on the front page). */
@media (width <= 768px) {
  .section-hero {
    background-attachment: fixed;
  }
}

/* Full-bleed background video behind the entire hero — intro-cell
   text, sticky-cta, everything — not just the .section-hero__image
   sub-section. position: sticky (not fixed) pins it to the viewport
   while .section-hero scrolls past, giving the same parallax read as
   background-attachment: fixed would for an image, but — unlike a true
   fixed position — sticky is naturally clipped to .section-hero's own
   overflow: clip bounds instead of bleeding into the rest of the page.
   Sits behind .section-hero__inner's z-index: 3, showing through
   .section-hero's own background-image only until the video is ready
   to play (preload="none" + JS-driven start, see
   assets/js/hero-video.js). */
.section-hero__video {
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  /* 100% not 100vw — see .section-hero__image-bg's comment above for
     why (same sticky + vw iOS Safari overflow quirk). */
  width: 100%;
  height: 100svh;
  margin-bottom: calc(-1 * 100svh);
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.8s var(--theme-ease-signature);
}

/* Covers the loop's jump-cut (hero-video.js seeks back to
   data-start-time on 'ended') — video fades to hidden right before
   looping, so the seek happens while invisible instead of as a
   visible frame jump, then fades back in at the new position. */
.section-hero__video--looping {
  opacity: 0;
}

/* Hides the video until its initial seek to data-start-time lands —
   without this, the browser can paint a frame from the very start of
   the file for a moment before hero-video.js jumps it forward,
   flashing content before the intro is meant to be skipped. No
   transition: this is a hard cut straight to the already-correct
   frame, not a fade. */
.section-hero__video--pending {
  opacity: 0;
  transition: none;
}

/* Gradient overlay — was part of .section-hero's own background, moved
   to its own element so it paints on top of the video instead of
   underneath it (a background-image on .section-hero would sit behind
   the video, a real absolutely-positioned sibling can sit above). */
.section-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(360deg, #c1b8ae 10%, transparent 25%);
  pointer-events: none;
}

.section-hero__inner {
  position: relative;

  padding: var(--theme-section-padding) var(--theme-section-padding) 0 var(--theme-section-padding);
  /* border: var(--theme-line-width) solid var(--theme-line-color); */
  border-top-width: 0;
  overflow: clip;
  clip-path: fill-box;
  margin-bottom: calc( -1 * var(--theme-header-height) * 0.5);
  z-index: 3;
}

.section-hero__inner::after {
  content: "";
  display: block;
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(var(--theme-section-padding) - 1px);
  background-color: transparent;
  /* box-shadow: 0 -1px 0 0 black; */
  z-index: 12;
  /* opacity: 0; */
}

/* CTA bar shared only between the front-page hero and the about-page
   hero — was rendered by the shared sticky-cta.php template with the
   default "brand-frame__cta" root class; now fully inline markup
   scoped to this hero usage. Already inset by .section-hero__inner's
   own padding/margin, so this positioning cancels the (now-removed)
   shared component's own inset instead of double-applying it. Plain
   in-flow (not sticky) per PM feedback — it was pinned to the viewport
   bottom, covering a large chunk of the hero underneath it. Always the
   small/shrunk size — no scroll-driven animation, no animate-up on
   page load (same "already shrunk" pattern header.css uses for
   single-object/post/team_member/contact, just applied here instead
   of via a body-class override). */
.section-hero__cta {
  position: relative;
  width: 100%;
  z-index: 11;
  height: var(--theme-header-height);
  color: var(--theme-color-text);
  box-sizing: content-box;
}

/* Border on the sticky element itself instead of the scattered
   -inner/-cell/-cell--action borders the former shared sticky-cta
   component used elsewhere. */
.section-hero .section-hero__cta {
  z-index: 9;
  border-left: var(--theme-line-width) solid var(--theme-line-color);
  border-right: var(--theme-line-width) solid var(--theme-line-color);
  margin-top: -1px;
}

.section-hero__cta-inner {
  display: grid;
  border-bottom: var(--theme-line-width) solid var(--theme-line-color);
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);
  height: 100%;
  border-top-width: 0;
  box-sizing: content-box;
}

.section-hero__cta-cell {
  display: flex;
  align-items: center;
  padding: 0 var(--theme-section-padding);
  border-top: var(--theme-line-width) solid var(--theme-line-color);
  justify-content: center;
}

.section-hero__cta-cell--action {
  position: relative;
  overflow: hidden;
  background-color: var(--brand-color-dark);
  color: var(--brand-color-light);
  justify-content: center;
  padding: .2rem .3rem .2rem .2rem;
  border-left: var(--theme-line-width) solid var(--theme-line-color);
  border-top: var(--theme-line-width) solid var(--theme-line-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
}

.section-hero__cta-cell--action .button__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--theme-section-padding);
  transform: translateX(0);
  transition: transform 0.5s var(--theme-ease-signature);
}

.section-hero__cta-cell--action .button__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--theme-section-padding);
  background-color: var(--theme-color-accent);
  color: var(--theme-color-primary);
  transform: translateX(100%);
}

.section-hero__cta-cell--action:hover .button__label {
  transform: translateX(-100%);
}

.section-hero__cta-cell--text {
  background-color: white;
}

.section-hero__cta-text {
  margin: 0;
}

/* Same treatment as about.css's .section-team__cta and
   single-team-member.css's .single-team-member__cta on mobile — text
   cell gone, action cell takes the full row. Shared by both the
   front-page and about-page hero usages of this component. */
@media (width <= 768px) {
  .section-hero__cta-cell--text {
    display: none;
  }

  .section-hero__cta-cell--action {
    grid-column: span 6; /* was col-2 from brand-grid.css — beaten here via source order, same trick used across the rest of the site's <=768px overrides */
  }
}