/* ==========================================================================
   Responsive — every breakpoint override in one place.
   Base styles are written for phones; these rules scale them up.
   Breakpoints: 640px (large phone) · 960px (tablet / small laptop) · 1280px (desktop)
   ========================================================================== */

/* ---------- Phones & tablets: nav collapses into a full-screen menu ---------- */
@media (max-width: 959.98px) {
  .site-nav {
    display: none;
  }
  .js .menu-toggle {
    display: block;
  }

  .js .site-nav {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease-out),
      visibility 0s linear var(--dur);
  }

  .js .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--dur) var(--ease-out),
      visibility 0s;
  }

  /* backdrop-filter would trap the fixed overlay inside the header box */
  .site-header.is-open {
    color: var(--text);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-block-end-color: transparent;
  }

  .site-header.is-open .icon-btn {
    border-color: var(--line);
  }

  .site-header .brand,
  .site-header__actions {
    position: relative;
    z-index: var(--z-base);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }

  .site-nav__link {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    opacity: 1;
  }
}

@media (max-width: 639.98px) {
  /* The floating WhatsApp button covers ordering on phones */
  .site-header__cta {
    display: none;
  }
  .brand__word {
    font-size: 1rem;
    letter-spacing: 0.22em;
  }
  /* Four icon buttons, the hamburger and the wordmark must share one phone-width row */
  .site-header__inner {
    gap: var(--space-3);
  }
  .site-header__actions {
    gap: var(--space-2);
  }

  /* Lift the photo further so the storefront sign sits above the monogram */
  .hero__media {
    inset-block-start: -34%;
    --photo-shade:
      linear-gradient(180deg, rgb(18 11 8 / 0.96) 34%, rgb(18 11 8 / 0.5) 42%, rgb(18 11 8 / 0) 56%),
      radial-gradient(ellipse 80% 70% at 50% 60%, rgb(18 11 8 / 0.15) 0%, rgb(18 11 8 / 0.7) 100%),
      linear-gradient(180deg, rgb(18 11 8 / 0) 70%, var(--bg) 100%);
  }
  .hero__eyebrow {
    letter-spacing: 0.18em;
  }
  /* The English hero eyebrow is nowrap and longer than the Arabic one */
  :lang(en) .hero__eyebrow {
    letter-spacing: 0.14em;
  }

  /* Smaller chips so the longest city names stay on one line in two columns */
  .city-chip {
    gap: var(--space-1);
    padding-inline: var(--space-2);
    font-size: 0.8125rem;
  }
  .city-chip svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  /* Photo cards: keep the English name on one line so it cannot push the card taller */
  .menu-item--card .menu-item__names {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Large phones and up ---------- */
@media (min-width: 640px) {
  .signature__grid {
    grid-auto-columns: 46%;
  }
  .menu-list.menu-list--cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: start;
    align-items: center;
  }
  .site-footer__brand {
    justify-items: start;
  }
  .site-footer__nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    order: 3;
  }
}

/* ---------- Tablet / laptop ---------- */
@media (min-width: 960px) {
  :root {
    --header-h: 84px;
  }

  /* Three city chips per row only where each one has room for its name */
  .cities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Journey: editorial split — text column + photo panel, so the portrait
     photos are shown near their real size instead of being blown up */
  .scene {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }

  .scene__media {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: 55%;
    --photo-shade: linear-gradient(to left, rgb(18 11 8 / 0) 70%, var(--bg) 100%);
  }

  [dir="rtl"] .scene__media {
    --photo-shade: linear-gradient(to right, rgb(18 11 8 / 0) 70%, var(--bg) 100%);
  }

  .scene__text {
    grid-column: 1;
    padding-block: var(--space-8);
    padding-inline-end: var(--space-7);
    max-width: none;
    margin: 0;
    padding-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    color: var(--text);
  }

  .scene .eyebrow {
    color: var(--accent);
  }
  .scene__body {
    color: var(--text-muted);
  }

  .signature__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Staggered rhythm: the middle card sits lower, like a magazine spread */
  .signature__grid > li:nth-child(2) {
    margin-block-start: var(--space-8);
  }

  .place__head {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
  }

  .stats {
    align-self: end;
  }

  .branches__cards {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }

  /* Narrower side padding gives the seven category tabs room to sit on one row */
  .menu-book {
    padding: var(--space-8) var(--space-6) var(--space-8);
  }
  .menu-tabs {
    gap: 0;
    mask-image: none;
  }
  .menu-tab {
    padding-inline: var(--space-2);
  }
  .menu-tab::after {
    inset-inline: var(--space-2);
  }
  .menu-tab:lang(en),
  :lang(en) .menu-tab {
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
  }

  /* Two columns that read top-to-bottom, like a printed menu page */
  .menu-list {
    display: block;
    columns: 2;
    column-gap: var(--space-8);
    column-rule: 1px solid var(--line);
  }

  .menu-list.menu-list--cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-rule: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto auto;
  }
  .site-footer__nav {
    grid-column: auto;
    order: 0;
  }
}

/* Below 420px the wordmark no longer fits beside the actions; the monogram stays and
   the link keeps its aria-label, and the hero names the café right below */
@media (max-width: 419.98px) {
  .site-header .brand__word {
    display: none;
  }
}

/* ---------- Header: tighter gaps where logo, nav and CTA share a narrow row ---------- */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .site-header__inner {
    gap: var(--space-4);
  }
  .brand {
    gap: var(--space-2);
  }
  .brand__word {
    letter-spacing: 0.2em;
  }
  .site-nav__list {
    gap: var(--space-4);
  }
  .site-header__actions {
    gap: var(--space-2);
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 1280px) {
  .gallery__item {
    flex-basis: 24rem;
  }
}