/* css/bisaya-hero.css - REVAMPED */

.hero-section-bisaya {
    padding: 4rem 1.5rem 5rem 1.5rem;
    background-color: var(--sinulog-deep-blue); /* Fallback BG */
    color: var(--sinulog-white);
    min-height: 75vh; /* Ensure enough height for all dynamic elements */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden; /* Crucial for background images and floating icons */
}

/* Background Image Slideshow */
.hero-background-slideshow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
}
.hero-background-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; /* Cover the entire area */
    object-position: center;
    opacity: 0; /* Hidden by default */
    transition: opacity 1.5s ease-in-out; /* Fade transition */
    filter: brightness(0.7) saturate(1.1); /* Subtle visual enhancement */
}
.hero-background-image.active {
    opacity: 1; /* Active image is visible */
}

.hero-background-overlay { 
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(var(--sinulog-black-rgb), 0.5); /* Darken foreground for text readability */
    z-index: 1; /* Above slideshow, below content */
}

.hero-content-wrapper { /* Centering wrapper */
    width: 100%;
    position: relative; /* Above overlay */
    z-index: 2;
}

.hero-main-content {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    gap: 2.5rem; /* Increased gap for visual separation */
    max-width: 1100px;
    margin: 0 auto;
}

.hero-text-column {
    flex: 1.2; 
    max-width: 600px;
    text-align: left;
}
.hero-text-column h1 {
    font-family: var(--font-display); /* Using Montserrat ExtraBold/Black */
    font-size: clamp(2.8rem, 7vw, 4.8rem); /* Large and impactful */
    font-weight: 900;
    line-height: 1.15;
    color: var(--sinulog-white); /* Ensure white on dark/colored bg */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(var(--sinulog-black-rgb), 0.3); /* Subtle shadow for depth */
}
.hero-text-column h1 .highlight-mango { /* "PROUD BISDAK" */
    color: var(--sinulog-yellow); /* Bright yellow for the highlight */
    /* Optional: Add a subtle text effect if desired */
    /* text-shadow: 0 0 10px rgba(var(--sinulog-yellow-rgb), 0.5); */
}

.hero-intro-ceb {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    color: var(--sinulog-light-gray); /* Readable on dark hero */
    margin-bottom: 2.5rem;
    line-height: 1.7;
    font-weight: 400;
}

.btn-hero-primary-sinulog { /* Keep existing class name for button */
    background-color: var(--sinulog-yellow);
    color: var(--sinulog-black); /* Dark text on yellow */
    padding: 0.8em 2em; /* Good size for hero CTA */
    font-size: 1.05rem;
    border-radius: var(--button-border-radius); /* Pill shape */
    text-transform: uppercase; /* As per many CTA buttons */
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(var(--sinulog-black-rgb), 0.2);
}
.btn-hero-primary-sinulog:hover {
    background-color: #FFD700; /* Slightly different yellow on hover */
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 15px rgba(var(--sinulog-black-rgb), 0.3);
}
.btn-hero-primary-sinulog i {
    margin-left: 0.6em;
}
.hero-visuals-column { /* Container for Aljohn's image, map, and floating icons */
    flex: 0.8; 
    display: flex;
    flex-direction: column; /* Stack Aljohn's image and map */
    align-items: center;
    gap: 1.8rem; /* Space between Aljohn's image and map */
    max-width: 350px; 
    position: relative; /* Crucial for positioning floating icons within it */
}

.hero-aljohn-image-container {
    /* Styles for Aljohn's portrait, no direct width/height */
}
.aljohn-hero-portrait {
    max-width: 200px; 
    width: 100%; height: auto;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--sinulog-yellow); 
    box-shadow: 0 8px 25px rgba(var(--sinulog-black-rgb), 0.4);
    /* margin-bottom: 0.5rem; /* Removed, gap handles it */
}

.hero-map-container {
    background-color: rgba(var(--sinulog-black-rgb), 0.3); /* Dark translucent background for map */
    padding: 0.8rem;
    border-radius: var(--card-border-radius);
    border: 2px solid var(--sinulog-yellow); 
    box-shadow: 0 4px 15px rgba(var(--sinulog-black-rgb), 0.3); /* Slightly reduced shadow */
    width: 100%; max-width: 280px; 
}
.hero-liloan-map {
    display: block; width: 100%; height: auto; border-radius: 4px;
}
.hero-map-caption {
    font-size: 0.75rem; color: var(--sinulog-yellow); text-align: center;
    margin-top: 0.5rem; font-weight: 600;
}
.hero-map-caption i { margin-left: 0.3em; opacity: 0.8; }


/* --- Floating Cebuano Icons --- */
.hero-floating-icons-container {
    position: absolute; /* Position relative to .hero-visuals-column */
    top: 0; left: 0; right: 0; bottom: 0; /* Span the whole visual column */
    pointer-events: none; /* Do not block clicks */
    z-index: 0; /* Behind actual content (Aljohn's pic, map) */
}
.floating-icon {
    position: absolute;
    width: clamp(30px, 5vw, 60px); /* Responsive icon size */
    height: auto;
    opacity: 0; /* Hidden by default, JS/animation will control */
    transform: translate(-50%, -50%) rotate(0deg); /* Center transform origin */
    transition: opacity 0.5s ease-in-out; /* Fade transition */
    filter: drop-shadow(0 0 5px rgba(var(--sinulog-yellow-rgb), 0.3)); /* Subtle glow */
}

/* Individual Icon Positioning and Animation (JS will control their specific animations) */
/* These are just starting positions and general animation properties */
.icon-lechon { top: 15%; left: 25%; animation: floatLechon 8s infinite ease-in-out alternate; }
.icon-mango { top: 30%; right: 5%; animation: floatMango 7s infinite ease-in-out alternate; }
.icon-kanin { top: 60%; left: 20%; animation: floatKanin 9s infinite ease-in-out alternate; }
.icon-santo-nino { top: 65%; right: 15%; animation: floatSantoNino 10s infinite ease-in-out alternate; }


/* Animation Keyframes (Example Floating & Fading) */
@keyframes floatLechon {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) translateY(-15px) rotate(5deg); opacity: 0.9; }
}
@keyframes floatMango {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) translateY(-10px) rotate(-3deg); opacity: 0.8; }
}
@keyframes floatKanin {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) translateY(-12px) rotate(4deg); opacity: 0.7; }
}
@keyframes floatSantoNino {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 0.9; }
    50% { transform: translate(-50%, -50%) translateY(-20px) rotate(-2deg); opacity: 1; }
}


/* Responsive for Hero with Map and Icons */
@media (max-width: 992px) { /* Tablet - Stack main content columns */
    .hero-main-content {
        flex-direction: column; text-align: center; gap: 2.5rem;
    }
    .hero-text-column { order: 1; max-width: 100%; text-align: center; }
    .hero-visuals-column {
        order: 2; flex-direction: row; align-items: flex-end; gap: 1.5rem;
        max-width: 100%; justify-content: center;
    }
    .aljohn-hero-portrait { max-width: 150px; }
    .hero-map-container { max-width: 200px; }
    .hero-floating-icons-container { /* Adjust positioning of icons when visual column is row */
        position: static; /* Behave like normal elements */
        display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
        width: 100%; margin-top: 1rem; /* Space from Aljohn/Map */
        /* Individual icons will lose absolute positioning, will need new animation */
        /* OR you can keep absolute positioning and just adjust top/left for smaller screen */
        /* For simplicity, if abs positioning is tricky on mobile, remove animation. */
    }
    .floating-icon {
        position: static; /* Let them flow in a flex container */
        transform: none; /* Remove transforms */
        animation: none; /* Remove animations */
        opacity: 1; /* Always visible */
        width: clamp(30px, 8vw, 50px); /* Adjusted size for non-absolute positioning */
        height: auto;
    }
}

@media (max-width: 576px) { /* Mobile */
    .hero-section-bisaya { padding: 3rem 1.5rem; min-height: 0; }
    .hero-text-column h1 { font-size: clamp(2rem, 10vw, 3rem); }
    .hero-intro-ceb { font-size: clamp(0.9rem, 4vw, 1.05rem); margin-bottom: 2rem;}
    .btn-hero-primary-sinulog { font-size: 0.9rem; padding: 0.7em 1.5em; }

    .hero-visuals-column { /* Stack Aljohn, Map, and Icons again on small mobile */
        flex-direction: column; align-items: center; gap: 1.2rem;
    }
    .aljohn-hero-portrait { max-width: 130px; }
    .hero-map-container { max-width: 180px; padding: 0.6rem;}
    .hero-map-caption { font-size: 0.7rem; }
    .hero-floating-icons-container { /* If still active, adjust spacing */
        flex-direction: row;
        gap: 0.8rem;
    }
    .floating-icon { width: clamp(25px, 6vw, 40px); }
}
/* Responsive for Hero */
@media (max-width: 768px) {
    .hero-section-bisaya {
        padding: 4rem 1.5rem; /* Adjust padding */
    }
    .hero-content-bisaya {
        flex-direction: column; /* Stack text and image */
        text-align: center; /* Center text when stacked */
    }
    .hero-text-column {
        margin-bottom: 2rem; /* Space between text and image when stacked */
        max-width: 100%;
    }
    .aljohn-hero-portrait {
        max-width: 220px; /* Smaller image on mobile */
    }
    .hero-text-column h1 {
        font-size: clamp(2.2rem, 10vw, 3.5rem); /* Adjust h1 size for mobile */
    }
    .hero-intro-ceb {
        font-size: clamp(1rem, 4vw, 1.15rem);
    }
}