/* =========================================
   Hero Block
   ========================================= */

   .hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Height variations */
.hero--small {
    min-height: 400px;
}

.hero--medium {
    min-height: 500px;
}

.hero--large {
    min-height: 600px;
}

.hero--xlarge {
    min-height: 700px;
}

.hero--full {
    min-height: 100vh;
}

/* =========================================
   Background
   ========================================= */

.hero__background {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__image,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   YouTube background

   iframes don't support object-fit: cover so we fake it:
   • wrapper clips via overflow: hidden + inset: 0
   • iframe is sized in vw so it's always wider than the viewport,
     then centered with translate. On portrait mobile the width
     alone won't cover the height, so we also set a min-height
     using vw math (width × 9/16) and let scale(1.05) eat any
     remaining gap.
   ========================================= */
.hero__youtube-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__youtube-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero__youtube {
    position: absolute;
    /* Center the oversized iframe */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Always at least as wide as the viewport */
    width: 100vw;
    /* 16:9 height from that width */
    height: 56.25vw;
    /* On tall viewports (portrait mobile) 56.25vw may still be
       shorter than the hero — min-height covers that */
    min-height: 100%;
    border: none;
    z-index: 1;
    transition: opacity 0.4s ease;
}

/* Hidden until onload + delay fires */
.hero__youtube--hidden {
    opacity: 0;
}

/* Overlay */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.00) 100%);
    z-index: 2;
}

/* =========================================
   Container & Content
   ========================================= */

.hero__container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px;
}

.hero__content {
    max-width: 961px;
}

/* Text alignment */
.hero--align-left .hero__content {
    margin-right: auto;
    text-align: left;
}

.hero--align-center .hero__content {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero--align-right .hero__content {
    margin-left: auto;
    text-align: right;
}

/* =========================================
   Typography
   ========================================= */

.hero__title {
    font-size: 66px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 22px 0;
    color: #009846;
}

.hero__subtitle {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 0 32px 0;
    color: #333333;
}

/* =========================================
   CTA
   ========================================= */

.hero__cta {
    margin-top: 22px;
}

.hero__cta .cta-button {
    padding: 14px 28px;
    font-size: 16px;
}

.cta-button--large {
    padding: 16px 32px;
    font-size: 18px;
}

/* =========================================
   Responsive — Tablet (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
    .hero--small {
        min-height: 350px;
    }
    
    .hero--medium {
        min-height: 450px;
    }
    
    .hero--large {
        min-height: 550px;
    }
    
    .hero--xlarge {
        min-height: 650px;
    }
    
    .hero__title {
        font-size: 56px;
    }
    
    .hero__subtitle {
        font-size: 18px;
    }
}

/* =========================================
   Responsive — Mobile (≤ 768px)
   ========================================= */

@media (max-width: 768px) {
    .hero--small {
        min-height: 300px;
    }
    
    .hero--medium {
        min-height: 400px;
    }
    
    .hero--large {
        min-height: 500px;
    }
    
    .hero--xlarge {
        min-height: 600px;
    }
    
    .hero--full {
        min-height: 100vh;
    }

    /* On portrait mobile 56.25vw is shorter than the hero.
       Switch to vw-based width that guarantees the iframe
       is tall enough: hero height / (9/16) = hero height × 16/9.
       Using 177.78vh would tie to viewport not the hero,
       so we keep min-height: 100% and bump width so the
       resulting 56.25vw height is always ≥ the hero. */
    .hero__youtube {
        width: 177.78vh; /* 100vh × 16/9 — tall enough for full-screen hero */
        height: 56.25vw;
        min-height: 100%;
    }
    
    .hero__container {
        padding: 60px 20px;
    }
    
    .hero__content {
        max-width: 100%;
    }
    
    .hero__title {
        font-size: 40px;
    }
    
    .hero__subtitle {
        font-size: 16px;
    }
    
    .hero__cta .cta-button,
    .cta-button--large {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* =========================================
   Responsive — Small Mobile (≤ 480px)
   ========================================= */

@media (max-width: 480px) {
    .hero__title {
        font-size: 32px;
    }
}