/* ============================================================
   VICTORIES KIDS – Shared Responsive Fix
   Applies to: ALL pages
   Purpose:    Fix responsiveness without changing any UI design
   ============================================================ */

/* ── 1. Base box-sizing fix ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── 2. Prevent horizontal overflow on all pages ────────── */
html, body { overflow-x: hidden; width: 100%; }

/* ── 3. Mobile Location Popup (index.html topbar) ────────── */
.mob-loc-btn {
    display: none;
    align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.18); border: none;
    color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer; backdrop-filter: blur(6px);
    transition: background .2s;
    font-family: "Montserrat", sans-serif;
}
.mob-loc-btn:hover { background: rgba(255,255,255,.3); }
.mob-loc-btn svg   { width: 14px; height: 14px; flex-shrink: 0; }

/* Location popup overlay */
.loc-popup {
    display: none; position: fixed; inset: 0;
    z-index: 99998; align-items: flex-start;
    justify-content: center; padding-top: 70px;
    background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
}
.loc-popup.show { display: flex; animation: locIn .25s ease; }
@keyframes locIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
.loc-popup-card {
    background: #fff; border-radius: 18px; padding: 22px 20px;
    max-width: 340px; width: calc(100vw - 32px);
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    position: relative;
}
.loc-popup-card h4 {
    font-size: 15px; font-weight: 800; color: #1F2A44;
    margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.loc-popup-card p {
    font-size: 14px; color: #3A4A6A; line-height: 1.55; margin: 0;
}
.loc-popup-close {
    position: absolute; top: 12px; right: 14px;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: #F0F4FF; cursor: pointer; font-size: 16px; color: #3A4A6A;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.loc-popup-close:hover { background: #FFD6DE; color: #FF4F7B; }

/* ── 4. Bootstrap template page fixes (Kider/Gallary/about etc.) ── */
@media (max-width: 576px) {
    .navbar-brand img  { max-width: 160px !important; }
    .navbar-nav .nav-link { font-size: 14px; padding: .4rem .6rem; }
    .container-xxl, .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.5rem; }
}

/* ── 5. Custom pages (index.html / activities.html) ─────── */
@media (max-width: 900px) {
    /* Topbar */
    .topbar .chip.topbar-address { display: none !important; }
    .mob-loc-btn                 { display: flex !important; }
    /* Socials */
    .socials a { width: 30px; height: 30px; }
}

@media (max-width: 600px) {
    /* Topbar – hide socials icons text */
    .topbar { padding: 6px 0; font-size: 12px; }
    .topbar .container { flex-wrap: nowrap; gap: 8px; }

    /* Navbar */
    .nav .container { padding: 10px 14px; }
    .brand img { width: 140px !important; height: 48px !important; }

    /* Hero sections */
    .page-hero { padding: 36px 0 28px; }
    .page-hero h1 { font-size: clamp(24px, 7vw, 36px); }
    .page-hero p  { font-size: 14px; }

    /* Filter bar */
    .filter-bar-inner { gap: 4px; padding: 4px; }
    .filter-btn { padding: 8px 14px; font-size: 12px; }

    /* Masonry grid */
    .masonry-grid { columns: 1 !important; }
    .masonry      { columns: 1 !important; }

    /* Media cards */
    .media-card { border-radius: 14px; }

    /* Lightbox */
    .lb-shell  { max-width: 100% !important; }
    .lb-thumbs { display: none; }
    .lb-nav-btn { width: 36px; height: 36px; font-size: 16px; }
    .lb-nav-btn.lb-prev { left: 6px; }
    .lb-nav-btn.lb-next { right: 6px; }
    .lb-img-wrap img { max-height: 55vh; }
    .lb-topbar { padding: 0 0 10px; }
    .lb-name   { font-size: 13px; }
    .lb-close-btn { width: 34px; height: 34px; font-size: 16px; }

    /* Video modal */
    .vid-shell, .gal-vid-inner { border-radius: 12px; }
    .vid-bar, .gal-vid-bar { padding: 10px 12px; }

    /* Section headings */
    .section-title { font-size: clamp(20px, 6vw, 32px) !important; }
    .section-sub   { font-size: 14px !important; }

    /* Buttons */
    .btn { padding: 10px 18px; font-size: 13px; }

    /* Sticky tabs */
    .sticky-tabs  { display: none; }

    /* Back to top */
    .scroll-progress { right: 12px; bottom: 12%; width: 46px; height: 46px; }
    .scroll-progress span { font-size: 16px; }

    /* Footer grid */
    .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}

@media (min-width: 601px) and (max-width: 900px) {
    /* Tablet */
    .masonry-grid { columns: 2 !important; }
    .masonry      { columns: 2 !important; }
    .footer-grid  { grid-template-columns: 1fr 1fr !important; }
    .lb-thumbs    { display: none; }
    .sticky-tabs  { display: none; }
}

/* ── 6. index.html specific sections ────────────────────── */
@media (max-width: 768px) {
    /* Hero layout */
    .hero { padding: 40px 0 !important; }
    .hero-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .hero-imgs { display: none !important; }

    /* About grid */
    .about-grid {
        grid-template-columns: 1fr !important;
    }
    .about-img-wrap { display: none !important; }

    /* Principal section */
    .principal-grid {
        grid-template-columns: 1fr !important;
    }
    .principal-img-box { display: none !important; }

    /* Teachers grid */
    .teachers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Programs grid */
    .programs-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    /* Testimonial slide */
    .slide {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
    }
    .slide-avatar { display: none !important; }
}

@media (max-width: 480px) {
    /* Teachers grid on very small screens */
    .teachers-grid {
        grid-template-columns: 1fr !important;
    }
    /* Programs grid */
    .programs-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 7. Prevent content protection from breaking clickable images ── */
a img,
.tile, .tile img,
.media-card, .media-card img,
.gal-card, .gal-card img,
.owl-carousel img,
nav img, .brand img, .navbar-brand img,
.lightbox img, #lbImage, #galLbImg, #lightboxImg,
.teacher-card img, .feature-card img,
.testimonial-card img, .lb-thumb img,
button img, label img,
.promo-image, #promoImg {
    pointer-events: auto !important;
}