/* Homepage hero — brand video background with a magenta tint wash
   and dark overlay for content contrast. Default styles target
   mobile (Figma frame 305:4790); tablet/desktop scale up to match
   Figma frame 228:1531.

   Horizontal padding + max-width cap live in layout.css via the
   `.tlm-section` (root) and `.tlm-container` (__inner) classes
   added to the HTML. Buttons live in buttons.css. This file owns
   only hero-unique layout. */

.tlm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Mobile: fill the viewport so the hero is exactly one screen,
     no scroll within the hero itself. 100svh = "small viewport
     height" — STATIC; sized for the URL-bar-visible state and
     doesn't change as Safari collapses the bar (which would
     resize the hero and pump the video proportions, reading as a
     zoom). 100vh is the fallback for browsers without svh
     support. Tablet/desktop revert to fixed pixel heights. */
  min-height: 100vh;
  min-height: 100svh;
  /* Mobile: bottom padding lifts the support block off the very
     bottom of the viewport-height hero. Composed from scale
     tokens (80 + 8 = 88px). */
  padding-top: var(--space-4xl);
  padding-bottom: calc(var(--space-4xl) + var(--space-xs));
  overflow: hidden;
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Background layer wrapper: holds video + tint + overlay stacked
   in order. Each layer fills the wrapper via absolute inset:0. */
.tlm-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tlm-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the video so the visible window sits below the very top
     of the source frame. Some frames have a few pixels of black
     letterbox at the top — `40%` shifts the crop down enough to
     hide it while keeping the subject area in shot. */
  object-position: center 40%;
}

/* Magenta/grain tint wash — sits over the video, blends with screen
   so the lighter areas of the video bleed through tinted. */
.tlm-hero__tint {
  position: absolute;
  inset: 0;
  background: url("../images/video/tint.webp") center/cover no-repeat;
  mix-blend-mode: screen;
  opacity: 1;
}

/* Dark scrim for text contrast — final layer above tint + video. */
.tlm-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Reduced-motion preference: pause the video so the poster sits
   as a still frame. Browsers don't ship a CSS "pause" for video,
   so we hide the video element and the poster (which the browser
   keeps painting until the video starts) effectively becomes the
   still background. */
@media (prefers-reduced-motion: reduce) {
  .tlm-hero__video {
    display: none;
  }

  .tlm-hero__bg {
    background: url("../images/video/brand-video-720-poster.jpg") center/cover no-repeat;
  }
}

.tlm-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 0 auto;
  gap: var(--space-3xl);
}

.tlm-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-h1-mobile);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tlm-hero__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
  max-width: 523px;
}

/* CTA hidden — kept in markup in case it returns. */
.tlm-hero__cta {
  display: none;
}

.tlm-hero__lead {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark-muted);
}

/* Tablet */
@media (min-width: 768px) {
  .tlm-hero {
    min-height: 760px;
    /* Tablet+ reverts to fixed-pixel min-height + symmetric padding.
       Mobile-only viewport-height + heavier bottom padding don't
       carry up. */
    padding-bottom: var(--space-4xl);
  }

  .tlm-hero__title {
    font-size: var(--text-h2);
    line-height: var(--leading-tight);
  }

  .tlm-hero__lead {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
  }

  .tlm-hero__support {
    align-self: flex-end;
  }
}

/* Desktop — match Figma 800px tall. Hero inner switches to a 3-column
   grid that mirrors the referral-journey intro's column geometry
   (689px lead + --space-3xl gap + flex body). The title spans all
   three columns at the top; the support copy + CTA sit in column 3
   at the bottom, so the support block's left edge aligns with the
   right body column below. */
@media (min-width: 1024px) {
  .tlm-hero {
    min-height: 800px;
  }

  .tlm-hero__inner {
    display: grid;
    grid-template-columns: 689px var(--space-3xl) 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0;
  }

  .tlm-hero__title {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: var(--text-display);
    line-height: var(--leading-snug);
  }

  .tlm-hero__support {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    /* No max-width — let the support box fill column 3 so its right
       edge sits at the inner right edge, aligned with the navbar
       "Contact us" button above. Content (paragraph + button) inside
       stays left-aligned, so the LEFT edge aligns with the referral-
       journey right body column below. */
    max-width: none;
  }

  /* Lead paragraph sits at its natural row-3 position — no offset. */
}