/* responsive-tables.css
 * Mobile card-stack pattern for wide comparison tables (≤768px).
 * Apply by adding class="responsive-stack" to the <table> and
 * data-label="Column header" to each tbody <td>. First column may
 * be tagged class="first-col" to render as a card header on mobile.
 *
 * Desktop layout (>768px) is untouched.
 */

@media (max-width: 768px) {
  /* Hide the original <thead> off-screen but keep it accessible to AT */
  table.responsive-stack thead {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Break the table grid: each row becomes a card */
  table.responsive-stack,
  table.responsive-stack tbody,
  table.responsive-stack tr,
  table.responsive-stack td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  table.responsive-stack {
    border-collapse: separate;
    border-spacing: 0;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }

  table.responsive-stack tr {
    margin: 0 0 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    overflow: hidden;
  }

  table.responsive-stack td {
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: left !important;
    color: #1e293b !important;
    background: transparent !important;
    width: auto !important;
    min-width: 0 !important;
    font-weight: 400 !important;
  }

  table.responsive-stack td:last-child {
    border-bottom: none !important;
  }

  /* Label prefix from data-label attribute */
  table.responsive-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #00a5a0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
    line-height: 1.3;
  }

  /* The first column is the row's "label" (dimension/feature/programme name).
   * Render it as a dark card header so the card is clearly delimited. */
  table.responsive-stack td.first-col {
    background: linear-gradient(135deg, #0a1929, #1e293b) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    margin: -12px -14px 8px !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none !important;
    font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700 !important;
    font-size: 0.95rem;
    line-height: 1.35;
  }

  table.responsive-stack td.first-col::before,
  table.responsive-stack td.first-col[data-label]::before {
    display: none;
  }

  /* Make sure any nested strong/links inside first-col read on dark bg */
  table.responsive-stack td.first-col strong,
  table.responsive-stack td.first-col a {
    color: #fff !important;
  }

  /* For tables whose first column is already a <th> (key/value rows), give
   * it the same dark-header treatment as .first-col */
  table.responsive-stack tbody th {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, #0a1929, #1e293b) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    margin: -12px -14px 8px !important;
    border-radius: 10px 10px 0 0 !important;
    text-align: left !important;
    font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    font-weight: 700 !important;
    font-size: 0.95rem;
  }

  /* Strip wrappers that force horizontal scroll on the parent */
  .cs-matrix.responsive-stack-wrapper,
  .comparison-table-wrapper.responsive-stack-wrapper {
    overflow-x: visible !important;
  }

  /* Neutralise the .cs-matrix container styling on mobile so cards aren't
   * boxed inside a second border */
  .cs-matrix:has(table.responsive-stack) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
}