/*
 * Hero Component
 * Hero sections with background images and large text
 */

@layer components {
  /* ─── Base hero ─── */
  .hero {
    padding-block-start: var(--block-space-double);
    padding-block-end: var(--block-space-double);
    text-align: center;

    /* Flush top when video is the first element inside the hero */
    @media (max-width: 639px) {
      &:has(> .hero__inner > .hero__media--top:first-child) {
        padding-block-start: 0;
      }
    }
  }

  .hero__inner {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--main-padding);
  }

  /* Hero typography */
  .hero__title {
    /* font-family: var(--font-serif); */
    font-size: clamp(1.625rem, 0.5vw + 1.375rem, 2rem);
    font-weight: 600;
    margin-block-end: var(--block-space);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);

    @media (min-width: 640px) {
      font-size: clamp(2rem, 1vw + 1.5rem, 3rem);
    }
  }

  .hero__subtitle {
    font-size: var(--text-medium);
    margin-block-end: var(--block-space-double);
    line-height: var(--leading-relaxed);
  }

  .hero__description {
    font-size: var(--text-x-large);
    color: var(--color-gray-dark);
    line-height: var(--leading-relaxed);
  }

  /* Hero with image/video */
  .hero--media {
    padding-block: calc(var(--block-space) * 4);
  }

  .hero__media {
    margin-block-start: var(--block-space-double);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);

    /* Full-bleed on mobile: break out of hero__inner's inline padding */
    @media (max-width: 639px) {
      margin-inline: calc(var(--main-padding) * -1);
      border-radius: 0;

      & .video-player {
        border-radius: 0;
      }
    }
  }

  .hero__media--top {
    margin-block: 0;
    max-width: var(--content-width-prose);
    margin-inline: auto;

    @media (max-width: 639px) {
      max-width: none;
      margin-inline: calc(var(--main-padding) * -1);
    }
  }

  /* Two-tone heading pattern (hero) */
  .hero__title--two-tone {
    display: block;
  }

  .hero__title--two-tone .title-primary {
    display: block;
    color: var(--color-gray-darker);
  }

  .hero__title--two-tone .title-secondary {
    display: block;
    color: var(--color-gray);
    font-weight: 400;
  }

  /* ─── Background image heroes ─── */
  :is(.hero--bg-1, .hero--bg-2, .hero--bg-3, .hero--bg-4, .hero--bg-5,
      .hero--bg-6, .hero--bg-7) {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero--bg-1 { background-image: url("/assets/bg-1-d16eaf6f.webp"); }
  .hero--bg-2 { background-image: url("/assets/bg-2-4244f9f6.webp"); }
  .hero--bg-3 { background-image: url("/assets/bg-3-4505a34b.webp"); }
  .hero--bg-4 { background-image: url("/assets/bg-4-9733917a.webp"); }
  .hero--bg-5 { background-image: url("/assets/bg-5-8a2e66c0.webp"); }
  .hero--bg-6 { background-image: url("/assets/bg-6-0e0d2e5e.webp"); }
  .hero--bg-7 { background-image: url("/assets/bg-7-186272e5.webp"); }

  /* Dark mode: overlay + light text for all bg heroes */
  html[data-theme="dark"] :is(.hero--bg-1, .hero--bg-2, .hero--bg-3, .hero--bg-4, .hero--bg-5,
                              .hero--bg-6, .hero--bg-7) {
    color: oklch(var(--lch-white));

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: oklch(var(--lch-black) / 0.75);
      backdrop-filter: brightness(0.35) saturate(0.7);
      pointer-events: none;
      z-index: 1;
    }

    & > * { position: relative; z-index: 2; }

    & .hero__title       { color: inherit; }
    & .hero__description { color: oklch(var(--lch-white) / 0.7); }
    & .hero__subtitle    { color: oklch(var(--lch-white) / 0.7); }
    & .social-proof      { color: oklch(var(--lch-white) / 0.7); }

    & .title-primary,
    & .title-secondary   { color: inherit; }
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) :is(.hero--bg-1, .hero--bg-2, .hero--bg-3, .hero--bg-4, .hero--bg-5,
                               .hero--bg-6, .hero--bg-7) {
      color: oklch(var(--lch-white));

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: oklch(var(--lch-black) / 0.75);
        backdrop-filter: brightness(0.35) saturate(0.7);
        pointer-events: none;
        z-index: 1;
      }

      & > * { position: relative; z-index: 2; }

      & .hero__title       { color: inherit; }
      & .hero__description { color: var(--color-gray-medium); }
      & .hero__subtitle    { color: var(--color-gray-medium); }
      & .social-proof      { color: var(--color-gray-medium); }

      & .title-primary,
      & .title-secondary   { color: inherit; }
    }
  }
}