/* ==========================================================================
   Mobile mode — site-wide. Mirrors the behaviour of Selected Works Index:
   one hard switch at 720px, no tablet tier.

   Base layout stays inline on the elements (paints immediately); this sheet
   only carries the breakpoint overrides, which cannot be expressed inline.
   Markers are added in the markup as data-m="..." (space-separated tokens):

     pad    top-level section/header gutters + reduced vertical rhythm
     stack  side-by-side text grid -> single column
     one    figure band -> 1-up full width
     two    small-detail figure band -> 2-up
     row    tabular link row (project index / next project) -> stacked
     auto   child with an explicit grid-column -> full width
     hide   desktop/hover-only affordance -> removed
   ========================================================================== */

@media (max-width: 720px) {

  /* --- gutters + vertical rhythm ---------------------------------------- */
  [data-m~="pad"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  header[data-m~="pad"] { padding-top: 112px !important; }
  section[data-m~="pad"], main[data-m~="pad"] { padding-top: 72px !important; }

  /* --- grids ------------------------------------------------------------ */
  [data-m~="stack"] {
    grid-template-columns: 1fr !important;
    row-gap: 26px !important;
  }
  [data-m~="one"] {
    grid-template-columns: 1fr !important;
    row-gap: 56px !important;
  }
  [data-m~="two"] {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 14px !important;
    row-gap: 40px !important;
  }
  [data-m~="auto"] {
    grid-column: auto !important;
    padding-top: 0 !important;
  }

  /* tabular rows: title stacked over its meta, full-width tap target */
  [data-m~="row"] {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }
  a[data-m~="row"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  [data-m~="row"] [style*="text-align: right"] { text-align: left !important; }

  /* resource cards: stacked, roomier than a tabular row */
  [data-m~="card"] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  [data-m~="card"] [style*="height: 380px"] { height: 240px !important; }

  [data-m~="hide"] { display: none !important; }

  /* --- type: one notch down, denser editorial --------------------------- */
  [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size: 18px"] { font-size: 16px !important; }
  [style*="font-size: 17px"] { font-size: 16px !important; }
  [style*="font-size: 16px"] { font-size: 15px !important; }
  [style*="font-size: 15px"] { font-size: 14px !important; }
  [style*="font-size: 14px"] { font-size: 13px !important; }
  [style*="font-size: 13px"] { font-size: 12.5px !important; }
  [style*="font-size: 12px"] { font-size: 11px !important; }
  [style*="font-size: 11px"] { font-size: 10.5px !important; }

  /* wide meta labels collapse so key/value pairs don't wrap awkwardly */
  [data-m~="stack"] [style*="width: 72px"] { width: 62px !important; }
}