/**
 * Ballistic Edge Theme — reviews.css
 * Reviews archive hero, glassmorphism card grid, ACCESS INTEL button,
 * single-review 2-column layout, Tech Specs sticky sidebar.
 *
 * Depends on: variables.css, blogs.css (for .blog-card, .single-content,
 * .single-share-wrap, .related-intel-wrap, .share-btn styles)
 */

/* ══════════════════════════════════════════════════════════════
   ARCHIVE — PAGE WRAPPER
   ══════════════════════════════════════════════════════════════ */

.be-archive-main {
    background: var(--color-black);
    min-height: 70vh;
}

/* ══════════════════════════════════════════════════════════════
   ARCHIVE HERO — Angled diagonal cut (mirrors homepage hero)
   ══════════════════════════════════════════════════════════════ */

.archive-hero {
    position: relative;
    background: var(--color-dark-gray);
    padding: 130px 0 120px;           /* tall enough that clip doesn't eat text */
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    margin-bottom: -50px;             /* next section overlaps the clipped void */
    z-index: 1;
}

/* Radial orange glow behind copy */
.archive-hero__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 80% 90% at 75% 60%,
            rgba(232, 99, 10, 0.09) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse 40% 50% at 10% 20%,
            rgba(232, 99, 10, 0.05) 0%,
            transparent 55%
        );
    pointer-events: none;
    z-index: 0;
}

/* Subtle tactical cross-hatch texture overlay */
.archive-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.012) 0px,
            transparent 1px,
            transparent 40px,
            rgba(255,255,255,0.012) 41px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.012) 0px,
            transparent 1px,
            transparent 40px,
            rgba(255,255,255,0.012) 41px
        );
    pointer-events: none;
    z-index: 0;
}

.archive-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.archive-hero__eyebrow {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.archive-hero__title {
    font-family: 'Montserrat', 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-white);
    margin: 0;
}

.archive-hero__desc {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    color: var(--color-silver);
    line-height: 1.65;
    margin: 0;
    max-width: 540px;
}

.archive-hero__stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.archive-stat {
    font-family: var(--font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(160, 160, 160, 0.6);
}

.archive-stat strong {
    color: var(--color-orange);
    font-weight: 700;
}

.archive-stat-sep {
    color: rgba(160, 160, 160, 0.25);
    font-size: 0.55rem;
}

/* ══════════════════════════════════════════════════════════════
   ARCHIVE — GRID SECTION
   ══════════════════════════════════════════════════════════════ */

.archive-grid-section {
    background: var(--color-black);
    padding: 7rem 0 7rem;              /* extra top pad absorbs the clip-path overlap */
    position: relative;
    z-index: 2;
}

.archive-grid-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ── 3-column reviews grid ──────────────────────────────────── */

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-bottom: 3.5rem;
}

/* ══════════════════════════════════════════════════════════════
   REVIEW CARD — Glassmorphism, lift + glow on hover
   ══════════════════════════════════════════════════════════════ */

.review-card {
    background: rgba(42, 42, 42, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: var(--border-radius-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform    var(--transition-mid),
        box-shadow   var(--transition-mid),
        border-color var(--transition-mid);
    will-change: transform;
}

.review-card:hover {
    transform: translateY(-9px);
    border-color: rgba(232, 99, 10, 0.35);
    box-shadow:
        0 28px 55px rgba(0, 0, 0, 0.85),
        0 0 30px rgba(232, 99, 10, 0.18);
}

/* ── Thumbnail ─────────────────────────────────────────────── */

.review-card__thumb-link {
    display: block;
    text-decoration: none;
}

.review-card__thumb-wrap {
    position: relative;
    overflow: hidden;
    height: 230px;
    background: var(--color-dark-gray);
    flex-shrink: 0;
}

.review-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transition-slow);
}

.review-card:hover .review-card__img {
    transform: scale(1.08);
}

/* Category badge — top-left orange pill */
.review-card__badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.25rem 0.65rem;
    background: var(--color-orange);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}

/* Score badge — bottom-right, dark with orange text */
.review-card__score-badge {
    position: absolute;
    bottom: 0.65rem;
    right: 0.65rem;
    display: flex;
    align-items: baseline;
    gap: 1px;
    padding: 0.3rem 0.6rem;
    background: rgba(13, 13, 13, 0.90);
    border: 1px solid rgba(232, 99, 10, 0.45);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}

.review-card__score-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--color-orange);
    line-height: 1;
}

.review-card__score-max {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    color: var(--color-silver);
}

/* ── Body ────────────────────────────────────────────────────── */

.review-card__body {
    padding: 1.4rem 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.review-card__meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-silver);
}

.review-card__meta time,
.review-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.review-card__meta-sep {
    opacity: 0.35;
    font-size: 0.5rem;
}

.review-card__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card__title a {
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.review-card__title a:hover {
    color: var(--color-orange);
}

.review-card__excerpt {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-silver);
    line-height: 1.65;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Footer ──────────────────────────────────────────────────── */

.review-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: auto;
    gap: 0.75rem;
}

/* "ACCESS INTEL" — orange text with animated underline & arrow */
.btn-access-intel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-orange);
    background: rgba(232, 99, 10, 0.07);
    border: 1px solid rgba(232, 99, 10, 0.28);
    border-radius: 4px;
    padding: 0.48rem 1rem;
    transition:
        background    var(--transition-fast),
        border-color  var(--transition-fast),
        color         var(--transition-fast),
        gap           var(--transition-fast);
}

.btn-access-intel:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: var(--color-black);
    gap: 0.75rem;
}

.review-card__cat-link {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: rgba(160, 160, 160, 0.5);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.review-card__cat-link:hover {
    color: var(--color-orange);
}

/* ── Empty state ─────────────────────────────────────────────── */

.archive-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem;
    gap: 1.25rem;
}

.archive-empty__icon {
    font-size: 3rem;
    color: var(--color-orange);
    opacity: 0.25;
}

.archive-empty__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
}

.archive-empty__text {
    color: var(--color-silver);
    font-size: var(--font-size-small);
    line-height: 1.7;
    max-width: 420px;
    margin: 0;
}

/* ── Pagination ──────────────────────────────────────────────── */

.archive-pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.archive-pagination .nav-links {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 0.5rem 0.9rem;
    background: var(--color-mid-gray);
    color: var(--color-silver);
    font-family: var(--font-body);
    font-size: var(--font-size-small);
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition:
        background var(--transition-fast),
        color      var(--transition-fast);
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
    background: var(--color-orange);
    color: var(--color-black);
    border-color: var(--color-orange);
}

/* ══════════════════════════════════════════════════════════════
   SINGLE REVIEW — PAGE WRAPPER
   ══════════════════════════════════════════════════════════════ */

.be-review-main {
    background: var(--color-black);
}

/* ══════════════════════════════════════════════════════════════
   REVIEW HERO — full-width, heavily dimmed, tall
   (overrides the .single-hero styles in blogs.css)
   ══════════════════════════════════════════════════════════════ */

.review-hero {
    position: relative;
    height: 620px;
    overflow: hidden;
}

.review-hero__media {
    position: absolute;
    inset: 0;
}

.review-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    /* Static dim: slightly desaturated for editorial look */
    filter: brightness(0.55) saturate(0.7);
    transition: transform var(--transition-slow);
}

/* Three-layer overlay: subtle top, right vignette, heavy bottom gradient */
.review-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(13, 13, 13, 0.10) 0%,
            rgba(13, 13, 13, 0.45) 40%,
            rgba(13, 13, 13, 0.97) 100%
        ),
        linear-gradient(
            to right,
            rgba(13, 13, 13, 0.30) 0%,
            transparent 60%
        );
}

.review-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.review-hero__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter) 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Top row: badge + score side by side */
.review-hero__top-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Orange category badge */
.review-hero__badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    background: var(--color-orange);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: background var(--transition-fast);
}

.review-hero__badge:hover {
    background: var(--color-orange-dark);
}

/* Score chip in hero */
.review-hero__score {
    display: flex;
    align-items: baseline;
    gap: 3px;
    background: rgba(13, 13, 13, 0.75);
    border: 1px solid rgba(232, 99, 10, 0.55);
    border-radius: 5px;
    padding: 0.3rem 0.75rem;
}

.review-hero__score-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--color-orange);
    line-height: 1;
}

.review-hero__score-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    color: var(--color-silver);
}

/* Optional brand/model product name */
.review-hero__product-name {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0;
}

/* Main headline */
.review-hero__title {
    font-family: 'Montserrat', 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0.01em;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.7);
    max-width: 900px;
}

/* Author · Date · Read time row */
.review-hero__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(245, 245, 245, 0.65);
}

.review-hero__author,
.review-hero__meta time,
.review-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.review-hero__meta-sep {
    opacity: 0.35;
    font-size: 0.55rem;
}

/* ══════════════════════════════════════════════════════════════
   2-COLUMN REVIEW LAYOUT
   ══════════════════════════════════════════════════════════════ */

.review-content-outer {
    background: var(--color-black);
    padding: 4.5rem 0 4rem;
}

.review-content-grid {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3.5rem;
    align-items: start;
}

/* Left column: override the single-content centering from blogs.css */
.review-main-col .single-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ── Orange blockquote (thick left border) ───────────────────── */
.review-main-col .single-content blockquote {
    border-left: 5px solid var(--color-orange);
    padding: 1.25rem 1.75rem;
    margin: 2.25rem 0;
    background: rgba(42, 42, 42, 0.45);
    backdrop-filter: blur(8px);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgba(245, 245, 245, 0.78);
    font-size: 1.05rem;
    line-height: 1.75;
    position: relative;
}

/* Decorative quote mark */
.review-main-col .single-content blockquote::before {
    content: '\201C';
    position: absolute;
    top: -0.15rem;
    left: 0.9rem;
    font-family: Georgia, serif;
    font-size: 3.5rem;
    color: var(--color-orange);
    opacity: 0.35;
    line-height: 1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   STICKY SIDEBAR — Tech Specs Widget
   ══════════════════════════════════════════════════════════════ */

.review-sidebar {
    position: sticky;
    top: 90px;   /* clears fixed 70px header + breathing room */
}

/* Glassmorphism widget container */
.review-specs-widget {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(232, 99, 10, 0.18);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.60),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.review-specs__heading {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-orange);
    margin: 0 0 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.review-specs__divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 1.25rem 0;
}

/* ── Final Score display ─────────────────────────────────────── */

.review-score-block {
    text-align: center;
    padding: 0.5rem 0 0.25rem;
}

.review-score-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.review-score-display__num {
    font-family: 'Montserrat', 'Bebas Neue', sans-serif;
    font-weight: 900;
    font-size: 4rem;
    color: var(--color-orange);
    line-height: 1;
    text-shadow: 0 0 30px rgba(232, 99, 10, 0.35);
}

.review-score-display__max {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-silver);
    margin-bottom: 6px;
}

.review-score-display__label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(160, 160, 160, 0.55);
    margin: 0 0 1rem;
}

/* Score bar */
.review-score-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
}

.review-score-bar__fill {
    height: 100%;
    background: linear-gradient(
        to right,
        var(--color-orange-dark),
        var(--color-orange),
        #ff8c3a
    );
    border-radius: 99px;
    box-shadow: 0 0 8px rgba(232, 99, 10, 0.5);
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Pros / Cons lists ───────────────────────────────────────── */

.review-pros-cons {
    margin-bottom: 0.25rem;
}

.pros-cons__heading {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pros-cons__heading--pro {
    color: #4ade80;   /* tactical green */
}

.pros-cons__heading--pro .fa-circle-check {
    color: #4ade80;
}

.pros-cons__heading--con {
    color: #f87171;   /* muted red */
}

.pros-cons__heading--con .fa-circle-xmark {
    color: #f87171;
}

.pros-list,
.cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pros-list li,
.cons-list li {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-silver);
    line-height: 1.5;
    padding-left: 1.1rem;
    position: relative;
}

.pros-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4ade80;
    font-size: 0.75rem;
    font-weight: 700;
}

.cons-list li::before {
    content: '✕';
    position: absolute;
    left: 0;
    color: #f87171;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ── CHECK CURRENT PRICE button ──────────────────────────────── */

.btn-check-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--color-orange);
    color: var(--color-black);
    border: 2px solid var(--color-orange);
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background   var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow   var(--transition-fast),
        transform    var(--transition-fast);
    margin-top: 0.25rem;
}

.btn-check-price:hover {
    background: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
    box-shadow:
        0 6px 22px rgba(232, 99, 10, 0.45),
        0 0 40px rgba(232, 99, 10, 0.15);
    transform: translateY(-2px);
}

.btn-check-price:active {
    transform: translateY(0);
    box-shadow: none;
}

.review-specs__disclosure {
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: rgba(160, 160, 160, 0.4);
    line-height: 1.5;
    margin: 0.65rem 0 0;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ≤ 1200px: sidebar shrinks slightly */
@media (max-width: 1200px) {
    .review-content-grid {
        grid-template-columns: 1fr 300px;
        gap: 2.5rem;
    }
}

/* ≤ 1024px: grid goes 2-col for cards */
@media (max-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2-column review layout stacks below 1024 */
    .review-content-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Sidebar loses sticky + becomes inline block at full width */
    .review-sidebar {
        position: static;
    }

    .review-specs-widget {
        max-width: 520px;       /* don't stretch too wide on tablet */
    }
}

/* ≤ 900px: archive hero shorter */
@media (max-width: 900px) {
    .archive-hero {
        padding: 110px 0 90px;
    }
}

/* ≤ 768px: review hero shorter, 1-col card grid */
@media (max-width: 768px) {
    .review-hero {
        height: 500px;
    }

    .review-hero__title {
        font-size: clamp(1.6rem, 5.5vw, 2.8rem);
    }

    .archive-hero {
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        padding: 90px 0 80px;
    }
}

/* ≤ 640px: all grids to single column */
@media (max-width: 640px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .review-hero {
        height: 420px;
    }

    .review-content-outer {
        padding: 3rem 0 2.5rem;
    }
}

/* ≤ 480px: tighten hero, spec widget full-width */
@media (max-width: 480px) {
    .review-score-display__num {
        font-size: 3.2rem;
    }

    .archive-hero__title {
        font-size: clamp(2.4rem, 10vw, 3.5rem);
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE ADDITIONS — ensure full tablet/mobile grid coverage
   ══════════════════════════════════════════════════════════════ */

/* Tablet upper bound: 1025px–1199px forces 2-col (was 3) */
@media (max-width: 1199px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile < 768px: single column, min 15px side padding */
@media (max-width: 767px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .archive-grid-container {
        padding-left:  max(15px, var(--gutter));
        padding-right: max(15px, var(--gutter));
    }
}