/* css/reviews.css — каруселя відгуків Google (спека 47).
   Винесено з інлайну index.html 08.09 (сесія S1, спека 59 §6): ті самі відгуки
   показує лендак /troshchy, а дві копії стилів розійшлись би мовчки — так само,
   як розійшлись копії футера до спеки 60 §9.
   Пара до цього файлу — js/shared/reviews-rail.js (розмітка й дані).
   Підключати ПІСЛЯ основних стилів сторінки: правила розраховують на токени
   --c1 --b1 --b2 --t2 --t3 --t4 --r --rd --font-head --fs-alumni-scale --ease-out. */
/* ── Відгуки: карусель (спека 47) — фото 4:3 · зірки · цитата · імʼя ── */
/* лише для скрінрідерів: текст, який дублює візуальні ★-гліфи */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Спека 55 §6: стрілки гортання — В ОДНОМУ РЯДКУ з оцінкою Google, праворуч.
   Було flex-wrap:wrap → на 390px .rev-score займала всю ширину і стрілки
   зʼїжджали окремим рядком під нею. nowrap + min-width:0 на картці оцінки
   (вона стискається, стрілки — ні: shrink:0 на .rev-nav). */
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap;margin-bottom:14px}
.rev-top .rev-score{min-width:0;flex:0 1 auto}
.rev-top .rev-nav{flex:0 0 auto}
@media(max-width:400px){
  /* на найвужчих екранах чіп оцінки тиснеться, а не ламає рядок */
  .rev-score{gap:9px;padding:11px 13px}
  .rev-score-src{font-size:11px}
  .rev-arrow{width:36px;height:36px;font-size:20px}
  .rev-nav{gap:6px}
}
.rev-score{display:flex;align-items:center;gap:12px;padding:13px 17px;background:var(--c1);border:1px solid var(--b1);border-radius:var(--rd);text-decoration:none;transition:border-color .25s ease,transform .25s var(--ease-out)}
.rev-score:hover,.rev-score:focus-visible{border-color:rgba(200,16,46,.55);transform:translateY(-2px)}
.rev-score-go{margin-left:2px;color:var(--r);font-size:18px;line-height:1}
@media(prefers-reduced-motion:reduce){.rev-score{transition:none}.rev-score:hover{transform:none}}
.rev-score-num{font-family:var(--font-head);font-weight:400;font-size:calc(32px * var(--fs-alumni-scale));line-height:.9;color:#fff}
.rev-score-meta{display:flex;flex-direction:column;gap:3px}
.rev-stars{color:#F2B93B;font-size:13px;letter-spacing:2px;line-height:1}
.rev-score-src{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t4)}
.rev-g{width:15px;height:15px;flex:0 0 auto}
.rev-nav{display:flex;gap:8px}
.rev-arrow{width:40px;height:40px;border-radius:50%;background:var(--c1);border:1px solid var(--b1);color:var(--t2);font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s,opacity .2s}
.rev-arrow:hover:not(:disabled){border-color:rgba(200,16,46,.6);color:#fff}
.rev-arrow:focus-visible{outline:2px solid var(--r);outline-offset:2px}
.rev-arrow:disabled,.rev-arrow.is-off{opacity:.3;cursor:default}
/* Рейка: свайп на мобільному, стрілки на десктопі. Скрол-снап — щоб картка не «зависала» напівдорозі. */
/* ⚠️ scroll-behavior НЕ ставимо в CSS: він анімує БУДЬ-ЯКУ зміну scrollLeft, і там,
   де анімація не виконується (фонова вкладка, reduced-motion, headless), програмний
   скрол стрілками просто не відбувається — зловлено на превʼю 29.08. Анімацію вмикає
   JS через scrollBy({behavior}), з урахуванням prefers-reduced-motion. */
/* ⚠️ contain — не косметика: без нього вміст рейки протікав назовні і розтягував
   ДОКУМЕНТ до 1801px при екрані 691 (заміряно 30.08). Візуально це давало «широкий
   низ» і плашку подарунка, що виїжджала за екран — саме те, що ловила Ірина.
   overflow-x:clip на секції — другий рубіж, щоб регрес не повернувся тихо. */
#reviews{padding-bottom:6px}
.rev-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;contain:content}
#reviews{overflow-x:clip}
.rev-rail::-webkit-scrollbar{height:0}
.rev-rail:focus-visible{outline:2px solid var(--r);outline-offset:4px;border-radius:var(--rd)}
.rev-card{flex:0 0 84%;max-width:320px;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--c1);border:1px solid var(--b1);border-radius:var(--rd);overflow:hidden}
@media(min-width:560px){.rev-card{flex-basis:46%}}
@media(min-width:1024px){.rev-card{flex-basis:31%}}
.rev-photo{aspect-ratio:4/3;background:#111}
.rev-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rev-body{display:flex;flex-direction:column;gap:8px;padding:13px 15px 15px;flex:1}
.rev-card-stars{color:#F2B93B;font-size:12px;letter-spacing:1.6px;line-height:1}
.rev-text{font-size:13.5px;line-height:1.6;color:var(--t2)}
/* Автор відгуку: кружечок-монограма + імʼя (як у Google, коли фото немає) */
.rev-author{display:flex;align-items:center;gap:9px;margin-top:auto}
.rev-ava{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:400;font-size:15px;line-height:1;color:#fff;background:var(--ava,#333);border:1px solid rgba(255,255,255,.14)}
.rev-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.rev-name{font-size:12px;color:var(--t4);margin-top:0}
/* 8-й слайд — вихід у повний список відгуків Google (без лайму: він лише для CTA-канону) */
.rev-more{align-items:center;justify-content:center;gap:7px;text-align:center;padding:26px 18px;text-decoration:none;transition:border-color .2s,transform .2s}
.rev-more:hover,.rev-more:focus-visible{border-color:rgba(200,16,46,.6);transform:translateY(-2px)}
.rev-more-ic{color:#F2B93B;font-size:22px;line-height:1}
.rev-more-t{font-family:var(--font-head);font-weight:400;font-size:calc(18px * var(--fs-alumni-scale));line-height:1.05;text-transform:uppercase;color:#fff}
.rev-more-sub{font-size:12px;color:var(--t4)}
.rev-more-go{color:var(--r);font-size:19px;line-height:1;margin-top:2px}
@media(prefers-reduced-motion:reduce){.rev-more:hover{transform:none}}