/* ========================================
   Bakey Daoom - Responsive Styles
   ======================================== */

/* --- Tablet (1024px) --- */
@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .exhibition {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .exhibition__visual {
        grid-template-columns: 1.5fr 1fr;
    }

    .about {
        gap: var(--space-md);
    }

    .about-stats {
        gap: var(--space-md);
    }

    .space-block {
        gap: var(--space-md);
    }

    .contact {
        gap: var(--space-md);
    }

    /* Gallery: uniform 2-column */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .gallery-grid .gallery-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-grid .gallery-item:nth-child(1) .gallery-item__image-wrapper {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: auto;
    }

    .gallery-grid .gallery-item:nth-child(5) {
        grid-column: span 1;
    }

    .gallery-grid .gallery-item:nth-child(5) .gallery-item__image-wrapper {
        aspect-ratio: 4 / 3;
    }

    /* Baking Class: programs 2-column */
    .bc-programs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .bc-features {
        gap: var(--space-md);
    }
}

/* --- Large Mobile (768px) --- */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    /* Show hamburger, hide desktop nav */
    .nav__toggle {
        display: flex;
    }

    .nav__list {
        display: none;
    }

    .mobile-menu {
        display: flex;
    }

    /* Hero adjustments */
    .hero {
        min-height: 500px;
    }

    .hero__subtitle {
        font-size: var(--font-size-body);
    }

    /* Exhibition: single column */
    .exhibition {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .exhibition__visual {
        grid-template-columns: 1fr 1fr;
    }

    .exhibition__main-image {
        grid-row: span 1;
    }

    .exhibition__main-image img {
        aspect-ratio: 3 / 4;
    }

    .exhibition__sub-images {
        flex-direction: column;
    }

    .exhibition__title {
        font-size: var(--font-size-h2);
    }

    .exhibition-section {
        padding: var(--space-xl) 0;
    }

    /* Upcoming: single column */
    .upcoming {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* About: single column */
    .about {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .about__images {
        padding: var(--space-sm);
        max-width: 400px;
        margin: 0 auto;
    }

    /* About Stats: 2x2 grid */
    .about-stats {
        flex-wrap: wrap;
        gap: var(--space-md) var(--space-lg);
    }

    .about-stats__divider {
        display: none;
    }

    .about-stats__item {
        flex: 0 0 calc(50% - var(--space-md));
    }

    /* Space blocks: single column */
    .space-block,
    .space-block--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

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

    .interior-grid__item--wide {
        grid-column: span 2;
    }

    /* Menu: 2 columns */
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    /* Menu tabs: scrollable */
    .menu-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-xs);
        scrollbar-width: none;
    }

    .menu-tabs::-webkit-scrollbar {
        display: none;
    }

    .menu-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Bakery: single column */
    .bakery {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .bakery__image {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Contact: responsive */
    .contact-map-full {
        height: 350px;
    }

    .contact-map-overlay {
        bottom: var(--space-sm);
        left: var(--space-sm);
        right: var(--space-sm);
    }

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

    .contact-card:nth-child(2)::after {
        display: none;
    }

    /* Gallery hero */
    .gallery-hero {
        height: auto;
        min-height: 350px;
        padding: calc(var(--header-height) + var(--space-lg)) var(--space-md) var(--space-lg);
    }

    .gallery-hero__desc br {
        display: none;
    }

    /* Baking Class hero */
    .bc-hero {
        height: auto;
        min-height: 350px;
        padding: calc(var(--header-height) + var(--space-lg)) var(--space-md) var(--space-lg);
    }

    .bc-hero__desc br {
        display: none;
    }

    /* Baking Class intro: single column */
    .bc-intro {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .bc-intro__image {
        max-width: 400px;
        margin: 0 auto;
    }

    /* Features: 2x2 wrap */
    .bc-features {
        flex-wrap: wrap;
        gap: var(--space-md) var(--space-lg);
    }

    .bc-feature__divider {
        display: none;
    }

    .bc-feature {
        flex: 0 0 calc(50% - var(--space-md));
    }

    /* Programs: single column */
    .bc-programs-grid {
        grid-template-columns: 1fr;
    }

    /* Schedule: stack on mobile */
    .bc-schedule {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: 1.25rem;
    }

    .bc-schedule__date {
        flex-direction: row;
        gap: 0.5rem;
        width: auto;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: var(--space-xs);
        width: 100%;
    }

    .bc-schedule__action {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--space-xs);
        border-top: 1px solid var(--color-border);
    }

    /* Reviews: single column */
    .bc-reviews-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery grid */
    .bc-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bc-gallery-item--wide {
        grid-column: span 2;
    }

    /* Form: single column rows */
    .bc-form-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .bc-apply-wrapper {
        padding: var(--space-md);
    }

    /* Gallery grid: 2 columns uniform */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-grid .gallery-item:nth-child(1) {
        grid-column: span 1;
    }

    /* Filter bar: scrollable */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: var(--space-xs) 0;
        scrollbar-width: none;
    }

    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Lightbox */
    .lightbox__prev { left: var(--space-xs); }
    .lightbox__next { right: var(--space-xs); }
    .lightbox__close { top: var(--space-sm); right: var(--space-sm); }

    .lightbox__image-frame {
        padding: 8px;
    }

    .lightbox__image-frame img,
    .lightbox__image-frame .placeholder-image {
        min-width: 250px;
        max-height: 50vh;
    }

    /* Footer */
    .footer__nav {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
}

/* --- Small Mobile (480px) --- */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-sm);
    }

    .section {
        padding: var(--space-lg) 0;
    }

    /* Exhibition: stacked images */
    .exhibition__visual {
        grid-template-columns: 1fr;
    }

    .exhibition__main-image img {
        aspect-ratio: 4 / 3;
    }

    .exhibition__sub-images {
        flex-direction: row;
    }

    .exhibition__sub-image img {
        aspect-ratio: 1 / 1;
    }

    /* Menu: single column */
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Interior grid: single column */
    .interior-grid {
        grid-template-columns: 1fr;
    }

    .interior-grid__item--wide {
        grid-column: span 1;
    }

    .interior-grid__item--wide img {
        aspect-ratio: 16 / 9;
    }

    /* Gallery grid: single column */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .gallery-grid .gallery-item:nth-child(1) .gallery-item__image-wrapper {
        aspect-ratio: 4 / 3;
        height: auto;
        min-height: auto;
    }

    /* Baking Class: single column */
    .bc-gallery-grid {
        grid-template-columns: 1fr;
    }

    .bc-gallery-item--wide {
        grid-column: span 1;
    }

    .bc-gallery-item--wide img {
        aspect-ratio: 16 / 9;
    }

    .bc-process-timeline {
        padding-left: 30px;
    }

    .bc-process-timeline::before {
        left: 14px;
    }

    .bc-process__number {
        left: -30px;
        width: 30px;
        height: 30px;
        font-size: var(--font-size-caption);
    }

    /* Contact: single column cards */
    .contact-map-full {
        height: 280px;
    }

    .contact-map-card__buttons {
        flex-direction: column;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-card {
        padding: var(--space-md);
    }

    .contact-card::after {
        display: none;
    }

    /* Lightbox: full width */
    .lightbox__content {
        max-width: 95vw;
    }

    .lightbox__image-frame img,
    .lightbox__image-frame .placeholder-image {
        min-width: 200px;
    }

    .lightbox__prev,
    .lightbox__next {
        font-size: 2rem;
        width: 36px;
        height: 36px;
    }

    /* Footer */
    .footer__nav {
        flex-direction: column;
        align-items: center;
        gap: var(--space-xs);
    }

    .footer__quote {
        font-size: var(--font-size-small);
    }
}