/* best-earplugs-for-sleeping: page-only styles (prefix bes-). The page is built from the shared tidy kit in
   article.css (rp-asec, rp-qpicks, rp-compare, rp-itiles, rp-pcard, rp-pc, rp-qline, rp-expand, rp-cited,
   rp-gcards); this file only adds the drawn type tiles' tints, the gap between the pick cards, the
   "who it suits / skip it if" pair inside "More about this pick", the snoring split and the NRR sum. */

/* drawn earplug tiles: one tint per type */
.bes-thumb--foam{background:linear-gradient(145deg,#fff,var(--moon-soft));border-color:#f1dc9f;color:var(--moon-text)}
.bes-thumb--putty{background:linear-gradient(145deg,#fff,var(--block-tint));color:var(--night)}
.bes-thumb--wax{background:linear-gradient(145deg,#fff,var(--warn-tint));border-color:#f1dc9f;color:var(--moon-text)}
.bes-thumb--reuse{background:linear-gradient(145deg,#fff,var(--lav));color:var(--act)}

/* the six pick cards */
.bes-picks{display:grid;gap:clamp(1.1rem,.9rem + .8vw,1.6rem)}

/* inside "More about this pick": who it suits / skip it if, side by side once the card is wide */
.bes-fit{display:grid;gap:.75rem}
.bes-fit>div{padding:.8rem .9rem;border-radius:var(--r-m);background:var(--ground);border:1px solid var(--line)}
.bes-fit__title{margin-bottom:.45rem;font:700 .95rem var(--display);color:var(--ink)}
.bes-fit ul{font-size:.92rem;color:var(--ink)}
@container (min-width:34rem){.bes-fit{grid-template-columns:1fr 1fr}}
.rp-expand__body .rp-specs dd small{display:block;margin-top:.1rem}

/* the snoring split sits in the article column; on one column the photo follows the text */
.bes-split .rp-split__media img{border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 80px}
.bes-split .rp-split__media figcaption{margin-top:.45rem;font-size:.8rem;color:var(--muted)}
@media (max-width:899px){.bes-split .rp-split__media{order:2}}
.bes-split .rp-checks{font-size:.96rem}

/* NRR: the label rule as a sum, on a light card */
.bes-nrr{display:grid;gap:.9rem;padding:clamp(1rem,.85rem + .8vw,1.4rem);border-radius:var(--r-xl);background:linear-gradient(135deg,#fff,var(--lav));border:1px solid var(--line-2)}
.bes-nrr__title{font:700 1.05rem/1.3 var(--display);color:var(--ink)}
.bes-nrr__sum{display:grid;grid-template-columns:minmax(0,1fr);gap:.45rem;align-items:stretch}
.bes-nrr__term{display:flex;flex-direction:column;justify-content:center;gap:.1rem;padding:.65rem .85rem;border-radius:16px;background:#fff;border:1px solid var(--line)}
.bes-nrr__term b{font:800 1.3rem/1.15 var(--display);color:var(--ink)}
.bes-nrr__term span{font-size:.85rem;color:var(--muted)}
.bes-nrr__term--out{background:var(--moon-soft);border-color:#f1dc9f}
.bes-nrr__term--out span{color:var(--moon-text)}
.bes-nrr__op{justify-self:center;align-self:center;font:800 1.5rem/1 var(--display);color:var(--act)}
.bes-nrr__src{font-size:.84rem;color:var(--muted)}
@media (min-width:640px){.bes-nrr__sum{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}}

/* a shorter band between the hero and the first section on wide screens */
@media (min-width:1024px){.rp-ahero{padding-bottom:1.25rem}.rp-alayout{padding-top:1.5rem}}