/**
 * Comparison pages — research-dossier skin.
 *
 * Loaded alongside gw-hook-dossier.css (tokens, header, section rhythm, type
 * scale) and gw-manufacturer.css (fact strip, ledger table). This sheet adds
 * only what the comparison pages need that no other page has: the archive card
 * grid, the editorial callout, the hook profiles, and the side-by-side
 * specification table.
 *
 * @since 1.7.18
 */

/* Neither page has a silhouette, so the header runs full width. */
html body .gw-entry.gw-dossier.gw-comparison-page > .gw-page-header,
html body .gw-entry.gw-dossier.gw-comparison-archive > .gw-page-header {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* The module's own breadcrumb markup, restyled to match the dossier's. */
html body .gw-entry.gw-dossier .gw-comparison-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
html body .gw-entry.gw-dossier .gw-comparison-breadcrumb li { display: inline; }
html body .gw-entry.gw-dossier .gw-comparison-breadcrumb li + li::before { content: "› "; color: #9aa19d; }
html body .gw-entry.gw-dossier .gw-comparison-breadcrumb,
html body .gw-entry.gw-dossier .gw-comparison-breadcrumb a {
  color: var(--gwd-muted) !important;
  font: 800 10px/1.3 var(--gwd-sans) !important;
  letter-spacing: .07em;
  text-decoration: none !important;
  text-transform: uppercase;
}
html body .gw-entry.gw-dossier .gw-comparison-breadcrumb a:hover { color: var(--gwd-ink) !important; }

/* ── Title ─────────────────────────────────────────────────────────────────── */
/* A comparison title names two hooks, so it runs long. The template supplies
   its character count and the size is the available width divided by it —
   the title sets itself to fit one line, capped at the skin's normal size and
   floored so it never becomes unreadable. 0.55em is the average advance of the
   display face at this weight. */
/* The selector matches the shape of the skin's own header-title rule in
   gw-hook-dossier.css, which pins max-width to an 830px measure with
   !important — a shorter selector loses to it and the title overflows. */
html body .gw-entry.gw-dossier > .gw-page-header h1.gw-entry-title.cmp-title {
  /* An 830px measure suits a one-hook title; this one names two. */
  max-width: none !important;
  font-size: max(
    26px,
    min( 70px, calc( min(100vw - 64px, 1276px) / (var(--cmp-title-ch, 30) * 0.55) ) )
  ) !important;
  text-wrap: nowrap;
  white-space: nowrap;
}
/* Below the floor a long title has to wrap rather than run off the page. */
@media (max-width: 700px) {
  html body .gw-entry.gw-dossier > .gw-page-header h1.gw-entry-title.cmp-title {
    white-space: normal;
    text-wrap: balance;
  }
}

/* ── Archive card grid ─────────────────────────────────────────────────────── */
.cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cmp-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  margin: 0;
  background: #f4f2ed;
  border: 1px solid #d5d2cb;
  color: var(--gwd-ink) !important;
  text-decoration: none !important;
}
.cmp-card:hover { border-color: var(--gwd-orange); box-shadow: inset 0 0 0 1px var(--gwd-orange); }
.cmp-card:focus-visible { outline: 2px solid var(--gwd-orange); outline-offset: 2px; }
.cmp-card-img { display: grid; aspect-ratio: 1 / .62; place-items: center; overflow: hidden; background: #ddd8ce; }
.cmp-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* A comparison without artwork gets a mark, not an apology. */
.cmp-card-mark {
  color: #2f7b5a;
  background: var(--gwd-green-soft);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font: 850 15px/1 var(--gwd-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cmp-card-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px 14px; }
html body .gw-entry.gw-dossier .cmp-card-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--gwd-ink) !important;
  border: 0 !important;
  font: 750 17px/1.2 var(--gwd-sans) !important;
  letter-spacing: -.025em !important;
}
.cmp-card-sub { color: #616b66; font: 11px/1.45 var(--gwd-serif); }
.cmp-card-meta {
  margin-top: auto;
  padding-top: 9px;
  color: #767e7a;
  border-top: 1px solid var(--gwd-line);
  font: 850 8px/1.3 var(--gwd-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Editorial callout ─────────────────────────────────────────────────────── */
/* The one editorial verdict on the page, so it is the one thing set apart. */
.cmp-callout { padding: 20px 22px; background: var(--gwd-green-soft); border-left: 3px solid var(--gwd-green); }
.cmp-callout-label { color: #2f7b5a; font: 850 8px/1.3 var(--gwd-sans); letter-spacing: .1em; text-transform: uppercase; }
html body .gw-entry.gw-dossier .cmp-callout-hook {
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: var(--gwd-ink) !important;
  border: 0 !important;
  font: 750 24px/1.15 var(--gwd-sans) !important;
  letter-spacing: -.03em !important;
}
.cmp-callout-hook a { color: var(--gwd-ink) !important; text-decoration: none !important; }
.cmp-callout-hook a:hover { color: var(--gwd-orange) !important; }
.cmp-callout-text { margin: 9px 0 0 !important; color: #37524a; font: 13px/1.65 var(--gwd-serif) !important; }

/* ── Hook profiles ─────────────────────────────────────────────────────────── */
.cmp-profiles { border-top: 2px solid var(--gwd-ink); }
.cmp-profile { display: grid; grid-template-columns: 4px minmax(0, 1fr); padding: 0; border-bottom: 1px solid var(--gwd-line); }
.cmp-profile-accent { background: var(--gwd-ink); }
.cmp-profile-body { padding: 18px 0 20px 18px; }
.cmp-profile-mfr { margin: 0 !important; color: #767e7a; font: 850 8px/1.3 var(--gwd-sans) !important; letter-spacing: .09em; text-transform: uppercase; }
/* .gw-entry .gw-section h3 in the base sheet outranks a bare class, so these
   headings carry the full prefix. */
html body .gw-entry.gw-dossier .cmp-profile-name {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--gwd-ink) !important;
  border: 0 !important;
  font: 750 22px/1.15 var(--gwd-sans) !important;
  letter-spacing: -.03em !important;
}
.cmp-profile-name a { color: var(--gwd-ink) !important; text-decoration: none !important; }
.cmp-profile-name a:hover { color: var(--gwd-orange) !important; }
.cmp-profile-headline { color: #616b66; font-weight: 420; }
.cmp-profile-text { margin-top: 10px; color: #4d5752; font: 13px/1.7 var(--gwd-serif); }
.cmp-profile-text p { margin: 0 0 10px !important; color: #4d5752; font: 13px/1.7 var(--gwd-serif) !important; }
.cmp-profile-spec { margin: 11px 0 0 !important; color: #767e7a; font: 11px/1.45 var(--gwd-serif) !important; }

/* ── Specification table ───────────────────────────────────────────────────── */
/* One column per hook, so it reads as a comparison rather than a list. */
.cmp-spec-scroll { overflow-x: auto; }
.cmp-spec { width: 100%; border-collapse: collapse; border-top: 2px solid var(--gwd-ink); }
.cmp-spec th, .cmp-spec td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--gwd-line); text-align: left; vertical-align: top; }
.cmp-spec thead th {
  color: var(--gwd-ink);
  font: 750 14px/1.25 var(--gwd-sans);
  letter-spacing: -.02em;
}
.cmp-spec thead th a { color: var(--gwd-ink) !important; text-decoration: none !important; }
.cmp-spec thead th a:hover { color: var(--gwd-orange) !important; }
.cmp-spec-label {
  width: 190px;
  color: #767e7a;
  font: 850 8px/1.4 var(--gwd-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cmp-spec td { color: var(--gwd-ink); font: 700 13px/1.4 var(--gwd-serif); }
.cmp-spec tbody tr:hover { background: #e3e0d9; }
/* Best-in-comparison, computed from catalog data. */
.cmp-spec .is-best { color: #b4491f; }
.cmp-star { color: var(--gwd-orange); }

/* Rows where the hooks differ are the point of the table, so they are the ones
   given weight — the matching rows stay quiet context. */
.cmp-spec tr.is-diff td { background: #fdf6ee; }
.cmp-spec tr.is-diff .cmp-spec-label { color: var(--gwd-ink); }
.cmp-spec tr:not(.is-diff) td { color: #6c7570; }
.cmp-diff-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  background: var(--gwd-orange);
  border-radius: 50%;
  vertical-align: middle;
}
.cmp-spec-note .cmp-diff-dot { margin-left: 0; margin-right: 3px; }
.cmp-spec-note { margin: 12px 0 0 !important; color: #7a827e; font: 10px/1.5 var(--gwd-sans) !important; }

/* ── Quick picks ───────────────────────────────────────────────────────────── */
.cmp-picks { width: 100%; border-collapse: collapse; border-top: 2px solid var(--gwd-ink); }
.cmp-picks th {
  padding: 9px 14px 9px 0;
  color: #767e7a;
  border-bottom: 1px solid var(--gwd-line);
  font: 850 8px/1.3 var(--gwd-sans);
  letter-spacing: .09em;
  text-align: left;
  text-transform: uppercase;
}
.cmp-picks td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--gwd-line); vertical-align: top; }
/* Category and pick each hold one line; the reason takes the space that frees.
   Sized to match the entry ledgers on the hook and manufacturer pages. */
.cmp-picks-col-cat  { width: 34%; }
.cmp-picks-col-pick { width: 20%; }
.cmp-picks td:nth-child(1),
.cmp-picks td:nth-child(2) { white-space: nowrap; }
.cmp-picks-cat { color: var(--gwd-ink); font: 700 12px/1.35 var(--gwd-serif); }
.cmp-picks a { color: var(--gwd-ink) !important; font: 750 13px/1.25 var(--gwd-sans); text-decoration: none !important; white-space: nowrap; }
.cmp-picks a:hover { color: var(--gwd-orange) !important; }
.cmp-picks-why { color: #4d5752; font: 11px/1.5 var(--gwd-serif); white-space: normal; }
/* Whether a pick was computed or chosen is worth stating, quietly. */
.cmp-badge {
  margin-left: 6px;
  padding: 2px 6px;
  font: 800 7px/1.4 var(--gwd-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cmp-badge--auto { color: #2f7b5a; background: var(--gwd-green-soft); }
.cmp-badge--editor { color: #8a5a12; background: #fdf3e0; }

/* ── Closing calls to action ───────────────────────────────────────────────── */
.cmp-cta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
/* Stated with the full prefix: the theme's link colour was reaching these and
   putting blue text on the black button. */
html body .gw-entry.gw-dossier .cmp-cta a,
html body .gw-entry.gw-dossier .cmp-cta a:visited {
  display: inline-flex;
  min-height: 42px;
  padding: 0 18px;
  align-items: center;
  color: #fff !important;
  background: var(--gwd-ink) !important;
  border: 1px solid var(--gwd-ink) !important;
  font: 850 10px/1 var(--gwd-sans) !important;
  letter-spacing: .06em;
  text-decoration: none !important;
  text-transform: uppercase;
}
html body .gw-entry.gw-dossier .cmp-cta a:hover {
  background: var(--gwd-orange) !important;
  border-color: var(--gwd-orange) !important;
}
html body .gw-entry.gw-dossier .cmp-cta a.is-secondary,
html body .gw-entry.gw-dossier .cmp-cta a.is-secondary:visited {
  color: var(--gwd-ink) !important;
  background: #fff !important;
  border-color: #aaaead !important;
}
html body .gw-entry.gw-dossier .cmp-cta a.is-secondary:hover {
  color: #fff !important;
  background: var(--gwd-ink) !important;
  border-color: var(--gwd-ink) !important;
}
html body .gw-entry.gw-dossier .cmp-refs a,
html body .gw-entry.gw-dossier .cmp-refs a:visited { color: var(--gwd-green) !important; }
.cmp-refs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.cmp-refs a { color: var(--gwd-green) !important; font: 850 9px/1.4 var(--gwd-sans); letter-spacing: .05em; text-decoration: none !important; text-transform: uppercase; }
.cmp-refs a:hover { color: var(--gwd-orange) !important; }

/* ── Related comparisons ───────────────────────────────────────────────────── */
.cmp-related { margin: 0; padding: 0; border-top: 2px solid var(--gwd-ink); list-style: none; }
.cmp-related li { padding: 13px 0; border-bottom: 1px solid var(--gwd-line); }
.cmp-related a { color: var(--gwd-ink) !important; font: 700 15px/1.3 var(--gwd-serif); text-decoration: none !important; }
.cmp-related a:hover { color: var(--gwd-orange) !important; }
.cmp-related span { display: block; margin-top: 4px; color: #616b66; font: 11px/1.45 var(--gwd-serif); }

.cmp-empty { padding: 30px 0; color: #68716d; border-top: 2px solid var(--gwd-ink); font: 13px/1.6 var(--gwd-serif); }

/* Archive pagination, matching the ledger's. */
.gw-comparison-archive .navigation.pagination { margin-top: 26px; }
.gw-comparison-archive .nav-links { display: flex; flex-wrap: wrap; gap: 4px; }
.gw-comparison-archive .page-numbers {
  display: inline-grid;
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  place-items: center;
  color: #5e6763 !important;
  border: 1px solid #aaaead;
  font: 800 10px/1 var(--gwd-sans);
  text-decoration: none !important;
}
.gw-comparison-archive .page-numbers.current { color: #fff !important; background: var(--gwd-green); border-color: var(--gwd-green); }
.gw-comparison-archive .page-numbers:hover:not(.current) { color: #fff !important; background: var(--gwd-ink); border-color: var(--gwd-ink); }

@media (max-width: 1000px) {
  .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-spec { min-width: 620px; }
}
@media (max-width: 640px) {
  .cmp-grid { grid-template-columns: minmax(0, 1fr); }
  .cmp-callout { padding: 16px 18px; }
}