/* Mobile layout.
 *
 * The design's layout lives in inline `style` attributes, which outrank any
 * stylesheet rule -- so the only way to make it responsive without rewriting
 * 3,300 style attributes (and losing the ability to re-import a newer export) is
 * to match on those inline values and override with !important. Every rule below
 * is therefore keyed to a specific pattern the design uses.
 *
 * That coupling is checked: tools/verify.py fails if any selector here stops
 * matching an element, so a future export cannot silently drop the mobile
 * layout. Add a rule here and it must match something, or the build is wrong.
 *
 * The header is not here -- it has its own markup and stylesheet, nav.css.
 */

/* ---- footer: four columns need 662px, and had ~350px ------------------- */

@media (max-width: 799px) {
  footer > div[style*="grid-template-columns: minmax(200px, 1.4fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 24px !important;
  }
  /* the brand block and its tagline read badly in a half-width column */
  footer > div[style*="grid-template-columns: minmax(200px, 1.4fr)"] > div:first-child {
    grid-column: 1 / -1 !important;
  }

  /* the export's 19px link rows are below any usable tap target; trade the
     flex gap for padding so the rows grow without the block growing as much */
  footer div[style*="gap: 11px"] {
    gap: 0 !important;
  }
  footer div[style*="gap: 11px"] > a,
  footer div[style*="gap: 11px"] > button {
    padding: 12px 0 !important;
    /* the column sets align-items: flex-start, which shrinks a short link like
       "Help" to 29px wide; stretch gives the whole row as the hit area */
    align-self: stretch !important;
  }
  #terms-panel {
    gap: 0 !important;
  }
  #terms-panel > a {
    padding: 11px 0 !important;
  }

  /* the bottom bar reads better stacked than as two cramped columns */
  footer > div[style*="border-top: 1px solid rgba(247,244,239,0.1)"] {
    gap: 6px !important;
  }
}

/* ---- heroes on narrow screens ---------------------------------------- */

/* The heroes are sized in vh and filled with `object-fit: cover`, so a fixed
   height forces the crop onto the width: at 744px the 2.22:1 photo on /move/
   lost about 70% of its frame and showed the dog's back with its head outside
   the viewport. Focal points only chose which slice survived.
 *
 * Below 1024px the hero is rebuilt instead of re-cropped: the photo goes back
 * into normal flow at its own aspect ratio, so its height follows the width and
 * the whole frame is always visible, and the copy moves into a dark panel
 * underneath it. The overlay gradient goes -- it exists to lift text off the
 * photo, and there is no longer text on the photo.
 *
 * The breakpoint is 1024px rather than a phone width because the crop depends
 * on window height as well: a 1000x900 window still lost about a third of the
 * frame. Above it, a typical desktop window crops only 3-4%, which is already
 * the full picture in practice.
 *
 * The trade-off is that these are wide photos (1.78:1 to 2.45:1), so on a phone
 * the band is short: about 176px tall at 390px wide on /move/. Full frame and
 * tall both need portrait-orientation crops, which these source photos cannot
 * provide. */

@media (max-width: 1023px) {
  section[style*="vh; display: flex; align-items: flex-end"] {
    min-height: 0 !important;
    display: block !important;
    background: #0E1113;
  }

  section[style*="vh; display: flex; align-items: flex-end"] > img {
    position: relative !important;
    height: auto !important;
    /* the box now matches the photo's own ratio, so nothing is cropped;
       `contain` keeps that true even if a height creeps back in */
    object-fit: contain !important;
  }

  section[style*="vh; display: flex; align-items: flex-end"] > div[style*="linear-gradient"] {
    display: none !important;
  }
}

/* ---- card grids: auto-fit tracks wider than a phone ------------------- */

/* The design uses repeat(auto-fit, minmax(210px..320px, 1fr)) and a few fixed
   repeat(auto-fit, 280px|300px) tracks. Below this width the track minimum
   exceeds the available space, so the grid overflows the viewport (and gets
   clipped by .page's overflow-x: hidden). One column, full width, instead. */
@media (max-width: 519px) {
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- flex cards with a fixed, unshrinkable basis ---------------------- */

/* flex: 0 0 260px cannot shrink; it fits a 390px phone but not a 320px one,
   and either way it leaves the row half empty. */
@media (max-width: 519px) {
  [style*="flex: 0 0 260px"],
  [style*="flex: 0 0 268px"],
  [style*="flex: 0 1 300px"],
  [style*="flex: 0 1 280px"] {
    flex: 1 1 100% !important;
  }
}

/* ---- desktop layout corrections (review feedback) --------------------- */

/* The "what you can do" grid on /business/ holds 7 cards. With fixed 300px
   tracks that lands as 3 + 3 + 1, leaving one card stranded on its own row.
   Four columns gives the intended 4 + 3. Scoped to that page: the same grid
   signature on /safety/ holds 6 cards, which reads correctly as 3 + 3. */
@media (min-width: 1180px) {
  body.business [style*="grid-template-columns: repeat(auto-fit, 300px)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* "Somewhere to eat? Booma." puts a bullet list beside a heading and two
   paragraphs. `align-items: start` lines the first bullet up with the heading,
   which reads as though the list is a continuation of it; centring the list
   against the taller text column reads as a pair. */
@media (min-width: 720px) {
  [style*="minmax(300px, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start"] {
    align-items: center !important;
  }
}