/* ---------- ≤1100: tighten ---------- */
@media (max-width: 1100px) {
  :root { --page-x: 40px; --page-y: 64px; }

  .hero-name .display-1 { font-size: 72px; }
  .hero-name .display-2 { font-size: 64px; }

  .om, .detail-main, .kontakt { gap: var(--s44); }
  .project-row { gap: var(--s34); }
}

/* ---------- ≤900: collapse ---------- */
@media (max-width: 900px) {
  :root { --page-x: 24px; --page-y: 56px; }

  .hero,
  .om,
  .detail-main,
  .kontakt,
  .galleri-bottom {
    grid-template-columns: 1fr;
  }

  /* Undo the desktop nav-to-footer viewport fill (pages.css .hero), same
     shape as the .kontakt revert below and for the same reason: with the
     two columns stacked into rows, a flex-grown section would force blank
     space into the shorter row instead of letting the page scroll
     naturally. The media band gets a fixed height back. */
  .hero { min-height: 0; flex: none; max-height: none; }
  .hero-media { min-height: 420px; }
  .hero-image { position: relative; height: 420px; }
  .hero-copy { padding: var(--s56) var(--page-x); }

  /* A4: undo the desktop viewport-fill from pages.css below 900px — on a
     phone a viewport-height portrait would push the actual contact details
     (email, phone, CV link) off screen, the opposite of what's wanted
     there, and the two columns are stacked into rows by the
     grid-template-columns: 1fr above, so a flex-grown `.kontakt` would
     otherwise force blank space into whichever row is shorter instead of
     just letting the section size to its own content like every other page
     section already does. `flex: none` drops the grow entirely (`main`
     staying a column flex context is harmless with one non-growing child —
     same effective layout as a plain block). Reverts .kontakt-portrait to
     the same plain 3:4 box every other `.photo-3-4` / `.placeholder-3-4`
     slot uses. */
  .kontakt {
    flex: none;
    max-height: none;
    /* The copy column carries the page padding at desktop; stacked, the
       section needs its own bottom padding so the image doesn't butt
       straight into the footer. */
    padding-bottom: 0;
  }
  /* Undo the desktop full-bleed treatment: .kontakt-media has no intrinsic
     height (its child is absolutely positioned), which is fine when it's a
     stretched grid column but collapses to zero once the grid is a single
     stacked column. Back to a plain 3:4 box in normal flow, like every
     other .photo-3-4 slot. */
  .kontakt-media { position: static; overflow: visible; }
  .kontakt-portrait {
    position: static;
    aspect-ratio: 3 / 4;
    height: auto;
    width: 100%;
  }

  .hero-name .display-1 { font-size: 48px; }
  .hero-name .display-2 { font-size: 44px; }

  .h1 { font-size: 34px; }
  .detail-title { font-size: 38px; }

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

  .om-main { max-width: none; }

  /* Nav becomes a panel */
  [data-nav] { flex-wrap: wrap; padding: var(--s14) var(--page-x); }

  /* layout.css's .wordmark-logo only pins `height`, leaving `width: auto`
     unconstrained — fine on desktop, where there's always room, but a wide
     (landscape) upload has nowhere to go here: [data-nav] is a wrapping
     flex row, so the shrink-to-fit + fixed-height combination distorts the
     image (browser squeezes width down to what's left without adjusting
     height to match, since height isn't `auto`) and still leaves no room
     for the 34px .nav-toggle, which wraps onto its own row — turning the
     usual one-row mobile nav into two and breaking the layout exactly as
     described in the brief. `max-height` (instead of a fixed `height`)
     plus `max-width` here let the browser pick whichever constraint is
     tighter while keeping `width`/`height` both `auto`, which is what
     preserves the intrinsic aspect ratio instead of stretching it; 50px
     reserves the toggle's 34px plus a little breathing room so the two
     stay on one line instead of wrapping. See tests/theme-config.spec.ts's
     "logo at 375px" describe block, which fixtures a deliberately wide
     landscape image specifically to exercise this. */
  .wordmark-logo {
    height: auto;
    max-height: var(--logo-height, 36px);
    max-width: calc(100vw - (var(--page-x) * 2) - 50px);
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Was a hardcoded 5px. Nearest scale step; the toggle is centred in a
       fixed 34px box regardless of the exact stack height. */
    gap: var(--s6);
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle-bar { display: block; height: 1px; width: 100%; background: var(--ink); }

  /* display: none genuinely removes the panel from the accessibility tree
     and the tab order (unlike visibility/opacity tricks), so closed means
     closed for assistive tech and keyboard users alike, not just visually. */
  .nav-panel {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s18);
    padding: var(--s22) 0 var(--s10);
  }
  .nav-panel.is-open { display: flex; }

  .nav-panel .nav-link { font-size: 16px; letter-spacing: 0.2em; }

  .lang-switch {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: var(--s16);
    width: 100%;
  }
}

/* ---------- ≤600: single column ---------- */
@media (max-width: 600px) {
  .hero-name .display-1 { font-size: 40px; }
  .hero-name .display-2 { font-size: 36px; }

  .h1 { font-size: 30px; }
  .detail-title { font-size: 32px; }

  .project-row { grid-template-columns: 1fr; gap: var(--s18); }
  .project-title { font-size: 26px; }

  .om-details { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }

  .galleri-head { flex-direction: column; align-items: flex-start; gap: var(--s14); }

  .kontakt-email { font-size: 26px; }
  .kontakt-phone { font-size: 22px; }

  .site-footer { flex-direction: column; gap: var(--s10); }

  .detail-hero, .detail-hero-image { height: 280px; }

  /* Lightbox controls stay reachable at 375px: full-size 44px controls plus
     var(--s70) side padding would eat most of the viewport, so both shrink
     and move in against the edge. */
  .lightbox { padding: var(--s56) var(--s14) var(--s14); }
  .lightbox-close,
  .lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  .lightbox-close { top: var(--s10); right: var(--s10); }
  .lightbox-prev { left: var(--s6); }
  .lightbox-next { right: var(--s6); }
  .lightbox-image { max-height: 64vh; }
}