/* ==========================================================================
   MUSAFIR CAFE — responsive.css
   The four breakpoints, mobile-first: 480 / 768 / 1024 / 1440. No others.
   Loaded LAST, so these rules win on equal specificity without needing
   !important — and nothing here uses one.
   --------------------------------------------------------------------------

   grid-template-areas: style.css declares NONE — grepped, and its own file
   header says so. There is nothing to reset, and the Swarnika bug (desktop
   stuck stacked because the mobile areas were never cleared) cannot happen
   here. Every multi-column layout below is a plain grid-template-columns
   override.

   SPECIFICITY, AND WHY THE NAV RULES LOOK HEAVIER THAN THEY NEED TO
   style.css collapses the mobile menu with `.is-js .nav-panel` and
   `.is-js .nav-toggle` — two classes, (0,2,0). Loading later does NOT beat
   that with a bare `.nav-panel` (0,1,0), so the desktop rules below carry
   the `.is-js` prefix too. Without it the panel stays absolutely positioned
   and hidden at 1440px and the site has no navigation. This is the single
   easiest thing to get wrong in this file.

   THE FIVE JOBS style.css HANDED OVER — all five done, at 768 unless noted:
     1. .is-js .nav-panel back into flow, .is-js .nav-toggle hidden  → §2
     2. the mobile `order` values on .brand / .status-chip / .nav-panel
        reset so the chip sits inline                                → §2
     3. .brand-meta revealed                                         → §2
     4. .mobile-bar hidden AND body{padding-bottom} zeroed           → §2
     5. column counts for .grid, .board, .milestone-list,
        .room-split, .walk-strip, .visit-block, plus --gutter growth → §1-§4

   THE HERO, WHICH GETS THE MOST ATTENTION HERE
     At 360px a 3-column x 2-row mullion cuts the valley into six ~110px
     slivers and the view stops reading as a view. The small-screen frame is
     a 2 x 2 — one vertical bar, one horizontal — and style.css's full 3 x 2
     is restored at 768, where each pane is wide enough to hold a landscape.
     The sill keeps its single stacked column at every width.

   HORIZONTAL OVERFLOW — checked at 360 / 480 / 768 / 1024 / 1440
     * .walk-strip is full-bleed: the page agent puts it OUTSIDE .container
       on purpose, and style.css gives it no inline padding, so without §0(c)
       the photographs run into the screen edge. It gets padding-inline plus
       a matching scroll-padding-inline, both following --gutter, so a
       snapped photograph stops level with the section's text above it.
     * .nav already wraps in style.css and .brand-meta is already held back
       on mobile, so the 360px masthead is clear.
     * .mobile-bar already stacks each label over its value in style.css.
   ========================================================================== */


/* ==========================================================================
   0. BASE CORRECTIONS — the only rules here outside a media query
   --------------------------------------------------------------------------
   Mobile-first means the SMALL-screen state is the base and a min-width
   query restores the larger one. The three below are the small-screen state
   of something style.css ships in its large-screen form, so they cannot be
   written as a min-width query: there is no width at which they begin.

   They are fenced here, and listed in the hand-off notes, so they can be
   lifted into style.css's component blocks. None of them introduces a
   colour, a font or a new component.
   ========================================================================== */

/* (a) The hero element carries BOTH .hero and .window-seat (home.php:92), so
       the inner-page header padding and bottom rule from .hero land on the
       window — pushing the sill up off the bottom edge while .ws-view and
       .ws-mullion, which are inset:0, keep painting behind the gap. The
       window seat sits flush, at every width. */
.window-seat.hero {
  padding-block: 0;
  border-bottom: 0;
}

/* (b) The mullion at small sizes: 2 x 2, not 3 x 2. One vertical bar down
       the middle, one horizontal bar, so every pane still shows a piece of
       landscape big enough to read as one. Same technique as style.css —
       gradients on the single .ws-mullion element — so the bars cannot drift
       out of register with the photograph moving behind them. The full 3 x 2
       returns at 768. */
.ws-mullion {
  background-image:
    linear-gradient(to right,  var(--color-ink) 0 100%),
    linear-gradient(to bottom, var(--color-ink) 0 100%);
  background-size:
    var(--ws-bar) 100%,
    100% var(--ws-bar);
  background-position:
    50% 0,
    0 56%;
}

/* (c) The full-bleed walk strip needs its own gutter — it sits outside
       .container by design, and style.css gives it none. scroll-padding
       matches it so a snapped photograph lands on the gutter rather than
       under the screen edge. Both follow --gutter and so grow at every
       breakpoint below. */
.walk-strip {
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}

/* (d) The sill's two actions go full width below 480 rather than relying on
       the labels staying short. Natural width returns in §1. */
.window-seat .hero-actions .btn {
  flex: 1 1 100%;
}


/* ==========================================================================
   1. 480px and up — large mobile
   ========================================================================== */

@media (min-width: 480px) {

  /* auto-fit rather than a fixed count: the same .grid carries three
     counters on the home page, four columns in the footer and six
     stone-and-note pairs in the distances section, and none of them should
     have to know about the others. */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .board {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .milestone-list {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  /* More than one photograph on screen, so the strip reads as a strip. */
  .walk-strip {
    grid-auto-columns: 56%;
  }

  .window-seat .hero-actions .btn {
    flex: 0 1 auto;
  }
}


/* ==========================================================================
   2. 768px and up — tablet
      The big one: the menu becomes a real navigation, the sticky bar goes
      away, and the window gets its full frame back.
   ========================================================================== */

@media (min-width: 768px) {

  :root {
    --gutter: 2.5rem;
  }

  /* --- JOBS 1-3: the navigation ---------------------------------------- */

  /* Hiding the toggle is also what tells main.js it is on desktop — the
     script tests `toggle.offsetParent !== null`, so display:none here is
     what stops it trapping focus and managing inert. */
  .is-js .nav-toggle {
    display: none;
  }

  /* Out of the absolute overlay and back into the header row. Every
     property style.css set for the collapsed mobile panel is undone by
     name, or a leftover (max-height, the borders, the overlay background)
     shows up as a stray band across the desktop masthead. */
  .is-js .nav-panel {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
  }

  /* Applies to the no-JS panel as well, which is in flow but full width. */
  .nav-panel {
    order: 0;
    flex: 0 1 auto;
    border-top: 0;
    padding-block: 0;
  }

  /* Source order returns: wordmark, status chip, links. */
  .brand {
    order: 0;
    flex: 0 1 auto;
  }

  .nav .status-chip {
    order: 0;
    flex: 0 1 auto;
  }

  .brand-meta {
    display: block;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
  }

  .nav-link {
    padding: .35rem 0;
    border-bottom: 0;
  }

  .nav-list .btn {
    margin-top: 0;
    width: auto;
  }

  /* --- JOB 4: the sticky bar is a phone control only -------------------- */

  .mobile-bar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }

  /* --- JOB 5: column counts -------------------------------------------- */

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .board {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .milestone-list {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .room-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .visit-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .walk-strip {
    grid-auto-columns: 38%;
  }

  /* --- the window gets its full frame ----------------------------------- */

  /* Restores style.css's 3-column x 2-row mullion: two vertical bars on the
     thirds, one horizontal across the middle. */
  .ws-mullion {
    background-image:
      linear-gradient(to right,  var(--color-ink) 0 100%),
      linear-gradient(to right,  var(--color-ink) 0 100%),
      linear-gradient(to bottom, var(--color-ink) 0 100%);
    background-size:
      var(--ws-bar) 100%,
      var(--ws-bar) 100%,
      100% var(--ws-bar);
    background-position:
      33.333% 0,
      66.666% 0,
      0 50%;
  }

  .ws-sill {
    padding-block: var(--space-lg);
  }
}


/* ==========================================================================
   3. 1024px and up — desktop
   ========================================================================== */

@media (min-width: 1024px) {

  :root {
    --gutter: 3.5rem;
  }

  /* Three counters across, three board items across, and the footer's four
     columns once there is room for them. */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .board {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .milestone-list {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  /* The map earns the wider half. */
  .visit-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }

  .visit-block iframe,
  .visit-block img {
    min-height: 22rem;
  }

  .walk-strip {
    grid-auto-columns: 30%;
  }

  /* The copy stops growing before the sill turns into a wall of text; the
     headline keeps its own 18ch limit from style.css. */
  .window-seat .hero-copy {
    max-width: 52ch;
  }
}


/* ==========================================================================
   4. 1440px and up — large desktop
      .container tops out at 1280px, so past this width only the gutter and
      the strip keep changing.
   ========================================================================== */

@media (min-width: 1440px) {

  :root {
    --gutter: 4.5rem;
  }

  .walk-strip {
    grid-auto-columns: 26%;
  }
}