/* =====================================================
   TranslateXYZ — Reviews Page (/reviews/)
   Magazine layout: hero (inline stats) · featured testimonial (overlap)
   · plugin badge row · masonry reviews wall.
   Reuses .product-review-card from components.css.
   ===================================================== */

/* ===========================================
   HERO — dark, centered. Padding-bottom leaves room for the
   featured testimonial below to overlap the boundary.
   =========================================== */
.rv-hero {
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(48,178,48,0.20), transparent 60%),
        radial-gradient(700px 400px at 10% 110%, rgba(48,178,48,0.10), transparent 65%),
        linear-gradient(160deg, #0A1A0A 0%, #051005 100%);
    color: var(--text-on-dark);
    padding: var(--sp-9) 0 calc(var(--sp-9) + 110px);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.rv-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(48,178,48,0.06) 1px, transparent 1.5px);
    background-size: 36px 36px;
    pointer-events: none;
    opacity: 0.5;
    mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
}
.rv-hero__breadcrumb {
    position: relative;
    z-index: 1;
    justify-content: center;
    margin-bottom: var(--sp-5);
}
.rv-hero__breadcrumb ol.breadcrumb__list { justify-content: center; }
.rv-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.rv-hero__h1 {
    font-size: clamp(36px, 4.4vw, 56px);
    font-weight: var(--fw-extra);
    color: var(--text-on-dark-strong);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: var(--sp-3) 0 var(--sp-4);
}
.rv-hero__h1-accent {
    background: linear-gradient(120deg, var(--green-300), var(--green-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rv-hero__lead {
    font-size: var(--fs-md);
    color: var(--text-on-dark-muted);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--sp-6);
}

/* Inline stat band — 3 numbers in a row with middle-dot dividers */
.rv-hero__stats {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-on-dark-muted);
}
.rv-hero__stat strong {
    color: var(--text-on-dark-strong);
    font-weight: var(--fw-bold);
}
.rv-hero__stat-sep {
    color: rgba(255,255,255,0.25);
    font-weight: var(--fw-bold);
    user-select: none;
}

/* ===========================================
   FEATURED TESTIMONIAL — overlaps hero/section boundary
   =========================================== */
.rv-featured-section {
    position: relative;
    z-index: 3;
    margin-top: -110px;
    margin-bottom: var(--sp-7);
}
.rv-featured {
    max-width: 880px;
    margin: 0 auto;
    padding: var(--sp-7) var(--sp-8);
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 56px rgba(15, 30, 15, 0.20), 0 8px 16px rgba(15, 30, 15, 0.10);
}
.rv-featured .product-review-card__quote {
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.55;
    color: var(--text-on-light-strong);
    font-weight: var(--fw-medium);
    font-style: italic;
}
.rv-featured .product-review-card__quote-mark {
    width: 44px;
    height: 32px;
    color: var(--green-400);
}
.rv-featured .product-review-card__avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
}

/* ===========================================
   PLUGIN BADGE ROW — compact horizontal band, NOT cards
   =========================================== */
.rv-plugin-band-section {
    padding: var(--sp-3) 0 var(--sp-7);
    background: var(--bg-light);
}
.rv-plugin-band {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-3);
    background: var(--bg-light-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
}
.rv-plugin-band__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    text-decoration: none;
    color: var(--text-on-light);
    transition: color var(--t-fast), background var(--t-fast);
    border-radius: var(--r-md);
    flex: 1 1 auto;
    min-width: 220px;
    justify-content: center;
}
.rv-plugin-band__item:hover {
    background: var(--green-50);
    color: var(--green-700);
}
.rv-plugin-band__item img {
    width: 28px; height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}
.rv-plugin-band__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-extra);
    color: var(--text-on-light-strong);
    letter-spacing: var(--ls-tight);
}
.rv-plugin-band__item:hover .rv-plugin-band__name { color: var(--green-700); }
.rv-plugin-band__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--green-700);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}
.rv-plugin-band__link svg {
    width: 12px; height: 12px;
    transition: transform var(--t-fast);
}
.rv-plugin-band__item:hover .rv-plugin-band__link svg { transform: translateX(2px); }

.rv-plugin-band__sep {
    width: 1px;
    background: var(--border-light);
    align-self: stretch;
    flex-shrink: 0;
}

/* ===========================================
   REVIEWS WALL — CSS columns masonry
   Cards naturally stack at varied heights (visual rhythm).
   =========================================== */
.rv-wall-section { padding: var(--sp-9) 0 var(--sp-12); }
.rv-wall__title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extra);
    color: var(--text-on-light-strong);
    letter-spacing: var(--ls-tighter);
    line-height: 1.1;
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--sp-8);
}

/* CSS columns = native masonry. column-gap == card row gap. */
.rv-wall {
    column-count: 3;
    column-gap: var(--sp-5);
    max-width: 1200px;
    margin: 0 auto;
}
.rv-cell {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 var(--sp-5);
    display: block;
    min-width: 0;
}
.rv-cell--review {
    background: var(--bg-light);
}

/* ===========================================
   HIGHLIGHT CELLS — interspersed in masonry
   =========================================== */
.rv-cell--highlight {
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}
.rv-cell--highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.rv-cell--highlight__big {
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: var(--fw-extra);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-3);
    position: relative;
}
.rv-cell--highlight__label {
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    font-weight: var(--fw-semibold);
    position: relative;
}
.rv-cell--highlight-green {
    background: linear-gradient(160deg, var(--green-500) 0%, var(--green-700) 100%);
    color: #fff;
}
.rv-cell--highlight-amber {
    background: linear-gradient(160deg, var(--amber-300) 0%, var(--amber-500) 100%);
    color: var(--neutral-900);
}
.rv-cell--highlight-cyan {
    background: linear-gradient(160deg, var(--cyan-300) 0%, var(--cyan-700) 100%);
    color: #fff;
}
.rv-cell--highlight-neutral {
    background: linear-gradient(160deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
    color: #fff;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    .rv-wall { column-count: 2; }
    .rv-plugin-band__item { min-width: 200px; padding: var(--sp-3) var(--sp-4); }
}

@media (max-width: 768px) {
    .rv-hero { padding: var(--sp-8) 0 calc(var(--sp-8) + 80px); }
    .rv-featured-section { margin-top: -80px; }
    .rv-featured { padding: var(--sp-6); }
    .rv-plugin-band { flex-direction: column; padding: var(--sp-2); }
    .rv-plugin-band__sep { display: none; }
    .rv-plugin-band__item { width: 100%; justify-content: flex-start; }
    .rv-hero__stats { flex-direction: column; gap: var(--sp-2); }
    .rv-hero__stat-sep { display: none; }
}

@media (max-width: 640px) {
    .rv-wall { column-count: 1; }
    .rv-cell--highlight { min-height: 140px; }
}