/* =====================================================================
   REVIEWS VX - shared (template-parts/reviews-vx.php). Loaded via child_crawl_has_reviews()
   ===================================================================== */

/* ---------- REVIEWS ROOT ---------- */
/* Figma 1803:1693 | head: eyebrow, title 56/74 Medium -6%, title→text 16, text 18 -3% | head→grid 50 | 3 columns 380, gap 15, columns 1+3 start 60 lower | card: border #56007B (0.2px in Figma → 1px at 60%), radius 10, pad 19.8 | avatar 40 + name 13 | stars 80×16 #D93D00 | quote 13 -3% | value 32 SemiBold + label 13 | mobile: swipe slider, tablet: 2-col masonry (as Home) | hover: my values */
:root{--vx-reviews-head-gap:clamp(2rem,1.625rem + 1.6667vw,3.125rem);--vx-reviews-w:1170px;--vx-reviews-gap:15px;--vx-reviews-offset:60px;--vx-reviews-border:rgba(86,0,123,.6);--vx-reviews-border-hover:var(--vx-violet-500);--vx-reviews-radius:10px;--vx-reviews-pad:19.8px;--vx-reviews-avatar:40px;--vx-reviews-avatar-bg:#9E9E9E;--vx-reviews-small-fs:.81rem;--vx-reviews-star:16px;--vx-reviews-star-color:var(--vx-orange);--vx-reviews-value-fs:2rem;--vx-reviews-lift:-4px;--vx-reviews-slide-w:85%}

/* ---------- REVIEWS: head + card ---------- */
.vx-reviews__head{display:flex;flex-direction:column;align-items:center;text-align:center}
.vx .vx-reviews__title{margin:var(--vx-space-12) 0 0;line-height:1.325;letter-spacing:-0.06em}
.vx .vx-reviews__text{margin:var(--vx-space-16) 0 0;letter-spacing:-0.03em}
.vx-reviews__card{display:flex;flex-direction:column;box-sizing:border-box;padding:var(--vx-reviews-pad);border:1px solid var(--vx-reviews-border);border-radius:var(--vx-reviews-radius);transition:transform var(--vx-dur) var(--vx-ease),border-color var(--vx-dur) var(--vx-ease)}
.vx-reviews__person{display:flex;align-items:center;gap:15px}
.vx-reviews__avatar{display:block;flex:none;width:var(--vx-reviews-avatar);height:var(--vx-reviews-avatar);border-radius:var(--vx-radius-pill);background:var(--vx-reviews-avatar-bg);object-fit:cover}
.vx-reviews__name{font-size:var(--vx-reviews-small-fs);line-height:1.36;letter-spacing:-0.06em;color:var(--vx-white)}
.vx-reviews__stars{display:flex;gap:0;margin-top:var(--vx-space-12)}
.vx-reviews__stars svg{display:block;width:var(--vx-reviews-star);height:var(--vx-reviews-star);fill:var(--vx-reviews-star-color)}
.vx-reviews__quote{margin:15px 0 0;padding:0;border:0}
.vx .vx-reviews__quote p{margin:0;font-size:var(--vx-reviews-small-fs);line-height:1.36;letter-spacing:-0.03em;color:var(--vx-white);text-wrap:wrap}
.vx .vx-reviews__quote p+p{margin-top:1.36em}
.vx .vx-reviews__metric{display:flex;align-items:baseline;gap:15px;margin:auto 0 0;padding-top:var(--vx-space-24);line-height:1.36}
.vx-reviews__value{font-size:var(--vx-reviews-value-fs);font-weight:var(--vx-fw-semibold);letter-spacing:-0.03em;color:var(--vx-white)}
.vx-reviews__label{font-size:var(--vx-reviews-small-fs);letter-spacing:-0.06em;color:var(--vx-white)}

/* ---------- REVIEWS: mobile = swipe slider (all cards in one row) ---------- */
.vx-reviews__cols{display:flex;gap:var(--vx-reviews-gap);margin:var(--vx-reviews-head-gap) calc(var(--vx-gutter) * -1) 0;padding:0 var(--vx-gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--vx-gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vx-reviews__cols::-webkit-scrollbar{display:none}
.vx-reviews__col{display:contents;margin:0;padding:0;list-style:none}
.vx-reviews__cols .vx-reviews__card{flex:0 0 var(--vx-reviews-slide-w);scroll-snap-align:start}

/* REVIEWS: hover (mouse only) */
@media (hover:hover){
.vx-reviews__card:hover{transform:translateY(var(--vx-reviews-lift));border-color:var(--vx-reviews-border-hover)}
}

/* REVIEWS: tablet = 2-column masonry (as Home) */
@media (min-width:768px){
.vx-reviews__cols{display:block;column-count:2;column-gap:var(--vx-reviews-gap);max-width:var(--vx-reviews-w);margin:var(--vx-reviews-head-gap) auto 0;padding:0;overflow:visible;scroll-snap-type:none}
.vx-reviews__cols .vx-reviews__card{display:flex;width:100%;margin:0 0 var(--vx-reviews-gap);break-inside:avoid}
}

/* REVIEWS: desktop = 3 columns, outer columns lower (as in Figma) */
@media (min-width:1024px){
.vx-reviews__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:var(--vx-reviews-gap);column-count:auto}
.vx-reviews__col{display:flex;flex-direction:column;gap:var(--vx-reviews-gap)}
.vx-reviews__col--offset{margin-top:var(--vx-reviews-offset)}
.vx-reviews__cols .vx-reviews__card{margin:0}
}