/* ===========================================================================
   goFLY — Responsive table stacking            v1 · 18 Oct 2026
   ---------------------------------------------------------------------------
   Scope: ONLY tables carrying data-gfstack, added by the 18 Oct fragment
   patch. Theme tables, plugin tables and the 176 visa tables that already
   had their own data-label CSS are untouched.

   data-gfstack="grid"  3+ column tables. Each cell stacks and prints its
                        column heading from data-label.
   data-gfstack="kv"    2-column field/value tables. First cell becomes the
                        field heading, second the value. No data-label — the
                        first cell IS the label, so printing a column name
                        ("Details") above it would only add noise.

   Desktop is unchanged: everything below sits inside a 640px media query.
   =========================================================================== */

@media (max-width: 640px) {

  table[data-gfstack] {
    display: block;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0 0 18px;
    font-family: 'Hind Siliguri', system-ui, sans-serif;
  }

  /* Heading row stays for screen readers, leaves the visual flow. */
  table[data-gfstack] thead {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  table[data-gfstack] tbody,
  table[data-gfstack] tr,
  table[data-gfstack] td {
    display: block;
    width: auto;
    max-width: 100%;
  }

  /* One row = one card. */
  table[data-gfstack] tr {
    border: 1px solid #d7e3dd;
    border-radius: 10px;
    background: #fff;
    margin: 0 0 10px;
    padding: 2px 0;
    overflow: hidden;
  }
  table[data-gfstack] tr:last-child { margin-bottom: 0; }

  table[data-gfstack] td {
    border: 0;
    border-bottom: 1px solid #eef3f0;
    padding: 9px 14px;
    text-align: left;
    font-size: 14px;
    line-height: 1.55;
    color: #2d3748;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table[data-gfstack] td:last-child { border-bottom: 0; }

  /* --- grid tables: print the column heading above each value --- */
  table[data-gfstack="grid"] td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: #047857;
  }

  /* --- kv tables: first cell is the field name --- */
  table[data-gfstack="kv"] td:first-child {
    font-weight: 700;
    font-size: 12px;
    color: #047857;
    padding-bottom: 2px;
    border-bottom: 0;
    background: transparent;
  }
  table[data-gfstack="kv"] td:first-child strong { font-weight: 700; }
  table[data-gfstack="kv"] td:last-child { padding-top: 0; }

  /* An ancestor scroll wrapper has nothing left to scroll. */
  table[data-gfstack] { overflow-x: visible; }

  /* Long values inside cells (links, emails, routes) must not push out. */
  table[data-gfstack] td a,
  table[data-gfstack] td code { word-break: break-all; overflow-wrap: anywhere; }

  table[data-gfstack] td:empty { display: none; }
}

/* Tablet: 3+ column tables keep their columns but stop overflowing. */
@media (min-width: 641px) and (max-width: 900px) {
  table[data-gfstack="grid"] { font-size: 13px; }
  table[data-gfstack="grid"] td,
  table[data-gfstack="grid"] th { padding: 8px 9px; word-break: break-word; }
}