/* ==========================================================================
   Comparison Table — two-column feature comparison with a highlighted column
   and per-row accordion. Colors reference the EuroAthlete palette with
   hex fallbacks. Accordion uses the grid-rows 0fr/1fr trick, gated by
   html.js-animate (content stays open in the builder / with JS off).
   ========================================================================== */

.comparison-table {
  --ct-accent: #6c62e1;
  --ct-highlight-bg: #dedafe;
  --ct-navy: var(--blue, #282f41);
  --ct-desc: #5b5b6b;
  --ct-divider: #000;
  --ct-radius: 16px;
  --ct-transition: 300ms;
  display: block;
}

.comparison-table__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
}

/* Row wrapper is transparent to the grid so all cells share the column tracks
   and every row stays aligned across the three columns. */
.comparison-table__row {
  display: contents;
}

.comparison-table__cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  padding: 1.15rem 1.5rem;
}

/* Divider lines under each data row (continuous: no column gap). */
.comparison-table__row:not(.comparison-table__row--head) .comparison-table__cell {
  border-bottom: 1px solid var(--ct-divider);
}

/* Highlighted column = background on its cells, rounded at the very top/bottom. */
.comparison-table__cell.is-highlight {
  background: var(--ct-highlight-bg);
}
.comparison-table__cell.is-highlight-top {
  border-top-left-radius: var(--ct-radius);
  border-top-right-radius: var(--ct-radius);
}
/* Bottom corners intentionally square (top corners only). */

/* --- Header ---------------------------------------------------------------- */
.comparison-table__row--head .comparison-table__cell {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.comparison-table__coltitle {
  color: var(--ct-accent);
  font-weight: 700;
  font-size: 2rem; /* ~20px title — site root font-size is 10px */
  margin-bottom: 5rem;
}

/* --- Columns alignment ----------------------------------------------------- */
.comparison-table__cell--col {
  text-align: center;
  align-items: center;
}
.comparison-table__cell--label {
  justify-content: center; /* center the label/chevron vertically in tall rows */
}

/* --- Label toggle ---------------------------------------------------------- */
.comparison-table__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--ct-navy);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.comparison-table__toggle:focus-visible {
  outline: 2px solid var(--ct-accent);
  outline-offset: 3px;
}
.comparison-table__rowlabel {
  font-weight: 700;
  font-size: 1.6rem; /* 16px — site root font-size is 10px */
  color: var(--ct-navy);
}
.comparison-table__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--ct-navy);
  font-size: 1.8rem; /* 18px chevron — site root font-size is 10px */
}
.comparison-table__icon svg {
  display: block;
  transform: rotate(90deg); /* default (no JS = open) → points down */
  transition: transform var(--ct-transition) ease;
}

/* --- Values + collapsible descriptions ------------------------------------- */
.comparison-table__value {
  display: block;
  font-weight: 700;
  font-size: 1.6rem; /* 16px — site root font-size is 10px */
  color: var(--ct-navy);
}
.comparison-table__desc {
  display: grid;
  grid-template-rows: 1fr; /* open by default (no JS / builder) */
  transition: grid-template-rows var(--ct-transition) ease;
}
.comparison-table__desc-inner {
  overflow: hidden;
  min-height: 0;
  color: var(--ct-desc);
  font-size: 1.4rem; /* 14px — site root font-size is 10px */
  line-height: 1.55;
}
.comparison-table__desc-inner > * {
  margin: 0;
}
/* Gap below the row heading. It lives on the content (which IS clipped by
   overflow:hidden) rather than as padding on .desc-inner itself — otherwise the
   padding holds the collapsed row open at 16px instead of fully collapsing. */
.comparison-table__desc-inner > *:first-child {
  margin-top: 1.6rem; /* 16px */
}

/* --- JS-enhanced states (html.js-animate set before first paint) ----------- */
.js-animate .comparison-table__desc {
  grid-template-rows: 0fr;
}
.js-animate .comparison-table__row.is-open .comparison-table__desc {
  grid-template-rows: 1fr;
}
.js-animate .comparison-table__icon svg {
  transform: rotate(0deg); /* closed → points right */
}
.js-animate .comparison-table__row.is-open .comparison-table__icon svg {
  transform: rotate(90deg); /* open → points down */
}

@media (prefers-reduced-motion: reduce) {
  .comparison-table__desc,
  .comparison-table__icon svg {
    transition: none;
  }
}

/* --- Mobile: stack each row into a card ------------------------------------ */
@media (max-width: 720px) {
  .comparison-table__grid {
    display: block;
  }
  .comparison-table__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--ct-divider);
  }
  .comparison-table__row--head .comparison-table__cell--label {
    display: none;
  }
  .comparison-table__cell {
    padding: 0.4rem 0.85rem;
    border-bottom: 0 !important;
  }
  .comparison-table__cell--label {
    grid-column: 1 / -1;
    padding-bottom: 0.4rem;
  }
  /* No column highlight on mobile — cards are stacked, so it isn't needed. */
  .comparison-table__cell.is-highlight {
    background: none;
  }
  /* Make the row heading clearly bigger than the values stacked below it. */
  .comparison-table__rowlabel {
    font-size: 2rem; /* 20px */
  }
}