/* =========================================================================
   RESPONSIVE — desktop-first, thu nhỏ dần theo breakpoint

   Container: 1200px + gutter 60px (desktop)
              -> 40px (laptop nhỏ) -> 28px (tablet) -> 18px (mobile)
   ========================================================================= */

/* ============================================ <= 1320px (dưới reference) */
@media (max-width: 1320px) {
    :root {
        --container-gutter: 44px;
    }

    .story {
        grid-template-columns: minmax(0, 1fr) 46%;
    }

    .hero__note--top { right: 18px; }
}

/* ============================================ <= 1180px */
@media (max-width: 1180px) {
    :root {
        --fs-hero-h1: 64px;
        --fs-hero-accent: 46px;
        --fs-h2: 31px;
        --fs-h3: 23px;
        --container-gutter: 34px;
        --panel-pad-x: 30px;
    }

    .hero {
        min-height: 600px;
    }

    .hero__note--top {
        font-size: 23px;
        top: 118px;
    }

    .hero__note--bottom {
        display: none;
    }

    .gallery-grid {
        width: calc(100% - 160px);
    }

    .gallery__note {
        width: 150px;
        font-size: 21px;
    }

    .order {
        grid-template-columns: 230px minmax(0, 1fr) 230px;
    }

    .order__note span { font-size: 26px; }
    .order__bag img { width: 200px; }

    .archive-grid,
    .bmqb-shop .ams-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Cột "Gọi thêm món" xuống dưới giỏ hàng khi màn hình hẹp lại. */
    .bmqb-cart-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__inner {
        column-gap: 32px;
    }

    .site-footer__note { font-size: 24px; }
}

/* ============================================ <= 1024px (tablet ngang) */
@media (max-width: 1024px) {
    :root {
        --fs-hero-h1: 56px;
        --fs-hero-accent: 40px;
        --fs-hero-lead: 18px;
        --fs-h1: 38px;
        --fs-h2: 28px;
        --fs-h3: 22px;
        --fs-body: 17px;
        --fs-body-sm: 16px;
        --container-gutter: 28px;
        --panel-pad-x: 24px;
        --header-h: 72px;
    }

    /* --- Header: chuyển sang menu di động --- */
    .nav-toggle {
        display: block;
        order: 3;
    }

    .site-header__bar {
        width: min(100% - 28px, 100%);
        padding-inline: 22px;
        gap: 14px;
    }

    .site-logo img { height: 44px; }

    .site-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 14px;
        right: 14px;
        padding: 12px 18px 18px;
        background: #fcfaf7;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity var(--dur) var(--ease),
                    transform var(--dur) var(--ease),
                    visibility var(--dur) var(--ease);
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
    }

    .site-nav__item + .site-nav__item {
        border-top: 1px solid var(--c-border-soft);
    }

    .site-nav__link {
        display: block;
        padding: 13px 4px;
        font-size: 17px;
    }

    .site-nav__link::after { display: none; }

    .site-header__actions {
        order: 2;
        margin-left: auto;
        gap: 12px;
    }

    .site-header .btn--primary {
        min-height: 44px;
        padding: 0 20px;
        font-size: 15px;
    }

    /* --- Hero --- */
    .hero {
        min-height: 0;
    }

    .hero__inner {
        padding: 118px 0 46px;
    }

    .hero__content {
        max-width: 56%;
    }

    /* Ảnh hero bị thu hẹp -> đẩy vùng chuyển màu sang phải để chữ không
       đè lên ổ bánh mì */
    .hero__overlay {
        background:
            linear-gradient(
                100deg,
                var(--c-cream) 0%,
                rgba(250, 238, 223, .985) 26%,
                rgba(250, 238, 223, .93) 40%,
                rgba(250, 238, 223, .6) 52%,
                rgba(250, 238, 223, .18) 63%,
                rgba(250, 238, 223, 0) 74%
            );
    }

    .hero__media img { object-position: 74% 50%; }

    .hero__note--top {
        top: 104px;
        right: 14px;
        font-size: 20px;
    }

    /* --- Sections --- */
    .dish-grid { gap: 22px; }

    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 0;
    }

    .why-item:nth-child(odd) { border-left: 0; }
    .why-item:nth-child(n+3) { border-top: 1px solid var(--c-border-soft); padding-top: 26px; }

    .story {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .story__text {
        padding: 28px 24px 26px;
        order: 2;
    }

    .story__media {
        order: 1;
        /* giữ đúng tỉ lệ ảnh để chữ viết tay in trong ảnh không bị cắt */
        aspect-ratio: 1335 / 582;
        clip-path: none;
    }

    .gallery-grid {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .gallery__note {
        position: static;
        width: auto;
        margin-top: 16px;
        transform: none;
        text-align: center;
    }

    .order {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .order__note {
        min-height: 0;
        max-width: 340px;
        margin-inline: auto;
    }

    .order__bag { display: none; }
    .order__hand { display: none; }
    .section-order .leaf { display: none; }

    /* --- Trang trong --- */
    .content-layout,
    .content-layout--reading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sidebar { position: static; }

    .page-hero__note { display: none; }

    .article__body { padding: 26px 26px 32px; }

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

    /* --- Footer --- */
    .site-footer__inner {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 22px;
    }

    .site-footer__note {
        grid-column: 1 / -1;
        text-align: left;
        transform: none;
        font-size: 22px;
    }
}

/* ============================================ <= 860px */
@media (max-width: 860px) {
    :root {
        --fs-hero-h1: 48px;
        --fs-hero-accent: 34px;
        --container-gutter: 24px;
    }

    .hero__content { max-width: 74%; }

    .hero__overlay {
        background:
            linear-gradient(
                100deg,
                var(--c-cream) 0%,
                rgba(250, 238, 223, .97) 32%,
                rgba(250, 238, 223, .72) 52%,
                rgba(250, 238, 223, .25) 68%,
                rgba(250, 238, 223, 0) 82%
            );
    }

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

    .dish-card .card__media { aspect-ratio: 16 / 7; }

    .archive-grid,
    .bmqb-shop .ams-grid { grid-template-columns: 1fr; }

    .bmqb-shop .ams-shop-toolbar__sort { margin-left: 0; width: 100%; }
    .bmqb-shop .ams-select { width: 100%; }

    .result { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; }

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

/* ============================================ <= 640px (mobile) */
@media (max-width: 640px) {
    :root {
        --fs-hero-h1: 40px;
        --fs-hero-accent: 29px;
        --fs-hero-lead: 17px;
        --fs-h1: 31px;
        --fs-h2: 25px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-body: 16px;
        --fs-body-sm: 15.5px;
        --fs-btn: 16px;
        --container-gutter: 18px;
        --panel-pad-x: 16px;
        --radius-panel: 22px;
    }

    .site-header__bar {
        padding-inline: 14px;
        gap: 10px;
    }

    .site-logo img { height: 34px; }

    /* Không đủ chỗ cho cả giỏ hàng lẫn nút CTA trên màn hình hẹp */
    .header-cart { display: none; }

    .nav-toggle { width: 40px; height: 40px; }

    .site-header .btn--primary {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13.5px;
    }

    .site-header__actions { gap: 8px; }

    /* Hero: ảnh trở thành nền nhẹ phía sau, chữ ưu tiên đọc */
    .hero__inner { padding: 104px 0 36px; }

    .hero__content { max-width: 100%; }

    .hero__media img { object-position: 78% 46%; }

    .hero__overlay {
        background:
            linear-gradient(
                175deg,
                rgba(250, 238, 223, .97) 0%,
                rgba(250, 238, 223, .95) 46%,
                rgba(250, 238, 223, .62) 74%,
                rgba(250, 238, 223, .3) 100%
            );
    }

    .hero__note--top { display: none; }

    .hero__actions .btn { flex: 1 1 100%; }

    .btn { padding: 0 22px; min-height: 52px; }

    .section-head__title {
        gap: 10px;
        flex-wrap: wrap;
    }

    .section-head__title::before,
    .section-head__title::after {
        width: 54px;
        height: 16px;
    }

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

    .why-item {
        border-left: 0 !important;
        padding: 0 4px;
    }

    .why-item:nth-child(n+2) {
        border-top: 1px solid var(--c-border-soft);
        padding-top: 22px;
    }

    .gallery-head { gap: 8px 14px; }

    .gallery-head__sub { flex: 1 1 100%; }

    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .order__actions { flex-direction: column; align-items: stretch; }

    .order__actions .btn { width: 100%; }

    .article__body,
    .page-body { padding: 22px 18px 28px; }

    .prose h2 { font-size: 23px; }
    .prose h3 { font-size: 19px; }

    .prose table { display: block; overflow-x: auto; }

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

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

    .filter-bar { padding: 12px 14px; }

    .filter-bar__count { margin-left: 0; flex: 1 1 100%; }

    /* Footer xếp dọc */
    .site-footer__inner {
        grid-template-columns: 1fr;
        text-align: left;
        padding: 28px 0 30px;
    }

    .site-footer__logo img { height: 58px; }

    .footer-nav li + li::before { margin: 0 12px; }

    .site-footer__note { font-size: 21px; }

    .search-form { flex-wrap: wrap; }
    .search-form .btn { width: 100%; }
}

/* ============================================ >= 1600px (màn rất rộng) */
/* ============================================ <= 860px — khung xem ảnh */
@media (max-width: 860px) {

    /*
     * Màn hẹp: hai mũi tên chuyển sang đè lên mép ảnh thay vì chiếm hai cột
     * riêng. Để nguyên kiểu ba cột thì trên điện thoại 390px ảnh chỉ còn hơn
     * 200px bề ngang — bé hơn cả ô ảnh ngoài trang.
     */
    .lightbox {
        padding: 16px;
    }

    .lightbox__khung {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .lightbox__hinh {
        grid-column: 1 / -1;
    }

    .lightbox__nut--truoc,
    .lightbox__nut--sau {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        font-size: 26px;
        background: rgba(0, 0, 0, .55);
        z-index: 2;
    }

    .lightbox__nut--truoc { left: 2px; }
    .lightbox__nut--sau { right: 2px; }

    .lightbox__hinh img {
        max-height: calc(100vh - 118px);
    }
}

/* ============================================ <= 480px (điện thoại hẹp) */
@media (max-width: 480px) {

    /*
     * Chỉ tới đây giá và nút mới thật sự không đủ chỗ trên một dòng
     * (ví dụ "40.000đ / phần 10 chiếc" cạnh nút "Thêm vào giỏ").
     * Xếp dọc và cho nút chiếm hết bề ngang để dễ bấm bằng ngón tay.
     */
    .card__mua {
        flex-direction: column;
        align-items: stretch;
    }

    .ams-scope .card__mua .ams-add-to-cart,
    .ams-scope .card__mua .ams-button { width: 100%; }
}

@media (min-width: 1600px) {
    /* Container giữ nguyên 1200px — KHÔNG kéo nội dung ra sát hai mép */
    .hero {
        min-height: 720px;
    }

    .hero__media img { object-position: 64% 52%; }
}

/* ============================================ In ấn */
@media print {
    .site-header,
    .site-footer__note,
    .cta-strip,
    .nav-toggle {
        display: none !important;
    }

    body { background: #fff; }
}