/* =============================================================
   Destiny Music Academy — Responsive CSS
   Covers all custom PHP pages for all screen sizes
   Breakpoints: 1200px (xl) | 921px (tablet) | 768px (md) | 544px (mobile) | 380px (xs)
   ============================================================= */

/* ── Base: prevent horizontal scroll on all pages ─────────── */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, video, iframe {
    max-width: 100%;
    height: auto;
}
table {
    max-width: 100%;
}

/* ── Generic grid helpers used across pages ────────────────── */
[style*="display:grid"],
[style*="display: grid"] {
    min-width: 0;
}

/* ── Events page ───────────────────────────────────────────── */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.event-card {
    width: 100%;
    box-sizing: border-box;
}
.event-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ── Seats / Booking pages ─────────────────────────────────── */
/* Step bar */
#bk > div[style*="display:grid"][style*="1fr 1fr 1fr"],
.step-bar {
    overflow-x: auto;
}

/* Cart + pass prices below seat map */
#bk > div[style*="grid-template-columns:1fr 1fr"] {
    gap: 12px;
}

/* Seat map viewport — allow scroll on mobile */
#smViewport {
    border-radius: 6px;
}

/* ── Register / Book-ticket forms ──────────────────────────── */
.bk-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bk-card {
    box-sizing: border-box;
    width: 100%;
}

/* ── Gallery page ──────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.gallery-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

/* ── Faculty page ──────────────────────────────────────────── */
.faculty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* ── Instruments / Classes pages ───────────────────────────── */
.instruments-grid,
.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ── Music-day.php (standalone booking) ────────────────────── */
.main-wrap {
    grid-template-columns: 1fr 300px;
}

/* =============================================================
   TABLET — max-width: 921px
   ============================================================= */
@media (max-width: 921px) {

    /* Seat map: full width, viewport shorter */
    #smViewport {
        height: 480px !important;
    }

    /* Cart + pass prices stack vertically */
    #bk > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Register step form */
    .bk-form-row {
        grid-template-columns: 1fr;
    }

    /* music-day sidebar below */
    .main-wrap {
        grid-template-columns: 1fr !important;
    }

    /* Events grid 2 cols */
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Faculty 2 cols */
    .faculty-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pay step: inline payment method grid to 1 col */
    div[style*="grid-template-columns:1fr 1fr"]:has(input[type="radio"]) {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================
   MOBILE — max-width: 544px
   ============================================================= */
@media (max-width: 544px) {

    /* Seat map shorter on mobile — user zooms/pans */
    #smViewport {
        height: 360px !important;
    }

    /* Zoom hint shorter */
    #smControls .hint {
        display: none;
    }
    #smControls {
        justify-content: flex-end !important;
    }

    /* Stage text smaller */
    #smStage div {
        font-size: 14px !important;
        letter-spacing: 3px !important;
    }

    /* Events: 1 col */
    .events-grid {
        grid-template-columns: 1fr;
    }

    /* Faculty: 1 col */
    .faculty-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery: 2 col */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery-grid img {
        height: 140px;
    }

    /* Instruments/classes: 1 col */
    .instruments-grid,
    .classes-grid {
        grid-template-columns: 1fr;
    }

    /* Booking step bar text smaller */
    #bk div[style*="padding:12px"][style*="border-radius"] {
        font-size: 11px !important;
    }

    /* Cart total font smaller */
    #bk .card3-hd {
        font-size: 13px;
    }

    /* Booking form inputs full width */
    #bk input[type="text"],
    #bk input[type="email"],
    #bk input[type="tel"],
    #bk input[type="number"],
    #bk select,
    #bk textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Payment method grid → 1 col */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Seat legend wrap */
    #smLegend {
        gap: 8px !important;
    }
    .sm-leg {
        font-size: 10px !important;
    }

    /* music-day sidebar */
    .main-wrap {
        grid-template-columns: 1fr !important;
    }
    .sidebar {
        position: static !important;
        height: auto !important;
    }
    .venue-panel {
        display: none !important;
    }

    /* Ticket booking form */
    .bk-form-row {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   EXTRA SMALL — max-width: 380px
   ============================================================= */
@media (max-width: 380px) {

    #smViewport {
        height: 300px !important;
    }

    /* Gallery 1 col on very small screens */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Booking confirmed ticket card */
    div[style*="max-width:520px"] {
        padding: 12px !important;
    }
}

/* =============================================================
   Inline style overrides for grid layouts used in seats.php
   These target common inline grid patterns in the PHP files
   ============================================================= */
@media (max-width: 921px) {
    /* Seats.php: step progress bar */
    [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    /* Seats.php: seats + cart layout (handled above) */

    /* Register step 2-col */
    [style*="grid-template-columns:1fr 1fr"]:not(#bk div[style*="grid-template-columns:1fr 1fr"]) {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 544px) {
    /* Force all inline 2-col grids to 1 col on mobile */
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Keep 3-col step bar as 3 col (labels hidden by overflow) */
    [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        font-size: 10px;
    }

    /* Overflow-x scroll for wide tables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Slick carousel arrows not overlapping */
    .slick-prev { left: 5px !important; }
    .slick-next { right: 5px !important; }
}

/* =============================================================
   Music-day.php specific (dark theme standalone page)
   ============================================================= */
@media (max-width: 768px) {
    .main-wrap {
        display: block !important;
    }
    .venue-panel {
        overflow-x: auto;
        padding: 10px;
    }
    #smCanvas {
        padding: 8px;
    }
    .sidebar {
        position: static !important;
        height: auto !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,.1);
    }
}

/* =============================================================
   About / Terms / Testimonials — general content pages
   ============================================================= */
@media (max-width: 544px) {
    .entry-content p,
    .entry-content li {
        font-size: 15px;
        line-height: 1.7;
    }

    .entry-content img {
        width: 100% !important;
        height: auto !important;
    }
}

/* =============================================================
   CMS admin panel responsiveness (destiny_cms)
   ============================================================= */
@media (max-width: 921px) {
    /* CMS sidebar collapse handled by JS — just ensure content doesn't overflow */
    .cms-content {
        overflow-x: hidden;
    }
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 544px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .card-body {
        padding: 12px !important;
    }
    /* CMS table: horizontal scroll */
    .table-wrap table {
        min-width: 500px;
    }
}