/* ==========================================================================
   Celliara — comparison.css
   Comparison Page Specific: hero, verdict cards, specs table, feature blocks,
   pros/cons, price grid, scroll CTAs, related grids, who-is-it-for
   Template v1.3 | Mobile-first
   ========================================================================== */

/* ── Comparison Hero ─────────────────────────────────────────────────────── */
.comparison-hero {
  padding-top: calc(64px + var(--spacing-lg)); /* 64px fixed nav clearance + section spacing */
}

/* Breadcrumb sits above H1 — needs bottom margin so it clears the heading */
.comparison-hero .breadcrumb {
  margin-bottom: var(--spacing-md);
}

.comparison-hero__h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.15;
  margin-top: 0;             /* no collapse with breadcrumb above */
  margin-bottom: var(--spacing-sm);
}

.comparison-hero__subhead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 680px;
  margin-top: 0;
  margin-bottom: var(--spacing-md);
}

.comparison-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.comparison-hero__meta a {
  color: var(--color-text-secondary);
}

.comparison-hero__meta-sep {
  color: var(--color-text-muted);
}

/* Device thumbnails side-by-side */
.comparison-hero__devices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-block: var(--spacing-lg);
}

.comparison-hero__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  max-width: 200px;
}

.comparison-hero__device-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-hero__device-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-md);
}

.comparison-hero__device-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: center;
  line-height: 1.3;
}

.comparison-hero__vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

/* Jump to verdict — styled as secondary pill button */
.jump-to-verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 6px var(--spacing-md);
  min-height: 36px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
  margin-bottom: var(--spacing-md);
}

.jump-to-verdict:hover {
  background-color: rgba(201, 169, 110, 0.1);
  text-decoration: none;
}

@media (min-width: 768px) {
  .comparison-hero__devices {
    gap: var(--spacing-xl);
  }

  .comparison-hero__device {
    max-width: 280px;
  }
}

/* ── Verdict Cards ───────────────────────────────────────────────────────── */
.comparison-verdict {
  /* container */
}

/* ── Mobile-first: cards stack vertically, full width ───────────────────── */
.verdict-cards {
  display: flex;
  flex-direction: column;       /* stacked on mobile */
  gap: var(--spacing-md);
  margin-block: var(--spacing-lg);
  width: 100%;                  /* no overflow at any breakpoint */
}

.verdict-card {
  display: flex;
  flex-direction: column;
  width: 100%;                  /* explicit 100% — prevents side-by-side shrink */
  min-width: 0;                 /* allows card to shrink inside flex parent */
  box-sizing: border-box;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  gap: var(--spacing-sm);
}

/* Winner card: gold top border, elevated bg, glow, always first on mobile */
.verdict-card--winner {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-glow);
  order: -1;                    /* rendered first in DOM flow on mobile */
}

.verdict-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--spacing-sm);
  background-color: var(--color-accent);
  color: #0a0a0a;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
  margin-bottom: var(--spacing-xs);
}

/* Ghost badge on runner card — invisible, same height as real badge so names align */
.verdict-card__badge--ghost {
  background-color: transparent;
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  pointer-events: none;
  opacity: 0;
  min-height: 26px; /* matches real badge: padding(8px) + font-size-xs line-height(~18px) */
}

.verdict-card__name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: 0;
}

.verdict-card__sub-label {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  margin: 0;
}

.verdict-card__sub-label--runner {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  font-style: normal;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.verdict-card__best-for {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.verdict-card__best-for strong {
  color: var(--color-text-primary);
}

.verdict-card__price {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.verdict-card__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: auto; /* pins buttons to bottom of card — keeps both cards aligned regardless of badge/content height */
  padding-top: var(--spacing-md);
}

/* Desktop: subgrid so both cards share the same row tracks.
   Row heights are determined by the tallest content in each band across both columns.
   Name row aligns perfectly regardless of badge or sub-label presence. */
@media (min-width: 768px) {
  .verdict-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 7 shared bands: badge · name · sublabel · bestfor · score · price · cta */
    grid-template-rows:
      auto   /* badge */
      auto   /* name */
      auto   /* sublabel */
      auto   /* bestfor */
      auto   /* score */
      auto   /* price */
      1fr;   /* cta — fills remaining space, pins buttons flush to bottom */
    gap: var(--spacing-md);
    align-items: stretch;
  }

  /* Each card spans all 7 parent rows in its column and subgrids them */
  .verdict-card {
    flex: unset;
    width: auto;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    gap: 0;
    padding: 0; /* padding applied per-child so subgrid rows stay clean */
  }

  /* All direct children: consistent horizontal padding */
  .verdict-card > * {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  /* Explicit row placement — ensures alignment even when elements are conditionally absent */
  .verdict-card__badge,
  .verdict-card__badge--ghost { grid-row: 1; padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
  .verdict-card__name          { grid-row: 2; padding-top: var(--spacing-lg); padding-bottom: var(--spacing-sm); }
  .verdict-card__sub-label     { grid-row: 3; padding-bottom: var(--spacing-sm); }
  .verdict-card__best-for      { grid-row: 4; padding-bottom: var(--spacing-lg); }
  .score-compact               { grid-row: 5; align-self: start; padding-bottom: var(--spacing-lg); }
  .verdict-card__price         { grid-row: 6; padding-bottom: var(--spacing-sm); }
  .verdict-card__cta           { grid-row: 7; align-self: end; margin-top: 0; padding-top: var(--spacing-md); padding-bottom: var(--spacing-lg); }

  .verdict-card--winner { grid-column: 1; order: 0; }
  .verdict-cards .verdict-card:not(.verdict-card--winner) { grid-column: 2; }
}

/* ── Verdict Why ─────────────────────────────────────────────────────────── */
.verdict-why {
  background-color: var(--color-bg-elevated);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.verdict-why__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

.verdict-why__text strong {
  color: var(--color-text-primary);
}

/* Verdict summary below */
.verdict-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  padding-top: var(--spacing-sm);
}

/* ── Who Is It For ───────────────────────────────────────────────────────── */
.comparison-who__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.comparison-who__col {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.comparison-who__device-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.comparison-who__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.comparison-who__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.comparison-who__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--spacing-md);
  position: relative;
  line-height: 1.5;
}

.comparison-who__item--for::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-pro);
  font-size: var(--font-size-xs);
  top: 2px;
}

.comparison-who__item--not::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--color-con);
  font-size: var(--font-size-xs);
  top: 2px;
}

@media (min-width: 768px) {
  .comparison-who__grid {
    flex-direction: row;
  }

  .comparison-who__col {
    flex: 1;
  }
}

/* ── Specs Comparison Table ──────────────────────────────────────────────── */
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-block: var(--spacing-md);
}

.comparison-table {
  min-width: 480px;
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}

.comparison-table thead tr {
  background-color: var(--color-bg-elevated);
  border-bottom: 2px solid var(--color-border);
}

.comparison-table th {
  padding: var(--spacing-md);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Sticky first column on mobile */
.comparison-table th:first-child,
.comparison-table td:first-child {
  position: sticky;
  left: 0;
  background-color: var(--color-bg-elevated);
  z-index: 1;
  min-width: 120px;
  border-right: 1px solid var(--color-border);
}

.comparison-table td {
  padding: var(--spacing-md);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  line-height: 1.4;
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.comparison-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Group header rows */
.row--group-header td {
  background-color: var(--color-bg-elevated);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-block: var(--spacing-sm);
}

/* Winner row: subtle gold bg tint */
.row--winner {
  background-color: rgba(201, 169, 110, 0.05);
}

.row--winner:hover {
  background-color: rgba(201, 169, 110, 0.08) !important;
}

/* Winner column cell: gold text */
.col--winner {
  color: var(--color-winner) !important;
  font-weight: var(--font-weight-medium);
}

/* Winner badge inline */
.winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--spacing-xs);
  background-color: rgba(201, 169, 110, 0.15);
  color: var(--color-winner);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  margin-right: var(--spacing-xs);
  white-space: nowrap;
}

/* Footnote row */
.row--footnote td {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  background-color: var(--color-bg-surface);
}

/* Device header in thead */
.comparison-table__device-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.comparison-table__device-header img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background-color: var(--color-bg);
}

/* Post-table CTA strip */
.comparison-table-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* ── Feature Blocks ──────────────────────────────────────────────────────── */
.feature-block {
  padding-block: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.feature-block:last-child {
  border-bottom: none;
}

.feature-block__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

/* Variant A: Prose layout */
.feature-block__prose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.feature-block__prose-col {
  flex: 1;
}

.feature-block__prose-device-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-sm);
}

.feature-block__prose-col p:not(.feature-block__prose-device-label) {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Edge verdict line — gold left border, elevated treatment */
.feature-block__edge {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: rgba(201, 169, 110, 0.04);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Variant B: Feature card pair */
.feature-card-pair {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.feature-card-pair__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
}

.feature-card-pair__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.feature-card-pair__card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  flex: 1;
}

.feature-card-pair__card--winner {
  background-color: var(--color-bg-elevated);
  border-top: 3px solid var(--color-accent);
}

.feature-card-pair__device-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-xs);
}

.feature-card-pair__value {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.feature-card-pair__winner-flag {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-pro);
  font-weight: var(--font-weight-medium);
  margin-top: var(--spacing-sm);
}

@media (min-width: 768px) {
  .feature-block__prose {
    flex-direction: row;
  }

  .feature-card-pair__cards {
    flex-direction: row;
  }
}

/* ── Pros / Cons ─────────────────────────────────────────────────────────── */
.pros-cons-pair {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.pros-cons-pair__device {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}

.pros-cons-pair__device-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.pros-cons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.pros-cons__col {
  flex: 1;
}

.pros-cons__heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-sm);
}

.pros-cons__heading--pros {
  color: var(--color-pro);
}

.pros-cons__heading--cons {
  color: var(--color-con);
}

.pros-cons__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.pros-cons__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--spacing-md);
  position: relative;
  line-height: 1.5;
}

/* Pro item: left green dot */
.pros-cons__item--pro::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-pro);
}

/* Con item: left red dot */
.pros-cons__item--con::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-con);
}

@media (min-width: 768px) {
  .pros-cons-pair {
    flex-direction: row;
  }

  .pros-cons-pair__device {
    flex: 1;
  }

  .pros-cons {
    flex-direction: row;
  }
}

/* ── Price Grid ──────────────────────────────────────────────────────────── */
.comparison-price__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

.comparison-price__col {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  flex: 1;
}

.comparison-price__device-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.comparison-price__range {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  margin-bottom: var(--spacing-md);
}

.comparison-price__retailers {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.comparison-price__retailer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.comparison-price__retailer-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.comparison-price__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

@media (min-width: 768px) {
  .comparison-price__grid {
    flex-direction: row;
  }
}

/* ── Related Grids (comparisons + guides) ────────────────────────────────── */
.comparison-related__grid,
.comparison-guides__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.related-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.related-item:hover {
  border-color: var(--color-accent);
  text-decoration: none;
}

/* Comparison items: gold left border — higher commercial intent than guides */
.comparison-related__grid .related-item {
  border-left: 3px solid rgba(201, 169, 110, 0.35);
}

.comparison-related__grid .related-item:hover {
  border-left-color: var(--color-accent);
}

/* Inline CTA — between pros/cons and price sections */
.inline-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding-block: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.related-item__tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.related-item__title {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.related-item__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.related-item__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .comparison-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .comparison-guides__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Section wrapper stubs ───────────────────────────────────────────────── */
/* These classes are semantic section identifiers with no layout rules of     */
/* their own. All spacing comes from .page-section. Rules exist here solely   */
/* to anchor sub-element selectors and prevent future ambiguity.              */
.comparison-who    { /* spacing via .page-section */ }
.comparison-specs  { /* spacing via .page-section */ }
.comparison-features { /* spacing via .page-section */ }
.comparison-proscons { /* spacing via .page-section */ }
.comparison-price  { /* spacing via .page-section */ }
.comparison-faq    { /* spacing via .page-section */ }
.comparison-related { /* spacing via .page-section */ }
.comparison-guides { /* spacing via .page-section */ }

/* page-comparison body class — sets base context for the template */
.page-comparison .container {
  max-width: var(--max-width);
}

/* ==========================================================================
   Phase 2 refinements — 2026-03-27
   New: decision-table, choose-strip, hero-guide-link, midpage-reengagement
   ========================================================================== */

/* ── Hero Guide Link ─────────────────────────────────────────────────────── */
/* Early contextual pointer to relevant background guide — below meta */
.hero-guide-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.hero-guide-link__prefix {
  color: var(--color-text-muted);
}

.hero-guide-link__cta {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.hero-guide-link__cta:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ── Decision Table ──────────────────────────────────────────────────────── */
/* 4-attribute quick-scan table. Position: after verdict, before who-it's-for */
.decision-table-section {
  /* section wrapper */
}

.decision-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.decision-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  table-layout: fixed;
}

/* Column widths — attr col narrow, device cols equal */
.decision-table .decision-table__attr-col {
  width: 30%;
}

.decision-table thead tr {
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.decision-table thead th {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  vertical-align: top;
  line-height: 1.4;
}

/* Winner column — subtle gold tint */
.decision-table .decision-table__winner-col {
  background-color: rgba(201, 169, 110, 0.06);
}

.decision-table thead .decision-table__winner-col {
  background-color: rgba(201, 169, 110, 0.1);
}

.decision-table__winner-flag {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  margin-bottom: var(--spacing-xs);
}

.decision-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.decision-table tbody tr:last-child {
  border-bottom: none;
}

.decision-table tbody td {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-secondary);
  vertical-align: middle;
  line-height: 1.5;
}

.decision-table .decision-table__label {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (min-width: 480px) {
  .decision-table .decision-table__attr-col {
    width: 25%;
  }
}

/* ── Choose Strip ────────────────────────────────────────────────────────── */
/* Fast decision guide below verdict cards — reuses who-it's-for data */
.choose-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .choose-strip {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }
}

.choose-strip__col {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

/* Winner column — accent left border */
.choose-strip__col--a {
  border-left: 3px solid var(--color-accent);
}

.choose-strip__col--b {
  border-left: 3px solid var(--color-border);
}

.choose-strip__device {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.choose-strip__cue {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-sm);
}

.choose-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.choose-strip__list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--spacing-md);
  position: relative;
  line-height: 1.5;
}

.choose-strip__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  top: 2px;
}

/* ── Mid-Page Re-engagement ──────────────────────────────────────────────── */
/* Editorial summary sentence — refocuses reader between features and pros/cons */
.midpage-reengagement {
  padding-block: var(--spacing-lg);
}

.midpage-reengagement__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  max-width: 720px;
  margin-inline: auto;
}

.midpage-reengagement__rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
  display: block;
}

.midpage-reengagement__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: 1.6;
  text-align: center;
  font-style: italic;
  flex-shrink: 1;
  min-width: 0;
  margin: 0;
}

@media (max-width: 479px) {
  .midpage-reengagement__inner {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .midpage-reengagement__rule {
    width: 60px;
    flex: none;
  }
}

/* ==========================================================================
   Spacing fixes — 2026-03-27
   Reduce page-section padding on compact/utility sections.
   Base page-section = 48px each side = 96px total per section.
   These overrides tighten sections that don't need full breathing room.
   ========================================================================== */

/* Decision table — compact, utility section. 32px each side */
.decision-table-section {
  padding-block: var(--spacing-lg);
}

/* Who It's For — medium padding. 36px each side */
.comparison-who {
  padding-block: 36px;
}

/* Mid-page re-engagement — tightly constrained.
   Its own CSS has padding-block: var(--spacing-lg) (24px).
   Remove page-section class conflict by controlling directly. */
.midpage-reengagement {
  padding-block: var(--spacing-lg);
}

/* Related sections at bottom — reduce to match internal hub rhythm */
.comparison-related,
.comparison-guides {
  padding-block: var(--spacing-lg);
}

/* Hero: trim bottom to reduce gap before verdict */
.comparison-hero {
  padding-bottom: var(--spacing-lg);
}

/* Verdict section: slightly tighter top since hero leads directly into it */
.comparison-verdict {
  padding-top: var(--spacing-lg);
}

/* ==========================================================================
   Blank space fixes — 2026-03-27
   Remove choose-strip (duplicate, invisible items), upgrade comparison-who
   ========================================================================== */

/* ── comparison-who winner accent ───────────────────────────────────────── */
.comparison-who__col--winner {
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--spacing-md) - 3px); /* compensate for border width */
}

.comparison-who__winner-tag {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  margin-left: var(--spacing-sm);
  vertical-align: middle;
}

/* section-label above who-heading — ensure tight spacing */
.comparison-who .section-label {
  margin-bottom: var(--spacing-xs);
}

/* ── decision-table: hide when empty ────────────────────────────────────── */
/* Already handled in PHP — CSS safety net */
.decision-table tbody:empty + * {
  display: none;
}

/* ── Remove choose-strip CSS (component removed from template) ───────────── */
/* Styles kept for backward compat but component no longer renders */

/* ==========================================================================
   Cleanup pass — 2026-03-27
   Tighten decision block, compress bottom, unify related section
   ========================================================================== */

/* ── Decision block continuity ───────────────────────────────────────────── */
/* verdict → who flows without divider — remove top gap */
.comparison-who--tight {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

/* ── Features section trailing HR ───────────────────────────────────────── */
/* Features has no trailing HR — midpage or proscons section follows */
.comparison-features {
  padding-bottom: var(--spacing-lg);
}

/* ── Combined related section ────────────────────────────────────────────── */
.comparison-related-combined {
  padding-block: var(--spacing-lg);
}

/* Use existing grid styles — alias */
.comparison-related-combined .comparison-related__grid {
  /* inherits from .comparison-related__grid */
}

/* ── Inline CTA removed — ensure no ghost spacing ───────────────────────── */
.inline-cta {
  display: none;
}

/* ── Internal link block — tighter at bottom ─────────────────────────────── */
.internal-link-block.page-section {
  padding-block: var(--spacing-lg);
}

/* ── Prose section labels — reduce repeat visual noise ──────────────────── */
/* "Make Your Decision" label above who-section — smaller when tight */
.comparison-who--tight .section-label {
  display: none; /* section-label creates extra visual gap in tight layout */
}

/* ── Mobile: decision block spacing ─────────────────────────────────────── */
@media (max-width: 767px) {
  .comparison-who--tight {
    padding-top: var(--spacing-sm);
  }

  /* Tighter verdict section on mobile */
  .comparison-verdict {
    padding-bottom: var(--spacing-md);
  }

  /* Tighter specs table wrap on mobile */
  .comparison-specs {
    padding-block: var(--spacing-lg);
  }
}

/* ==========================================================================
   Phase 3 — Conversion Upgrade CSS
   Hero 60/40, Quick Decision Strip, Quick Answer Block,
   Verdict Breakdown, Feature Meaning, Final CTA, Trust Compression
   ========================================================================== */

/* ── Hero Decision Layout (60/40) ────────────────────────────────────────── */
.comparison-hero__decision {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  align-items: flex-start;
  margin-bottom: var(--spacing-lg);
}

.comparison-hero__left {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.comparison-hero__right {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* .comparison-hero__winner-image retired — replaced by .comparison-hero__image-card */
.comparison-hero__winner-image--empty {
  min-height: 200px;
}

/* ── Hero right — stacked vertical: image → score → bars ────────────────── */
.comparison-hero__right-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  height: 100%;
}

/* Image card — fills available space, badge top-left */
.comparison-hero__image-card {
  position: relative;
  flex: 1 1 auto;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.comparison-hero__image-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-md);
  display: block;
}

.comparison-hero__image-card picture {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-hero__image-card picture img {
  width: 100%;
  object-fit: contain;
  padding: var(--spacing-md);
}

.comparison-hero__image-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  display: inline-flex;
  align-items: center;
  padding: 4px var(--spacing-sm);
  background-color: var(--color-accent);
  color: #0a0a0a;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

/* Score row — overall number */
.comparison-hero__score-panel {
  flex: 0 0 auto;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.comparison-hero__score-overall {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}

.comparison-hero__score-num {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.comparison-hero__score-denom {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  align-self: flex-end;
  margin-bottom: 3px;
}

.comparison-hero__score-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  line-height: 1.5;
  border-left: 1px solid var(--color-border);
  padding-left: var(--spacing-md);
}

.comparison-hero__score-label strong {
  display: block;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-size-sm);
}

/* Subscore bars block */
.comparison-hero__subscores {
  flex: 0 0 auto;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.comparison-hero__subscore-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comparison-hero__subscore-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comparison-hero__subscore-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
}

.comparison-hero__subscore-val {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.comparison-hero__subscore-bar {
  height: 3px;
  background-color: var(--color-bg-elevated);
  border-radius: 2px;
  overflow: hidden;
}

.comparison-hero__subscore-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 2px;
}

@media (min-width: 768px) {
  .comparison-hero__decision {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-xl);
  }

  .comparison-hero__left {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .comparison-hero__decision {
    align-items: stretch;
  }

  .comparison-hero__right {
    flex: 0 0 38%;
    max-width: 38%;
  }

  .comparison-hero__right-inner {
    height: 100%;
  }

  .comparison-hero__image-card {
    min-height: 0;
    flex: 1 1 auto;
  }
}

/* ── Winner Block ─────────────────────────────────────────────────────────── */
.comparison-hero__winner-block {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.comparison-hero__winner-label {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--spacing-sm);
  background-color: var(--color-accent);
  color: #0a0a0a;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
}

.comparison-hero__winner-name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.comparison-hero__winner-verdict {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.comparison-hero__micro-commitment {
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

.comparison-hero__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0;
  margin: var(--spacing-xs) 0 0;
}

.comparison-hero__bullet {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--spacing-md);
  position: relative;
  line-height: 1.5;
}

.comparison-hero__bullet::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--color-pro);
  font-size: var(--font-size-xs);
  top: 3px;
}

.comparison-hero__cta-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.btn--hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--spacing-xl);
  min-height: 50px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  background-color: transparent;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-md);
  text-decoration: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
  width: 100%;
  text-align: center;
}

.btn--hero-primary:hover {
  background-color: rgba(201, 169, 110, 0.08);
  box-shadow: 0 0 16px rgba(201, 169, 110, 0.25);
  text-decoration: none;
}

.comparison-hero__compare-link {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--spacing-xs) 0;
  transition: color var(--transition-fast);
}

.comparison-hero__compare-link:hover {
  color: var(--color-text-secondary);
}

/* ── Quick Decision Strip ────────────────────────────────────────────────── */
.quick-decision-strip {
  padding-block: var(--spacing-lg);
}

.qds-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
}

@media (min-width: 480px) {
  .qds-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.qds-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
  cursor: pointer;
}

.qds-card:hover {
  border-color: var(--color-accent);
  background-color: var(--color-bg-elevated);
  text-decoration: none;
}

.qds-card--winner {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--shadow-glow);
}

.qds-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qds-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

.qds-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ── Quick Answer Block ──────────────────────────────────────────────────── */
.quick-answer-block {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.quick-answer-block__line {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.quick-answer-block__line strong {
  color: var(--color-text-primary);
}

/* ── Verdict Breakdown ───────────────────────────────────────────────────── */
.verdict-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 640px) {
  .verdict-breakdown {
    flex-direction: row;
    gap: var(--spacing-lg);
  }
}

.verdict-breakdown__col {
  flex: 1;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.verdict-breakdown__col--winner {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
}

.verdict-breakdown__col--runner {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.verdict-breakdown__heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-sm);
}

.verdict-breakdown__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: 0;
  margin: 0;
}

.verdict-breakdown__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding-left: var(--spacing-md);
  position: relative;
  line-height: 1.5;
}

.verdict-breakdown__item--win::before {
  content: '✔';
  position: absolute;
  left: 0;
  color: var(--color-pro);
  font-size: var(--font-size-xs);
  top: 3px;
}

.verdict-breakdown__item--edge::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  top: 2px;
}

/* ── Feature Meaning Line ────────────────────────────────────────────────── */
.feature-block__meaning {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--spacing-xs) var(--spacing-md);
  border-left: 2px solid rgba(201, 169, 110, 0.4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.feature-block__meaning--card {
  margin-top: var(--spacing-sm);
  border: none;
  padding-left: 0;
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--color-border);
}

/* ── Final CTA Block ─────────────────────────────────────────────────────── */
.final-cta-block {
  text-align: center;
  padding-block: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

.final-cta-block__name {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.15;
}

.final-cta-block__sub {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.final-cta-block__btn {
  max-width: 320px;
  margin-top: var(--spacing-sm);
}

/* ── Trust Compression ───────────────────────────────────────────────────── */
.trust-compression {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  border-top: 1px solid var(--color-border);
  width: 100%;
  max-width: 500px;
}

.trust-compression__item {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}