/* LCDC mobile design-correction pass (single source of truth).
 *
 * Loaded last in <head> on every page, after each page's inline <style>,
 * so these rules are authoritative by cascade without duplicating them
 * across 44 files. Every selector here is scoped to classes/IDs that only
 * exist on the specific page(s) each rule targets — inert everywhere else.
 *
 * Sections:
 *   1. Burger drawer — safe viewport height + safe-area on real iPhones
 *   2. Homepage — show only 3 of 6 Experiences cards on mobile
 *   3. Journal article footer — single large "Next article" card on mobile
 *   3b. Journal hub — consistent tall editorial card media
 *   4. Journal in-article media — stop forcing portrait photos into a
 *      landscape box; give full-bleed panoramic breaks real height
 *
 * The "editorial mobile type scale" (larger H1/H2/card-title/body font
 * sizes) that previously lived here as section 5 was reverted at the
 * client's request — mobile text sizing is back to its pre-enlargement
 * values (the same sizes each page's own inline <style> already sets;
 * this file no longer overrides them). Only the structural/layout fixes
 * below remain.
 */

/* ── 1. Burger drawer: real-viewport height + safe-area ───────────────── */
@media (max-width: 900px) {
  #burger-menu {
    bottom: auto;
    height: 100vh;   /* fallback */
    height: 100dvh;  /* live viewport — accounts for Safari's collapsing toolbar */
  }
  .burger-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .burger-close {
    margin-top: env(safe-area-inset-top);
  }
}

/* ── 2. Homepage: only the first 3 Experiences cards on mobile ────────── */
@media (max-width: 900px) {
  #concierge .exp-card:nth-child(n+4) {
    display: none;
  }
}

/* ── 3. Journal article-nav: next-only, larger, on mobile ──────────────── */
@media (max-width: 900px) {
  .article-nav {
    display: block;
    margin-bottom: 60px;
  }
  .article-nav-card:first-child {
    display: none;
  }
  .article-nav-card:last-child {
    aspect-ratio: 3/4;
  }
  .article-nav-card:last-child .article-nav-title {
    max-width: 320px;
  }
}

/* ── 3b. Journal hub: consistent tall editorial card media ─────────────
   The lead/featured card (.journal-hero-img) uses a 16:9 ratio — correct
   for its wide desktop treatment, but on mobile it reads as a short,
   compressed banner next to the grid cards' tall 2:3 portrait frame
   (.article-card-img-wrap), which already looks properly editorial.
   Matching the lead card to that same 2:3 frame on mobile makes every
   Journal hub card read at the same confident scale regardless of
   whether its source photo is landscape or portrait — the landscape
   source is cropped (object-fit:cover, default center position, which
   keeps the subject in frame for the current photos), not distorted.
   Card titles keep each page's original font size — only the image
   frame is unified here, not the type. */
@media (max-width: 600px) {
  .journal-hero-img {
    aspect-ratio: 2 / 3;
  }
}

/* ── 4. Journal in-article media: preserve/enlarge, don't force-crop ──── */
@media (max-width: 900px) {
  /* Portrait "destination" photography — some article templates force a
     4:3 landscape box on mobile via their own inline override; restore
     the taller ratio already used on desktop so the source composition
     (often a person/place shot meant to read tall) isn't cropped. */
  .destination-img img {
    aspect-ratio: 512 / 658;
  }
  /* Full-bleed panoramic image breaks: a fixed 16:6 box reads as a thin
     banner once squeezed to phone width. height:auto lets each image's
     own true proportions set its height instead of a hard crop, so every
     article photo keeps its real composition. */
  .article-img-full img {
    height: auto;
    aspect-ratio: auto;
  }
}
