/* -----------------------------------------------------------------------------
   mod-compare — the "which one is right for you" comparison table.

   A REAL <table>, on purpose. Zero tables exist anywhere on the live site or
   in the whole 150-practice field survey, and comparison tables are one of
   the strongest AI-citation surfaces a page can carry (GEO-ANALYSIS.md).
   Parsers only get that signal from genuine table semantics — so the markup
   is table/thead/th/td with role attributes, and the mobile reflow keeps
   those roles intact while the display switches to stacked cards.

   Desktop: card-white table, hairline borders, serif therapy names in the
   first column, uppercase label column heads. Mobile (≤1000px, the same
   break every multi-column module uses): each row becomes a bordered card;
   the column headers re-appear per-cell via td::before reading data-label
   (which is why every td must carry data-label — the header row is clipped
   visually but kept for screen readers).

   Hovers, as everywhere: colour only. Nothing lifts, scales or tilts.
   -------------------------------------------------------------------------- */

.b-compare__inner {
  max-width: var(--container);
}

.b-compare__head {
  max-width: var(--measure);
  margin-bottom: var(--sp-10);
}

.b-compare__eyebrow {
  display: block;
  margin-bottom: var(--sp-4);
}

.b-compare__h {
  margin-bottom: var(--sp-5);
}

.b-compare__lede {
  color: var(--soft);
}

/* --- the table ------------------------------------------------------------ */

.b-compare__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
}

.b-compare__table caption {
  text-align: left;
}

.b-compare__table thead th {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--soft);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

/* The therapy cell is a genuine row header — <th scope="row"> — so screen
   readers announce the therapy with every cell. It takes data-cell styling,
   not column-head styling. */
.b-compare__table tbody th,
.b-compare__table td {
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  vertical-align: top;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.b-compare__table tbody tr:last-child th,
.b-compare__table tbody tr:last-child td {
  border-bottom: 0;
}

/* The therapy column: serif name, linked. The link is navigation, so it
   meets the 44px floor like every other bare content link. */
.b-compare__therapy {
  min-width: 180px;
}

/* Column direction: a therapy can carry a small clarifying note under its
   name (Tapping's "Emotional Freedom Techniques") — as a flex item it must
   stack below the name, not sit beside it. */
.b-compare__therapy a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-block-size: var(--tap-min);
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-weight: var(--w-title);
  line-height: var(--lh-display-m);
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-hover) var(--ease-out);
}

.b-compare__therapy a:hover {
  color: var(--accent);
}

.b-compare__note {
  display: block;
  margin-top: var(--sp-2);
  color: var(--soft);
}

/* --- copy slots ----------------------------------------------------------- */

.b-compare .s-slot {
  color: var(--soft);
  text-decoration: underline dashed var(--line);
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* --- stacked (≤1000px) ----------------------------------------------------
   Rows become cards. Roles stay on the elements, so the display switch does
   not strip the table semantics screen readers navigate by. */

@media (max-width: 1000px) {
  .b-compare__table,
  .b-compare__table tbody,
  .b-compare__table tr,
  .b-compare__table th,
  .b-compare__table td {
    display: block;
  }

  .b-compare__table tbody th {
    padding: 0 0 var(--sp-5);
    border-bottom: 0;
    text-align: left;
  }

  /* Kept for screen readers, removed from view — display:none would take it
     from both. */
  .b-compare__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .b-compare__table {
    background: transparent;
    border: 0;
  }

  .b-compare__table tr {
    background: var(--card);
    border: 1px solid var(--line);
    padding: var(--sp-5) var(--sp-5) var(--sp-2);
  }

  .b-compare__table tr + tr {
    margin-top: var(--sp-4);
  }

  .b-compare__table td {
    padding: 0 0 var(--sp-5);
    border-bottom: 0;
  }

  /* Each data cell re-labels itself with its column head. */
  .b-compare__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--t-label);
    font-weight: var(--w-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--sp-1);
  }

  .b-compare__therapy {
    min-width: 0;
  }
}