/* WarmGearReport: category hubs (hub-*.html), shared by top-lists, reviews, categories and the gift guide.
   Builds on listing.css / site.css cards; only the hub's own blocks live here. */

/* crumbs above the hub banner */
.hub__top{padding-block:.9rem .65rem}
.hub__disc{margin-top:.9rem}
.hubpage .trust--slim{margin-top:1rem}
.hubpage #start{padding-top:clamp(2rem,1.5rem + 2vw,3rem)}

/* the cover title when the cover sits under a section H2 */
.cover__title{margin-top:.8rem;color:#fff;font:800 clamp(1.45rem,1.05rem + 1.5vw,2.25rem)/1.1 var(--display);letter-spacing:-.02em;max-width:26ch}
.cover__title a{color:inherit;text-decoration:none}
.cover__title a:hover{text-decoration:underline}
.cover__tags .sample-chip{align-self:center}
.feat__go{margin-top:1.1rem}

/* feature: dark cover beside a white ranked list */
.feat{display:grid;gap:1rem}
.featlist{display:flex;flex-direction:column;padding:1.15rem 1.2rem 1.2rem;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-1)}
.featlist__head{display:flex;align-items:center;gap:.45rem;font:700 1.02rem/1.25 var(--display);color:var(--ink)}
.featlist__head .ic{color:var(--ember-600)}
.featlist .ranks{margin-top:.6rem}
.featlist .rank{padding:.55rem 0}
.featlist .rank span>a{display:flex;align-items:center;min-height:1.6rem;color:inherit;text-decoration:none}
.featlist .rank span>a:hover b{text-decoration:underline}
.featlist__more{margin-top:auto;padding-top:.9rem;align-self:flex-start}

/* demo review cards carry no verdict, only this neutral tag */
.verdict--plain{color:var(--ink)}
.verdict--plain .ic{color:var(--ember-600)}

/* comparison cards without a winner bar */
.score--plain p{margin-top:0}

/* two-up grid (comparisons on a hub with only two) */
@media (min-width:64rem){.cardgrid--pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* topics on the list for next winter: plain chips, no links */
.next{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1.25rem;padding:1rem 1.1rem;border-radius:var(--r-m);background:#fff;border:1.5px dashed var(--line-2)}
.cardgrid+.next{margin-top:1.5rem}
.next__head{display:flex;align-items:center;gap:.4rem;font-weight:750;font-size:.92rem;color:var(--ink)}
.next__head .ic{color:var(--ember-600)}
.next__list{display:flex;flex-wrap:wrap;gap:.4rem}
.next__list li{padding:.35rem .75rem;border-radius:999px;background:var(--frost);color:var(--ink);font-size:.86rem;font-weight:650}

/* brands owners search for: text links, no logos */
.brands{display:grid;gap:.6rem}
.brands li>a,.brands li>span{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.1rem .75rem;min-height:3.5rem;padding:.7rem 1rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);color:var(--ink);text-decoration:none}
.brands b{font:800 1.05rem/1.2 var(--display)}
.brands small{grid-column:1;font-size:.84rem;font-weight:600;color:var(--muted)}
.brands li>a .ic{grid-row:1/span 2;grid-column:2;color:var(--ember-600);transition:transform .2s}
.brands li>a:hover .ic{transform:translateX(3px)}
.brands li>a:hover b{color:var(--ember-text)}
.brands li>span{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2)}

/* the gift promo at the foot of a hub */
.hub-promo{margin-top:1.25rem}

/* demo lists: how the list is ranked, under its sample picks */
.featlist__how{display:grid;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--line-2)}
.featlist__how li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7rem;align-items:center}
.featlist__how li>span:first-child{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:12px;background:var(--frost);color:#24477a}
.featlist__how b{display:block;font-size:.9rem;line-height:1.25;color:var(--ink)}
.featlist__how small{display:block;font-size:.8rem;color:var(--muted)}

/* the topics coming next as a card inside a card grid */
.next--card{flex-direction:column;align-items:flex-start;justify-content:center;gap:.75rem;margin:0;padding:1.4rem 1.3rem}
.next__note{font-size:.88rem;color:var(--muted)}
.next__note a{color:var(--ember-text);font-weight:700}

/* one review or comparison: a wide card, photo beside text */
@media (min-width:48rem){
  .solo>.rv,.solo>.vs{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .solo>.rv .rv__media{aspect-ratio:auto;min-height:20rem}
  .solo .rv__body,.solo .vs__body{display:flex;flex-direction:column;justify-content:center;padding:1.5rem 1.6rem}
  .solo .rv__body h3,.solo .vs__body h3{font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem)}
  .solo>.vs{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .solo>.vs .vs__pair span{aspect-ratio:1}
  .solo>.tl{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .solo>.tl .tl__media{aspect-ratio:auto;min-height:100%}
  .solo>.tl .tl__body{padding:1.4rem 1.5rem}
}
.cardgrid--pair .vs__pair span{aspect-ratio:4/3}

/* three or more posts: the lead beside the rest */
.postgrid__rest{display:grid;gap:1rem;align-content:start}
@media (min-width:64rem){
  .postgrid--side{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .postgrid--side>.post-lead{grid-column:auto;grid-template-columns:minmax(0,1fr)}
  .postgrid--side>.post-lead .post-lead__media{aspect-ratio:16/9;min-height:0}
}

@media (min-width:40rem){
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64rem){
  .feat{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:stretch}
  .feat .cover{min-height:31rem}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- round 2 ---------- */
/* hub banner: on desktop the photo sits on the right so the text never covers its subject */
.hubhero h1{text-wrap:balance}
.hubhero__lede,.head p.lede{text-wrap:pretty}
.subtopics a small{white-space:nowrap}
@media (min-width:64rem){
  .hubpage .hubhero__media{inset:0 0 0 38%}
  .hubpage .hubhero__media::after{background:linear-gradient(90deg,rgb(18 26 41/1) 0%,rgb(18 26 41/.7) 20%,rgb(18 26 41/.1) 55%,transparent 80%)}
}

/* three stat tiles */
@media (max-width:39.99rem){
  .trust--three dl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust--three .trust__item{padding:.8rem .7rem;border-bottom:0}
  .trust--three .trust__item:nth-child(2n){border-right:1px solid var(--line)}
  .trust--three .trust__item:last-child{border-right:0}
  .trust--three dt{font-size:.75rem}
}
@media (min-width:40rem){.trust--three dl{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* cards in a row end level, their links pinned to the bottom */
.cardgrid>.vs{height:100%}
.cardgrid .vs__body,.solo .vs__body{display:flex;flex-direction:column;flex:1}
.cardgrid .vs__body>.more-link{margin-top:auto;padding-top:.75rem}
.score p{flex-wrap:wrap;gap:.15rem 1rem}
.score__bar--split{gap:4px;background:transparent}
.score__bar--split i{flex:1;border-radius:999px;background:var(--line-2)}

/* the real comparison beside its key rounds and short answer */
.vsfeat{display:grid;gap:1rem}
.vsfeat__main{display:grid;gap:1rem;align-content:start}
.vsfeat__rounds{display:flex;flex-direction:column;gap:.75rem;padding:1.15rem 1.2rem;border-radius:var(--r-xl);background:#fff;box-shadow:var(--sh-1)}
.vsfeat__rounds .round{padding:.55rem .7rem}
.vsfeat__rounds .round__ico{width:2.2rem;height:2.2rem}
.vsfeat__rounds .more-link{align-self:flex-start}
@media (min-width:64rem){
  .vsfeat{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
  .vsfeat .vs__pair span{aspect-ratio:4/5}
}

/* gloves: by use */
.byuse{display:grid;gap:.6rem}
.byuse__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;min-height:4rem;padding:.75rem 1rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1);color:var(--ink);text-decoration:none}
.byuse__ico{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:var(--ember-tint);color:var(--ember-600)}
.byuse__item b{display:block;font:700 1rem/1.25 var(--display)}
.byuse__item small{display:block;font-size:.82rem;font-weight:600;color:var(--muted)}
.byuse__item>.ic{color:var(--ember-600)}
a.byuse__item:hover b{color:var(--ember-text)}
.byuse__item--soon{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2)}
.byuse__item--soon .byuse__ico{background:var(--frost);color:#24477a}
@media (min-width:40rem){.byuse{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.byuse{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* the closing card of a short how-to column */
.post.post--more{grid-template-columns:auto minmax(0,1fr);align-items:center;text-decoration:none;color:var(--ink);background:linear-gradient(160deg,#fff,#eaf1f8)}
.post--more__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:16px;background:var(--ok-tint);color:var(--ok)}
.post--more b{display:block;font:700 1.02rem/1.25 var(--display)}
.post--more p{margin-top:.25rem;font-size:.86rem;color:var(--muted)}
.post--more .more-link{margin-top:.4rem}

/* FAQ and its ask box end level */
.hubpage .faqwrap{align-items:stretch}
.hubpage .faqwrap .ask{position:relative;top:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.head .sample-chip{white-space:normal;margin-top:.35rem}

/* ---------- tidy pass (2026-10-18) ---------- */
/* the feature: a demo list shows its top 3 with no store buttons and one method line, so the cover is shorter */
@media (min-width:64rem){.feat .cover{min-height:25rem}}
.featlist .lnote{margin-top:.75rem;padding-top:.6rem;border-top:1px dashed var(--line-2)}

/* brands: a last brand alone on a two-column row spans it (review r2 P2-1) */
@media (min-width:40rem) and (max-width:63.99rem){.brands>li:last-child:nth-child(odd){grid-column:1/-1}}

/* a review card beside a comparison card: the comparison's photos take the extra height, so its
   body is never hollow (review r2 P3-3) */
@media (min-width:40rem){
  .cardgrid--pair>.vs>.vs__pair{flex:1 1 auto}
  .cardgrid--pair>.vs .vs__pair span{aspect-ratio:auto;min-height:11rem}
  .cardgrid--pair>.vs>.vs__body{flex:none}
}

/* 1024 hero: the text column stays left of the photo's subject (review r2 P3-1) */
@media (min-width:64rem) and (max-width:79.99rem){.hubpage .hubhero__body{max-width:31rem}}

/* phones: the hub's blocks on fewer screens */
@media (max-width:39.99rem){
  .hubhero h1{font-size:1.85rem}
  .hubhero__body{padding:1rem 1.1rem 1.15rem}
  .hubhero .subtopics{margin-top:.85rem}
  .hub__disc{margin-top:.6rem}
  /* the review / how-to lead card as a row: thumb beside the title */
  .postgrid .post-lead{grid-template-columns:7rem minmax(0,1fr);gap:1rem;align-items:start;padding:.75rem;border-radius:var(--r-m)}
  .postgrid .post-lead__media{aspect-ratio:1;border-radius:var(--r-s);overflow:hidden}
  .postgrid .post-lead__body{padding:0}
  .postgrid .post-lead__body h3{margin-top:.35rem;font-size:1rem;line-height:1.26}
  .postgrid .post-lead__body p{display:none}
  .post.post--more{display:none}
  .hub-promo{min-height:9.5rem}
  .hub-promo .promo__body{padding:1.15rem 1.2rem}
  .hub-promo h3{font-size:1.3rem}
}
/* the ask box beside the FAQ: one compact card below 64rem */
@media (max-width:63.99rem){
  .hubpage .faqwrap .ask{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem .9rem;align-items:center;padding:1.1rem 1.15rem}
  .hubpage .faqwrap .ask__ico{grid-row:span 2;width:2.8rem;height:2.8rem}
  .hubpage .faqwrap .ask h3{margin-top:0;font-size:1.15rem}
  .hubpage .faqwrap .ask p{margin-top:0}
  .hubpage .faqwrap .ask .btn{grid-column:1/-1;justify-self:start;margin-top:.75rem}
}

/* ---------- post-tidy review fixes (2026-10-18) ---------- */
/* gloves brands: the brand name is plain text; only the page it points to is a link (review tidy P3-2).
   A row with a link inside keeps the white card; a row with none stays dashed. */
.brands li>span.brands__txt{background:#fff;box-shadow:var(--sh-1);border:0}
.brands li>span{height:100%;align-content:center}
.brands small a{color:var(--ember-text);font-weight:750;text-decoration:underline;text-underline-offset:2px}
.brands small a:hover{color:var(--ink)}

/* one review card alone in its section: a compact row from 48rem, photo beside type and title,
   so the body is never hollow (review tidy P3-3) */
@media (min-width:48rem){
  .solo>.rv{grid-template-columns:minmax(0,17rem) minmax(0,1fr)}
  .solo>.rv .rv__media{min-height:11.5rem}
  .solo>.rv .rv__body{gap:.2rem;padding:1.25rem 1.6rem}
  .solo>.rv .rv__actions{margin-top:0;padding-top:.6rem}
}
/* desktop: a featured list that shows only two picks (the scarves hub since 2026-10-18) gets roomier rows and
   bigger photos, so the card beside the cover does not end on an empty band */
@media (min-width:64rem){
  .featlist .ranks:has(>.rank:nth-child(2):last-child) .rank{grid-template-columns:1.6rem 3.6rem minmax(0,1fr);padding:1.05rem 0}
  .featlist .ranks:has(>.rank:nth-child(2):last-child) .rank img{width:3.6rem;height:3.6rem}
}