/* Блоки психотестов в CMS (testy_quiz / testy_results / testy_catalog).
   Всё под .testy-cms: страница CMS несёт чужие стили (tailwind), своих правил
   на body/h1/a здесь нет. Палитра и размеры те же, что у /testy (testy_public.html). */
.testy-cms{
  --paper:#EDE8DE; --card:#FCFAF5; --ink:#16161A; --accent:#E5462B; --muted:#6E6A62;
  --hair:#E1DACC; --line:#D6D0C4; --block:#17171B; --block-ink:#EDE8DE;
  --sh:0 6px 18px rgba(20,18,24,.10),0 2px 6px rgba(20,18,24,.05);
  --sh-lift:0 12px 28px rgba(20,18,24,.15),0 3px 8px rgba(20,18,24,.07);
  --r:20px; --r-sm:16px;
  background:var(--paper);color:var(--ink);line-height:1.5;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.testy-cms *,.testy-cms *::before,.testy-cms *::after{box-sizing:border-box}
.testy-cms a{color:inherit;text-decoration:none}
.testy-cms .tc-wrap{max-width:1040px;margin:0 auto;padding:40px 28px}
.testy-cms .display{font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  line-height:.95;overflow-wrap:normal;word-break:normal;hyphens:manual;margin:0}
.testy-cms .tr-card .nm,.testy-cms .tr-card .tg{overflow-wrap:normal;word-break:normal;hyphens:manual}

/* квиз со включённым «показывать по кнопке» (tq-gated): скрыт, пока не нажали «Пройти тест» в шапке (якорь #testy-quiz); тогда шапка уступает
   ему место, как у прежней страницы теста. Без :has() шапка просто остаётся над квизом. */
.testy-cms.tq-gated{display:none}
.testy-cms.tq-gated:target,.testy-cms.tq-gated.tq-open{display:block}
body:has(.testy-cms.tq-gated:target) .testy-hero{display:none}
/* квиз: iframe на /testy/<slug>?embed=1 */
.testy-cms .tq-frame{display:block;width:100%;min-height:520px;border:0;background:transparent}

/* Закреплённые баннеры и попапы экранов результата (задача 22459). testy-cms.js переносит
   их в <body> (у предков блока может быть transform, и fixed считался бы от него), поэтому
   правила — без .testy-cms. Ниже баннера cookie и модалок CMS (9999), выше меню. */
.tq-fx[hidden],.tq-pop[hidden],.tq-end[hidden],.tq-pv-thumb[hidden]{display:none!important}
.tq-fx{position:fixed;z-index:9000}
.tq-fx img{display:block;width:100%;height:auto}
/* закреп внизу — на всю ширину окна, как в макете (1440 из 1440, 1024 из 1024, 360 из 360);
   уезжает вниз, когда показался баннер в конце страницы (testy-cms.js, класс tq-away) */
.tq-fx-bottom{left:0;right:0;bottom:0;transition:transform .25s ease,visibility 0s}
/* уехавший закреп ещё и невидим — ссылка и крестик выпадают из обхода по Tab */
.tq-fx-bottom.tq-away{transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.tq-fx-bottom>a,.tq-fx-bottom>picture{position:relative;display:block;width:100%}
/* справа — 270 px, как в макете (269); крестик закрывает его до конца посещения */
.tq-fx-right{right:0;top:50%;transform:translateY(-50%);width:270px}
.tq-fx-right img{border-radius:16px 0 0 16px;box-shadow:0 12px 28px rgba(20,18,24,.18)}
@media (max-width:1279.98px){.tq-fx-right{display:none!important}}
.tq-pop{position:fixed;inset:0;z-index:9990;background:rgba(20,18,24,.55);display:flex;
  align-items:center;justify-content:center;padding:16px}
/* попап — по размеру картинки: в макете 1146 px на компьютере, 920 на планшете, 336 на
   телефоне; не шире 92% и не выше 86% окна. Крестик — в углу картинки, а не рамки. */
.tq-pop-box{position:relative;display:inline-block;max-width:min(1146px,92vw)}
.tq-pop-box img{display:block;max-width:100%;width:auto;height:auto;max-height:86vh;border-radius:18px}
/* в конце страницы — ширина колонки, как у «Похожих тестов» над ним */
.testy-cms.tq-end .tc-wrap{padding-top:0}
.tq-end img{display:block;width:100%;height:auto}
.tq-x{position:absolute;top:8px;right:8px;z-index:1;width:34px;height:34px;border-radius:50%;border:0;
  background:#fff;color:#16161A;font-size:16px;line-height:34px;text-align:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(20,18,24,.25)}
.tq-x:focus-visible{outline:2px solid #E5462B;outline-offset:2px}
/* редактор: переключатель экранов квиза и миниатюры закреплённых баннеров */
.testy-cms .tq-pv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.testy-cms .tq-pv-lab{font-size:13px;color:var(--muted);font-weight:700}
.testy-cms .tq-pv-btn{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:7px 16px;
  font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit}
.testy-cms .tq-pv-btn.is-active{background:var(--block);color:var(--block-ink);border-color:var(--block)}
.testy-cms .tq-pv-fixed{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 0}
.testy-cms .tq-pv-thumb{margin:0;width:220px}
.testy-cms .tq-pv-thumb img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:var(--sh)}
.testy-cms .tq-pv-thumb figcaption{font-size:12px;color:var(--muted);margin-top:6px;font-weight:700}

/* типы результатов */
.testy-cms .tr-h{font-size:clamp(20px,5vw,34px);margin:0 0 18px;max-width:20ch}
.testy-cms .tr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.testy-cms .tr-card{background:var(--card);border-radius:18px;box-shadow:var(--sh);padding:18px;
  transition:transform .12s ease,box-shadow .12s}
.testy-cms .tr-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.testy-cms .tr-card .nm{font-size:17px;font-weight:800;margin:0 0 4px}
.testy-cms .tr-card .tg{font-size:13.5px;color:var(--muted)}

/* каталог: поиск, фильтр, секции, карточки */
.testy-cms .tc-panel{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 40px}
.testy-cms .tc-search{position:relative;flex:1 1 360px;max-width:520px}
.testy-cms .tc-search input{width:100%;border:none;background:#FFFEFB;border-radius:var(--r-sm);
  box-shadow:var(--sh);padding:16px 18px 16px 50px;font-size:16px;font-family:inherit;color:var(--ink)}
.testy-cms .tc-search input::placeholder{color:#A09C92}
.testy-cms .tc-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted)}
.testy-cms .tc-chips{display:flex;flex-wrap:wrap;gap:10px}
.testy-cms .tc-chip{border:2px solid var(--line);background:var(--card);border-radius:var(--r-sm);
  padding:9px 20px;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;
  transition:background .12s,color .12s,border-color .12s}
.testy-cms .tc-chip:hover{border-color:#C4BCAC}
.testy-cms .tc-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.testy-cms .tc-sec{margin:0 0 40px}
.testy-cms .tc-sec h2{font-size:clamp(22px,4vw,32px);margin:0 0 18px}
.testy-cms .tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.testy-cms .tc-card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
.testy-cms .tc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.testy-cms .tc-thumb{aspect-ratio:1/1;background:#F4F0E7;overflow:hidden}
.testy-cms .tc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.testy-cms .tc-body{padding:16px 18px 18px}
.testy-cms .tc-nm{font-weight:800;font-size:19px;line-height:1.15;margin:0 0 6px}
.testy-cms .tc-mt{font-size:14px;color:var(--muted);margin:0 0 12px}
.testy-cms .tc-go{font-size:15px;font-weight:700;color:var(--accent)}
.testy-cms .tc-empty{display:none;color:var(--muted);font-size:16px;padding:30px 0}
.testy-cms .tc-empty.show{display:block}
/* похожие тесты под страницей теста */
.testy-cms.tc-rel .tc-wrap{border-top:2px solid var(--hair);padding-top:40px}
.testy-cms.tc-rel .tc-h{font-size:clamp(22px,4.5vw,32px);margin:0 0 22px}
.testy-cms.tc-rel .tc-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.testy-cms.tc-rel .tc-card{border-radius:16px}
.testy-cms.tc-rel .tc-nm{font-size:16px;margin:0 0 4px}
.testy-cms.tc-rel .tc-mt{font-size:13px;margin:0}
.testy-cms .tc-all{display:inline-flex;align-items:center;background:var(--block);color:var(--block-ink);
  border-radius:14px;padding:15px 30px;font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;margin:28px 0 0;box-shadow:var(--sh);transition:transform .12s,background .12s}
.testy-cms .tc-all:hover{background:var(--accent);transform:translateY(-2px)}
@media (max-width:520px){
  .testy-cms .tc-wrap{padding:28px 18px}
  /* На телефоне карточка — строка: картинка слева, название справа. В двух колонках слову вроде
     «стрессоустойчивость» не хватало ширины, и оно вылезало из карточки или рвалось по буквам. */
  .testy-cms .tc-grid,.testy-cms.tc-rel .tc-grid{grid-template-columns:1fr;gap:12px}
  .testy-cms .tc-card{flex-direction:row;align-items:stretch}
  .testy-cms .tc-thumb{flex:0 0 96px;width:96px;aspect-ratio:auto}
  .testy-cms .tc-body{min-width:0;flex:1 1 auto;padding:12px 14px;display:flex;flex-direction:column;justify-content:center}
  .testy-cms .tc-nm,.testy-cms.tc-rel .tc-nm{font-size:16px}
  .testy-cms .tc-mt{margin:0 0 6px}
}
/* совсем узкие телефоны (320 px): картинка меньше, название чуть мельче: «стрессоустойчивость» влезает целиком */
@media (max-width:360px){
  .testy-cms .tc-thumb{flex-basis:72px;width:72px}
  .testy-cms .tc-nm,.testy-cms.tc-rel .tc-nm{font-size:15px}
}