/**
 * FlexBase - Hero Section
 * Full-screen banner with headline, subheadline and CTAs
 * Supports background: image, video, or solid color
 */

/* ========================================
   Hero Container
   ======================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    overflow: hidden;
}

/* Adjust for fixed header */
.hero--with-header {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
}

/* Shorter hero variant */
.hero--short {
    min-height: 70vh;
    min-height: 70dvh;
}

@media (min-width: 768px) {
    .hero--short {
        min-height: 60vh;
    }
}

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

.hero__background {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
}

/* Background Image */
.hero__background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Background Video */
.hero__background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Background Color (applied directly to .hero__background) */
.hero__background--color {
    background-color: var(--color-primary);
}

/* ========================================
   Hero Overlay
   ======================================== */

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 1);
    background-color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Overlay opacity variants (set via inline style or class) */
.hero__overlay--light {
    background-color: rgba(0, 0, 0, 0.3);
}

.hero__overlay--dark {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Gradient overlay */
.hero__overlay--gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* ========================================
   Hero Content
   ======================================== */

.hero__content {
    position: relative;
    z-index: calc(var(--z-base) + 2);
    text-align: center;
    padding: var(--spacing-8) var(--container-padding);
    max-width: var(--container-max);
    width: 100%;

    /* Fade-in animation */
    animation: hero-fade-in 0.8s ease-out;
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
        transform: translateY(var(--anim-offset-md));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Left-aligned content variant */
.hero__content--left {
    text-align: left;
    max-width: 800px;
    margin-right: auto;
}

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

.hero__headline {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
    letter-spacing: var(--tracking-tight);
}

@media (min-width: 640px) {
    .hero__headline {
        font-size: var(--text-5xl);
    }
}

@media (min-width: 768px) {
    .hero__headline {
        font-size: var(--text-6xl);
        margin-bottom: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .hero__headline {
        font-size: var(--text-7xl);
    }
}

.hero__subheadline {
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .hero__subheadline {
        font-size: var(--text-xl);
        max-width: 700px;
    }
}

@media (min-width: 1024px) {
    .hero__subheadline {
        font-size: var(--text-2xl);
        margin-bottom: var(--spacing-10);
    }
}

.hero__content--left .hero__subheadline {
    margin-left: 0;
    margin-right: 0;
}

/* ========================================
   Hero CTAs
   ======================================== */

.hero__cta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    align-items: center;
}

@media (min-width: 480px) {
    .hero__cta {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.hero__content--left .hero__cta {
    justify-content: flex-start;
}

/* Button styles for hero (white buttons on dark background) */
.hero .btn--primary {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.hero .btn--primary:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

.hero .btn--secondary {
    background-color: transparent;
    border-color: var(--color-white);
    color: var(--color-white);
}

.hero .btn--secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* ========================================
   Hero with Primary Color Background
   ======================================== */

.hero--primary {
    background-color: var(--color-primary);
}

.hero--primary .hero__overlay {
    display: none;
}

.hero--primary .btn--primary {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
}

.hero--primary .btn--primary:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-100);
}

.hero--primary .btn--secondary {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

.hero--primary .btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

/* ========================================
   Hero Scroll Indicator
   ======================================== */

.hero__scroll {
    position: absolute;
    bottom: var(--spacing-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-base) + 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color var(--transition-fast);
    animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.hero__scroll:hover {
    color: var(--color-white);
}

.hero__scroll-icon {
    width: 1.5rem;
    height: 1.5rem;
}

@keyframes hero-scroll-bounce {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(var(--anim-offset-sm));
    }
}

/* Hide scroll indicator on short screens */
@media (max-height: 600px) {
    .hero__scroll {
        display: none;
    }
}

/* ========================================
   Hero Dark Text Variant
   (For light backgrounds)
   ======================================== */

.hero--light .hero__headline {
    color: var(--text-primary);
}

.hero--light .hero__subheadline {
    color: var(--text-secondary);
}

.hero--light .hero__scroll {
    color: var(--text-tertiary);
}

.hero--light .hero__scroll:hover {
    color: var(--text-primary);
}

.hero--light .btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.hero--light .btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.hero--light .btn--secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hero--light .btn--secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}