/* ═══════════════════════════════════════════════════════════════
   finxp/comparison: EMI safeguarding vs bank deposit (Alpine + GSAP)
   Self-contained block styles. Reuses theme tokens from style.css
   (:root). Conditionally enqueued via has_block in functions.php.
   Both sides are treated identically: the comparison informs, it does
   not disparage banks or over-emphasise either model.
   ═══════════════════════════════════════════════════════════════ */

.comparison { padding: var(--section-pad); }

.comparison__header {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}
.comparison__header .eyebrow { justify-content: center; }
.comparison__heading {
  font-size: clamp(1.7rem, 2.86vw, 2.4rem);
  margin-top: 16px;
  letter-spacing: -0.01em;
}
.comparison__intro {
  margin-top: 14px;
  font-size: 0.98rem;
  color: var(--body-text);
}

.comparison__panel {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 48px) clamp(24px, 3.5vw, 38px);
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* SWEEP 2026-08-06 (border-free, matches style.css .cta-section__inner):
     rim removed — the gradient wash + .comparison__glow radial already
     separates the panel from the flat navy; inset top highlight + ambient
     shadow carry the depth instead of a cheap rim. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 50px rgba(2, 2, 53, 0.35);
}
.comparison__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 12% 0%, rgba(39, 209, 255, 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 50% 55% at 90% 100%, rgba(206, 17, 223, 0.12) 0%, transparent 100%);
}

/* ── SEGMENTED CONTROL ──
   Squared (≤9px radius rule): the old 999px pill also made the sliding
   3px underline poke past the tab's rounded ends — a straight bar under
   a squared tab is geometrically consistent. */
.comparison__switch {
  position: relative;
  display: flex;
  gap: 6px;
  max-width: 460px;
  margin: 0 auto 34px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  /* Border-free sweep: the tab bar's boundary is carried by its fill +
     inset top highlight; the sliding underline anchors the active state. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.comparison__switch-pill {
  position: absolute;
  left: 0;
  bottom: 5px;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: var(--grad-xp);
  pointer-events: none;
  /* Soft glow beneath the bar in the gradient's own stops (magenta→cyan),
     low alpha — restrained brand accent, not a neon underline. The bar's
     travel (movePill in comparison.js) is GSAP-driven, not a CSS
     transition, so that easing is out of this stylesheet's reach. */
  box-shadow:
    0 2px 8px rgba(206, 17, 223, 0.35),
    0 2px 10px rgba(39, 209, 255, 0.25);
}
.comparison__tab {
  position: relative;
  flex: 1 1 0;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}
.comparison__tab:hover { color: var(--white); }
.comparison__tab.is-active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

/* ── COMPARISON GRID ── */
.comparison__grid {
  --cmp-cols: minmax(120px, 190px) 1fr 1fr;
  position: relative;
}
.comparison__grid-head,
.comparison__row {
  display: grid;
  grid-template-columns: var(--cmp-cols);
  gap: 14px;
  align-items: stretch;
}
.comparison__grid-head {
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 14px;
}
.comparison__col-name {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  align-self: end;
  transition: color 0.25s ease;
}
.comparison__grid.is-focus-emi .comparison__col-name--emi,
.comparison__grid.is-focus-bank .comparison__col-name--bank { color: var(--cyan-light); }

.comparison__row { padding: 6px 0; }
.comparison__row + .comparison__row { border-top: 1px solid rgba(255, 255, 255, 0.06); }

.comparison__label {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--white);
  padding: 16px 4px;
}

.comparison__cell {
  padding: 16px 18px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  opacity: 1;
  /* FIX 2026-08-10 (client, two passes): first pass fully neutralised
     .is-active on desktop, but that killed the tab-toggle feedback the
     client actually wanted — the original complaint was the LOUDNESS
     (a 28px magenta glow ring + a heavy 0.55 dim on the inactive column),
     not the interaction itself. Recalibrated: active gets a gentle surface
     tint + brighter hairline (no glow, no colour), inactive dims only
     mildly to 0.85 — both stay clearly legible and equal-status, but the
     toggle still visibly responds. The @media (max-width:768px) block
     below is untouched — there .is-active is a legitimate single-column
     switcher (the inactive cell is display:none), not a bias signal. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: opacity 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.comparison__cell.is-active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.comparison__cell:not(.is-active) { opacity: 0.85; }
.comparison__row:hover .comparison__cell { opacity: 1; }

.comparison__cell-tag {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan-light);
  margin-bottom: 8px;
}
.comparison__cell-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--body-text);
}

.comparison__footnote {
  margin-top: 26px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--subtle);
  max-width: 70ch;
}

/* ── MOBILE: stack; segmented control switches the visible side ── */
@media (max-width: 768px) {
  .comparison__switch { max-width: none; }
  .comparison__grid { --cmp-cols: 1fr; }
  .comparison__grid-head { display: none; }
  .comparison__row {
    gap: 0;
    padding: 18px 0;
  }
  .comparison__label { padding: 0 0 12px; }
  .comparison__cell {
    opacity: 1;
    background: rgba(255, 44, 235, 0.07);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 0 28px rgba(255, 44, 235, 0.22);
  }
  /* Only the focused side shows on narrow screens. */
  .comparison__cell:not(.is-active) { display: none; }
  .comparison__cell-tag { display: block; }
  .comparison__row:hover .comparison__cell { opacity: 1; }
}

/* ── REDUCED MOTION: state still switches, transitions become instant ── */
@media (prefers-reduced-motion: reduce) {
  .comparison__tab,
  .comparison__col-name,
  .comparison__cell { transition: none; }
}

/* ── LARGE VIEWPORT (≥1600px): the 980px panel was tuned for the old
   1440px canvas and reads short beside the 1240px+ sections around it
   on the widened 1680px container. Lives here (not style.css) because
   this stylesheet enqueues after the theme stylesheet, so an override
   there would lose the cascade at equal specificity. ── */
@media (min-width: 1600px) {
  .comparison__panel { max-width: 1240px; }
}