/* ═════════════════════════════════════════════════════════════════════════
   REVIEWS — native multi-platform social proof (W-061 summary bar + W-064 wall)

   Scoped to .hzo-reviews*. Tokens only. Composes the star color
   (--rating-star-color, defaulting to --color-warning, matching .hzo-rating —
   PF-031) and the .hzo-avatar primitive. ⛔ The default amber measures 2.68:1
   on .hzo-section--tint and so FAILS WCAG 1.4.11; see the constraint block at
   the top of components/rating/rating.css before placing a reviews section on
   a tinted surface.
   Layouts: --carousel (horizontal scroll-snap + nav), --grid / --wall (grid).
   ═════════════════════════════════════════════════════════════════════════ */

.hzo-reviews { --hzo-reviews-cols: 3; display: block; }
.hzo-reviews__heading { margin: 0 0 var(--space-md); }
.hzo-reviews .hzo-eyebrow { margin-bottom: var(--space-xs); }

/* ─── Fractional stars (gray base + gold overlay clipped to --hzo-stars-pct) ── */
.hzo-reviews__stars {
    position: relative;
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}
.hzo-reviews__stars-base,
.hzo-reviews__stars-fill {
    display: inline-flex;
    gap: 2px;
}
.hzo-reviews__stars svg { width: 18px; height: 18px; flex-shrink: 0; }
.hzo-reviews__stars-base { color: var(--border); }
.hzo-reviews__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--hzo-stars-pct, 0%);
    overflow: hidden;
    white-space: nowrap;
    color: var(--rating-star-color, var(--color-warning));
}

/* ─── Summary bar (W-061) ─────────────────────────────────────────────────── */
.hzo-reviews__summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-sm);
}
.hzo-reviews__brand { display: inline-flex; align-items: center; gap: var(--space-xs); }
.hzo-reviews__brand-icon { display: inline-flex; }
.hzo-reviews__brand-icon svg { width: 22px; height: 22px; display: block; }
.hzo-reviews__brand-name { font-weight: 700; color: var(--text-heading); font-size: 17px; }
.hzo-reviews__word { font-weight: 700; color: var(--text-heading); }
.hzo-reviews__score { font-weight: 700; color: var(--text-heading); }
.hzo-reviews__count { color: var(--text-muted); font-size: 15px; }
.hzo-reviews__count::before { content: "|"; margin-right: var(--space-md); color: var(--border); }
.hzo-reviews__cta { margin-left: auto; flex-shrink: 0; }

/* ─── Carousel (W-064) ────────────────────────────────────────────────────── */
.hzo-reviews__viewport { position: relative; }
.hzo-reviews__track {
    display: flex;
    gap: var(--space-md);
    margin: 0;
    padding: var(--space-xs) var(--space-2xs) var(--space-md);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* nav buttons + drag/scroll are the affordance */
    overscroll-behavior-x: contain;
}
.hzo-reviews__track::-webkit-scrollbar { display: none; }
.hzo-reviews__track:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-panel); }

/* Nav buttons — circular, over the track edges; hidden at the ends via [hidden]. */
.hzo-reviews__nav {
    position: absolute;
    top: calc(50% - 22px);
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;                        /* fleet icon-button comfort size (carousel/drawer/modal precedent) */
    height: 44px;
    padding: 0;
    background: var(--surface);
    color: var(--text-heading);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background var(--transition-base) ease, transform var(--transition-base) ease;
}
.hzo-reviews__nav[hidden] { display: none; }
.hzo-reviews__nav svg { width: 20px; height: 20px; display: block; }
.hzo-reviews__nav--prev { left: calc(var(--space-md) * -1); }
.hzo-reviews__nav--next { right: calc(var(--space-md) * -1); }
.hzo-reviews__nav:hover { background: var(--surface-2); }
.hzo-reviews__nav:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ─── Grid / wall layout ──────────────────────────────────────────────────── */
.hzo-reviews__grid {
    display: grid;
    grid-template-columns: repeat(var(--hzo-reviews-cols, 3), minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ─── Card ────────────────────────────────────────────────────────────────── */
.hzo-reviews__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-sm);
    list-style: none;
}
/* Carousel cards fill an INTEGER number of whole cards per view — reviews.js
   sets --hzo-reviews-card so a card is NEVER cut off, down to --hzo-reviews-min
   (below which it drops to fewer cards). Pre-JS fallback: one card, or the min. */
.hzo-reviews--carousel { --hzo-reviews-min: 288px; }
.hzo-reviews--carousel .hzo-reviews__card {
    flex: 0 0 var(--hzo-reviews-card, min(var(--hzo-reviews-min, 288px), 100%));
    max-width: 100%;
    scroll-snap-align: start;
}
.hzo-reviews__head { display: flex; align-items: flex-start; gap: var(--space-sm); }
.hzo-reviews__avatar { flex-shrink: 0; }
.hzo-reviews__who { min-width: 0; flex: 1 1 auto; }
.hzo-reviews__name {
    margin: 0;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hzo-reviews__date { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }
.hzo-reviews__badge {
    flex-shrink: 0;
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
}
.hzo-reviews__badge svg { width: 22px; height: 22px; display: block; }
a.hzo-reviews__badge { position: relative; transition: transform var(--transition-base) ease; }
/* ≥44px comfort tap target (WCAG 2.5.8) without enlarging the 22px glyph. */
a.hzo-reviews__badge::before { content: ""; position: absolute; inset: -11px; }
a.hzo-reviews__badge:hover { transform: scale(1.08); }
a.hzo-reviews__badge:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-full); }

.hzo-reviews__stars-row { display: flex; align-items: center; gap: var(--space-xs); }
.hzo-reviews__verified {
    display: inline-flex;
    color: #3B82F6;                     /* platform "verified" blue — a fixed signal color, not a brand token */
}
.hzo-reviews__verified svg { width: 16px; height: 16px; display: block; }

.hzo-reviews__text {
    margin: 0;
    color: var(--text-body);
    line-height: 1.55;
}
.hzo-reviews__text--muted { color: var(--text-muted); font-style: italic; }

/* Read-more clamp (reviews.js adds --clamped + the toggle when text overflows). */
.hzo-reviews__text--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hzo-reviews__more {
    align-self: flex-start;
    margin-top: calc(var(--space-xs) * -1);
    padding: 0;
    background: none;
    border: 0;
    color: var(--accent-text);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.hzo-reviews__more:hover { text-decoration: none; }
.hzo-reviews__more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-1); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hzo-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .hzo-reviews__grid { grid-template-columns: 1fr; }
    .hzo-reviews__summary { padding: var(--space-md); }
    .hzo-reviews__cta { margin-left: 0; width: 100%; }
    .hzo-reviews__nav { display: none; }        /* touch-scroll on small screens */
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hzo-reviews__track { scroll-behavior: auto; }
    .hzo-reviews__nav, a.hzo-reviews__badge { transition: none; }
    a.hzo-reviews__badge:hover { transform: none; }
}

/* ─── Forced colors ───────────────────────────────────────────────────────── */
@media (forced-colors: active) {
    .hzo-reviews__summary,
    .hzo-reviews__card,
    .hzo-reviews__nav { border: 1px solid CanvasText; }
    .hzo-reviews__stars-fill { color: Highlight; }
}