/* ==========================================================================
   دیگ اول — DIGE AVAL
   responsive.css — چیدمان واکنش‌گرا (موبایل‌اول)
   ========================================================================== */

/* ============================== ≥ 560px ================================= */
@media (min-width: 560px) {
  .hero__cta .btn {
    padding-inline: 1.8rem;
  }
  .visit__row {
    grid-template-columns: 9rem 1fr;
    align-items: baseline;
    gap: 1rem;
  }
  .foot__grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot__brand {
    grid-column: 1 / -1;
  }
  .tray-panel {
    width: min(430px, 92vw);
  }
}

/* ============================== ≥ 768px ================================= */
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(120px, 12.6vw, 220px);
  }
  .gallery__item:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gallery__item:nth-child(2) {
    grid-column: span 2;
  }
  .gallery__item:nth-child(7) {
    grid-column: span 2;
  }
  .gallery__item:nth-child(8) {
    grid-column: span 4;
  }

  .process {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }

  .toolbar__inner {
    grid-template-columns: minmax(240px, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }
  .chips {
    justify-content: flex-end;
  }

  .menu-row__foot {
    margin-top: 0.7rem;
  }

}

/* ============================== ≥ 900px ================================= */
@media (min-width: 900px) {
  .hero {
    padding-top: clamp(7rem, 9vw, 9rem);
    padding-bottom: clamp(1rem, 2vw, 2rem);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem);
    min-height: min(78svh, 760px);
  }
  .hero__figure {
    aspect-ratio: auto;
    height: clamp(480px, 68svh, 720px);
    border-start-end-radius: var(--radius);
  }
  /* بلید کامل تصویر هیرو تا لبه‌ی چپ صفحه (در RTL: inline-end) */
  .hero__media {
    --bleed: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter));
    margin-inline-end: calc(-1 * var(--bleed));
  }
  .hero__caption {
    inset-inline-start: 1.6rem;
    inset-block-end: 1.6rem;
    max-width: 20ch;
  }
  .hero__index {
    inset-inline-start: 1.6rem;
    inset-block-start: 1.5rem;
  }

  .taster {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    gap: clamp(2.4rem, 4vw, 4.5rem);
  }
  .taster__media {
    position: sticky;
    top: 110px;
    aspect-ratio: 3 / 4;
  }
  .cat-row__line {
    display: block;
  }

  .traymap {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2.4rem, 5vw, 5rem);
  }
  .composition__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .trayband {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2.4rem, 5vw, 5rem);
  }

  .story {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(2.4rem, 5vw, 5rem);
  }
  .story__figure img {
    aspect-ratio: 3 / 4;
  }

  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: clamp(2.4rem, 4vw, 4rem);
    align-items: start;
  }
  .visit__map {
    aspect-ratio: 1 / 1;
    position: sticky;
    top: 110px;
  }

  .faq {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .faq__aside {
    position: sticky;
    top: 110px;
  }

  .foot__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(1.6rem, 3vw, 3rem);
  }
  .foot__brand {
    grid-column: auto;
  }

  .menu-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: end;
  }
  .menu-hero__stats {
    justify-content: flex-end;
  }
}

/* ============================== ≥ 1024px ================================ */
@media (min-width: 1024px) {
  .nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
  .site-head__inner {
    padding-block: 1.2rem;
  }
  .brand__en {
    display: block;
  }
  .tray-trigger__label {
    display: inline;
  }

  .process {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }
  .process__card:nth-child(even) {
    margin-block-start: clamp(1.5rem, 3vw, 3.2rem);
  }

  .menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.6rem);
  }
  .menu-row {
    align-content: start;
  }
  .menu-row--has-media {
    grid-template-columns: 108px minmax(0, 1fr);
    align-items: start;
    gap: clamp(0.9rem, 1.6vw, 1.4rem);
  }
  .menu-row--has-media .menu-row__thumb {
    display: block;
    width: 108px;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ivory-deep);
  }
  .menu-row--has-media .menu-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease-out);
  }
  .menu-row--has-media:hover .menu-row__thumb img {
    transform: scale(1.05);
  }
  .menu-row--has-media .menu-row__desc {
    max-width: 44ch;
  }
}

/* ============================== ≥ 1280px ================================ */
@media (min-width: 1280px) {
  .hero__grid > .hero__copy {
    padding-inline-start: clamp(1rem, 3vw, 3.5rem);
  }
  .hero__lead {
    max-width: 36ch;
  }
  .tray {
    inset-block-end: 1.6rem;
    inset-inline-start: 1.6rem;
    padding: 0.8rem 1rem 0.8rem 1.25rem;
  }
}

/* ============================== ≥ 1600px ================================ */
@media (min-width: 1600px) {
  :root {
    --gutter: 5.5rem;
  }
  .hero__grid {
    min-height: min(74svh, 780px);
  }
}

/* ======================= صفحات بسیار کوچک (≤ 380px) ====================== */
@media (max-width: 380px) {
  :root {
    --gutter: 1rem;
  }
  .brand__type {
    font-size: 1.15rem;
  }
  .btn {
    padding-inline: 1.1rem;
    font-size: 0.88rem;
  }
  .hero__cta {
    gap: 0.5rem;
  }
  .hero__cta .btn {
    flex: 1 1 100%;
  }
  .visit__map {
    aspect-ratio: 1 / 0.9;
  }
}

/* ======================= حالت افقی موبایل/تبلت کم‌ارتفاع ================= */
@media (max-height: 620px) and (orientation: landscape) {
  .hero {
    padding-top: 5.5rem;
  }
  .hero__grid {
    min-height: auto;
  }
  .hero__figure {
    height: 380px;
  }
}

/* ============================== چاپ ==================================== */
@media print {
  .site-head,
  .tray,
  .tray-panel,
  .scrim,
  .tray-toast,
  .lightbox,
  .steam,
  .steam-divider {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .section--dark,
  .site-foot {
    background: #fff;
    color: #000;
  }
}