/* RestfulPicks: the eight hub pages (hub-<category>.html) share this file. Builds on site.css, article.css and
   listing.css (rp-hubhero, rp-subtopics, rp-icards). */
.rp-hubhero h1{margin-top:.75rem}
.hub-tags{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.rp-hubhero .rp-disclose{margin-top:1.1rem;max-width:38rem}
.hub-counts{position:relative;z-index:2;margin-top:.25rem}
.hub-counts p{display:inline-flex;align-items:flex-start;gap:.55rem;padding:.6rem 1rem;border-radius:var(--r-m);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);font-size:.92rem;color:var(--text)}
.hub-counts .rp-ic{color:var(--act);margin-top:.15rem}
.hub-counts b{color:var(--ink)}
.hub-note{display:flex;gap:.5rem;align-items:flex-start;margin-top:1rem;font-size:.88rem;color:var(--muted)}
.hub-note .rp-ic{margin-top:.2rem;color:var(--moon-text)}
.hub-src{display:block;margin-top:auto;padding-top:.2rem;font-size:.8rem;color:var(--muted)}
.hub-h2{font-size:clamp(1.65rem,1.2rem + 1.6vw,2.45rem)}
/* a shelf with one top list: the card lies on its side from tablet up */
@media (min-width:768px){
  .hub-grid--1{grid-template-columns:minmax(0,1fr)}
  .hub-grid--1 .rp-tl{flex-direction:row}
  .hub-grid--1 .rp-tl .rp-card__media{flex:0 0 46%;min-height:15rem}
  /* the photo fills the height the text needs (at least 15rem), so the text half is never left hollow */
  .hub-grid--1 .rp-tl .rp-card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .hub-grid--1 .rp-tl .rp-card__body{padding:1.5rem 1.6rem;justify-content:center}
  .hub-grid--1 .rp-card__title{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
}
.hub-more{display:grid;gap:1.25rem}
@media (min-width:1024px){.hub-more--split{grid-template-columns:1fr 1fr;align-items:start}}
.hub-guides{display:grid;gap:.9rem;align-content:start}
/* drawn thumbnails in the "also on this shelf" list */
.rp-fl .rp-thumb{width:4.5rem;height:4.5rem;border-radius:14px}
/* earplugs hub: pick by situation */
.hub-sit{display:grid;gap:1.25rem}
@media (min-width:1024px){.hub-sit{grid-template-columns:.8fr 1.2fr;align-items:stretch}}
.hub-sit__media{position:relative;margin:0}
.hub-sit__media img{width:100%;height:100%;min-height:16rem;aspect-ratio:4/3;object-fit:cover;border-radius:999px 999px var(--r-xl) var(--r-xl);box-shadow:var(--sh-1)}
@media (max-width:639px){.hub-sit__media img{border-radius:var(--r-xl)}}
.hub-sit__media figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;display:flex;gap:.5rem;align-items:center;padding:.6rem .8rem;border-radius:14px;background:#fff;color:var(--ink);font:600 .88rem/1.35 var(--body);box-shadow:var(--sh-2)}
.hub-sit__media figcaption .rp-ic{color:var(--act)}
/* earplugs hub: "more reviews coming" slot */
.hub-soon{border-style:dashed;border-color:var(--line-2);background:var(--ground);box-shadow:none}
.hub-soon:hover{transform:none;box-shadow:none}
.hub-soon .rp-card__body{gap:.65rem}
.hub-soon__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:16px;background:#fff;color:var(--act)}
.hub-soon .rp-verdict{align-self:flex-start}
.hub-callouts{display:grid;gap:.9rem;margin-top:1.25rem}
/* silk hub: the skin and hair claims note under the label tiles */
.hub-claims{margin-top:.9rem}
@media (min-width:1024px){.hub-callouts{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* earplugs hub: type tiles drawn as icons (no product photos) */
.hub-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (min-width:900px){.hub-types{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hub-type{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);color:var(--text);text-decoration:none;transition:transform .2s,border-color .2s}
.hub-type:hover{border-color:var(--lilac);transform:translateY(-2px)}
.hub-type__thumb{width:4.25rem;height:4.25rem;border-radius:18px}
.hub-type__thumb .rp-ic{width:2.2rem;height:2.2rem}
.hub-type h3{font-size:1.08rem}
.hub-type p{font-size:.9rem;color:var(--muted)}
.hub-type__eg{margin-top:auto;font:700 .8rem/1.35 var(--body);color:var(--chip-text)}
.hub-front .rp-cover__body{gap:.8rem}
/* tablets: a lone last card in a two-column row takes the whole row (media beside the text) */
@media (min-width:640px) and (max-width:1023px){
  .hub-odd>:last-child:nth-child(odd){grid-column:1 / -1}
  .hub-odd>.rp-tl:last-child:nth-child(odd),.hub-odd>.rp-rv:last-child:nth-child(odd){flex-direction:row}
  .hub-odd>.rp-tl:last-child:nth-child(odd) .rp-card__media,.hub-odd>.rp-rv:last-child:nth-child(odd) .rp-card__media{flex:0 0 46%}
  .hub-odd>.rp-tl:last-child:nth-child(odd) .rp-card__media img,.hub-odd>.rp-rv:last-child:nth-child(odd) .rp-card__media img{height:100%;min-height:14rem;aspect-ratio:auto}
  .hub-sit__media img{aspect-ratio:16/8;min-height:0}
}
/* earplugs hub, desktop: the featured list on top, its six picks in two columns, the shelf list under it */
@media (min-width:1024px){
  .hub-front{grid-template-columns:minmax(0,1fr)}
  .hub-front .rp-cover__media img{aspect-ratio:3/1;object-position:center 70%}
  .hub-front .rp-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-front>.rp-freshbox{display:block}
  .hub-front .rp-freshlist{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto}
}
/* a lone comparison in a two-column grid takes the row, photo beside the text */
.rp-grid--2>:only-child{grid-column:1 / -1}
@media (min-width:768px){
  .rp-grid--2>.rp-duel:only-child{display:grid;grid-template-columns:1.1fr 1fr}
  .rp-grid--2>.rp-duel:only-child .rp-card__media{position:relative;min-height:15rem}
  .rp-grid--2>.rp-duel:only-child .rp-card__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .rp-grid--2>.rp-duel:only-child .rp-card__body{justify-content:center;padding:1.5rem}
  .rp-grid--2>.rp-duel:only-child .rp-duel__names{margin-top:0}
}
/* review card with no photo that may be shown: a drawn tile */
.rp-drawn{display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(145deg,var(--lav),#fff 80%)}
.rp-drawn__tile{width:6rem;height:6rem;border-radius:28px}
.rp-drawn__tile .rp-ic{width:3rem;height:3rem;stroke-width:1.6}
.hub-odd>.rp-rv:last-child:nth-child(odd) .rp-drawn{aspect-ratio:auto;min-height:14rem}
/* the smaller hubs: how-we-pick steps beside the ownership box */
.hub-method{display:grid;gap:1.25rem}
.hub-method .rp-how3{margin-top:0}
@media (min-width:1024px){.hub-method{grid-template-columns:1.1fr .9fr;align-items:start;gap:2rem}}
/* jump chips in the hub hero: 44 px tall on phones */
.rp-subtopics a{min-height:2.75rem}