/* Mobile refinements — Das Haus/Das Team pair, Private Feiern, Die Karten, gallery.
   Every rule here MUST sit inside a max-width media query so the desktop is untouched. */

/* ═══════════════════════════════════════════════════════════════════════════
   1. RELEASE THE ONE-SCREEN CLAMP ON SHORT VIEWPORTS (phone in landscape)

   .pair and .section--karten are pinned to exactly one scroll stop with
   min-height AND max-height. That is right on a desktop and impossible on a
   844x390 phone: measured there, #haus needed 392px inside a 314px box and
   #karten 581px inside 314px, so the flex children were shrunk under their
   content and the photographs were drawn over each other.
   Scoped by height, so 768x1024 and 834x1112 keep the desktop behaviour.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px) and (max-height:560px){
  .pair,.section--karten{max-height:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. PHONES — 679px is style.css's own stacking breakpoint, so this block
      picks up exactly where the two-column chessboard gives up.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:679px){

/* ── #haus — "2 фотки сбиты" ──────────────────────────────────────────────
   Two faults, both measurable:
   (a) style.css releases .pair's min-height when the rows stack but not its
       max-height, so the section stayed one screen tall (768px at 390x844)
       while its content needed 1014px. Both rows are flex items with the
       default flex-shrink:1, so they were squeezed — row 1 got a 374px box
       for a 510px photograph — and the team photograph was painted across the
       bottom of the host's, with the words landing on top of the next kicker.
   (b) the portrait was capped at max-width:340px while the landscape ran to
       100%, so the two frames had different edges: 10px out of line at 390px,
       47px at 430px. One column has to have one left and one right edge.
   ────────────────────────────────────────────────────────────────────────── */
  .pair{max-height:none}
  .pair__fig,.pair__fig--wide{max-width:100%;width:100%}
  /* the rule between the rows gets air of its own now that nothing is squeezed */
  .pair__sep{margin-block:.4rem}
  /* both rows read photograph-then-words; the quote carries the section, the
     lead is the footnote — so the quote keeps its size and the lead loses a step */
  .pair .lead{font-size:.95rem}

/* ── #feiern — three cards were 1696px of stacked scrolling ───────────────
   A swipe band instead: one room fills the screen, the next one peeks at the
   edge, and the section comes down to roughly one screen. The photographs get
   bigger relative to what is on screen and the type stops being a wall.
   ────────────────────────────────────────────────────────────────────────── */
  .spaces{display:flex;grid-template-columns:none;gap:.75rem;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    scrollbar-width:none}
  .spaces::-webkit-scrollbar{display:none}
  .space{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  /* the card's own width sets the 3:2 frame; the 27svh cap belongs to a
     three-abreast desktop row and only cropped it here */
  .space__fig{max-height:none}
  .space__body{padding-top:.85rem}
  .space__body p{font-size:.88rem}
  /* the intro is four full-width lines before the first photograph */
  #feiern .section__head{margin-bottom:1rem}
  #feiern .lead{font-size:.95rem;margin-bottom:0}

/* ── #karten — the menu photograph was crushed to nothing ────────────────
   .section--karten keeps max-height:100svh at every width, and the phone rule
   puts the photograph in a minmax(90px,1fr) row below the cards: measured at
   390x844 the 1467x2200 photograph rendered at 105x158, and at 360x640 at
   60x90. Release the clamp and lead with the photograph instead — it is the
   establishing shot of the section, and the owner's complaint is precisely
   that the type buries the pictures. Height-capped, never cropped: the img
   keeps width:auto so its 0.6668 ratio is intrinsic.
   ────────────────────────────────────────────────────────────────────────── */
  .section--karten{max-height:none}
  /* flex:1 + min-height:0 is how the desktop spends a fixed one-screen budget.
     With the budget gone it only lets the grid shrink under its own content:
     measured, the last card ran 9px past the section's bottom padding. */
  .menus{flex:0 0 auto;min-height:0;grid-template-rows:auto auto}
  .menus__fig{order:0;min-height:0}
  .menus__fig img{max-height:min(38svh,320px);width:auto}
  /* with the vertical clamp gone there is room for the only affordance a
     touch screen has — nothing else says the row is a link */
  .card__open{display:inline-flex}
  /* and room for the dish to be a photograph rather than a stamp: 11svh gave
     70px at 360x640, below its own 76px floor */
  .card__dish{width:clamp(92px,15svh,128px)}

}

/* ── #galerie ─────────────────────────────────────────────────────────────
   style.css deals 3 columns below 680px. Measured tile widths: 101px at 360,
   111px at 390, 124px at 430 — a thumbnail of a thumbnail on the one section
   that is nothing but photographs. Two columns gives 156/171/190px instead,
   2.4x the area, at the cost of a taller wall (5307px against 2317px at 390).
   The switch is at 600px, not 680: three columns are already 181px wide by
   then, so 2 would only make them absurd (316px at 679).
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:599px){
  .grid{--gal-cols:2}
}