/* ============================================================
   reviews-page.css — страница всех отзывов /otzyvy/ (29.09.2026)
   Макет «А · Полки»: полки по продуктам, карточка и радужная обводка —
   те же, что в облаке главной, только стоят на месте. Подключается одним
   templates/reviews/all.html; всё под body.reviews-page.
   ============================================================ */
@property --rvA{syntax:'<angle>';inherits:false;initial-value:40deg}
@keyframes revAura{to{--rvA:400deg}}

body.reviews-page .otz{padding-top:36px;padding-bottom:80px;font-size:15px;line-height:1.55;color:var(--ink)}
body.reviews-page .otz h1,body.reviews-page .otz h2{font-family:'Arsenal',Georgia,'Times New Roman',serif;
  color:var(--violet);margin:0;text-wrap:balance}

/* шапка */
body.reviews-page .otz-head{display:grid;gap:10px;margin-bottom:34px}
body.reviews-page .otz-eyebrow{font:600 12px/1.2 'Open Sans',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--terra)}
body.reviews-page .otz h1{font-size:clamp(32px,4.2vw,50px);line-height:1.08;max-width:18ch}
body.reviews-page .otz-sub{margin:14px 0 0;color:var(--muted);max-width:60ch;font-size:16px}

/* «Написать отзыв» на первом экране — штатная .nx-btn (home.css) с кружком
   .ab-arr, как «Дипломы ↓» на «Обо мне» (about.css здесь не грузится) */
body.reviews-page .otz-go{justify-self:start;margin-top:12px}
body.reviews-page .otz-login{justify-self:start}
body.reviews-page .ab-arr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:#fff;color:var(--violet);font-size:var(--fs-note);line-height:1;transition:transform .4s var(--dl-ease)}
body.reviews-page .nx-btn:has(.ab-arr){padding-right:11px;gap:14px}
body.reviews-page .nx-btn:hover .ab-arr--down{transform:translateY(2px)}
@media (prefers-reduced-motion:reduce){body.reviews-page .ab-arr{transition:none}}

/* чипы-переходы к полкам */
body.reviews-page .otz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
body.reviews-page .otz-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge-strong);
  border-radius:999px;padding:5px 14px 5px 5px;text-decoration:none;font-size:13.5px;color:var(--ink);background:#fff;
  max-width:100%;transition:border-color .3s}
body.reviews-page .otz-chip:hover{border-color:var(--violet)}
body.reviews-page .otz-chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;background:#eee}
body.reviews-page .otz-chip small{color:var(--muted);font-variant-numeric:tabular-nums}
body.reviews-page .otz-chip:focus-visible,
body.reviews-page .otz-plink:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* полка продукта; scroll-margin — под липкую шапку сайта */
body.reviews-page .shelf{padding:40px 0 8px;border-top:1px solid var(--edge-card);display:grid;gap:22px;
  scroll-margin-top:100px}
body.reviews-page .otz-head + .shelf{border-top:0}
body.reviews-page .shelf__h{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
body.reviews-page .shelf__h img{width:76px;height:76px;border-radius:16px;object-fit:cover;flex:none;background:#eee}
body.reviews-page .shelf__h > div{display:grid;gap:6px;flex:1;min-width:min(220px,100%)}
body.reviews-page .shelf__h h2{font-size:clamp(24px,2.6vw,32px);line-height:1.12}
body.reviews-page .otz-type{font:600 11px/1 'Open Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
body.reviews-page .otz-plink{font:600 13.5px/1.2 'Open Sans',sans-serif;color:var(--violet);text-decoration:none;justify-self:start}
body.reviews-page .otz-plink:hover{text-decoration:underline}
body.reviews-page .otz-off{font:600 13.5px/1.2 'Open Sans',sans-serif;color:var(--muted)}
body.reviews-page .otz-cnt{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
body.reviews-page .shelf__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:22px}
@media (min-width:700px){body.reviews-page .shelf__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* «Читать дальше»: с пятого отзыва полка сложена (только при JS — без него
   видно всё). Раскрытие — только transform и opacity: высота встаёт сразу,
   карточки выезжают на месте; отрицательный отступ кнопки съедает промежуток
   полки, пока .shelf__rest сложен */
body.reviews-page .shelf__more{display:none;justify-self:start}
html.js body.reviews-page .shelf__more{display:inline-flex;margin-top:-22px}
html.js body.reviews-page .shelf.is-open .shelf__more{margin-top:0}
html.js body.reviews-page .shelf:not(.is-open) .shelf__rest{height:0;overflow:hidden;visibility:hidden}
html.js body.reviews-page .shelf:not(.is-open) .shelf__rest .rc{opacity:0;transform:translateY(24px)}
/* сворачивание — тот же путь обратно; высоту ведёт скрипт. Якорь прокрутки
   браузера не берётся из тающих карточек: кнопку под пальцем держит скрипт */
html.js body.reviews-page .shelf.is-closing .shelf__rest{overflow:hidden;overflow-anchor:none}
html.js body.reviews-page .shelf.is-closing .shelf__rest .rc{opacity:0;transform:translateY(24px)}

/* карточка отзыва — одна в одну облако главной */
body.reviews-page .rc{position:relative;isolation:isolate;background:#fff;border:1px solid var(--edge-card);
  border-radius:14px;padding:18px 18px 16px;display:grid;gap:12px;align-content:start;scroll-margin-top:100px;
  transition:border-color .5s,box-shadow .5s,transform .5s cubic-bezier(.22,1,.36,1),opacity .5s}
body.reviews-page .rc p{margin:0;font-size:15px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
body.reviews-page .rc .rev-reply{margin-top:0!important}
body.reviews-page .rc__video{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
body.reviews-page .rc__video iframe{display:block;width:100%;height:100%;border:0}
/* радужная обводка: кольцо conic-градиента, вырезанное маской, размыто */
body.reviews-page .rc::before,body.reviews-page .otz-form::before{content:"";position:absolute;inset:-8px;
  border-radius:22px;padding:11px;z-index:-1;
  background:conic-gradient(from var(--rvA,40deg),#F5A8C7,#8B6CD9,#7FB8EF,#C9A8F0,#F5A8C7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:blur(12px);opacity:0;transition:opacity .7s;pointer-events:none}
body.reviews-page .rc:hover,body.reviews-page .rc:focus-within,body.reviews-page .rc.lit{
  border-color:var(--edge-strong);box-shadow:var(--veil)}
body.reviews-page .rc:hover,body.reviews-page .rc:focus-within{transform:translateY(-3px)}
body.reviews-page .rc:hover::before,body.reviews-page .rc:focus-within::before,
body.reviews-page .rc.lit::before{opacity:.78;animation:revAura 6s linear infinite}

/* форма в светящейся рамке */
body.reviews-page .otz-formwrap{margin-top:56px;max-width:760px;display:grid;gap:16px}
body.reviews-page .otz-formwrap .added-note{margin:0}
body.reviews-page .otz-form{position:relative;isolation:isolate;background:#fff;border:1px solid var(--edge-strong);
  border-radius:18px;padding:clamp(20px,3vw,32px);display:grid;gap:16px;box-shadow:var(--veil);scroll-margin-top:100px}
body.reviews-page .otz-form::before{border-radius:26px;filter:blur(14px);opacity:.55;animation:revAura 9s linear infinite}
body.reviews-page .otz-form h2{font-size:clamp(24px,2.4vw,30px)}
body.reviews-page .otz-form label{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--night)}
body.reviews-page .otz-form select,body.reviews-page .otz-form textarea{font:inherit;font-size:15px;font-weight:400;
  border:1px solid #8F7FA8;border-radius:12px;padding:11px 14px;background:#fff;color:var(--ink);width:100%;
  max-width:100%;box-sizing:border-box}
body.reviews-page .otz-form textarea{min-height:120px;resize:vertical}
body.reviews-page .otz-form .otz-chk{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13px;color:var(--muted)}
body.reviews-page .otz-chk input{margin-top:3px;accent-color:var(--violet);flex:none}
body.reviews-page .otz-send{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
body.reviews-page .otz-hint{font-size:13px;color:var(--muted);margin:0}
body.reviews-page .otz-note{margin:0;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  body.reviews-page .rc:hover::before,body.reviews-page .rc:focus-within::before,
  body.reviews-page .rc.lit::before,body.reviews-page .otz-form::before{animation:none}
  body.reviews-page .rc{transition:none}
  body.reviews-page .rc:hover,body.reviews-page .rc:focus-within{transform:none}
}