/*
 * speaker-hero.css — Legal Marketing Speaker page hero.
 *
 * Dark photo hero (Figma 513:7956). Full-bleed speaking photo with a
 * navy base + 70% black scrim, white Halant H1, tagline + white CTA at
 * the foot. Sits inside .tlm-page-header so the default white navbar
 * overlays it (no --on-light variant — this is a dark hero like the
 * homepage).
 *
 * Title pinned top, tagline + CTA pinned bottom (space-between), so the
 * hero fills a fixed-ish height the same way the Figma frame does.
 */

.tlm-speaker-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--color-navy);
  overflow: hidden;
  /* Navbar clearance top; generous bottom so the CTA clears the fold. */
  padding-block: 150px var(--space-4xl);
  color: var(--color-white);
}

/* --- Photo background + scrim --- */

.tlm-speaker-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.tlm-speaker-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mobile: Paul stands on the RIGHT of the photo, so a centred crop on
     a narrow viewport cuts him out. Shift the crop window right to keep
     him in shot; desktop reverts to centre at 768. */
  object-position: 78% center;
}

/* 80% black tint over the photo (Paul's spec). */
.tlm-speaker-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

/* --- Content --- */

.tlm-speaker-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.tlm-speaker-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1-mobile);          /* 44 mobile */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--color-white);
}

.tlm-speaker-hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.tlm-speaker-hero__tagline {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-sans);
  font-size: var(--text-lg);                 /* 18 mobile */
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-muted);
}

.tlm-speaker-hero__cta {
  align-self: stretch;                       /* full-width mobile per locked CTA standard */
}

/* --- Tablet --- */

@media (min-width: 768px) {
  .tlm-speaker-hero {
    padding-block: 180px var(--space-5xl);
  }

  /* Wider viewport shows enough of the photo; revert to centre. */
  .tlm-speaker-hero__bg img {
    object-position: center;
  }

  .tlm-speaker-hero__inner {
    min-height: 420px;
    justify-content: space-between;
  }

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

  .tlm-speaker-hero__tagline {
    font-size: var(--text-xl);               /* 20 */
    letter-spacing: var(--tracking-tight);
  }

  .tlm-speaker-hero__cta {
    align-self: flex-start;                  /* natural width tablet+ */
  }
}

/* --- Desktop --- */

@media (min-width: 1024px) {
  .tlm-speaker-hero {
    padding-block: 200px var(--space-5xl);
  }

  .tlm-speaker-hero__inner {
    min-height: 413px;                       /* matches Figma 1440 content frame */
  }

  /* nowrap so each line stays single — the <br> is the only break. */
  .tlm-speaker-hero__title {
    font-size: var(--text-display);          /* 72 */
    line-height: var(--leading-snug);
    white-space: nowrap;
  }
}