/* ===========================================================================
   VALYON — REVIEW CARDS + REVIEWS MARQUEE (shared)
   ---------------------------------------------------------------------------
   One source of truth for the rotating review band. Originally lived inside
   pdp-v2.css (scoped to .pdp-v2); extracted here so the SAME design serves both
   the PDP (woocommerce/single-product/review.php → comments_template) and the
   Home "Какво казват нашите клиенти" section (front-page.php) without duplicating
   any values. Enqueued on the front page AND single products (see functions.php).

   Both contexts wrap the list in the native review containers
   (#reviews > #comments > ol.commentlist) so the high-specificity selector that
   out-specifies WooCommerce/GeneratePress core comment styling works verbatim on
   both pages — the card body would otherwise show the section cream through.
   Card colours come from CSS vars defined on .pdp-v2 / .home-v2 (gold fallback).
   =========================================================================== */

/* The legacy theme ships a global dark `.reviews { background: var(--noir) }`
   (main.css:277, an old testimonial band). BOTH the PDP and Home reviews reuse the
   `.reviews` wrapper, so neutralise it here → light/cream section with dark text.
   The PDP already does the same in pdp-v2.css (.pdp-v2 .reviews); these values match
   it 1:1, so PDP is unchanged and Home now aligns to it. */
:is(.pdp-v2, .home-v2) .reviews { background: transparent; color: var(--dark); border-top: 0; }

:is(.pdp-v2, .home-v2) .reviews #comments { margin: 0; }

/* review cards (design .rev-card; markup from valyon_review_card_inner()) */
/* Clean 2-col grid: cards fill left→right (grid-auto-flow:row) with no holes; the
   summary (PDP only) is a separate centered block ABOVE this. Cards align to the TOP
   of their row track (align-items:start) so a 1-word review stays a compact box. */
:is(.pdp-v2, .home-v2) .reviews .commentlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; align-items: start; gap: 28px; }
/* Selector matches WooCommerce's own 2-ID review path (#reviews #comments) so it
   OUT-SPECIFIES WC/GeneratePress core comment styling — otherwise the white card
   bg loses to `.woocommerce #reviews #comments ol.commentlist li` and the card shows
   the section cream through. Values are 1:1 with design pdp.css .rev-card; the gold
   (Flex) / lavender (Sleep) left border is the token --pdp-accent (set per theme on
   the .pdp-v2 wrapper; Home has no --pdp-accent → gold fallback). */
:is(.pdp-v2, .home-v2) #reviews #comments ol.commentlist li.rev-card { margin: 0; background: #fff; border: 1px solid #ece6dc; border-left: 3px solid var(--pdp-accent, #B8923E); border-radius: 13px; padding: 28px 30px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
:is(.pdp-v2, .home-v2) #reviews #comments ol.commentlist li.rev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
:is(.pdp-v2, .home-v2) .reviews .rev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
:is(.pdp-v2, .home-v2) .reviews .rev-who { display: flex; align-items: center; gap: 13px; }
:is(.pdp-v2, .home-v2) .reviews .rev-who .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 5px 12px -5px rgba(28,26,22,.45); }
:is(.pdp-v2, .home-v2) .reviews .rev-who .avatar-initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--pdp-panel-1,#FBEFDC), var(--pdp-panel-2,#F3E2C4)); color: var(--dark, #1C1A16); font-weight: 800; font-size: 16px; text-transform: uppercase; }
:is(.pdp-v2, .home-v2) .reviews .rev-who .nm { font-weight: 700; font-size: 16px; color: var(--dark); }
:is(.pdp-v2, .home-v2) .reviews .rev-who .dt { font-size: 13px; color: #9a9183; margin-top: 2px; }
:is(.pdp-v2, .home-v2) .reviews .rev-stars { display: inline-flex; gap: 2px; flex: 0 0 auto; }
:is(.pdp-v2, .home-v2) .reviews .rev-text { font-size: 15px; line-height: 1.7; color: #3a342a; }
:is(.pdp-v2, .home-v2) .reviews .rev-text p { margin: 0 0 8px; }
:is(.pdp-v2, .home-v2) .reviews .rev-text p:last-child { margin-bottom: 0; }
:is(.pdp-v2, .home-v2) .reviews .rev-pending { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
:is(.pdp-v2, .home-v2) .reviews .rev-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #2f7d4f; font-weight: 700; margin-top: 12px; }

/* ---- REVIEWS MARQUEE (built in JS: pdp-v2.js on PDP, main.js on Home) --------
   Mirrors the Home ingredients marquee: the native .commentlist becomes a flex
   track, duplicated for a seamless translateX(0 → -50%) loop, paused on hover.
   The cards keep their white/accent styling (rule above); only the layout flows.
   prefers-reduced-motion (below) falls back to the static 2-col grid. -------- */
:is(.pdp-v2, .home-v2) .reviews .rev-marquee { overflow: hidden; width: 100%; max-width: 100%; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
:is(.pdp-v2, .home-v2) .reviews ol.commentlist.rev-track { display: flex; flex-wrap: nowrap; width: max-content; gap: 28px; padding: 6px 2px; align-items: stretch; animation: ingr-marquee 60s linear infinite; will-change: transform; }
:is(.pdp-v2, .home-v2) .reviews .rev-marquee:hover .rev-track,
:is(.pdp-v2, .home-v2) .reviews .rev-marquee:active .rev-track { animation-play-state: paused; }
/* same keyframes as the ingredients marquee (home-v2.css isn't loaded on the PDP). */
@keyframes ingr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* fixed-width cards; clamp the body to ~5 lines so heights stay even */
:is(.pdp-v2, .home-v2) #reviews #comments ol.commentlist.rev-track li.rev-card { flex: 0 0 auto; width: 460px; }
:is(.pdp-v2, .home-v2) .reviews ol.commentlist.rev-track li.rev-card .rev-text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 760px) {
  /* static-grid fallback → 1 col */
  :is(.pdp-v2, .home-v2) .reviews .commentlist { grid-template-columns: 1fr; }
  /* marquee cards narrower on phones */
  :is(.pdp-v2, .home-v2) #reviews #comments ol.commentlist.rev-track li.rev-card { width: 85vw; }
}

/* Reviews marquee — reduced-motion fallback. The JS skips building the marquee when
   reduce is set (the static grid stays), so this only matters if a built marquee is
   later viewed under reduce: kill the animation, drop the duplicates and revert to the
   static 2-col grid with full (un-clamped) text. */
@media (prefers-reduced-motion: reduce) {
  :is(.pdp-v2, .home-v2) .reviews .rev-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  :is(.pdp-v2, .home-v2) .reviews ol.commentlist.rev-track { animation: none; display: grid; grid-template-columns: repeat(2, 1fr); width: auto; gap: 28px; }
  :is(.pdp-v2, .home-v2) #reviews #comments ol.commentlist.rev-track li.rev-card { width: auto; }
  :is(.pdp-v2, .home-v2) .reviews ol.commentlist.rev-track li.rev-card.is-dup { display: none; }
  :is(.pdp-v2, .home-v2) .reviews ol.commentlist.rev-track li.rev-card .rev-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
}