/* Signal Stack comparison-family module. Load before signal-stack.css. */

/* Versus page components. Load before signal-stack.css so the global
   migrated shell remains the final override layer. */

.versus-hero {
  padding: 34px 0 26px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--surface), var(--paper));
}

/* Readable line length comes from the column, not from a max-width on the
   text. Capping the text instead leaves half the row empty on desktop. */
.versus-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px 40px;
  align-items: start;
  margin-bottom: 20px;
}
.versus-hero h1 {
  max-width: 18ch;
  margin: 6px 0 10px;
  font-family: Sora, sans-serif;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.versus-hero .lede {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
}
.versus-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
/* Inside the grid the column already sets the measure, so the caps above
   would only reintroduce the empty gutter they exist to prevent. They stay
   for single-column heroes such as the /vs/ hub. */
.versus-hero-grid h1,
.versus-hero-grid .lede {
  max-width: none;
}

/* The block AI Overviews and featured snippets extract. Keep it visually
   distinct and structurally self-contained. */
.versus-verdict {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent, var(--signal));
  border-radius: 10px;
  background: var(--surface);
}
.versus-verdict h2 {
  margin: 0 0 6px;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.versus-verdict p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
}
.versus-verdict strong {
  font-weight: 700;
}

/* Pick cards -------------------------------------------------------------- */
/* Disclosure sits directly above the first affiliate buttons rather than in
   the hero. FTC guidance wants it adjacent to the recommendation, so the
   footer band on its own is not sufficient - it falls below every CTA. */
.versus-disclosure {
  margin: 0 0 16px;
  padding: 9px 14px;
  border-left: 3px solid var(--copper);
  border-radius: 0 6px 6px 0;
  background: #fff8f3;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.versus-disclosure strong {
  color: var(--copper);
  font-weight: 600;
}

.versus-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  min-width: 0;
}
.versus-card {
  display: grid;
  /* A lone implicit column (no grid-template-columns) sizes to its
     content's max-content width by default, not to the container - the
     same bug min-width:0 alone doesn't fix. minmax(0,1fr) makes the single
     column actually stretch to fill and shrink with the card. */
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  /* Grid items default to min-width:auto, so a wide product image's
     intrinsic size (its width/height attributes) can force this track,
     .versus-picks, and the whole page wider than the viewport on mobile.
     min-width:0 lets the card actually shrink to the column it's given. */
  min-width: 0;
}
.versus-card-winner {
  border-color: var(--accent, var(--signal));
  box-shadow: inset 0 3px 0 0 var(--accent, var(--signal));
}
.versus-image-link {
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fafcfb;
}
.versus-image-link img,
.versus-card > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  min-width: 0;
  object-fit: contain;
}
.versus-card > img {
  align-self: center;
}
.versus-card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  /* Also a grid item (of .versus-card's grid), so it needs the same
     min-width:0 fix or its own content keeps the row wide. */
  min-width: 0;
}
.versus-card-copy h3 {
  margin: 0;
  font-family: Sora, sans-serif;
  font-size: 1.32rem;
  letter-spacing: -0.03em;
}
.versus-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.versus-card-copy p strong {
  color: var(--ink);
}
.versus-buy {
  margin-top: 4px;
  justify-self: start;
}

/* Spec table -------------------------------------------------------------- */
.versus-table tbody tr:hover {
  background: #f7faf9;
}
.versus-table .edge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft, #dcebe6);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.versus-table .edge-tie {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted);
}

/* Scenarios --------------------------------------------------------------- */
.versus-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.versus-scenarios h3 {
  margin: 6px 0 6px;
  font-family: Sora, sans-serif;
  font-size: 1.08rem;
  letter-spacing: -0.025em;
}
.versus-scenarios .gear-count {
  color: var(--copper);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Honest-limitations block ------------------------------------------------ */
.versus-limits {
  border-left: 4px solid var(--copper);
  background: #fff8f3;
}
/* Two text columns keep the measure readable while using the full row. */
.versus-limits p {
  color: var(--ink);
  columns: 2;
  column-gap: 40px;
}

/* FAQ --------------------------------------------------------------------- */
/* Two cards per row. The 2px grid gap over a --rule background is what draws
   the divider lines, so it works the same in one or two columns. */
.versus-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--rule);
  overflow: hidden;
}
.versus-faq article {
  padding: 16px 20px;
  background: var(--surface);
}
/* With an odd number of questions the trailing empty cell would show the
   --rule background as a stray grey block, so the last one spans the row. */
.versus-faq article:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.versus-faq h3 {
  margin: 0 0 6px;
  font-family: Sora, sans-serif;
  font-size: 1.04rem;
  letter-spacing: -0.02em;
}
.versus-faq p {
  margin: 0;
  color: var(--muted);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .versus-hero-grid {
    grid-template-columns: 1fr;
  }
  .versus-faq {
    grid-template-columns: 1fr;
  }
  .versus-limits p {
    columns: 1;
  }
}
@media (min-width: 901px) {
  .ss-comparison .versus-hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 18px 28px;
  }
  .ss-comparison .versus-hero h1 {
    font-size: clamp(2.05rem, 4vw, 3.2rem);
  }
}
@media (max-width: 860px) {
  .versus-picks {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 620px) {
  .versus-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .versus-hero-actions .button {
    width: 100%;
    text-align: center;
  }
  .versus-verdict p {
    font-size: 1.02rem;
  }
  .versus-buy {
    justify-self: stretch;
    width: 100%;
  }
}

/* Stacked spec table on mobile ---------------------------------------------
   Below 640px the side-by-side table (min-width:760px, horizontal scroll)
   forces readers to drag back and forth to compare one row's two values.
   Reflow it into one block per spec instead: row header as a title, each
   value labelled with its product name via data-label (set on every td in
   every versus page's comparison table), stacked vertically so nothing
   needs horizontal motion. Scoped to .versus-table specifically - the
   unrelated plain .comparison-table listing on /osrs/ (no data-label
   attributes, a different one-row-per-product shape) is untouched. */
@media (max-width: 640px) {
  .versus-table .edge {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .comparison-wrap:has(.versus-table) {
    overflow-x: visible;
    border: none;
    background: transparent;
  }
  .versus-table {
    min-width: 0;
    width: 100%;
  }
  .versus-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .versus-table caption {
    padding: 0 0 10px;
  }
  .versus-table,
  .versus-table tbody,
  .versus-table tr {
    display: block;
  }
  .versus-table tr {
    margin-bottom: 12px;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 4px 14px;
    background: var(--surface);
  }
  .versus-table tr:last-child {
    margin-bottom: 0;
  }
  .versus-table th[scope="row"] {
    display: block;
    padding: 10px 0 6px;
    border-top: none;
    font-family: Sora, sans-serif;
    font-size: 1rem;
  }
  .versus-table td {
    display: block;
    padding: 8px 0;
    border-top: 1px solid var(--rule);
  }
  .versus-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}