/* Основні кольори та ширина блоку; всі стилі обмежені віджетом відгуків. */
.rekori-reviews { --rv-ink:#373A30; --rv-olive:#7C7B5C; --rv-cream:#ECEBE1; width:100%; max-width:1100px; margin:0 auto; padding:24px 0; color:var(--rv-ink); font-family:'Montserrat',sans-serif; }
.rekori-reviews,.rekori-reviews * { box-sizing:border-box; } /* Відступи входять у розміри. */
.rekori-reviews .rv-subtitle { margin:0 0 24px; font-size:16px; line-height:1.6; } /* Текст під заголовком. */
.rekori-reviews .rv-grid { column-count:3; column-gap:20px; padding:14px; } /* Компактні колонки й місце для збільшення картки. */
.rekori-reviews .rv-card { display:inline-block; width:100%; margin:0 0 16px; padding:18px; break-inside:avoid; background:var(--rv-cream); border:1px solid rgba(124,123,92,.25); border-radius:5px; box-shadow:0 4px 12px rgba(55,58,48,.16); transform-origin:center; transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease; position:relative; } /* Картки меншого розміру. */
.rekori-reviews .rv-text { margin:0 0 18px; color:var(--rv-ink); font:400 14px/1.65 'Montserrat',sans-serif; overflow-wrap:anywhere; } /* Компактний текст відгуку 14 px. */
.rekori-reviews .rv-person { display:flex; gap:10px; align-items:center; } /* Фото поруч із підписом. */
.rekori-reviews .rv-avatar { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; overflow:hidden; border-radius:50%; background:var(--rv-olive); color:var(--rv-cream); } /* Кругле фото. */
.rekori-reviews .rv-avatar img { display:block; width:100%; height:100%; object-fit:cover; } /* Фото заповнює коло без спотворення. */
.rekori-reviews .rv-meta { min-width:0; } /* Довге ім’я може переноситися. */
.rekori-reviews .rv-author { margin:0 0 4px; font-size:14px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; } /* Ім’я автора. */
.rekori-reviews .rv-course { margin:0 0 5px; color:var(--rv-olive); font-size:11px; line-height:1.4; } /* Підпис під ім’ям. */
.rekori-reviews .rv-stars { display:flex; gap:2px; color:var(--rv-olive); font-size:18px; line-height:1; } /* Колір і розмір рейтингу. */
.rekori-reviews .rv-stars svg { width:15px; height:15px; fill:currentColor; } /* Зірочки у зразках. */
@media(hover:hover) and (pointer:fine) { /* Ефект лише для пристроїв із мишею. */
.rekori-reviews .rv-grid:hover .rv-card { transform:scale(.97); opacity:.75; } /* Решта карток трохи зменшується. */
.rekori-reviews .rv-grid .rv-card:hover { transform:scale(1.035); opacity:1; z-index:2; box-shadow:0 8px 22px rgba(55,58,48,.23); } /* Вибрана картка збільшується. */
}
.rekori-reviews .rv-window { position:relative; } /* Контейнер затухання. */
.rekori-reviews .rv-footer { display:flex; flex-wrap:wrap; column-gap:36px; row-gap:22px; justify-content:center; position:relative; z-index:3; margin-top:18px; } /* Кнопки під відгуками по центру; між ними збільшена відстань. */
.rekori-reviews .rv-footer[hidden] { display:none; } /* Ховає кнопку для короткого списку. */
.rekori-reviews button.rv-more { appearance:none; margin:0; min-height:42px; padding:9px 18px; border:0; border-radius:6px; background:var(--rv-ink); color:var(--rv-cream); box-shadow:0 12px 26px rgba(55,58,48,.42),0 4px 10px rgba(55,58,48,.28); font:500 16px/1.3 'Montserrat',sans-serif; text-transform:none; cursor:pointer; transition:background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease; } /* Компактні кнопки з текстом 16 px, темним фоном за замовчуванням і більш вираженою м’якою тінню. */
.rekori-reviews button.rv-more:hover,.rekori-reviews button.rv-more:focus-visible { background:var(--rv-cream); color:var(--rv-ink); transform:translateX(5px); box-shadow:0 14px 30px rgba(55,58,48,.48),0 5px 12px rgba(55,58,48,.32); } /* При наведенні кнопка стає світлою, текст темним, кнопка зміщується вправо на 5 px, а тінь стає ще сильнішою. */
.rekori-reviews button.rv-more:focus-visible { outline:2px solid var(--rv-olive); outline-offset:3px; } /* Видимий фокус клавіатури. */
.rekori-reviews button.rv-more:active { transform:translateX(5px) scale(.98); } /* Легке натискання кнопки без зміни її стилю. */
.rekori-reviews button.rv-more:disabled { background:var(--rv-ink); color:var(--rv-cream); opacity:.68; cursor:not-allowed; transform:none; } /* Неактивна кнопка зберігає темний базовий колір, але виглядає приглушено. */

/* Кнопки під відгуками: світлі у звичайному стані, темні при наведенні. */
.rekori-reviews .rv-footer button.rv-more { background:var(--rv-cream); color:var(--rv-ink); }
.rekori-reviews .rv-footer button.rv-more:hover,
.rekori-reviews .rv-footer button.rv-more:focus-visible { background:#373A30; color:#ECEBE1; }

/* Кнопка всередині форми зберігає попередні кольори та поведінку. */
.rekori-reviews .rv-mini button.rv-send { height:38px; min-height:38px; padding:8px 18px; background:var(--rv-ink); color:var(--rv-cream); font-weight:700; line-height:22px; align-self:end; }
.rekori-reviews .rv-mini button.rv-send:hover,
.rekori-reviews .rv-mini button.rv-send:focus-visible { background:var(--rv-cream); color:var(--rv-ink); transform:none; }
.rekori-reviews .rv-mini button.rv-send:active { transform:none; }
.rekori-reviews .rv-mini { margin-top:36px; padding:24px 30px; background:var(--rv-olive); border-radius:5px; box-shadow:0 18px 42px rgba(55,58,48,.34),0 8px 18px rgba(55,58,48,.22); color:var(--rv-cream); } /* Форма з більш вираженою м’якою тінню по контуру. */
.rekori-reviews .rv-mini h3 { margin:0 0 10px; color:var(--rv-cream); font:700 28px/1.2 'Montserrat',sans-serif; } /* Заголовок форми. */
.rekori-reviews .rv-intro { margin:0 0 24px; font-size:16px; line-height:1.5; } /* Опис форми. */
.rekori-reviews .rv-form-grid { display:grid; grid-template-columns:minmax(0,260px) minmax(0,340px) max-content; justify-content:center; align-items:end; gap:12px; } /* Два поля й компактна кнопка в ряд. */
.rekori-reviews .rv-label { display:block; margin:0; font-size:12px; font-weight:500; color:var(--rv-cream); } /* Назви полів. */
.rekori-reviews .rv-input { display:block; box-sizing:border-box; width:100%; min-width:0; height:38px; min-height:38px; margin:6px 0 0; padding:8px 12px; border:0; border-radius:5px; background:var(--rv-cream); color:var(--rv-ink); box-shadow:none; font:400 16px/22px 'Montserrat',sans-serif; } /* Поля висотою 38 px. */
.rekori-reviews textarea.rv-input { resize:vertical; } /* Відгук можна розтягнути вниз. */
.rekori-reviews .rv-input::placeholder { color:var(--rv-ink); opacity:.55; } /* Напівпрозорий приклад. */
.rekori-reviews .rv-input:focus::placeholder { opacity:0; } /* Приклад зникає при виборі поля. */
.rekori-reviews .rv-input:focus { outline:2px solid var(--rv-ink); outline-offset:3px; } /* Виділення активного поля. */
.rekori-reviews .rv-form-meta-row { display:flex; align-items:flex-end; justify-content:space-between; gap:34px; width:100%; margin-top:18px; } /* Зірки залишаються зліва, пояснення притиснуте до правого краю в одному рядку. */
.rekori-reviews .rv-rating { margin:0; padding:0; border:0; flex:0 0 auto; transform:translateX(10px); } /* Блок оцінки зміщено вправо на 10 px. */
.rekori-reviews .rv-rating legend { padding:0; margin-bottom:8px; color:var(--rv-cream); font-size:12px; } /* Підпис до зірок. */
.rekori-reviews .rv-rating-options { display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:7px; } /* П’ять окремих зірочок без рамок і кнопок. */
.rekori-reviews .rv-rating-options label { position:relative; cursor:pointer; line-height:1; } /* Кожна зірочка клікабельна. */
.rekori-reviews .rv-rating-options input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } /* Нативні radio залишаються доступними клавіатурі. */
.rekori-reviews .rv-rating-options span { display:block; padding:0; border:0; background:transparent; color:var(--rv-cream); font-size:29px; line-height:1; opacity:.38; text-shadow:0 2px 5px rgba(55,58,48,.20); transition:opacity .16s ease,transform .16s ease,color .16s ease; } /* Лише зірка, без цифри, рамки та фону. */
.rekori-reviews .rv-rating-options label:hover span,.rekori-reviews .rv-rating-options label:hover ~ label span,.rekori-reviews .rv-rating-options label:has(input:checked) span,.rekori-reviews .rv-rating-options label:has(input:checked) ~ label span { opacity:1; color:#373A30; transform:scale(1.06); } /* При наведенні та виборі зірки стають темними #373A30. */
.rekori-reviews .rv-rating-options input:focus-visible + span { outline:2px solid var(--rv-cream); outline-offset:4px; border-radius:2px; } /* Фокус клавіатури на зірочці. */
.rekori-reviews .rv-form-bottom { margin:0 0 0 auto; align-self:flex-end; padding-bottom:2px; text-align:right; transform:translateX(9px); } /* Пояснення зміщено на 15 px лівіше від попереднього положення. */
.rekori-reviews .rv-form-note { margin:0; color:var(--rv-cream); font-size:12px; line-height:1.5; text-align:right; } /* Нижній текст 12 px, вирівняний праворуч. */
.rekori-reviews .rv-message { margin:16px 0 0; color:var(--rv-ink); font-size:16px; font-weight:700; text-align:center; line-height:1.5; } /* Повідомлення про надсилання по центру. */
.rekori-reviews .rv-message:empty { display:none; } /* Порожнє повідомлення не займає місця. */
.rekori-reviews .rv-honey { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } /* Поле-пастка для ботів. */
@media(max-width:1024px) { .rekori-reviews .rv-grid { column-count:2; } .rekori-reviews .rv-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .rekori-reviews .rv-send { grid-column:1/-1; justify-self:center; } } /* Планшет: дві колонки, кнопка нижче. */
@media(max-width:600px) { .rekori-reviews .rv-grid { column-count:1; padding:12px; } .rekori-reviews .rv-footer { flex-direction:column; align-items:center; row-gap:20px; } .rekori-reviews button.rv-more { min-width:180px; } .rekori-reviews .rv-mini { padding:20px 16px; } .rekori-reviews .rv-form-grid { grid-template-columns:minmax(0,1fr); } .rekori-reviews .rv-form-meta-row { gap:18px; flex-wrap:wrap; align-items:center; } .rekori-reviews .rv-form-bottom { width:100%; margin-left:0; padding-bottom:0; text-align:left; transform:none; } .rekori-reviews .rv-form-note { text-align:left; } .rekori-reviews .rv-rating { transform:none; } } /* Телефон: одна колонка; нижній ряд може переноситися, а пояснення переходить на окремий рядок. */
.rekori-reviews .rv-card[hidden],.rekori-reviews .rv-mini[hidden],.rekori-reviews button[hidden] { display:none!important; } /* Приховані картки й форма не займають місця. */
/* Різна висота карток; колонки складаються без однакових горизонтальних рядів. */
.rekori-reviews .rv-card:nth-child(4n+1) { min-height:270px; padding-top:24px; padding-bottom:26px; }
.rekori-reviews .rv-card:nth-child(4n+2) { min-height:180px; }
.rekori-reviews .rv-card:nth-child(4n+3) { min-height:230px; padding-bottom:24px; }
/* Плавне зникнення нижньої частини, як у прикладі. Прозоре на будь-якому фоні. */
/* Кнопки поверх зони затухання залишаються чіткими та доступними. */
.rekori-reviews.rv-collapsed .rv-footer { margin-top:-28px; }
/* На телефоні висота визначається текстом, щоб уникнути порожніх ділянок. */
@media(max-width:600px) { .rekori-reviews .rv-card:nth-child(n) { min-height:0; padding:18px; } }
@media(prefers-reduced-motion:reduce) { .rekori-reviews .rv-card,.rekori-reviews button.rv-more { transition:none; } .rekori-reviews .rv-grid:hover .rv-card,.rekori-reviews .rv-grid .rv-card:hover,.rekori-reviews button.rv-more:hover { transform:none; } }

/* У згорнутому стані: по дві різновисокі картки у трьох колонках. */
@media(min-width:1025px) {
.rekori-reviews.rv-collapsed .rv-card:nth-child(2n) { break-after:column; -webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.65) 35%,transparent 100%); mask-image:linear-gradient(#000 0%,rgba(0,0,0,.65) 35%,transparent 100%); }
}
/* На планшеті дві колонки по три картки; затухання починається з другого ряду. */
@media(min-width:601px) and (max-width:1024px) {
.rekori-reviews.rv-collapsed .rv-card:nth-child(3n) { break-after:column; opacity:.25; }
.rekori-reviews.rv-collapsed .rv-card:nth-child(3n+2) { -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.4)); mask-image:linear-gradient(#000,rgba(0,0,0,.4)); }
}
/* На телефоні шість карток в одній колонці; друга та наступні поступово бліднуть. */
@media(max-width:600px) {
.rekori-reviews.rv-collapsed .rv-card:nth-child(n+2) { opacity:.7; }
.rekori-reviews.rv-collapsed .rv-card:nth-child(n+4) { opacity:.4; }
.rekori-reviews.rv-collapsed .rv-card:nth-child(6) { -webkit-mask-image:linear-gradient(#000,transparent); mask-image:linear-gradient(#000,transparent); }
}