/* ============================================================
   Блок «Отзывы гостей» — общий для index.html, en/index.html,
   reviews-section.html. Данные: /api/reviews.php (Яндекс.Карты,
   все отзывы, свежие сверху). Это структурный слой: «скины»
   карточек (этап 2) навешиваются поверх без правки JS/HTML.
   Самодостаточен — не зависит от index-inline.css.
   ============================================================ */

/* ── Сетка-bento: 4 колонки, featured 2×2, высоты рядов автоматические ── */
.rev-bento { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:auto; gap:16px; margin-top:8px; }
.rev-cell { position:relative; display:flex; flex-direction:column; min-height:176px; background:#fff; border:1px solid #E6ECF3; border-radius:18px; padding:18px; text-decoration:none; overflow:hidden; box-shadow:0 2px 10px rgba(18,144,248,.06); opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease; }
.rev-cell.rev-in { opacity:1; transform:none; }
.rev-cell:hover { box-shadow:0 14px 34px rgba(18,144,248,.16); border-color:#BFDCFB; }
.rev-stars { color:#FFB020; letter-spacing:2px; line-height:1; }

/* крупная карточка свежайшего отзыва */
.rev-featured { grid-column:span 2; grid-row:span 2; min-height:368px; background:linear-gradient(150deg,#1290F8 0%,#0B72CC 100%); border:none; color:#fff; }
.rev-featured .rev-decor { position:absolute; top:12px; right:22px; font-size:120px; line-height:1; font-family:Georgia,serif; color:rgba(255,255,255,.18); pointer-events:none; }
.rev-featured .rev-pill { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; background:rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; margin-bottom:12px; }
.rev-featured .rev-pill i { width:7px; height:7px; border-radius:50%; background:#8CFFB0; box-shadow:0 0 0 0 rgba(140,255,176,.7); animation:revPulse 2s infinite; }
@keyframes revPulse { 0%{box-shadow:0 0 0 0 rgba(140,255,176,.6);} 70%{box-shadow:0 0 0 8px rgba(140,255,176,0);} 100%{box-shadow:0 0 0 0 rgba(140,255,176,0);} }
.rev-featured .rev-quote { font-size:17px; line-height:1.5; font-weight:500; flex:1; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.rev-featured .rev-foot { display:flex; align-items:center; gap:12px; margin-top:14px; }
.rev-featured .rev-ava, .rev-featured .rev-ava-fb { width:44px; height:44px; border-radius:50%; flex:0 0 44px; object-fit:cover; }
.rev-featured .rev-ava-fb { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); color:#fff; font-weight:800; font-size:18px; }
.rev-featured .rev-name { font-weight:700; font-size:15px; }
.rev-featured .rev-meta { font-size:12px; color:rgba(255,255,255,.8); margin-top:2px; }
.rev-featured .rev-stars { color:#FFD466; font-size:34px; margin-left:auto; }

/* обычные карточки */
.rev-small .rev-head { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.rev-small .rev-ava-mini, .rev-small .rev-ava-mini-fb { width:30px; height:30px; border-radius:50%; flex:0 0 30px; object-fit:cover; }
.rev-small .rev-ava-mini-fb { display:flex; align-items:center; justify-content:center; background:#E3F0FE; color:#1290F8; font-weight:800; font-size:13px; }
.rev-small .rev-name { font-weight:700; font-size:13px; color:#16202B; }
.rev-small .rev-stars { font-size:19px; }
.rev-small .rev-quote { font-size:13px; line-height:1.5; color:#42566B; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.rev-small .rev-date { font-size:11px; color:#8496A8; margin-top:8px; }

.rev-placeholder { align-items:center; justify-content:center; text-align:center; border-style:dashed; background:#F6FAFF; color:#8496A8; }
.rev-placeholder .rev-plus { font-size:30px; color:#1290F8; line-height:1; }
.rev-placeholder .rev-ptxt { font-size:12px; margin-top:6px; }

/* планшет и узкий ноутбук: 2 колонки, featured во всю ширину */
@media (max-width:1023px){
  .rev-bento { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rev-featured { grid-column:span 2; grid-row:auto; min-height:0; }
  .rev-featured .rev-quote { -webkit-line-clamp:6; }
}

/* мобильный: 1 колонка */
@media (max-width:640px){
  .rev-bento { grid-template-columns:1fr; gap:12px; }
  .rev-featured, .rev-small { grid-column:auto; }
  .rev-featured .rev-decor { display:none; }
  .rev-cell { min-height:0; }
}

/* ── CTA: две кнопки одинакового размера ──
   Стили самодостаточные; рамка outline-кнопки компенсирована
   уменьшенным padding, чтобы высоты совпадали до пикселя. */
.rev-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; padding-bottom:12px; }
.rev-cta .btn { flex:0 1 320px; min-width:280px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:15px 28px; font-weight:600; font-size:0.95rem; letter-spacing:.3px; line-height:1.3; border-radius:30px; text-decoration:none; text-align:center; cursor:pointer; transition:background .3s ease, color .3s ease, box-shadow .3s ease; }
.rev-cta .rev-all-btn { background:#1290F8; color:#fff; border:none; }
.rev-cta .rev-ya-btn { background:transparent; color:#1290F8; border:2px solid #1290F8; padding:13px 26px; }
.rev-cta .rev-ya-btn:hover { background:#1290F8; color:#fff; }

/* счётчик в кнопке: «Читать все отзывы (29)»; пустой — скрыт */
.rev-cnt::before { content:"("; }
.rev-cnt::after { content:")"; }
.rev-cnt:empty { display:none; }

@media (max-width:640px){
  .rev-cta { flex-direction:column; align-items:stretch; gap:12px; }
  .rev-cta .btn { width:100%; flex:1 1 auto; min-width:0; }
}

/* ── Модалка со всеми отзывами ── */
.rev-modal { position:fixed; inset:0; z-index:10000; display:none; }
.rev-modal.is-open { display:block; }
.rev-modal__backdrop { position:absolute; inset:0; background:rgba(12,28,46,.55); }
.rev-modal__panel { position:relative; width:min(640px,94vw); margin:5vh auto; max-height:88vh; background:#fff; border-radius:22px; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(12,28,46,.35); animation:revPop .25s ease; }
@keyframes revPop { from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .rev-modal__panel{ animation:none; } .rev-cell{ transition:none; } }
.rev-modal__head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #EEF3F8; }
.rev-modal__title { font-weight:800; font-size:18px; color:#16202B; }
.rev-modal__title span { color:#1290F8; }
.rev-modal__close { border:none; background:#F1F5F9; width:36px; height:36px; border-radius:10px; font-size:22px; line-height:1; color:#475569; cursor:pointer; }
.rev-modal__close:hover { background:#E2E8F0; }
.rev-modal__list { overflow-y:auto; padding:16px 20px 22px; display:flex; flex-direction:column; gap:12px; -webkit-overflow-scrolling:touch; }
.rev-mc { padding:14px 16px; border:1px solid #EEF3F8; border-radius:14px; background:#FBFDFF; }
.rev-mc__head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rev-mc__ava, .rev-mc__ava-fb { width:40px; height:40px; border-radius:50%; flex:0 0 40px; object-fit:cover; }
.rev-mc__ava-fb { display:flex; align-items:center; justify-content:center; background:#E3F0FE; color:#1290F8; font-weight:800; font-size:16px; }
.rev-mc__who { flex:1; min-width:0; }
.rev-mc__name { font-weight:700; font-size:14px; color:#16202B; }
.rev-mc__date { font-size:12px; color:#8496A8; }
.rev-mc__stars { color:#FFB020; font-size:18px; letter-spacing:1px; white-space:nowrap; }
.rev-mc__text { font-size:14px; line-height:1.55; color:#334155; margin:0; white-space:pre-line; }
.rev-mc__link { display:inline-block; margin-top:10px; font-size:12.5px; color:#1290F8; text-decoration:none; font-weight:700; }
.rev-mc__link:hover { text-decoration:underline; }
@media (max-width:640px){ .rev-modal__panel{ width:100vw; height:100vh; height:100dvh; max-height:none; margin:0; border-radius:0; } }