/* ==========================================================================
   Reviorum — pages/best-of.css  (best-of.html / single-rv_bestof.php)
   Editorial top-10 ranking.
   ========================================================================== */

/* ---------- Hero ---------- */
.rv-bestof-hero { position: relative; overflow: hidden; background: var(--rv-warm); }
.rv-bestof-hero__art { position: absolute; right: 40px; top: 10px; pointer-events: none; }
.rv-bestof-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: var(--rv-s-10);
}
.rv-bestof-hero__inner .rv-breadcrumbs { padding-bottom: 0; }
.rv-bestof-hero__eyebrow {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--rv-r-sm);
  background: var(--rv-night);
  color: var(--rv-sun);
  font-size: var(--rv-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rv-bestof-hero__title {
  max-width: 720px;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.rv-bestof-hero__lead { max-width: 640px; color: var(--rv-ink-2); font-size: 1.0625rem; line-height: 1.6; }
.rv-bestof-hero__byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rv-s-3); font-size: var(--rv-fs-md); }

/* ---------- Layout: sticky TOC + content ---------- */
.rv-bestof-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 900px);
  gap: var(--rv-s-10);
  align-items: start;
  padding-block: var(--rv-s-8) 3.5rem;
}
.rv-bestof-toc { position: sticky; top: calc(var(--rv-top-offset) + var(--rv-header-h) + var(--rv-s-5)); }
.rv-bestof-toc__title {
  margin-bottom: var(--rv-s-2);
  color: var(--rv-muted);
  font-size: var(--rv-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rv-bestof-toc__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rv-bestof-toc__link {
  display: block;
  padding: 8px 12px;
  border-left: 2px solid var(--rv-line);
  font-size: var(--rv-fs-md);
  font-weight: 500;
}
.rv-body .rv-bestof-toc__link { color: var(--rv-ink-2); }
.rv-body .rv-bestof-toc__link:hover { border-color: var(--rv-accent); color: var(--rv-accent); }

.rv-bestof-content { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.rv-bestof-section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--rv-header-h) + var(--rv-s-4)); }
.rv-bestof-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-s-3); flex-wrap: wrap; }

/* ---------- How we rank ---------- */
.rv-bestof-how {
  display: flex;
  gap: var(--rv-s-4);
  padding: 22px;
  border: 1px solid #d5d8fb;
  border-radius: var(--rv-r-lg);
  background: var(--rv-lavender);
  scroll-margin-top: calc(var(--rv-header-h) + var(--rv-s-4));
}
.rv-bestof-how__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--rv-accent);
  color: #fff;
}
.rv-bestof-how__title { margin-bottom: 6px; font-size: var(--rv-fs-base); font-weight: 700; }
.rv-bestof-how p { color: var(--rv-ink-2); font-size: 0.9375rem; line-height: 1.6; }

/* ---------- Ranked cards ---------- */
.rv-bestof-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rv-no-js .rv-bestof-more[hidden] { display: flex; }
.rv-no-js .rv-bestof-toggle { display: none; }
.rv-bestof-toggle { align-self: center; }

.rv-bestof-card { padding: 22px; scroll-margin-top: calc(var(--rv-header-h) + var(--rv-s-4)); }
.rv-bestof-card__inner { display: flex; flex-direction: column; gap: 14px; }
.rv-bestof-card__head { display: flex; align-items: center; gap: 14px; }
.rv-bestof-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-bestof-card__name { font-size: 1.1875rem; font-weight: 800; }
.rv-body .rv-bestof-card__name a { color: var(--rv-ink); }
.rv-body .rv-bestof-card__name a:hover { color: var(--rv-accent); }
.rv-bestof-card__award {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--rv-warm);
  color: #9a3412;
  font-size: var(--rv-fs-xs);
  font-weight: 700;
}
.rv-bestof-card__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #f1f3f7;
  color: var(--rv-muted);
  font-size: var(--rv-fs-lg);
  font-weight: 800;
}
.rv-bestof-card__rank--gold { background: var(--rv-sun); color: var(--rv-night); }
.rv-bestof-card__rank--silver { background: #e4e7ee; color: var(--rv-night); }
.rv-bestof-card__rank--bronze { background: #f3c79a; color: #7c2d12; }
.rv-bestof-card__desc { color: var(--rv-ink-2); font-size: 0.9375rem; line-height: 1.6; }

.rv-bestof-card__pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rv-s-4); }
.rv-bestof-card__pc-title {
  margin-bottom: 6px;
  color: var(--rv-muted);
  font-size: var(--rv-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rv-bestof-card__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--rv-fs-md); }
.rv-bestof-card__list li { display: flex; align-items: flex-start; gap: var(--rv-s-2); }
.rv-bestof-card__list svg { flex: none; margin-top: 2px; }
.rv-bestof-card__list--pros svg { color: var(--rv-accent); }
.rv-bestof-card__list--cons svg { color: var(--rv-muted); }
.rv-bestof-card__actions { display: flex; flex-wrap: wrap; gap: var(--rv-s-2); }

/* ---------- Table ---------- */
.rv-bestof-table { min-width: 680px; }
.rv-bestof-table tbody th { font-weight: 600; color: var(--rv-ink); }
.rv-bestof-table__rank { width: 40px; color: var(--rv-muted); font-weight: 700; }
.rv-bestof-table__host { display: inline-flex; align-items: center; gap: 10px; }
.rv-body .rv-bestof-table__host { color: var(--rv-ink); }
.rv-body .rv-bestof-table__host:hover { color: var(--rv-accent); }

/* ---------- Criteria ---------- */
.rv-bestof-crit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rv-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rv-bestof-crit__item { padding: 18px; border-top: 3px solid var(--rv-cat-strong); }
.rv-bestof-crit__title { margin-bottom: 6px; font-size: 0.9375rem; font-weight: 700; }
.rv-bestof-crit__item p { line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rv-bestof-hero__art { opacity: 0.25; }
  .rv-bestof-layout { grid-template-columns: minmax(0, 1fr); gap: var(--rv-s-6); }
  .rv-bestof-toc { position: static; }
  .rv-bestof-toc__list {
    flex-direction: row;
    gap: var(--rv-s-2);
    overflow-x: auto;
    margin-inline: calc(var(--rv-gutter) * -1);
    padding: 0 var(--rv-gutter) 4px;
    scrollbar-width: none;
  }
  .rv-bestof-toc__list::-webkit-scrollbar { display: none; }
  .rv-bestof-toc__link {
    border: 1px solid var(--rv-line);
    border-radius: var(--rv-r-pill);
    background: var(--rv-surface);
    white-space: nowrap;
  }
  .rv-bestof-crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .rv-bestof-hero__art { display: none; }
  .rv-bestof-hero__lead { font-size: var(--rv-fs-base); }
  .rv-bestof-how { flex-direction: column; padding: 18px; }
  .rv-bestof-card { padding: 18px; }
  .rv-bestof-card__head { flex-wrap: wrap; gap: var(--rv-s-3); }
  .rv-bestof-card__head .rv-logo { width: 44px; height: 44px; }
  .rv-bestof-card__pc { grid-template-columns: minmax(0, 1fr); gap: var(--rv-s-3); }
  .rv-bestof-card__actions .rv-btn { flex: 1; }
  .rv-bestof-toggle { width: 100%; }
}

@media (max-width: 380px) {
  .rv-bestof-crit { grid-template-columns: minmax(0, 1fr); }
  .rv-bestof-card__actions { flex-direction: column; }
}

/* WordPress: long "Compare the top 3" link under the table may wrap */
.rv-bestof-section .rv-section__more { white-space: normal; }