/* ========================================
   BANNER COMPONENT STYLES
   Based on Figma design node 6:29
   ======================================== */

.banner {
    position: relative;
    width: 100vw;
    min-height: 1093px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #121f35 0%, #131f35 100%);
    margin-top: -200px; /* Position under header like hero section */
    padding-top: 200px; /* Maintain content positioning */
    z-index: 1;
}

/* Banner Background */
.banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Decorative Elements */
.banner-decorations {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.banner-decoration-grid {
    position: absolute;
    left: 0;
    top: 170px;
    width: 609px;
    height: 554.5px;
    z-index: 3;
    mix-blend-mode: screen;
    opacity: 0.8;
}

.banner-grid-lines {
    width: 100%;
    height: 100%;
}


/* Banner Content */
.banner-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1043px;
    height: 313px;
    flex-shrink: 0;
    margin: -200px auto 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* Banner Text */
.banner-text {
    position: relative;
    z-index: 4;
    color: #FFF;
    text-align: center;
    font-family: Sora;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 6rem); /* 40px → 96px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -2.88px;
    margin: 0 auto;
    max-width: 100%;
    padding: var(--spacing-8) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Title Container */
.banner-title-container {
    margin: 0 auto var(--spacing-8) auto;
    width: 100%;
    max-width: 1043px;
    line-height: 1.1;
    font-size: clamp(2.5rem, 1.5rem + 4vw, 6rem); /* 40px → 96px */
    letter-spacing: -0.03em;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner-title-line1 {
    margin: 0;
    display: block;
}

.banner-title-line2 {
    margin: 0;
    display: block;
}

.banner-title-accent {
    color: #40b45f;
}

/* Subtitle */
.banner-subtitle {
    margin: 0 auto;
    width: 100%;
    max-width: 867px;
    line-height: 1.4;
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.6875rem); /* 16px → 27px */
    text-transform: uppercase;
    font-family: var(--font-primary);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner-subtitle-line1 {
    margin: 0;
    color: #FFF;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Sora;
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.6875rem); /* 16px → 27px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-spacing: 2px;
}

.banner-subtitle-line2 {
    margin: 0;
    color: #FFF;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Sora;
    font-size: clamp(1rem, 0.875rem + 0.5vw, 1.6875rem); /* 16px → 27px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    word-spacing: 2px;
}

.banner-subtitle-accent {
    color: #41b15d;
}

/* Bottom Gradient Overlay */
.banner-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    height: 251px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(18, 31, 53, 0.00) 0%, rgba(18, 31, 53, 0.80) 41.99%, #121F35 91.3%);
    z-index: 2;
}


/* Mobile Responsive Design */
@media (max-width: 1024px) {
    .banner-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .banner-text {
        padding: var(--spacing-6) 0;
        width: 100%;
        max-width: 90%;
    }
    
    .banner-title-container {
        font-size: clamp(2rem, 1rem + 3vw, 4.5rem); /* 32px → 72px */
        line-height: 1.1;
        width: 100%;
    }
    
    .banner-subtitle {
        font-size: clamp(0.875rem, 0.8125rem + 0.5vw, 1.25rem); /* 14px → 20px */
        line-height: 1.4;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .banner {
        min-height: 700px; /* Increased from 500px to ensure full banner display */
        margin-top: -180px; /* Adjusted for mobile header positioning */
        padding-top: 180px;
    }
    
    .banner-text {
        padding: var(--spacing-4) 0;
        margin-top: 240px; /* Increased space between header and banner text on mobile */
    }
    
    .banner-title-container {
        font-size: clamp(1.75rem, 1rem + 3vw, 3rem); /* 28px → 48px */
        line-height: 1.1;
    }
    
    .banner-subtitle {
        font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem); /* 12px → 16px */
        line-height: 1.4;
    }
    
    .banner-decoration-grid {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 480px) {
    .banner {
        min-height: 600px; /* Increased from 400px to ensure full banner display */
    }
    
    .banner-text {
        padding: var(--spacing-3) 0;
        margin-top: 220px; /* Increased space between header and banner text on small mobile */
    }
    
    .banner-title-container {
        font-size: clamp(1.25rem, 0.875rem + 1.5vw, 2.25rem); /* 20px → 36px */
        line-height: 1.1;
    }
    
    .banner-subtitle {
        font-size: clamp(0.625rem, 0.6rem + 0.25vw, 0.875rem); /* 10px → 14px */
        line-height: 1.4;
    }
    
    .banner-decoration-grid {
        display: none;
    }
}