/* SINTS — patch 2026-10-27
   1) Mobile table stacking: tables marked data-stack turn into one card per
      record below 640px. Desktop rendering is untouched.
   2) Single-video feature block (vertical 9:16 with caption).
*/

/* ---------- 1. Mobile table stacking ---------- */

@media (max-width: 640px) {
  /* scroll containers must release the card instead of clipping it */
  .engineering-table-wrap[data-stack] {
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  table[data-stack] {
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
    margin: 20px 0 0;
  }

  table[data-stack] caption {
    display: block;
    padding: 0 0 12px;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  table[data-stack] thead {
    display: none;
  }

  table[data-stack] tbody {
    display: block;
  }

  table[data-stack] tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
  }

  table[data-stack] th,
  table[data-stack] td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    text-align: left;
    vertical-align: top;
  }

  /* first cell of each row becomes the card heading */
  table[data-stack] tr > *:first-child {
    background: var(--bg-2);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.93rem;
    letter-spacing: 0;
    text-transform: none;
  }

  table[data-stack] tr > *:first-child::before {
    content: none;
  }

  table[data-stack] tr > *:last-child {
    border-bottom: none;
  }

  table[data-stack] tbody tr:nth-child(even) {
    background: var(--bg-card);
  }

  /* field labels come from the header row via data-label */
  table[data-stack] td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- 2. Single-video feature ---------- */

.video-feature{margin:34px auto 0;max-width:340px}
.video-feature video{width:100%;aspect-ratio:9/16;border-radius:var(--r-lg);background:var(--navy);object-fit:contain;display:block;border:1px solid var(--border);box-shadow:var(--shadow)}
.video-feature .video-cap{text-align:center;color:var(--muted);font-size:.88rem;margin-top:14px;line-height:1.55}
.video-feature .video-cap strong{display:block;color:var(--ink);font-size:.92rem;margin-bottom:3px}