/* =========================================
   1. HERO SECTION
   ========================================= */
.hero-section {
    position: relative;
    height: 90vh; 
    min-height: 600px;
    background: url('../images/home/likhang-filipino-exhibition-halls.jpg') no-repeat center center/cover;
    display: flex; align-items: center; justify-content: center;
}

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.1));
}

.video-card {
    background: #000; color: #fff; 
    width: 90%; max-width: 1200px; aspect-ratio: 16/9;
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}

.play-btn {
    font-size: 5rem; color: #fff; cursor: pointer;
    transition: transform 0.3s ease, color 0.3s;
}

.play-btn:hover { transform: scale(1.1); color: var(--brand-red); }

.video-label {
    position: absolute; top: 25px; left: 25px;
    font-size: 0.9rem; letter-spacing: 1px;
    text-transform: uppercase; font-weight: 500;
}

/* Mobile Hero Adjustment */
@media (max-width: 768px) {
    .hero-section { height: 60vh; }
}

/* =========================================
   2. ABOUT SECTION
   ========================================= */
.about-section { background-color: #fcfcfc; padding: 6rem 0; }

.about-video-placeholder {
    background-color: #eee; width: 100%; aspect-ratio: 16/9;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #ddd; position: relative;
}

/* =========================================
   3. "WE ARE OPEN" FLOATING CARD
   ========================================= */
.hours-section-pop {
    background-color: var(--brand-cream); /* Use variable from root in style.css */
}

.hours-card-pop {
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(0);
    max-width: 950px; margin: 0 auto;
}

/* Ensure inner divs get red bg where needed */
.hours-card-pop > div { background-color: #c8102e; }

.hours-card-pop:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(200, 16, 46, 0.25);
}

.bg-icon-overlay {
    position: absolute; font-size: 10rem; opacity: 0.1;
    left: -20px; bottom: -30px; transform: rotate(-15deg);
}

/* Live Pulse Indicator */
.live-indicator {
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,0.2);
    padding: 5px 15px; border-radius: 20px;
    font-size: 0.75rem; letter-spacing: 1px; font-weight: 600;
}

.pulse-dot {
    width: 10px; height: 10px;
    background-color: #4cd137; border-radius: 50%;
    box-shadow: 0 0 0 rgba(76, 209, 55, 0.4);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 209, 55, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(76, 209, 55, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 209, 55, 0); }
}

.icon-circle {
    width: 50px; height: 50px;
    background-color: #fff0f0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}

.border-end-md { border-right: 1px solid #eee; }

/* Mobile Floating Card Adjustment */
@media (max-width: 767px) {
    .border-end-md { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 2rem; }
    .hours-card-pop { margin: 0 15px; }
}