@charset "UTF-8";
/* ==========================================================================
   کافه رومی | Cafe Rumi
   responsive.css  ·  Breakpoints  1400 / 1200 / 992 / 768 / 576
   Load AFTER style.css
   ========================================================================== */

/* ======================= ≥ 1400px · large desktop ======================= */
@media (min-width: 1400px) {
  :root { --header-h: 92px; }
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* ============================ ≤ 1200px · laptop ========================= */
@media (max-width: 1200px) {
  :root { --section-y: clamp(4rem, 8vw, 7rem); }

  .split__media { grid-column: 1 / span 6; }
  .split__body  { grid-column: 8 / span 5; }

  .signature__media { grid-column: 7 / span 6; }
  .signature__body  { grid-column: 1 / span 6; }

  .selected__list  { grid-column: 1 / span 7; }
  .selected__media { grid-column: 9 / span 4; }

  .location__body  { grid-column: 1 / span 6; }
  .location__media { grid-column: 7 / span 6; }
}

/* =========================== ≤ 992px · tablet =========================== */
@media (max-width: 992px) {
  :root {
    --header-h: 70px;
    --lh-body: 1.95;
  }

  /* — nav switches to the overlay — */
  .nav { display: none; }
  .nav-toggle { display: block; }
  .site-header__actions .btn { display: none; }

  /* — everything unstacks — */
  .split,
  .signature__grid,
  .selected,
  .location__grid,
  .mosaic { grid-template-columns: 1fr; }

  .split__media, .split__body,
  .split--flip .split__media, .split--flip .split__body,
  .signature__media, .signature__body,
  .selected__list, .selected__media,
  .location__body, .location__media,
  .mosaic__a, .mosaic__b, .mosaic__c, .mosaic__d { grid-column: 1 / -1; }

  /* keep the image first on stacked story blocks (not on the reversed variant) */
  .split:not(.split--flip) .split__media { order: -1; }

  .selected__media { position: static; }
  .signature__media { order: -1; }

  .story__media-sub {
    inline-size: 40%;
    inset-inline-end: 0;
    inset-block-end: -8%;
  }

  /* a full-width 4:5 image is overwhelming on a tablet — widen the crop */
  .split__media { max-inline-size: 720px; }
  .split__media .frame--portrait,
  .split__media .frame--tall { aspect-ratio: 3 / 2; }

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

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

  .gallery-grid .g-item,
  .gallery-grid .g-item--wide { grid-column: span 6; }
  .gallery-grid .g-item--full { grid-column: span 12; }
  .gallery-grid .g-item--push { margin-block-start: 0; }

  .gallery-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid--even .g-item:nth-child(3n+2) { margin-block-start: 0; }
  .gallery-grid--even .g-item:nth-child(2n) { margin-block-start: clamp(1rem, 3vw, 2.5rem); }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* =========================== ≤ 768px · mobile =========================== */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
    --gutter: 1.1rem;
    --section-y: 3rem;
    --block-y: 1.75rem;
    --fs-body: 0.9375rem;
    --lh-body: 1.82;
    --fs-lead: 1rem;
    --lh-tight: 1.42;
  }

  h1, h2, h3 { text-wrap: pretty; }
  .section-head { gap: .45rem; }
  .body-text { max-inline-size: 100%; }
  .lead { line-height: 1.8; }
  .site-header__inner { gap: .75rem; }
  .site-header.is-stuck { background: rgba(251, 247, 241, .94); }

  .hero { min-block-size: 76vh; min-block-size: 76svh; }
  .hero__inner { padding-block: calc(var(--header-h) + 3rem) 2.4rem; }
  .hero__media img { object-position: 54% center; }
  .hero__title { max-inline-size: 100%; font-size: clamp(2.35rem, 11vw, 3.15rem); }
  .hero__sub { margin-block-start: .85rem; font-size: .95rem; line-height: 1.8; }
  .hero__meta { margin-block-start: 1rem; }
  .hero__scroll { display: none; }
  .hero__watermark { display: none; }
  .hero .btn-row { margin-block-start: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
  .hero .btn { inline-size: 100%; padding-inline: .8rem; }

  .page-hero { min-block-size: 44vh; min-block-size: 44svh; }
  .page-hero__inner { padding-block: calc(var(--header-h) + 2.5rem) 2.25rem; }
  .page-hero__title { margin-block-start: .75rem; }
  .page-hero__sub { margin-block-start: .55rem; font-size: .72rem; }

  .split,
  .signature__grid,
  .selected,
  .location__grid { gap: 1.75rem; }

  .story__media-sub {
    position: static;
    inline-size: 100%;
    margin-block-start: .85rem;
    box-shadow: none;
  }
  .story__media { display: grid; grid-template-columns: 1fr; }

  .moments-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(82vw, 330px);
    gap: .85rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: .5rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }
  .moments-grid::-webkit-scrollbar { display: none; }
  .moment-card { scroll-snap-align: start; }
  .moment-card__media { aspect-ratio: 5 / 6; }
  .moment-card__body { padding-block-start: .85rem; }

  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .mosaic__a, .mosaic__d { grid-column: 1 / -1; }
  .mosaic__b, .mosaic__c { grid-column: auto; }

  .selected__media { order: -1; }
  .selected__media .frame--tall { aspect-ratio: 3 / 2; }

  .info-list__row {
    grid-template-columns: 1fr;
    gap: .25rem;
    padding-block: .95rem;
  }

  .pillars { grid-template-columns: 1fr; gap: 1.75rem; }

  .menu-item { padding-block: .95rem; }
  .menu-item__head { flex-wrap: wrap; row-gap: .1rem; }
  .menu-item__name { font-size: .9375rem; white-space: normal; }
  .menu-item__en { font-size: .75rem; }
  .menu-item__desc { font-size: .8125rem; }

  .menu-item__dots { display: none; }

  .gallery-grid,
  .gallery-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .gallery-grid .g-item,
  .gallery-grid--even .g-item { grid-column: span 1; }
  .gallery-grid .g-item--wide,
  .gallery-grid .g-item--full { grid-column: 1 / -1; }
  .gallery-grid--even .g-item:nth-child(2n) { margin-block-start: 0; }
  .gallery-grid--even .g-item:nth-child(3n+2) { margin-block-start: 0; }
  .g-item figcaption { display: block; margin-block-start: .5rem; font-size: .6875rem; line-height: 1.65; }
  .g-item figcaption .g-cat { display: none; }

  .frame--tall     { aspect-ratio: 3 / 2; }
  .frame--pano     { aspect-ratio: 16 / 10; }
  .split__media { max-inline-size: 100%; }
  .split__media .frame--portrait,
  .split__media .frame--tall { aspect-ratio: 3 / 2; }

  .quote blockquote { max-inline-size: 100%; font-size: 1.375rem; line-height: 1.85; }
  .quote__watermark { font-size: 46vw; }

  .statement { font-size: clamp(2rem, 13vw, 3rem); line-height: 1.2; }

  .cta-strip__inner { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .cta-strip h2 { max-inline-size: 100%; }
  .cta-strip .btn-row { display: grid; grid-template-columns: 1fr 1fr; }
  .cta-strip .btn { inline-size: 100%; }

  .site-footer { padding-block: 3rem 1.25rem; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; padding-block-end: 2rem; }
  .site-footer__grid > nav { display: none; }
  .site-footer__brand p { margin-block-start: .75rem; }
  .site-footer__bar { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .site-footer__watermark { display: none; }

  .nav-overlay { justify-content: flex-start; overflow-y: auto; }
  .nav-overlay__inner { padding-block: calc(var(--header-h) + 1.25rem) 1.5rem; }
  .nav-overlay__link { padding-block: .65rem; }
  .nav-overlay__foot { display: grid; gap: .55rem; margin-block-start: 1.25rem; }

  .filters {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters__btn { flex: 0 0 auto; }

  .lightbox__prev, .lightbox__next {
    inset-block-start: auto;
    inset-block-end: clamp(1rem, 3vw, 2rem);
    transform: none;
  }
  .lightbox__prev { inset-inline-start: calc(50% + 2.25rem); }
  .lightbox__next { inset-inline-end: calc(50% + 2.25rem); }
  .lightbox__count { inset-block-end: 5.5rem; }
  .lightbox__img { max-block-size: 66vh; max-block-size: 66svh; }

  .btn { padding: 1em 1.85em; }   /* comfortable touch target */
  .form { max-inline-size: 100%; }
}

/* ========================= ≤ 576px · small phone ======================== */
@media (max-width: 576px) {
  :root {
    --gutter: 1.15rem;
    --section-y: 3.25rem;
  }

  .brand__mark { inline-size: 30px; block-size: 30px; }
  .brand__fa { font-size: .875rem; }
  .brand__en { font-size: .5625rem; letter-spacing: .26em; }

  .hero { min-block-size: 74vh; min-block-size: 74svh; }
  .hero__title { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .hero__meta { font-size: .6875rem; letter-spacing: .22em; }
  .hero .btn { font-size: .75rem; }

  .nav-overlay__link { font-size: 1.5rem; }

  .menu-group__title { flex-direction: column; align-items: flex-start; gap: .2rem; }

  .signature__price b { font-size: 1.5rem; }

  .filters { gap: .4rem .3rem; }
  .filters__btn { padding: .55em 1.05em; font-size: .75rem; }

  .site-credit { font-size: .78rem; }
}

/* ====================== landscape phones · short screens ================ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-block-size: 100vh; min-block-size: 100svh; }
  .page-hero { min-block-size: 78vh; min-block-size: 78svh; }
  .nav-overlay__inner { padding-block-start: calc(var(--header-h) + 1rem); }
  .nav-overlay__link { font-size: 1.25rem; padding-block: .55rem; }
}

/* ============================ hover-less devices ======================== */
@media (hover: none) {
  .frame--zoom:hover > img { transform: none; }
  .link::after { opacity: .5; }
}

/* ================================= print ================================ */
@media print {
  .site-header, .nav-overlay, .hero__scroll, .cta-strip,
  .lightbox, .filters, .menu-rail { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .section--black { background: #fff !important; color: #000 !important; }
  [data-reveal], [data-reveal-img] > img, .reveal-lines > * { opacity: 1 !important; transform: none !important; }
  [data-reveal-img]::after { display: none !important; }
}