/* roundup.css — "Best X 2026" roundup layout (tech-review theme).
 *
 * Loaded ALONGSIDE review.css: a roundup reuses .rv-card / .rv-compare /
 * .rv-ranked-badge from the same saved blocks, so everything about those is
 * styled there (including the ⛔ rule about never touching the block markup —
 * read review.css's header before editing either file).
 *
 * This file adds only the roundup-specific chrome: header, jump-nav, and the
 * alternating card rhythm.
 */

.main-content--roundup .roundup-head { margin-bottom: 1.5rem; }
.main-content--roundup .roundup-head__meta {
    font-size: .9rem;
    color: var(--rv-muted);
    margin-top: .35rem;
}

/* Jump-nav — a roundup is a list the reader navigates, not a page they read
   top to bottom, so the index has to stay reachable while they scroll. */
.roundup-jumpnav {
    position: sticky;
    top: 4.25rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 0;
    margin-bottom: 1.5rem;
    /* Opaque: the cards scroll UNDER this bar, and a translucent nav over moving
       product photography is unreadable. */
    background: var(--color-bg);
    border-bottom: 1px solid var(--rv-line);
}
.roundup-jumpnav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .9rem;
    border: 1px solid var(--rv-line);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    font-size: .85rem;
    font-weight: 600;
    color: var(--rv-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease;
}
.roundup-jumpnav a:hover,
.roundup-jumpnav a.is-active { border-color: var(--rv-accent); color: var(--rv-accent); }

/* Alternating image side. Five identical cards stacked in a column read as a
   spreadsheet; flipping the identity column on every other card gives the eye a
   reason to keep moving down the page.
   Purely visual: `direction` is reset on the children, so text order, tab order
   and reading order are untouched.

   `:nth-child(even of .rv-card)` — NOT `:nth-of-type(even)`. The cards are
   `<div>`s interleaved with `<div class="rv-ranked-badge">` siblings, so
   nth-of-type counts every div and lands on the badges: it matched zero cards
   (verified in the browser). The `of S` selector counts only the cards
   themselves, which is the thing we actually mean.

   A browser without `of S` support drops these rules and simply renders no
   alternation — a graceful loss of polish, never a broken layout. */
@media (min-width: 681px) {
    .main-content--roundup .content > .rv-card:nth-child(even of .rv-card) .rv-card__top {
        direction: rtl;
    }
    .main-content--roundup .content > .rv-card:nth-child(even of .rv-card) .rv-card__top > * {
        direction: ltr;
    }
    .main-content--roundup .content > .rv-card:nth-child(even of .rv-card) .rv-card__ident {
        border-right: 0;
        border-left: 1px solid var(--rv-line);
    }
    .main-content--roundup .content > .rv-card:nth-child(even of .rv-card) .rv-card__scorebox {
        border-left: 0;
        border-right: 1px solid var(--rv-line);
    }
}

@media (max-width: 680px) {
    .roundup-jumpnav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}