/* reviews.css — round 3 "Why Clients Love United Legal" (DESIGN-SPEC §11; measured values REFERENCE-SPEC §7).
   Loads after refine.css (and template.css on home-en). Tokens come from r3-system.css; every var() carries a literal fallback.
   States: default (no JS) = complete wrapping grid of all eleven reviews; .reviews-slider.is-ready = transform carousel;
   .reviews-slider.is-static = grid kept on purpose (reduced motion). Continuous motion is transform/opacity only. */

/* ---------- plate (Tier A, 1420) ---------- */
.sec-reviews{padding:var(--stack,10px) var(--gutter-a,10px) 0}
.sec-reviews .sec__inner.reviews-plate{position:relative;isolation:isolate;overflow:hidden;width:auto;max-width:1420px;margin:0 auto;min-height:664px;padding:75px 10px 55px;border-radius:var(--panel-r,33px);
  background:var(--g-panel,linear-gradient(160deg,#1B2E6B 0%,#0C1D55 48%,#081338 100%));
  box-shadow:var(--rim-navy,inset 0 1px 0 rgba(255,255,255,.10)),var(--shadow-plate,0 1px 0 rgba(12,29,85,.06),0 32px 64px -40px rgba(8,19,56,.45));
  color:#fff;text-align:center}
/* the "moving background": the aerial photo anchored to the viewport, luminosity-blended into the navy at 30 % (live) */
.reviews-plate::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(brand/live/aerial.webp) center / cover no-repeat;background-attachment:fixed;opacity:.3;mix-blend-mode:luminosity}
/* keeps the blend inside the blue-purple family (--bp-500) */
.reviews-plate::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(67,86,134,.18)}
@media (hover:none){.reviews-plate::before{background-attachment:scroll;background-position:center top}}   /* iOS ignores fixed */

/* ---------- heading + rating ---------- */
.reviews-plate h2{font:600 55px/1 var(--f-primary,'Barlow Condensed',sans-serif);color:#fff;margin:0;letter-spacing:0;text-transform:none}
.reviews-plate h2 .hl{color:#F9E900}
[dir=rtl] .reviews-plate h2{font-size:46px;line-height:1.4;font-weight:700}
.reviews-rating{display:flex;justify-content:center;align-items:center;gap:0;margin:6px 0 20px;min-height:22px;line-height:1}
.reviews-rating:empty::before{content:"\2605\2605\2605\2605\2605";color:#F9E900;font:400 22px/1 var(--f-text,Montserrat,sans-serif);letter-spacing:.06em}
.rv-star{width:22px;height:22px;display:block;flex:none;overflow:visible}
.rv-defs{position:absolute;width:0;height:0;overflow:hidden}
.reviews-rating .rv-star__base,.reviews-rating .rv-star__fill{fill:#F9E900}

/* ---------- slider shell ---------- */
.reviews-slider{--per-view:3;position:relative;max-width:1400px;margin:0 auto;padding:0 10px}
.reviews-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.reviews-slider.is-ready .reviews-stage{position:relative}
.reviews-slider.is-ready .reviews-viewport{overflow:hidden;touch-action:pan-y;padding:12px 0 28px;margin:-12px 0 -28px}
.reviews-slider.is-ready .reviews-viewport.is-dragging{cursor:grabbing;user-select:none}
.reviews-slider.is-ready .reviews-track{display:flex;align-items:stretch;transition:transform 500ms cubic-bezier(.4,0,.2,1);will-change:transform}
.reviews-slider.is-ready .review{flex:0 0 calc((100% - 40px) / 3);width:calc((100% - 40px) / 3)}
.reviews-slider:not(.is-ready) .reviews-prev,.reviews-slider:not(.is-ready) .reviews-next,.reviews-slider:not(.is-ready) .reviews-controls{display:none}

/* ---------- card (live: 446.7 × 430, radius 22, #fff→#EFF7FF, 1 px white border, padding 30, gap 20) ---------- */
.review{box-sizing:border-box;position:relative;min-height:430px;margin:0;padding:30px;border-radius:var(--review-r,22px);text-align:start;display:flex;flex-direction:column;gap:20px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EFF7FF 100%);border:1px solid #fff;color:#202020;
  box-shadow:var(--shadow-card,0 1px 2px rgba(12,29,85,.06),0 16px 36px -22px rgba(12,29,85,.28))}
.review[lang=en]{--f-text:'Montserrat',sans-serif;direction:ltr}   /* English as published, Montserrat even on the Persian page */
.review blockquote{margin:0;padding:0;border:0;font:400 15px/24px var(--f-text,Montserrat,sans-serif);color:#202020;flex:1 1 auto;overflow-wrap:anywhere;quotes:none}
.review blockquote::before,.review blockquote::after{content:none}
.review footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:auto;padding:0;background:none;border:0}
.review cite{font:700 15px/1.2 var(--f-text,Montserrat,sans-serif);font-style:normal;color:#0C1D55;min-width:0;overflow-wrap:anywhere}
.review .stars{display:inline-flex;align-items:center;gap:0;flex:none;line-height:1}
.review .stars:empty::before{content:"\2605\2605\2605\2605\2605";color:#F9E900;font:400 20px/1 var(--f-text,Montserrat,sans-serif);letter-spacing:.04em}
.review .rv-star__base{fill:#CCD6DF}          /* live unmarked star */
.review .rv-star__fill{fill:#F9E900}

/* ---------- arrows (44 × 44 at the plate's 10 px edge zone, white chevrons as live) ---------- */
.reviews-prev,.reviews-next{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;
  color:rgba(238,238,238,.9);display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}
.reviews-prev{inset-inline-start:-20px}    /* = page x 10 at 1440, the plate's own edge zone (live x 10 / 1386) */
.reviews-next{inset-inline-end:-20px}
.reviews-prev svg,.reviews-next svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.reviews-next svg{transform:scaleX(-1)}
[dir=rtl] .reviews-prev svg{transform:scaleX(-1)}
[dir=rtl] .reviews-next svg{transform:none}
.reviews-prev:hover,.reviews-next:hover{color:#fff;background:rgba(255,255,255,.14)}
.reviews-prev:focus-visible,.reviews-next:focus-visible,.reviews-bullets button:focus-visible,.reviews-pause:focus-visible{outline:3px solid #F9E900;outline-offset:3px}

/* ---------- bullets (11 × 8 px dots, 44 px targets; active = yellow + scale 1.25, never colour alone) + pause ---------- */
.reviews-controls{position:relative;display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:10px;padding:0 44px}
.reviews-bullets{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;margin:0;padding:0}
.reviews-bullets button{position:relative;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent}
.reviews-bullets button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:transform .2s var(--ease-std,cubic-bezier(.2,.7,.2,1)),background .2s ease}
.reviews-bullets button:hover::before{background:rgba(255,255,255,.7)}
.reviews-bullets button[aria-selected=true]::before{background:#F9E900;transform:scale(1.25)}
.reviews-pause{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:44px;height:44px;margin:0;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(204,225,246,.4);background:rgba(12,29,85,.4);color:#CCE1F6;display:grid;place-items:center;transition:background .18s ease,color .18s ease}
.reviews-pause:hover{background:rgba(12,29,85,.7);color:#fff}
.reviews-pause svg{width:18px;height:18px;fill:currentColor;display:block}
.reviews-pause .rv-ic-play{display:none}
.reviews-pause[aria-pressed=true] .rv-ic-pause{display:none}
.reviews-pause[aria-pressed=true] .rv-ic-play{display:block}
.reviews-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- entrance: zoomIn cards (scale .6→1, 900 ms, stagger 90) + star pop/fill — once, transform/opacity only ---------- */
.reviews-plate.rv-pending .review,.reviews-plate.rv-pending .reviews-rating .rv-star{opacity:0}
.reviews-plate.is-in .review{animation:rv-zoom 900ms var(--ease-std,cubic-bezier(.2,.7,.2,1)) both;animation-delay:calc(var(--i,0) * 90ms)}
.reviews-plate.is-in .reviews-rating .rv-star{animation:rv-pop 360ms cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--s,0) * 80ms)}
.reviews-plate.is-in .review .rv-star__fill{transform-box:fill-box;transform-origin:center;animation:rv-fill 360ms var(--ease-std,cubic-bezier(.2,.7,.2,1)) both;animation-delay:calc(var(--i,0) * 90ms + 560ms + var(--s,0) * 80ms)}
.reviews-plate.rv-done .review,.reviews-plate.rv-done .reviews-rating .rv-star,.reviews-plate.rv-done .review .rv-star__fill{animation:none}
.rv-star:nth-child(1){--s:0}.rv-star:nth-child(2){--s:1}.rv-star:nth-child(3){--s:2}.rv-star:nth-child(4){--s:3}.rv-star:nth-child(5){--s:4}
@keyframes rv-zoom{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes rv-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes rv-fill{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ---------- breakpoints (3 / 2 / 1 per view, 20 px gap) ---------- */
@media (max-width:1024px){
  .reviews-slider{--per-view:2}
  .reviews-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews-slider.is-ready .review{flex-basis:calc((100% - 20px) / 2);width:calc((100% - 20px) / 2)}
  .sec-reviews .sec__inner.reviews-plate{min-height:0;border-radius:var(--panel-r,24px)}
  .reviews-plate h2{font-size:50px}
}
@media (max-width:767px){
  .reviews-slider{--per-view:1}
  .reviews-track{grid-template-columns:1fr}
  .reviews-slider.is-ready .review{flex-basis:100%;width:100%}
  .review{padding:22px;border-radius:var(--review-r,18px)}
  .sec-reviews .sec__inner.reviews-plate{padding:55px 10px 61px;border-radius:var(--panel-r,18px)}
  .reviews-plate h2{font-size:44px}
  [dir=rtl] .reviews-plate h2{font-size:34px}
  .reviews-controls{flex-direction:column;gap:6px;padding:0}
  .reviews-bullets button{width:26px}                  /* 11 × 26 = 286 ≤ 330 track (≥ 300 at 360 wide); 44 px tall (WCAG 2.5.8 met, 2.5.5 exception noted) */
  .reviews-pause{position:static;transform:none}
}

/* ---------- motion, contrast and print fallbacks ---------- */
@media (prefers-reduced-motion:reduce){
  .reviews-plate::before{background-attachment:scroll}
  .reviews-slider .reviews-track{transition:none}
  .reviews-plate .review,.reviews-plate .reviews-rating .rv-star,.reviews-plate .review .rv-star__fill{animation:none;opacity:1}
}
@media (forced-colors:active){
  .reviews-plate,.review{border:1px solid CanvasText}
  .reviews-plate::before,.reviews-plate::after{display:none}
  .reviews-bullets button::before{background:ButtonText}
  .reviews-bullets button[aria-selected=true]::before{background:Highlight;outline:2px solid Highlight}
  .reviews-prev,.reviews-next,.reviews-pause{color:ButtonText;border:1px solid ButtonText}
}
@media print{
  .reviews-plate::before,.reviews-plate::after,.reviews-prev,.reviews-next,.reviews-controls{display:none}
  .reviews-slider.is-ready .reviews-track{display:grid;transform:none!important}
  .review.is-clone{display:none}
}

/* QA round-1 (minor 24): pagination bullets get a 44 px hit box on every viewport. */
.reviews-slider [role=tab],.reviews-slider [id^=review-tab-]{min-width:44px;min-height:44px}