/* how-we-pick.html only. Reuses site.css, listing.css (rc-phero, rc-values, rc-infobox, rc-subtopics) and
   article.css (rc-callout, rc-claim, rc-pros, rc-table). */

/* hero: copy beside a lifestyle photo */
.hp-hero__grid{gap:1.5rem}
@media (min-width:768px){.hp-hero .hp-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem}}
.hp-hero__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.hp-photo{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--mist);box-shadow:var(--sh-2)}
.hp-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hp-photo__note{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;display:flex;gap:.6rem;align-items:center;padding:.65rem .8rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-2);font-size:.9rem;line-height:1.4;color:var(--ink)}
.hp-photo__note .ic{color:var(--aqua);width:1.5rem;height:1.5rem}
@media (max-width:1023px){.hp-photo__note{position:static;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}}

/* on-this-page chips under the hero */
.hp-jump{margin-top:1rem}

/* six steps: three columns on desktop */
@media (min-width:1024px){.hp-steps{grid-template-columns:repeat(3,1fr)}}

/* the "where a source is silent" line under the source tiles */
.hp-silent{padding:.75rem .95rem;border-radius:var(--r-m);background:#fff;border:1px dashed var(--line-2);font-size:.94rem;color:var(--text)}
.hp-silent b{color:var(--ink)}

/* the class callout beside the maker-claim sample */
.hp-two{display:grid;gap:.85rem;margin-top:1rem}
@media (min-width:900px){.hp-two{grid-template-columns:1fr 1fr;align-items:start}}
.hp-two--top{margin-top:1.25rem}

/* checks table: give the long cells room */
@media (min-width:768px){.hp-table{min-width:44rem}.hp-table td{min-width:12rem}}
.hp-table .rc-src{margin-top:.3rem}
/* checks table: on phones each product type becomes a card, so the FDA column is never off screen */
@media (max-width:767px){
  .hp-table{min-width:0}
  .hp-table thead{display:none}
  .hp-table tr{display:grid;gap:.4rem;padding:.9rem 1rem;border-top:1px solid var(--line)}
  .hp-table tbody tr:first-child{border-top:0}
  .hp-table tbody tr:nth-child(even){background:#f8fdfe}
  .hp-table tbody th,.hp-table td{display:block;position:static;min-width:0;padding:0;border:0;box-shadow:none;background:none!important}
  .hp-table tbody th{font-size:1rem}
  .hp-table td::before{display:block;font:600 .8125rem var(--display);color:var(--aqua-900);margin-bottom:.1rem}
  .hp-table td:nth-of-type(1)::before{content:"From the maker"}
  .hp-table td:nth-of-type(2)::before{content:"FDA device type"}
}

/* what counts / what does not: three lines each, the rest behind a native "Show all 5" */
.hp-more{margin-top:.55rem}
.hp-more>summary{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.45rem .9rem;border-radius:var(--r-s);border:1.5px solid var(--line-2);background:#fff;color:var(--ink);font:600 .9rem var(--display);cursor:pointer}
.hp-more>summary:hover{border-color:var(--aqua)}
.hp-more>summary .ic{transform:rotate(90deg);transition:transform .2s}
.hp-more[open]>summary .ic{transform:rotate(-90deg)}
.hp-more .when-open,.hp-more[open] .when-closed{display:none}
.hp-more[open] .when-open{display:inline}
.hp-more[open]>summary{margin-bottom:.55rem}

/* ranking cards */
.hp-verdicts{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.15rem}
/* three ranking cards: one row from 640 px, so no card sits alone */
@media (min-width:640px){.hp-rank{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* re-check: what it covers (two short columns) + the badge */
.hp-recheck{display:grid;gap:.85rem;margin-top:1.15rem}
@media (min-width:900px){.hp-recheck{grid-template-columns:1.2fr 1fr;align-items:stretch}}
.hp-covers{display:grid;gap:.35rem .9rem}
@media (min-width:480px){.hp-covers{grid-template-columns:1fr 1fr}}
.rc-infobox .hp-covers li+li{margin-top:0}
.hp-badge p+p{margin-top:.15rem;font-size:.94rem;line-height:1.55}

/* off-limits: seven titles only. Two columns with the last one full width; on desktop four, then three, each row full */
.hp-never .rc-safe__item{align-items:center}
.hp-never .rc-safe__ico{grid-row:auto}
.hp-never b{font:600 1rem/1.3 var(--display);color:var(--ink)}
@media (min-width:560px){.hp-never{grid-template-columns:1fr 1fr}}
.hp-never .rc-safe__item:last-child{grid-column:1/-1}
@media (min-width:1024px){.hp-never{grid-template-columns:repeat(12,minmax(0,1fr))}.hp-never .rc-safe__item{grid-column:span 3}.hp-never .rc-safe__item:nth-child(n+5){grid-column:span 4}}
@media (max-width:639px){.hp-never b{font-size:.94rem}}

/* phones: icon beside the text in the step and ranking tiles, so six steps read as a short list */
@media (max-width:639px){
  .hp-steps .rc-step{grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;padding:.9rem 1rem}
  .hp-steps .rc-step__top{grid-row:1/3;flex-direction:column;justify-content:flex-start;gap:.3rem}
  .hp-steps .rc-step__top::after{font-size:.9rem}
  .hp-rank .rc-value{grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.25rem;padding:.95rem 1rem}
  .hp-rank .rc-value__ico{grid-row:1/3}
}
/* review-tidy P3-20: on tablets the closing ask box is one banner (drawing, text, buttons) instead of a
   full-width box with its right half empty */
@media (min-width:640px) and (max-width:1023.98px){
  #faq .rc-ask{grid-template-columns:auto minmax(0,1fr) auto;column-gap:1.25rem;row-gap:.35rem;align-items:center}
  #faq .rc-ask__art{grid-row:1/3;width:5.5rem}
  #faq .rc-ask h3{grid-column:2;grid-row:1;align-self:end}
  #faq .rc-ask p{grid-column:2;grid-row:2;align-self:start}
  #faq .rc-ask .rc-btn{grid-column:3;grid-row:1;align-self:end}
  #faq .rc-ask .rc-more{grid-column:3;grid-row:2;align-self:start}
}