/* Mobile reading layout - shared by every listing page and the root index.
   Loaded AFTER each page's own <style> block so it can override it.

   The problem it solves: these pages are read on a phone, because that is where
   a Messenger link opens. Every wide table was sitting in a horizontal scroller,
   so the column carrying the actual answer ("What we found", "Price") was off
   the right edge, and the only clue was a scrollbar the phone does not draw. The
   due-diligence table is the whole point of these pages and it was the worst one.

   A table too wide for the screen stops being a table and becomes one card per
   row: the row's first cell is the heading, its status chip sits beside it, and
   every other cell carries its column name as a label. Nothing scrolls sideways.

   mobile.js decides which tables get this, at runtime, from the real rendered
   width, and there is no breakpoint in that decision - see the note at the top
   of that file for why a single number could not do the job. A table that
   already fits is left alone, so the compact numeric ones stay compact. The
   1024px gate below is only a backstop: a laptop keeps its tables whatever the
   measurements say. With JS off nothing here applies and the pages behave as
   they did before any of this existed. */

@media (max-width: 1024px) {

  /* ---- the wrapper stops being a scroller; the cards carry their own edges -- */
  .m-stacked {
    overflow-x: visible !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  table[data-m="stack"] {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.1rem 0 0;
  }
  table[data-m="stack"] > thead { display: none; }
  table[data-m="stack"] > tbody { display: block; }

  table[data-m="stack"] > caption {
    display: block;
    text-align: left;
    margin-bottom: .55rem;
  }

  /* ---- a row becomes a card ------------------------------------------------
     The track count follows the CARD's width rather than the viewport's, so the
     same rule gives two fields across on a phone and four on an iPad, and a card
     nested inside a narrow column is measured as the narrow thing it is. */
  table[data-m="stack"] > tbody > tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .7rem .9rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 9px;
    padding: .9rem .95rem;
    margin-bottom: .55rem;
  }
  table[data-m="stack"] > tbody > tr:last-child { margin-bottom: 0; }

  table[data-m="stack"] > tbody > td,
  table[data-m="stack"] > tbody > tr > td {
    display: block;
    width: auto !important;
    max-width: none;
    padding: 0;
    border: 0;
    white-space: normal !important;
    vertical-align: baseline;
    min-width: 0;
    /* A figure was right-aligned because it sat in a column of figures. In a
       card there is no column, and the label would hang away from its value. */
    text-align: left !important;
  }

  /* ---- the heading cell, and the chip that belongs beside it ---------------- */
  table[data-m="stack"] td[data-role="lead"] {
    grid-column: 1 / -1;
    order: 1;
    font-family: var(--f-display);
    font-size: 1.1rem;
    line-height: 1.25;
    font-weight: 400;
    color: var(--ink);
  }
  table[data-m="stack"] tr[data-chip] td[data-role="lead"] { grid-column: 1 / -2; }
  table[data-m="stack"] td[data-role="chip"] {
    grid-column: -2 / -1;
    order: 2;
    justify-self: end;
    align-self: start;
  }

  /* ---- every other cell gets its column name above it ----------------------- */
  table[data-m="stack"] td[data-role="cell"] { order: 3; }
  /* On a wide card, prose left to run the full width would read at 80-odd
     characters a line. The pages already keep a measure for this. */
  table[data-m="stack"] td[data-wide] {
    grid-column: 1 / -1;
    max-width: var(--readw, 38rem);
  }

  table[data-m="stack"] td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: .18rem;
    font-weight: 400;
  }

  /* A cell the source left empty would otherwise render as a bare label. */
  table[data-m="stack"] td[data-empty] { display: none; }

  /* ---- group bands ("Bare rural tracts: ...") ------------------------------- */
  table[data-m="stack"] > tbody > tr[data-band] {
    display: block;
    background: var(--surface-2);
    border: 0;
    border-radius: 6px;
    padding: .5rem .75rem;
    margin: 1rem 0 .55rem;
  }
  table[data-m="stack"] > tbody > tr[data-band] td {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    background: none !important;
  }
  table[data-m="stack"] > tbody > tr[data-band]:first-child { margin-top: 0; }

  /* ---- rows the page marks as ours, or as the total ------------------------- */
  table[data-m="stack"] > tbody > tr.us,
  table[data-m="stack"] > tbody > tr.hi,
  table[data-m="stack"] > tbody > tr.total {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
  table[data-m="stack"] > tbody > tr.us td,
  table[data-m="stack"] > tbody > tr.hi td,
  table[data-m="stack"] > tbody > tr.total td { background: none !important; }
  table[data-m="stack"] > tbody > tr.sub { background: var(--surface-2); }

  /* A sub-label the source tucks inside a cell needs its own line here. */
  table[data-m="stack"] td .sub2,
  table[data-m="stack"] td .sub {
    display: block;
    margin-top: .2rem;
  }

  /* ---- narrow tables that only needed room to breathe ---------------------- */
  table[data-m="fit"] {
    min-width: 0 !important;
    width: 100%;
    table-layout: auto;
  }
  table[data-m="fit"] th,
  table[data-m="fit"] td {
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  table[data-m="fit"] td:first-child,
  table[data-m="fit"] th:first-child { padding-left: .7rem; }
  /* Hold the value column on one line so the browser sizes it to its longest
     figure and lets the label column take the rest. Left to wrap, a range like
     "$155,000 - $165,000" breaks around its dash and reads as three numbers. */
  table[data-m="fit"] td:last-child,
  table[data-m="fit"] th:last-child { padding-right: .7rem; }
  table[data-m="fit"][data-cols="2"] td:last-child,
  table[data-m="fit"][data-cols="2"] th:last-child { white-space: nowrap !important; }
  .m-fit { overflow-x: visible !important; }
}

/* Phone only. The gallery goes three-up at 760px by each page's own rule, and
   the sticky bar has room to breathe long before tablet width, so neither of
   these belongs in the block above. */
@media (max-width: 700px) {
  /* A plain 1fr track will not shrink below its content, so the two-up gallery
     pushed the page a few pixels wider than the screen on the smallest phones. */
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal figcaption { overflow-wrap: anywhere; }

  /* The sticky price bar the Thomson pages carry.
     It stays; it just stops taking an eighth of a phone screen with it. At 390px
     its label wrapped to three lines of 13px mono beside a full-size button. */
  .bar-in {
    gap: .55rem;
    padding-top: .45rem;
    padding-bottom: .45rem;
  }
  .bar-id {
    font-size: .68rem;
    line-height: 1.35;
    min-width: 0;
  }
  .bar .cta {
    font-size: .68rem;
    padding: .5rem .75rem;
    letter-spacing: .04em;
  }
}