/* ==========================================================================
   RPEES — RESPONSIVE
   Type and spacing are fluid in variables.css, so this file only handles
   layout changes that a clamp() cannot express: things that reflow or
   disappear. Load after style.css.

   Breakpoints
     xs   < 480      small phones
     sm   < 640      phones
     md   < 900      tablets portrait
     lg   < 1200     tablets landscape / small laptops
     xl  >= 1600     large desktop
   ========================================================================== */

/* ---------- lg : 1200 and below ---------- */
@media (max-width: 1200px) {
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: var(--s-7); }
  .pair--weighted, .pair--weighted-r { grid-template-columns: 1fr 1fr; }
}

/* ---------- md : 900 and below — navigation collapses ---------- */
@media (max-width: 900px) {
  .nav { height: var(--nav-h-sm); }
  .nav__menu { display: none; }
  .nav__burger { display: flex; }
  .nav__actions .btn--nav-book { display: none; }   /* the sticky bar owns booking */

  .pair, .pair--weighted, .pair--weighted-r { grid-template-columns: 1fr; gap: var(--s-6); }
  .pair--offset > :nth-child(2) { margin-top: 0; }

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

  /* Mobile compositions are authored, not shrunk: portrait crops on phones. */
  .frame--landscape\@md { aspect-ratio: 4 / 5; }
  .frame--cinema { aspect-ratio: 16 / 10; }
}

/* ---------- sm : 640 and below ---------- */
@media (max-width: 640px) {
  .cta-bar { display: flex; }
  body { padding-bottom: 58px; }        /* clears the sticky bar */
  .footer { padding-bottom: calc(var(--s-7) + 58px); }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }

  .grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  .section--full { min-height: 92svh; }

  .btn { width: 100%; }
  .u-row .btn { width: auto; flex: 1 1 auto; }

  .statement, .statement--wide { max-width: none; }

  .display-xl, .display-l, .display-m, .display-s {

    line-height: 45px;
   
}
}

/* ---------- xs : 480 and below ---------- */
@media (max-width: 480px) {
  :root { --btn-px: 22px; }
  .cta-bar__item { font-size: 0.625rem; letter-spacing: 0.1em; }
}

/* ---------- xl : 1600 and up ---------- */
@media (min-width: 1600px) {
  :root { --gutter: 104px; }
}

/* ---------- landscape phones: the hero must not eat the whole screen ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .section--full { min-height: 130svh; }
  .menu { justify-content: flex-start; overflow-y: auto; }
  .menu__link { font-size: 1.6rem; }
}

/* ---------- pointer: coarse — hover effects that need a finger equivalent ---------- */
@media (hover: none) {
  .card__overlay { opacity: 1; transform: none; }   /* no hover to reveal it */
  .frame--zoom img { transform: none !important; }
}

/* ---------- print ---------- */
@media print {
  .nav, .menu, .cta-bar, canvas { display: none !important; }
  body { background: #fff; color: #000; }
  .frame::after, .frame::before, .grain::after { display: none !important; }
}


@media (max-width: 1100px) {
  .gal {
    column-count: 3;
  }
}

@media (max-width: 760px) {
  .gal {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .gal {
    column-count: 1;
  }
}