/* ============================================
   Hero Components
   ============================================ */

   .hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 128px 24px 64px;
    overflow: hidden;
  }
  
  .hero::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.4),
      rgb(0 0 0 / 0.7)
    );
  }
  
  .hero:has(.hero__overlay)::before {
    content: none;
  }
  
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  
  .hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.6),
      rgb(0 0 0 / 0.4),
      rgb(0 0 0 / 0.7)
    );
  }
  
  .hero__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--typography-display-content-max);
    margin: 0 auto;
    text-align: center;
  }
  
  .hero__badge {
    display: inline-block;
    margin-bottom: 32px;
    padding: 12px 24px;
    color: var(--color-primary);
    background: rgb(0 156 67 / 0.2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgb(0 156 67 / 0.3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  
  .hero__title {
    margin-bottom: var(--space-lg);
    color: #fff;
    font-size: var(--typography-display-title-size);
    font-weight: var(--typography-display-title-weight);
    line-height: var(--typography-display-title-lh);
    letter-spacing: var(--typography-display-title-tracking);
    text-shadow: 0 4px 20px rgb(0 0 0 / 0.5);
    white-space: pre-line;
  }
  
  .hero__subtitle {
    max-width: var(--typography-display-lede-max);
    margin: 0 auto 32px;
    color: rgb(255 255 255 / 0.9);
    font-size: var(--typography-display-lede-size);
    font-weight: var(--typography-display-lede-weight);
    line-height: var(--typography-display-lede-lh);
    text-shadow: 0 2px 15px rgb(0 0 0 / 0.7);
    white-space: pre-line;
  }
  
  .hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
  }
  
  .hero__scroll-indicator {
    position: absolute;
    bottom: 48px;
    left: 50%;
    z-index: 3;
    color: rgb(255 255 255 / 0.6);
    transform: translateX(-50%);
    animation: hero-bounce 2s infinite;
  }
  
  @keyframes hero-bounce {
    0%,
    100% {
      transform: translateX(-50%) translateY(0);
    }
  
    50% {
      transform: translateX(-50%) translateY(10px);
    }
  }
  
  /* Smaller hero for non-homepage */
  .hero--page {
    min-height: 70vh;
    min-height: 70svh;
    padding: 160px 24px 80px;
  }
  
  .hero--gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  }
  
  .hero--gradient .hero__overlay {
    background: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);
  }
  
  /* Light hero variant */
  .hero--light {
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-bg-secondary), #fff);
  }
  
  .hero--light::before {
    content: none;
  }
  
  .hero--light .hero__overlay {
    display: none;
  }
  
  .hero--light .hero__title {
    color: var(--color-text);
    text-shadow: none;
  }
  
  .hero--light .hero__subtitle {
    color: var(--color-text-secondary);
    text-shadow: none;
  }
  
  .hero--light .hero__badge {
    background: rgb(0 156 67 / 0.1);
    border-color: rgb(0 156 67 / 0.2);
  }
  
  /* Grain overlay */
  .hero__grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  }
  
  @media (min-width: 640px) {
    .hero__actions {
      flex-direction: row;
    }
  }
  
  @media (max-width: 767px) {
    .hero {
      min-height: 100svh;
      padding: 112px 16px 56px;
    }
  
    .hero--page {
      min-height: 70svh;
      padding: 136px 16px 64px;
    }
  
    .hero__badge {
      margin-bottom: 24px;
      padding: 10px 16px;
    }
  
    .hero__scroll-indicator {
      bottom: 28px;
    }
  }
  
  /* ============================================
     Presentation mode adjustments
     ============================================ */
  
  @media (min-width: 992px) {
    html.presentation-mode .hero {
      min-height: 100vh;
      min-height: 100svh;
      height: 100vh;
      height: 100svh;
      padding-top: var(--nav-height, 88px);
      padding-bottom: clamp(2rem, 5vh, 4rem);
      overflow: clip;
    }
  
    html.presentation-mode .hero__content {
      max-height: calc(100svh - var(--nav-height, 88px) - 4rem);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    html.presentation-mode .hero__title {
      font-size: clamp(3rem, 7vw, 6rem);
    }
  
    html.presentation-mode .hero__subtitle {
      font-size: clamp(1.125rem, 2vw, 1.5rem);
    }
  }
  
  @media (min-width: 992px) and (max-height: 760px) {
    html.presentation-mode .hero {
      padding-top: var(--nav-height, 88px);
      padding-bottom: 2rem;
    }
  
    html.presentation-mode .hero__badge {
      margin-bottom: 1rem;
    }
  
    html.presentation-mode .hero__title {
      margin-bottom: 1rem;
      font-size: clamp(2.5rem, 6vw, 4.5rem);
    }
  
    html.presentation-mode .hero__subtitle {
      margin-bottom: 1.25rem;
    }
  
    html.presentation-mode .hero__scroll-indicator {
      display: none;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .hero__scroll-indicator {
      animation: none;
    }
  }
  
  @media (prefers-reduced-transparency: reduce) {
    .hero__badge {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  
    .hero__grain {
      display: none;
    }
  }