/* ============================================================
   i4money table contract — 2026-04-10
   Scope: .i4-checklist only
   Touch nothing else. Add new table classes here, never in post.css.
   ============================================================ */

/* ── Desktop: 4-column table ─────────────────────────────── */
.l-post-content table.i4-checklist {
  table-layout: auto !important;
  width: 100% !important;
  border-collapse: collapse !important;
  display: table !important;
}

.l-post-content table.i4-checklist thead th {
  color: var(--titles-color) !important;
  background: var(--table-background-color-odd) !important;
  font-weight: 700 !important;
  text-align: left !important;
  white-space: nowrap !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--table-head-border-bottom) !important;
}

.l-post-content table.i4-checklist tbody td {
  text-align: left !important;
  color: var(--titles-color) !important;
  padding: 10px 12px !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--table-head-border-bottom) !important;
}

.l-post-content table.i4-checklist tbody td:nth-child(1) {
  font-weight: 600 !important;
  min-width: 180px !important;
}

.l-post-content table.i4-checklist tbody td:nth-child(1) strong {
  color: var(--titles-color) !important;
}

.l-post-content table.i4-checklist tbody td:nth-child(2),
.l-post-content table.i4-checklist tbody td:nth-child(3) {
  white-space: nowrap !important;
  min-width: 90px !important;
}

/* ── Mobile ≤640px: stacked cards ───────────────────────── */
@media (max-width: 640px) {

  .l-post-content table.i4-checklist,
  .l-post-content table.i4-checklist thead,
  .l-post-content table.i4-checklist tbody,
  .l-post-content table.i4-checklist tr {
    display: block !important;
    width: 100% !important;
  }

  /* Hide desktop headers on mobile */
  .l-post-content table.i4-checklist thead {
    display: none !important;
  }

  /* Each row = a card */
  .l-post-content table.i4-checklist tbody tr {
    margin-bottom: 16px !important;
    border: 1px solid var(--table-head-border-bottom) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    background: var(--table-background-color-odd) !important;
  }

  /* Hide all td by default, show via pseudo-labels */
  .l-post-content table.i4-checklist tbody td {
    display: block !important;
    border: none !important;
    padding: 4px 0 !important;
    white-space: normal !important;
  }

  /* Question — col 1: full width, bold */
  .l-post-content table.i4-checklist tbody td:nth-child(1) {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--titles-color) !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--table-head-border-bottom) !important;
  }

  /* Yes → and No → side by side */
  .l-post-content table.i4-checklist tbody td:nth-child(2),
  .l-post-content table.i4-checklist tbody td:nth-child(3) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 16px !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
  }

  .l-post-content table.i4-checklist tbody td:nth-child(2)::before {
    content: "Yes → " !important;
    font-weight: 600 !important;
    opacity: 0.6 !important;
  }

  .l-post-content table.i4-checklist tbody td:nth-child(3)::before {
    content: "No → " !important;
    font-weight: 600 !important;
    opacity: 0.6 !important;
  }

  /* Why it matters — col 4: full width, lighter */
  .l-post-content table.i4-checklist tbody td:nth-child(4) {
    display: block !important;
    font-size: 0.875rem !important;
    opacity: 0.75 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--table-head-border-bottom) !important;
  }
}