/* ==========================================================================
   Dubbelbluf — responsive.css
   Breakpoint overrides (768 / 1024 / 1280).
   ========================================================================== */

/* ---- Mobile (< 768px) ---- */
@media (max-width: 767px) {
    /* Hero split → stacked */
    .hero--split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero__image-wrap {
        order: -1;
        min-height: 280px;
        max-height: 360px;
        border-radius: 0;
    }

    .hero__image {
        border-radius: 0;
    }

    .hero__content {
        padding: var(--s-32) var(--s-24);
    }

    /* Grids → single column */
    .grid-2,
    .grid-2--reversed,
    .grid-3,
    .grid-4,
    .grid-2x2,
    .grid-2x3 {
        grid-template-columns: 1fr;
    }

    .grid-2--reversed {
        direction: ltr;
    }

    /* Header */
    .header__nav,
    .header__utility {
        display: none;
    }

    .header__hamburger {
        display: flex;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--s-32);
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer__legal {
        justify-content: center;
    }

    /* Menu layout → stacked */
    .menu-layout {
        grid-template-columns: 1fr;
        gap: var(--s-24);
    }

    /* Menu sidebar → horizontal scroll */
    .menu-sidebar {
        position: static;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .menu-sidebar__list {
        flex-direction: row;
        gap: var(--s-4);
        white-space: nowrap;
        padding-bottom: var(--s-8);
    }

    .menu-sidebar__link {
        flex-shrink: 0;
    }

    /* Section spacing reduced */
    .section {
        padding-top: var(--s-48);
        padding-bottom: var(--s-48);
    }

    /* Gallery grid → stacked */
    .gallery-grid {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .gallery-grid__item--large {
        grid-row: span 1;
    }

    .gallery-grid__item {
        max-height: 240px;
    }

    /* Photo grid */
    .photo-grid {
        grid-template-columns: 1fr;
    }

    /* Poker gallery */
    .poker-gallery {
        grid-template-columns: 1fr;
    }

    .poker-gallery__item {
        max-height: 200px;
    }

    /* Form rows → stacked */
    .db-form__row,
    .db-form__row--2,
    .db-form__row--4 {
        grid-template-columns: 1fr;
    }

    /* Full-width submit */
    .db-form__submit .btn-primary {
        width: 100%;
    }

    /* Filter bar → scroll */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--s-8);
    }

    .filter-bar__btn {
        flex-shrink: 0;
    }

    /* Testimonials → horizontal scroll */
    .testimonials-row {
        display: flex;
        gap: var(--s-24);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--s-16);
        scroll-snap-type: x mandatory;
    }

    .testimonials-row .card {
        flex-shrink: 0;
        width: 280px;
        scroll-snap-align: start;
    }

    /* Steps → vertical */
    .steps--horizontal {
        flex-direction: column;
    }

    /* CTA group → stacked */
    .cta-group {
        flex-direction: column;
    }

    .cta-group .btn-primary,
    .cta-group .btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* Feature list → vertical */
    .feature-list {
        flex-direction: column;
        gap: var(--s-16);
    }

    /* Container padding */
    .container {
        padding-left: var(--s-16);
        padding-right: var(--s-16);
    }

    /* Map embed smaller */
    .map-embed {
        height: 220px;
    }

    /* Radio group → vertical */
    .db-form__radio-group {
        flex-direction: column;
    }

    /* Tab nav → scroll */
    .tab-group__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        flex-shrink: 0;
    }
}

/* ---- Tablet (768px+) ---- */
@media (min-width: 768px) {
    .grid-2x2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

/* ---- Desktop grid restore (1024px+) ---- */
@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- Desktop (1024px+) ---- */
@media (min-width: 1024px) {
    .header__hamburger {
        display: none;
    }

    .header__nav,
    .header__utility {
        display: flex;
    }
}

/* ---- Wide (1280px+) ---- */
@media (min-width: 1280px) {
    .container {
        padding-left: var(--s-32);
        padding-right: var(--s-32);
    }
}