/* --- Hero Section Styling --- */

#hero-section {
    /* Set the background image, cover, and color filter */
    background-image: 
        /* Mimics the ColorFilter.mode(Colors.black54, BlendMode.darken) */
        linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), 
        url('../assets/hero_bg.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Display properties for centering content */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: center;
    
    /* Height remains responsive via VH units (as per your existing media queries) */
    height: 400px; /* Base height for comparison */
}

.hero-content-wrapper {
    /* Ensures content is centered within the hero section */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 🔑 FLUID PADDING: 20px -> 1.25rem */
    padding: 0 1.25rem;
}

/* 🔑 FLUID TYPOGRAPHY: Replaces all fixed-pixel font sizes and media queries */
.hero-title {
    color: white;
    /* clamp(MIN: 24px, FLUID: 8vw, MAX: 44px) */
    /* This single line handles responsiveness for all screen sizes */
    font-size: clamp(1.5rem, 8vw, 2.75rem); 
    font-weight: 100; /* Flutter's FontWeight.w100 */
    /* 🔑 FLUID SPACING: Letter spacing should also be responsive */
    letter-spacing: clamp(1px, 0.4vw, 2.5px);
    text-align: center;
    line-height: 1.2;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.7); /* Flutter's Colors.white70 */
    /* clamp(MIN: 14px, FLUID: 2vw, MAX: 18px) */
    font-size: clamp(0.875rem, 2vw, 1.125rem); 
    /* 🔑 FLUID MARGIN: 16px -> 1rem */
    margin-top: 1rem; 
    /* 🔑 FLUID PADDING: 40px -> 2.5rem, but we make it fluid too */
    padding: 0 clamp(1.25rem, 5vw, 2.5rem); 
    text-align: center;
}

/* Button Styling (ElevatedButton) */
.cta-button-hero {
    display: inline-block;
    background-color: #F7A8B8; 
    color: white;
    text-decoration: none;
    /* Use REM for accessibility */
    font-size: 1rem; 
    font-weight: bold;
    
    /* 🔑 FLUID PADDING: Scales down on small screens */
    /* clamp(MIN: 12px 25px, FLUID: 2vw 4vw, MAX: 16px 40px) */
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5625rem, 6vw, 2.5rem);
    
    border-radius: 5px; 
    /* 🔑 FLUID MARGIN: 24px -> 1.5rem */
    margin-top: 1.5rem; 
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

.cta-button-hero:hover {
    background-color: #E696A6; /* Slightly darker shade on hover */
}


/* --- Responsive Media Queries (Only needed for Height Logic) --- */

/* Desktop (screenWidth > 900) */
@media (min-width: 901px) {
    /* The font-size rules were removed here because clamp() handles the fluid sizing */
    #hero-section {
        height: 60vh; /* 60% of viewport height */
    }
}

/* Tablet/Small Desktop (screenWidth > 600 and <= 900) */
@media (min-width: 601px) and (max-width: 900px) {
    /* The font-size rules were removed here because clamp() handles the fluid sizing */
    #hero-section {
        height: 50vh; /* 50% of viewport height */
    }
}

/* Mobile Portrait (screenWidth <= 600) */
@media (max-width: 600px) {
    /* Base Mobile */
    #hero-section {
        height: 45vh; /* 45% of viewport height */
    }
}

/* 🔑 MOBILE LANDSCAPE FIX: This block targets the rotated phone orientation */
/* Targets screens up to 900px wide AND specifically in landscape mode */
@media (max-width: 900px) and (orientation: landscape) {
    
    #hero-section {
        /* Override the height for rotated phones to save vertical space. */
        /* This ensures the content below is immediately visible without scrolling. */
        height: 350px; /* Use a fixed, compact height for best results */
    }
    
    .hero-content-wrapper {
        /* Reduce padding slightly in the short vertical space */
        padding: 0 1rem;
    }
}


/* 🔑 REMOVED: The special @media (max-width: 480px) block is now redundant 
    because all sizing is handled fluidly by clamp() above. */