/* =========================================================
   REVIEWS ARCHIVE (scoreboard)  archive-reviews.php
   Score colours follow lumischema_score_bands():
   is-great green, is-good blue, is-ok orange, is-low red.
   ========================================================= */

.lumicrib-reviews-archive { width: 100%; box-sizing: border-box; padding-bottom: 28px; }
.lumicrib-reviews-archive-inner { width: 100%; }

.ls-ra { --ra-navy: #071D33; --ra-blue: #0B5FD8; --ra-line: #e1e9f4; --ra-soft: #f6f9fe; --ra-text: #526477; color: #10233f; }
.ls-ra .is-great { --tone: #15803d; --tint: #e7f6ec; }
.ls-ra .is-good  { --tone: #0b5fd8; --tint: #e8f0fd; }
.ls-ra .is-ok    { --tone: #c2410c; --tint: #fdf0e7; }
.ls-ra .is-low   { --tone: #b91c1c; --tint: #fdecec; }

/* Header */
.ls-ra-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 20px; }
.ls-ra-head h1 { margin: 0 0 6px; color: var(--ra-navy); font-size: clamp(24px, 2.4vw, 28px); line-height: 1.15; font-weight: 800; letter-spacing: -.4px; }
.ls-ra-head p { max-width: 640px; margin: 0; color: var(--ra-text); font-size: 15px; line-height: 1.55; }
.ls-ra-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-ra-stats span { padding: 6px 10px; background: var(--ra-soft); border: 1px solid var(--ra-line); border-radius: 8px; color: var(--ra-text); font-size: 13px; white-space: nowrap; }
.ls-ra-stats strong { color: var(--ra-navy); }

/* Buttons */
.ls-ra-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid var(--ra-navy); border-radius: 8px; background: var(--ra-navy); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; box-sizing: border-box; cursor: pointer; }
.ls-ra-btn:hover, .ls-ra-btn:focus-visible { background: #0b2a52; border-color: #0b2a52; color: #fff; }
.ls-ra-btn.is-ghost { background: #fff; border-color: #c3d3ea; color: var(--ra-navy); padding: 0 14px; }
.ls-ra-btn.is-ghost:hover { border-color: var(--ra-navy); background: #fff; color: var(--ra-navy); }
.ls-ra-btn.is-blue { background: var(--ra-blue); border-color: var(--ra-blue); }
.ls-ra-btn.is-outline { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.ls-ra-btn.is-outline:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Score badge + award ribbon */
.ls-ra-score { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 8px; background: var(--tone, #15803d); color: #fff; font-size: 15px; font-weight: 800; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.ls-ra-score.is-sm { min-width: 38px; height: 26px; font-size: 13px; }
.ls-ra-award { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid #c3d3ea; border-radius: 999px; background: #fff; color: var(--ra-navy, #071D33); font-size: 10px; line-height: 1.4; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.ls-ra-award.is-choice { background: #071D33; border-color: #071D33; color: #fff; }
.ls-ra-award.is-choice::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #ffc533; }

/* Featured review */
.ls-ra-feature { display: flex; gap: 22px; margin: 0 0 24px; padding: 18px; background: var(--ra-soft); border: 1px solid #d6e4fb; border-top: 4px solid var(--ra-blue); border-radius: 14px; box-shadow: 0 8px 24px rgba(7,29,51,.08); }
.ls-ra-feature-media { position: relative; display: flex; flex: 0 0 260px; align-items: center; justify-content: center; min-height: 240px; overflow: hidden; background: #fff; border: 1px solid var(--ra-line); border-radius: 12px; }
.ls-ra-feature-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ls-ra-feature-media img.is-device { object-fit: contain; padding: 18px; box-sizing: border-box; }
.ls-ra-feature-media .ls-ra-award { position: absolute; top: 10px; left: 10px; z-index: 1; }
.ls-ra-feature-body { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.ls-ra-feature-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.ls-ra-feature-tags .ls-device-brand { margin: 0; }
.ls-ra-flag { padding: 3px 10px; border-radius: 999px; background: #e8f0fd; color: var(--ra-blue); text-transform: uppercase; letter-spacing: .4px; font-size: 11px; }
.ls-ra-feature-when { color: var(--ra-text); font-weight: 600; }
.ls-ra-feature-top { display: flex; align-items: flex-start; gap: 18px; }
.ls-ra-feature-top > div:first-child { flex: 1; min-width: 0; }
.ls-ra-feature h2 { margin: 0 0 6px; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 800; }
.ls-ra-feature h2 a { color: var(--ra-navy); text-decoration: none; }
.ls-ra-feature h2 a:hover { color: var(--ra-blue); }
.ls-ra-feature-top p { margin: 0; color: #26384f; font-size: 15px; line-height: 1.55; }
.ls-ra-ring { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ls-ra-ring svg { display: block; width: 92px; height: 92px; }
.ls-ra-ring .ls-ring-bar { stroke: var(--tone, #15803d); }
.ls-ra-ring > span { position: absolute; top: 0; left: 50%; width: 92px; height: 92px; margin-left: -46px; display: flex; align-items: center; justify-content: center; }
.ls-ra-ring strong { color: var(--ra-navy); font-size: 26px; line-height: 1; font-weight: 800; }
.ls-ra-ring small { padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--tone); font-size: 10.5px; line-height: 1.4; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.ls-ra-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.ls-ra-bars li { margin: 0; min-width: 0; }
.ls-ra-bars span { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--ra-text); font-size: 12px; font-weight: 700; }
.ls-ra-bars b { color: var(--ra-navy); }
.ls-ra-bars i, .ls-ra-top-list i { display: block; height: 6px; border-radius: 999px; background: #dbe6f6; overflow: hidden; }
.ls-ra-bars em, .ls-ra-top-list em { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.ls-ra-pc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: #26384f; font-size: 13px; line-height: 1.4; }
.ls-ra-pc li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ls-ra-pc .ls-ico { flex: 0 0 16px; width: 16px; height: 16px; }
.ls-ra-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.ls-ra-price { margin-left: auto; color: var(--ra-navy); font-size: 13px; font-weight: 800; }

/* Section heads */
.ls-ra-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ls-ra-section-head h2 { margin: 0; padding-left: 10px; border-left: 4px solid var(--ra-blue); color: var(--ra-navy); font-size: 18px; font-weight: 800; line-height: 1.2; }
.ls-ra-section-head a { color: var(--ra-blue); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Top rated */
.ls-ra-top { margin: 0 0 24px; }
.ls-ra-top-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ls-ra-top-list li { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 12px; background: #fff; border: 1px solid var(--ra-line); border-radius: 12px; }
.ls-ra-top-row { display: flex; align-items: center; justify-content: space-between; }
.ls-ra-rank { color: var(--ra-blue); font-size: 20px; font-weight: 800; }
.ls-ra-top-list a { color: var(--ra-navy); font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.ls-ra-top-list a:hover { color: var(--ra-blue); }
.ls-ra-top-list i { height: 5px; margin-top: auto; background: #edf2f9; }

/* Filters */
.ls-ra-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; padding: 14px; background: var(--ra-soft); border: 1px solid var(--ra-line); border-radius: 12px; }
.ls-ra-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ls-ra-filter-label { min-width: 64px; color: var(--ra-text); font-size: 12px; font-weight: 700; }
.ls-ra-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-ra-fchip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 1px solid #c3d3ea; border-radius: 999px; background: #fff; color: var(--ra-navy); font-size: 13px; font-weight: 700; text-decoration: none; box-sizing: border-box; }
.ls-ra-fchip span { color: #667085; font-weight: 600; }
.ls-ra-fchip:hover, .ls-ra-fchip:focus-visible { border-color: var(--ra-blue); color: var(--ra-blue); }
.ls-ra-fchip.is-on, .ls-ra-fchip.is-on:hover { background: var(--ra-navy); border-color: var(--ra-navy); color: #fff; }
.ls-ra-fchip.is-on span { color: #c9d6ea; }
.ls-ra-chipset { min-width: 0; }
/* Category and Score chips: one line that scrolls sideways (drag with the mouse, swipe on
   touch, or scroll), so more chips never add rows. Fades show there is more to see. */
.ls-ra-filter-row { flex-wrap: nowrap; }
.ls-ra-filter-row > .ls-ra-filter-label { flex: 0 0 auto; }
.ls-ra-filter-row > .ls-ra-chipset { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 1px 0; cursor: grab; -webkit-user-select: none; user-select: none; }
.ls-ra-chipset::-webkit-scrollbar { display: none; }
.ls-ra-chipset.is-dragging { cursor: grabbing; }
.ls-ra-chipset.is-dragging a { pointer-events: none; }
.ls-ra-chipset > a { flex: 0 0 auto; white-space: nowrap; -webkit-user-drag: none; }
.ls-ra-chipset.can-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.ls-ra-chipset.can-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.ls-ra-chipset.can-left.can-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* Category row: Brand + Sort pinned far right. */
.ls-ra-filter-row.has-selects > .ls-ra-selects { flex: 0 0 auto; }
.ls-ra-selects { display: flex; flex-wrap: nowrap; gap: 6px; margin-left: auto; } /* Brand + Sort at the far right of the Category row */
.ls-ra-selects label { display: inline-flex; align-items: center; gap: 6px; color: var(--ra-text); font-size: 12px; font-weight: 700; }
.ls-ra-selects select { min-height: 36px; max-width: 150px; padding: 0 24px 0 10px; border: 1px solid #c3d3ea; border-radius: 8px; background-color: #fff; color: var(--ra-navy); font: inherit; font-size: 13px; font-weight: 600; }
.ls-ra-count { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0 0 12px; color: var(--ra-text); font-size: 13px; }
.ls-ra-count strong { color: var(--ra-navy); }
.ls-ra-count a { color: #c62828; font-weight: 700; text-decoration: none; }

/* Cards */
/* 4 per row on desktop, 3 on tablets, 2 on phones */
.ls-ra-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ls-ra-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--ra-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(11,42,82,.05); transition: box-shadow .15s ease, transform .15s ease; }
.ls-ra-card:hover { box-shadow: 0 10px 24px rgba(7,29,51,.1); transform: translateY(-2px); }
.ls-ra-card-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ra-soft); border-bottom: 1px solid var(--ra-line); }
.ls-ra-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ls-ra-card-media img.is-device { object-fit: contain; padding: 10px; box-sizing: border-box; }
.ls-ra-noimg .ls-ico { width: 40px; height: 40px; opacity: .6; }
.ls-ra-card-media .ls-ra-score { position: absolute; top: 8px; right: 8px; box-shadow: 0 2px 8px rgba(7,29,51,.2); }
.ls-ra-card-media .ls-ra-award { position: absolute; top: 8px; left: 8px; }
.ls-ra-cat { position: absolute; bottom: 6px; left: 8px; padding: 1px 6px; border: 1px solid var(--ra-line); border-radius: 999px; background: #fff; color: var(--ra-text); font-size: 9.5px; line-height: 1.4; font-weight: 700; }
/* Same parts, same space on every card: meta line, 2-line title, stars, Specs | Compare. */
.ls-ra-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 10px 12px; }
.ls-ra-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; height: 18px; color: #667085; font-size: 12px; white-space: nowrap; overflow: hidden; }
.ls-ra-date { overflow: hidden; text-overflow: ellipsis; }
.ls-ra-word { flex: 0 0 auto; padding: 1px 5px; line-height: 1.4; border-radius: 999px; background: var(--tint); color: var(--tone); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.ls-ra-card-title { margin: 0; height: 2.6em; font-size: 15px; line-height: 1.3; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ls-ra-card-title a { color: var(--ra-navy); text-decoration: none; }
.ls-ra-card-title a:hover { color: var(--ra-blue); }
.ls-ra-card-stars { display: flex; align-items: center; gap: 8px; height: 18px; white-space: nowrap; overflow: hidden; }
.ls-ra-card-stars strong { color: var(--ra-navy); font-size: 13px; font-weight: 800; }
.ls-ra .ls-stars { position: relative; display: inline-block; flex: 0 0 auto; color: #d6dfeb; font-size: 15px; line-height: 1; letter-spacing: 1px; white-space: nowrap; }
.ls-ra .ls-stars-on { position: absolute; top: 0; left: 0; overflow: hidden; color: #f5a524; white-space: nowrap; }
.ls-ra-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 8px; border-top: 1px solid #edf2f9; font-size: 12px; font-weight: 700; line-height: 1.3; }
.ls-ra-card-foot a { color: var(--ra-blue); text-decoration: none; }
.ls-ra-card-foot a:hover { color: var(--ra-navy); }
.ls-ra-card-foot .is-off { color: #a8b4c5; cursor: default; }
.ls-ra-empty { margin: 0; padding: 18px; background: var(--ra-soft); border: 1px dashed #c3d3ea; border-radius: 12px; color: var(--ra-text); font-size: 14px; }

/* Compare / Finder band */
.ls-ra-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 24px 0; padding: 18px 20px; background: var(--ra-navy); border-radius: 12px; color: #fff; }
.ls-ra-cta h2 { margin: 0 0 4px; color: #fff; font-size: 18px; font-weight: 800; }
.ls-ra-cta p { margin: 0; color: #c9d6ea; font-size: 14px; line-height: 1.5; }
.ls-ra-cta-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* How we score */
.ls-ra-how { padding: 16px 18px; background: #fff; border: 1px solid var(--ra-line); border-radius: 12px; }
.ls-ra-how summary { cursor: pointer; color: var(--ra-navy); font-size: 16px; font-weight: 800; }
.ls-ra-how > p { margin: 10px 0 14px; color: var(--ra-text); font-size: 14px; line-height: 1.6; }
.ls-ra-how-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 16px; padding: 0; list-style: none; color: #26384f; font-size: 13px; }
.ls-ra-how-cats li { display: flex; align-items: center; gap: 8px; margin: 0; }
.ls-ra-how-cats li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ra-blue); }
.ls-ra-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.ls-ra-scale li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 10px; border-radius: 8px; border-top: 4px solid var(--tone); background: var(--tint); }
.ls-ra-scale b { color: var(--ra-navy); font-size: 13px; font-weight: 800; }
.ls-ra-scale span { color: var(--tone); font-size: 12px; font-weight: 800; }
.ls-ra-how-note { margin: 0; color: var(--ra-text); font-size: 12px; line-height: 2; }

/* Responsive */
@media (max-width: 1200px) {
    .ls-ra-top-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ls-ra-top-list li:nth-child(n+4) { display: none; }
    .ls-ra-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .ls-ra-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ls-ra-feature { flex-direction: column; padding: 14px; }
    .ls-ra-feature-media { flex-basis: auto; min-height: 200px; }
    .ls-ra-bars { grid-template-columns: minmax(0, 1fr); }
    .ls-ra-price { margin-left: 0; width: 100%; }
    .ls-ra-filter-row { flex-wrap: wrap; }
    .ls-ra-filter-row > .ls-ra-chipset { flex-basis: 100%; }
    .ls-ra-selects { margin-left: 0; width: 100%; }
    .ls-ra-selects label { flex: 1 1 140px; }
    .ls-ra-selects select { flex: 1; min-width: 0; max-width: none; }
    .ls-ra-how-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-ra-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ls-ra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ls-ra-card-body { padding: 8px 10px; gap: 5px; }
    .ls-ra-card-title { font-size: 13.5px; }
    .ls-ra-card-meta { font-size: 11px; }
    .ls-ra-card-meta > span:not(.ls-ra-word):not(.ls-rcard-type) { display: none; }
    .ls-ra-word { font-size: 9.5px; padding: 0 4px; }
    .ls-ra-award { padding: 3px 8px; font-size: 9px; }
    .ls-ra-card-stars { gap: 5px; }
    .ls-ra .ls-ra-card-stars .ls-stars { font-size: 11.5px; letter-spacing: 0; }
    .ls-ra-card-stars strong { font-size: 11.5px; }
    .ls-ra-card-media .ls-ra-score { top: 6px; right: 6px; min-width: 34px; height: 26px; font-size: 13px; }
    .ls-ra-card-media .ls-ra-award { top: 6px; left: 6px; max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; }
    .ls-ra-card-foot { font-size: 11.5px; padding-top: 8px; }
    .ls-ra-top-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .ls-ra-top-list li { scroll-snap-align: start; }
    .ls-ra-top-list li:nth-child(n+4) { display: flex; }
    .ls-ra-feature-top { flex-direction: column-reverse; }
}

/* Review type tag (Hands-on / Specs review) */
.ls-ra-card-meta .ls-rcard-type, .ls-ra-feature-tags .ls-rcard-type { display: inline-flex; padding: 1px 7px; border-radius: 5px; background: #e8eef7; color: #071D33; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; line-height: 16px; }
.ls-ra-feature-tags .ls-rcard-type { padding: 3px 9px; font-size: 11.5px; }
.ls-ra-card-meta .ls-rcard-type.is-specs, .ls-ra-feature-tags .ls-rcard-type.is-specs { background: #f3f0ff; color: #5b21b6; }