/* Guides — article + hub styles layered on top of style.css.

   One stylesheet, two surfaces: the /guides hub (a grid of article cards) and
   every /guides/<slug> article page. Both are build output — edit
   partials/article-template.html + scripts/generate-articles.mjs, never a
   generated .html. Everything here reads from the tokens in style.css; no new
   hex, spacing or easing. The prose measure is deliberately narrower than the
   1120px container so long-form copy reads like an article, not a dashboard. */

/* The reading column. Narrower than .container (--max 1120) because 60–70
   characters is the comfortable measure for body copy; full-bleed blocks
   (tables, card grids) still live inside it and scroll rather than widen. */
.guide-col { max-width: 720px; }

/* ---------------------------------------------------------------- hero meta */

/* The mono "COMPARISON · JUL 2026 · 6 MIN READ" line under the dek — the data
   voice, same as a Verified date. */
.article-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.article-meta .sep { color: var(--ink-faint); }
.article-meta .article-cat { color: var(--bay-deep); }

/* ------------------------------------------------------------------- prose */

/* Vertical rhythm for generated body copy. Headings get the serif from the
   global h2/h3 rule; this only sets size + spacing so sections breathe. */
.article-body > h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  margin: 44px 0 14px;
  scroll-margin-top: 90px;
}
.article-body > h2:first-child { margin-top: 0; }
.article-body > h3 {
  font-size: 1.2rem;
  margin: 32px 0 10px;
  scroll-margin-top: 90px;
}
.article-body > p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--body-ink);
  margin: 0 0 18px;
}
.article-body a {
  color: var(--bay-deep);
  text-underline-offset: 2px;
}
.article-body > ul.know-list { margin: 0 0 22px; }

/* A pulled-out takeaway. Warm paper-deep panel with an optic-olive rule down
   the side — louder than a .callout, quieter than the dark CTA. */
.article-verdict {
  background: var(--fog-dim);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kitchen);
  border-radius: var(--radius-m);
  padding: 20px 22px;
  margin: 0 0 26px;
}
.article-verdict .eyebrow { color: var(--kitchen); margin: 0 0 8px; }
.article-verdict p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* --------------------------------------------------------- spec-compare table */

/* A side-by-side spec table pulled live from paddles.json at build. Named
   paddle columns (serif), mono data cells (the data voice). Trait rows print
   the tier WORD (Very high / High / …), never the licensed percentile — the
   generator has no code path that would render the number. */
.spec-compare {
  margin: 0 0 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--paper);
}
.spec-compare-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--fog-dim);
}
.spec-compare-scroll { overflow-x: auto; }
.spec-compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}
.spec-compare th,
.spec-compare td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule-08);
  vertical-align: baseline;
}
.spec-compare tr:last-child th,
.spec-compare tr:last-child td { border-bottom: 0; }
/* Row label column (spec name). */
.spec-compare tbody th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  width: 34%;
}
/* Column headers = a paddle photo over its name, linked to the detail page. */
.spec-compare thead th {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
/* The empty top-left corner stays on the card's own paper (not the deeper
   header tint) so it reads as blank, not a filled block. */
.spec-compare thead th:first-child { background: var(--paper); }
.spec-compare thead a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  text-decoration: none;
}
.spec-compare thead a:hover { color: var(--bay-deep); }
.spec-compare thead a:hover .sc-fig { transform: translateY(-2px); }
/* The transparent paddle PNG sits on the header with no well — it reads as a
   product shot, and the focus column's tint shows through behind it. */
.sc-fig {
  width: 58px;
  height: 58px;
  object-fit: contain;
  transition: transform var(--ease);
}
.spec-compare .subhead {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}
/* Data cells — centered under their (centered, photo-topped) column header. */
.spec-compare tbody td {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  text-align: center;
}
/* The "new" column gets a faint optic wash so the upgrade reads at a glance. */
.spec-compare td.is-focus { background: var(--kitchen-tint); }
.spec-compare thead th.is-focus { background: var(--kitchen-tint); }

/* The shape that leads a row: olive-tint cell, bold value, a leading check. */
.spec-compare td.is-win { background: var(--kitchen-tint); }
.spec-compare td.is-win .sc-win {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.spec-compare td.is-win .sc-win::before {
  content: "✓ ";
  color: var(--kitchen);
  font-weight: 700;
}
.spec-compare-legend {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0;
  padding: 11px 16px 14px;
  border-top: 1px solid var(--rule-08);
}

/* ---------------------------------------------------------- paddle card grid */

/* A row of paddle cards linking to their detail pages — the funnel move for
   roundups ("top power paddles") and the "shop these" strip on comparisons. */
.paddle-grid { margin: 0 0 28px; }
.paddle-grid-title { font-size: 1.2rem; margin: 0 0 4px; }
.paddle-grid-intro {
  font-size: 0.98rem;
  color: var(--body-ink);
  margin: 0 0 18px;
}
.pg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pg-guide-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.pg-guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-25);
  box-shadow: 0 8px 22px rgba(var(--ink-rgb), 0.07);
}
/* The product shot: transparent paddle PNG on a paper-deep well, so the card
   leads with the paddle the way a real gear grid does. */
.pg-fig-link { display: block; text-decoration: none; }
.pg-fig {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: var(--fog-dim);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 4px;
}
.pg-fig img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pg-fig--empty { background: repeating-linear-gradient(135deg, var(--fog-dim), var(--fog-dim) 8px, var(--paper) 8px, var(--paper) 16px); }
.pg-guide-card:hover .pg-fig img { transform: translateY(-2px); transition: transform var(--ease); }
.pg-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--poppy-deep);
}
.pg-guide-card .pg-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pg-name-link { text-decoration: none; }
.pg-guide-card .pg-name {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.pg-name-link:hover .pg-name { color: var(--bay-deep); }
.pg-guide-card .pg-line {
  font-size: 13px;
  color: var(--body-ink);
}
.pg-guide-card .pg-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  padding-top: 6px;
}
/* Actions pinned to the card floor so the buy buttons line up across the row. */
.pg-actions {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pg-buy {
  width: 100%;
  text-align: center;
  font-size: 13px;
  padding: 9px 12px;
}
.pg-specs-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--bay-deep);
  text-decoration: none;
}
.pg-specs-link:hover { text-decoration: underline; }
/* Commission disclosure that rides with a group of buy buttons. */
.pg-disclosure {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 16px 0 0;
}
.pg-disclosure a { color: var(--ink-soft); }

/* --------------------------------------------------------- head-to-head picker */

.compare-tool {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 24px;
  margin: 0 0 28px;
}
.ct-title { font-size: 1.2rem; margin: 0 0 4px; }
.ct-intro { font-size: 0.98rem; color: var(--body-ink); margin: 0 0 16px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ct-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  background: var(--fog-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform var(--ease), border-color var(--ease), background var(--ease), color var(--ease);
}
.ct-chip:hover { border-color: var(--rule-25); transform: translateY(-1px); }
.ct-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--fog-dim);
  border-color: var(--ink);
}
.ct-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-go[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.ct-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------------- CTA block */

/* The ink-ground funnel card. Borrows .section--dark's palette wholesale. */
.article-cta {
  border-radius: var(--radius-m);
  padding: 30px;
  margin: 8px 0 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.article-cta .eyebrow { margin: 0; }
.article-cta h2 { font-size: 1.35rem; margin: 0; }
.article-cta p { margin: 0 0 6px; font-size: 0.98rem; line-height: 1.6; }
.article-cta .btn { margin-top: 4px; }

/* --------------------------------------------------------- related / shop strip */

.article-related {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 26px;
}
.article-related h2 { font-size: 1.2rem; margin: 0 0 4px; }
.article-related .article-related-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.article-foot {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  line-height: 1.7;
}
.article-foot a { color: var(--ink-soft); }

/* ------------------------------------------------------------------- the hub */

.guide-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 26px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.guide-card:hover {
  transform: translateY(-3px);
  border-color: var(--rule-25);
  box-shadow: 0 10px 26px rgba(var(--ink-rgb), 0.08);
}
.guide-card .guide-cat {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bay-deep);
  background: var(--bay-tint);
  border-radius: 999px;
  padding: 4px 10px;
}
.guide-card h2 {
  font-size: 1.28rem;
  line-height: 1.2;
  margin: 0;
}
.guide-card .guide-dek {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--body-ink);
  margin: 0;
}
.guide-card .guide-meta {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.guide-empty {
  border: 1px dashed var(--rule-25);
  border-radius: var(--radius-m);
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .article-cta, .guide-card { padding: 22px; }
  .article-body > h2 { margin-top: 36px; }
}