/* =========================================================
   MOBILE — GLOBAL LAYOUT
   ========================================================= */
@media (max-width: 900px) {
    .page {
        display: block;
        margin-top: 130px;
        padding: 0 10px 30px;
    }

    .sidebar {
        display: none;
    }

    .navbar {
        padding-left: 0;
    }

    .logo {
        height: 60px;
        top: 5px;
        left: 10px;
    }

    .hero {
        padding: 70px 10px 40px;
    }

    /* Hero split */
    .hero-split {
        flex-direction: column;
        gap: 20px;
    }

    .hero-left,
    .hero-right {
        width: 100%;
    }

    /* Mixes */
    .mixes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Socials */
    .social-feed-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .feed-box {
        max-width: 100%;
    }

    .live-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .live-platform img {
        width: 60px;
    }

    /* Events */
    .events-upcoming-list {
        flex-direction: column;
    }

    .event-card {
        flex-direction: row;
    }

    .event-card-poster img {
        width: 120px;
    }

    .booking-container {
        margin: 0 0 30px;
    }

    /* Videos */
    .video-player-container {
        flex-direction: column;
    }

    .video-playlist {
        width: 100%;
        max-height: 300px;
        border-left: none;
        border-top: 1px solid #0ff;
    }
}

/* =========================================================
   MOBILE — MID BREAKPOINTS
   ========================================================= */
@media (max-width: 1200px) {
    .mixes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .past-year-block {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 700px) {
    .mixes-table td {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }

    .past-year-block {
        grid-template-columns: repeat(2, 1fr);
    }

    .event-carousel {
        height: 120px;
    }

    .event-carousel img {
        width: 130px;
    }

    .carousel-arrow {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .past-year-block {
        grid-template-columns: 1fr;
    }
}

/* ============================
   FOOTER — MOBILE (STACKED)
   ============================ */

@media (max-width: 600px) {

    .footer-table {
        display: block;
        width: 100%;
        padding: 0 10px;
    }

    .footer-row {
        display: block;
        width: 100%;
    }

    .footer-cell {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 0;
    }

    /* Header row */
    .footer-row-headers .footer-cell {
        padding-bottom: 5px;
        font-size: 0.9rem;
    }

    /* Sponsors */
    .footer-stream-logos {
        justify-content: center;
        gap: 10px;
    }

    .footer-stream-logos img {
        width: 40px;
        height: 40px;
    }

    /* Copyright */
    .footer-copy {
        text-align: center;
        color: #ccc;
        font-size: 0.8rem;
        padding: 6px 0 4px;
    }

    /* Mailing list */
    .footer-mailing form {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .footer-mailing input[type="email"] {
        width: 100%;
        max-width: 260px;
    }
}

@media (max-width: 900px) {
    /* Navbar */
    .navbar {
        padding: 8px 12px;
        justify-content: space-between;
    }

    .nav-left {
        flex: 0 0 auto;
        gap: 10px;
    }

    .logo {
        height: 55px;
        width: auto;
    }

    .nav-center {
        display: none;
    }

    .nav-right {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        padding-right: 10px;
    }

    .header-stream-logos {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .header-stream-logos img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    /* Hamburger menu */
.mobile-menu {
    display: none;
    flex-direction: column;
    background: #000;
    padding: 10px 0;
    text-align: center;
    width: 100%;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    border-top: 1px solid #111;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu.open {
    max-height: 500px;
}

.mobile-menu a {
        padding: 12px 0;
        color: #fff;
        text-decoration: none;
        font-size: 1rem;
        border-bottom: 1px solid #111;
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background: #fff;
        display: block;
    }

    /* Hero */
    .hero {
        height: 380px;
        padding: 40px 10px 20px;
    }

    .hero h1 {
        font-size: 1.4rem;
        padding: 12px 20px;
    }

    /* Events */
    .event-card {
        flex-direction: column;
    }

    .event-card-poster img {
        width: 100%;
    }

    .event-card-date {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 8px 0;
    }

    /* Lightbox */
    .lightbox-img {
        max-width: 95%;
        max-height: 80%;
    }

    .lightbox-arrow {
        font-size: 40px;
    }

    /* Bookings */
    .booking-container {
        padding: 15px;
    }

    .booking-container h1 {
        font-size: 1.6rem;
    }

    /* Mixes */
    .mixes-grid {
        grid-template-columns: 1fr;
    }
}