/* =====================================================================
   PINDI BOYS — price tables on a phone
   Applied by scripts/responsive-tables.py; see that file for the audit.

   THE PROBLEM
   A price table with four or five columns cannot fit a 360px screen. The
   site wrapped each one in a card with overflow-x:auto, so the columns
   that did not fit were reachable only by swiping sideways inside the
   card — and almost nobody does. On /lease-to-own-dubai the column that
   fell off the edge was the cheapest tier, the one the page title
   advertises. Worse, once the header row scrolls off the top, the figures
   that remain are unlabelled numbers: AED 8,700 with nothing saying
   whether that is a day, a month or a deposit.

   THE FIX
   Below 700px each row becomes its own card: the first cell is the
   heading and every other cell is a labelled line, so no reading depends
   on a header row that has scrolled away. Labels come from data-label
   through ::before. That matters — assets/js/currency.js converts prices
   by replacing their TEXT NODES, and a pseudo-element is not a text node,
   so the AED/USD toggle keeps every price it wrapped.

   The <thead> stays in the DOM, moved off-screen, so screen readers and
   the structured data keep the table they had. No table is removed.

   WHY !important
   The generated markup carries inline style attributes on <tr> and <td>
   (padding, white-space, text-align). An inline style cannot be beaten by
   a stylesheet without it. Every use here is inside the phone-width media
   query and scoped to .rtable, so desktop is untouched. The same pattern
   is already used throughout mobile-app.css.
   ===================================================================== */

@media (max-width: 699px) {

  .rtable,
  .rtable thead,
  .rtable tbody,
  .rtable tr,
  .rtable td { display: block; }

  /* Some of these tables carry an inline min-width to keep their columns
     legible while you swipe the wrapper sideways. Stacked, that min-width
     is the one thing still forcing the row wider than the screen. */
  .rtable { min-width: 0 !important; width: 100% !important; }

  /* Off-screen, not display:none — the headers still name the columns for
     assistive tech and stay in the document for the table semantics.
     .rt-headrow is the same thing for the four blog tables that use a
     leading row of <th> instead of a <thead>. */
  .rtable thead,
  .rtable tr.rt-headrow {
    position: absolute; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
  }

  .rtable tbody tr {
    border: 1px solid var(--glass-brd) !important;
    border-radius: var(--radius-sm);
    background: var(--glass);
    margin: 0 0 12px !important;
    padding: 14px 16px !important;
  }
  .rtable tbody tr:last-child { margin-bottom: 0 !important; }

  /* The cell stays a block and the label floats beside it, rather than the
     cell becoming a flex or grid container. Those blockify every child, and
     these cells hold inline content: <b>, <span class="muted">/day</span>,
     and the <span> currency.js wraps around each price. Flex turned
     "AED 1 admin per crossing" into "AED 1admin per crossing" by dropping
     the space between two of its items. A float leaves inline flow alone. */
  .rtable tbody td {
    display: block;
    text-align: end;   /* figures line up down the right edge of the card */
    padding: 8px 0 !important;
    /* Only the separator above each field survives: a stacked cell has no
       column left or right of it for a vertical rule to divide. */
    border: 0 !important;
    border-top: 1px solid var(--glass-brd) !important;
    /* Several of these cells are nowrap in the markup, which is right while
       the table scrolls sideways and wrong once it does not: a sentence
       under a Notes heading then pushes the card off the screen. */
    white-space: normal !important;
    overflow-wrap: break-word;
  }
  .rtable tbody td::after { content: ""; display: block; clear: both; }

  .rtable tbody td::before {
    content: attr(data-label);
    float: inline-start;
    max-width: 46%;   /* a wordy heading must not starve the figure beside it */
    padding-inline-end: 14px;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
    opacity: .85;
    text-align: start;
  }

  /* A column with no heading of its own — usually the Book button — gets no
     label, and its button takes the full width of the card instead. */
  .rtable tbody td[data-label=""]::before { content: none; }
  .rtable tbody td[data-label=""] > .btn { display: flex; justify-content: center; }

  /* Tables of sentences rather than figures: the label takes its own line
     and the text below it reads left to right in full width. Marked by
     responsive-tables.py, which can measure the cell text; CSS cannot. */
  .rtable-prose tbody td { text-align: start; }
  .rtable-prose tbody td::before {
    float: none;
    display: block;
    max-width: none;
    padding: 0 0 2px;
    line-height: 1.5;
  }

  /* First cell is the card's title: the car, the route, the charge. */
  .rtable tbody td:first-child {
    display: block;
    padding: 0 0 10px !important;
    border: 0 !important;
    text-align: start !important;
    white-space: normal !important;
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink) !important;
  }
  .rtable tbody td:first-child::before { content: none; }

  /* The wrapper is a card too, and a card full of cards reads as noise.
     Its overflow-x:auto is left alone: nothing overflows once the rows
     are stacked, so it never shows a scrollbar. */
  .card:has(> .rtable) {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .card:has(> .rtable)::after { display: none; }
  .card:has(> .rtable):hover { transform: none; }

  /* Two key-value tables — the press kit and the deposit-wording box — are
     label/value pairs rather than columns. Their values are long (an
     address, a licence number, a sentence) and their label column is
     nowrap, so at 320px they overflowed with nothing to scroll. Stacked,
     the label sits above its value and there is nothing left to cut off. */
  .rtable-kv,
  .rtable-kv thead,
  .rtable-kv tbody,
  .rtable-kv tr,
  .rtable-kv th,
  .rtable-kv td { display: block; }

  .rtable-kv tr {
    border-bottom: 1px solid var(--glass-brd) !important;
    padding: 10px 0 !important;
  }
  .rtable-kv tr:last-child { border-bottom: 0 !important; }

  .rtable-kv th,
  .rtable-kv td:first-child {
    white-space: normal !important;
    padding: 0 0 3px !important;
    text-align: start !important;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .rtable-kv td {
    white-space: normal !important;
    padding: 0 !important;
    overflow-wrap: anywhere;   /* an address or a URL must break, not overflow */
  }
}