/* ТЗ-127 ч. 4 (26.09): блок «Отзывы клиентов» — сводка с рейтингом Карт, кнопки на Яндекс Карты и 2ГИС, карусель
   карточек (на десктопе 4 на экране, 3 — до 1279, 2 — до 992, на телефоне 1,2), на странице отзывов — сетка.
   Разметка — core/elements/_lib/otzyvy.php, листание — assets/templates/js/otzyvy.js. Цвета — фирменные. */
.otzyvy__shapka{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:20px}
.otzyvy__zag{margin:0 auto 0 0}
.otzyvy--bare .otzyvy__shapka{margin-top:4px}
.otzyvy__svodka{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:15px;line-height:140%;color:#333}
.otzyvy__ball{font-weight:700;font-size:28px;line-height:1;color:#001960}
.otzyvy__zvezdy{font-size:20px;letter-spacing:1px;line-height:1;color:#f6b400}
.otzyvy__gde{color:#5b6478}
.otzyvy__knopki{display:flex;flex-wrap:wrap;gap:10px}
.otzyvy__knopka{gap:8px;font-weight:600;font-size:14px;white-space:nowrap}
.otzyvy__logo{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-weight:700;font-size:12px;line-height:1;color:#fff}
.otzyvy__logo--ya{background:#fc3f1d}
.otzyvy__logo--gis{background:#19aa1e}

/* ширину ленты задаёт контейнер, а не 67 карточек в ряд: во вкладке карточки товара (колонка-флекс) лента иначе
   распирала колонку до ~14 800 px, и прокрутки не было */
.otzyvy{min-width:0;max-width:100%}
.otzyvy__karusel{position:relative;min-width:0;container-type:inline-size}
.otzyvy__lenta{contain:inline-size}
/* scroll-padding = боковому padding: без него точка «щелчка» первой карточки — 2 px, и сразу после вёрстки лента сама
   плавно сдвигалась на 2 px; Chrome считает такой сдвиг прокруткой и перестаёт записывать LCP — у всех страниц с
   каруселью LCP не было вовсе (ТЗ-129 ч. 6, RULES п. 334) */
.otzyvy__lenta{display:flex;gap:16px;margin:0;padding:4px 2px 8px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scroll-behavior:smooth;scrollbar-width:none;cursor:grab}
.otzyvy__lenta::-webkit-scrollbar{display:none}
.otzyvy__lenta:focus-visible{outline:2px solid #001960;outline-offset:4px;border-radius:12px}
/* раскрыли одну карточку — соседи не тянутся за ней по высоте */
.otzyvy__lenta:has(.otzyv--polnyj){align-items:flex-start}
.otzyvy__karusel--tyanut .otzyvy__lenta{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.otzyvy__punkt{display:flex;flex:0 0 calc((100% - 48px) / 4);min-width:0;scroll-snap-align:start}
.otzyvy__setka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.otzyvy__setka .otzyvy__punkt{flex:none}

.otzyv{display:flex;flex-direction:column;gap:10px;width:100%;padding:20px;background-color:#f5f5f6;border-radius:12px}
.otzyv__verh{display:flex;align-items:center;gap:12px;min-width:0}
.otzyv__avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;font-weight:700;font-size:18px;color:#fff;background:#001960}
.otzyv__avatar--1{background:#2f5bb7}.otzyv__avatar--2{background:#0f7a8a}.otzyv__avatar--3{background:#5b4aa8}
.otzyv__avatar--4{background:#3d6b3a}.otzyv__avatar--5{background:#8a4b2d}
.otzyv__kto{display:flex;flex-direction:column;min-width:0}
.otzyv__imya{overflow:hidden;font-weight:600;font-size:15px;line-height:130%;color:#333;text-overflow:ellipsis;white-space:nowrap}
.otzyv__data{font-size:13px;line-height:140%;color:#8a8f98}
.otzyv__zvezdy{display:flex;gap:1px;font-size:17px;line-height:1}
.otzyv__zv{color:#d9dce3}.otzyv__zv--da{color:#f6b400}
.otzyv__tekst{display:-webkit-box;margin:0;overflow:hidden;font-size:15px;line-height:150%;color:#333;overflow-wrap:anywhere;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.otzyv--polnyj .otzyv__tekst{display:block;-webkit-line-clamp:unset}
.otzyv__esche{align-self:flex-start;margin-top:auto;padding:0;font-weight:600;font-size:14px;line-height:140%;color:#001960;text-decoration:underline;text-decoration-color:rgba(0,25,96,.35)}
.otzyv__esche:hover{text-decoration-color:inherit}
.otzyv__esche[hidden]{display:none}

.otzyvy__strelka{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-26px;background:#fff;border-radius:50%;box-shadow:0 4px 14px rgba(0,25,96,.18);transition:opacity .2s,box-shadow .2s}
.otzyvy__strelka::before{content:"";width:10px;height:10px;border:solid #001960;border-width:2px 2px 0 0}
.otzyvy__strelka--nazad{left:-6px}.otzyvy__strelka--nazad::before{margin-left:4px;transform:rotate(-135deg)}
.otzyvy__strelka--vpered{right:-6px}.otzyvy__strelka--vpered::before{margin-right:4px;transform:rotate(45deg)}
.otzyvy__strelka:hover{box-shadow:0 6px 18px rgba(0,25,96,.28)}
.otzyvy__strelka:disabled{opacity:0;pointer-events:none}
.otzyvy__karusel--vsyo-vidno .otzyvy__strelka{display:none}

@media screen and (max-width:1279px){.otzyvy__punkt{flex-basis:calc((100% - 32px) / 3)}}
/* стрелки — в боковых полях карусели, а не поверх карточек (на 1024 закрывали начало текста); там, где их нет
   (телефон, сенсорный экран), полей нет */
@media screen and (min-width:641px) and (hover:hover){.otzyvy__karusel{padding:0 34px}.otzyvy__karusel--vsyo-vidno{padding:0}}
@media screen and (max-width:992px){.otzyvy__punkt{flex-basis:calc((100% - 16px) / 2)}.otzyvy__setka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:640px){
    .otzyvy__punkt{flex-basis:83%}
    .otzyvy__lenta{gap:12px}
    .otzyvy__setka{grid-template-columns:1fr}
    .otzyvy__shapka{gap:10px;margin-bottom:14px}
    .otzyvy__knopki{width:100%}
    .otzyvy__knopka{flex:1 1 auto}
    .otzyv{padding:16px}
    .otzyvy__strelka{display:none}
}
@media (hover:none){.otzyvy__strelka{display:none}.otzyvy__lenta{cursor:auto}}
@media (prefers-reduced-motion:reduce){.otzyvy__lenta{scroll-behavior:auto}}
/* число карточек — по ширине САМОЙ карусели, а не окна: во вкладке «Отзывы» карточки товара колонка ~880 px, и
   четыре карточки там обрезали имена. Главная: 1440 → 4, 1024 → 3; вкладка на 1440 → 3; телефон → 1,2.
   Браузер без container queries остаётся на правилах по ширине окна выше. */
@container (min-width:1100px){.otzyvy__punkt{flex-basis:calc((100% - 48px) / 4)}}
@container (min-width:700px) and (max-width:1099.98px){.otzyvy__punkt{flex-basis:calc((100% - 32px) / 3)}}
@container (min-width:450px) and (max-width:699.98px){.otzyvy__punkt{flex-basis:calc((100% - 16px) / 2)}}
@container (max-width:449.98px){.otzyvy__punkt{flex-basis:83%}}