/* Hero styles for Three.js background and overlay - optimized for horizontal scroll */
#hero { 
    position: relative; 
    overflow: hidden; 
    min-height: 32rem; /* Match wrapper height from main.css */
    height: 32rem;
    display: flex; 
    align-items: center; 
    flex-shrink: 0; /* Prevent flex compression in horizontal layout */
}
#hero-canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: block; 
    z-index: 0;
    pointer-events: none; /* Allow clicks to pass through to content */
}
.hero-overlay { 
    position: relative; 
    z-index: 2; 
    padding: 2rem; 
    max-width: 760px; 
    margin: 0 auto; 
    color: #fff; 
    text-align: center; 
}
.hero-title { 
    font-size: clamp(2rem, 8vw, 4rem); 
    line-height: 1.02; 
    font-weight: 700; 
    color: #fff; 
    text-shadow: 0 12px 30px rgba(0,0,0,0.45); 
    margin: 0;
}
.hero-sub { 
    font-size: clamp(1rem, 3.4vw, 1.25rem); 
    margin-top: 0.6rem; 
    color: rgba(255,255,255,0.92); 
}
.hero-cta { 
    margin-top: 1.6rem; 
    display: flex; 
    gap: 0.8rem; 
    justify-content: center; 
    flex-wrap: wrap;
}
.hero-cta .btn { 
    padding: 0.9rem 1.6rem; 
    border-radius: 8px; 
    text-decoration: none; 
    font-weight: 600; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: inline-block;
}
.hero-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.hero-cta .btn-hero { 
    background: #8c0027; 
    color: #fff; 
}
.hero-cta .btn-outline { 
    background: transparent; 
    border: 2px solid rgba(255,255,255,0.9); 
    color: #fff; 
}
.hero-cta .btn-outline:hover {
    background: rgba(255,255,255,0.15);
}
/* Fallback image if WebGL unsupported */
.hero-fallback { 
    position: absolute; 
    inset: 0; 
    background-size: cover; 
    background-position: center; 
    filter: blur(0.4px) brightness(0.85); 
    z-index: 0;
    transition: opacity 0.8s ease;
}
@media (max-width: 736px) {
    #hero { min-height: 100vh; height: auto; } /* Full viewport on mobile */
    .hero-overlay { padding: 1.25rem; }
    .hero-title { font-size: 2rem; }
    .hero-cta { flex-direction: column; }
}