/* Direction emblems: optical sizes, real vector paths, no font dependencies. */
.dir-panel2-media:has(.dir-vector),.dir-panel-media:has(.dir-vector){background:#fff;isolation:isolate}
.dir-vector{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.dir-panel2-media .dir-vector img,.dir-panel-media .dir-vector img{width:84%;height:84%;max-width:84%;max-height:84%;object-fit:contain}
.dir-panel2-media:has(.dir-vector--liga),.dir-panel-media:has(.dir-vector--liga),
.dir-panel2-media:has(.dir-vector--picnic),.dir-panel-media:has(.dir-vector--picnic){background:#25264f}
.dir-panel2-media .dir-vector--nokaut img,.dir-panel-media .dir-vector--nokaut img{width:96%;max-width:96%;height:80%;max-height:80%}
.dir-panel2-media .dir-vector--help img,.dir-panel-media .dir-vector--help img{width:93%;max-width:93%;height:88%;max-height:88%}
.dir-panel2-media .dir-vector--spch img,.dir-panel-media .dir-vector--spch img{height:84%;max-height:84%;width:65%;max-width:65%}
.dir-panel2-media .dir-vector--law img,.dir-panel-media .dir-vector--law img{width:100%;height:100%;max-width:100%;max-height:100%}
/* A circular film wall. Only transforms move; hidden panels do no animation work. */
.dir-panel2-media:has(.dir-cinema){width:clamp(220px,24vw,310px);height:auto;aspect-ratio:1;background:#101019;box-shadow:0 24px 55px #17172f45,0 0 0 1px #ffffff30}
.dir-panel-media:has(.dir-cinema){width:200px;height:200px;background:#101019}
.dir-cinema{position:relative;width:100%;height:100%;aspect-ratio:1;overflow:hidden;border-radius:50%;isolation:isolate;background:#101019}
.dir-cinema-reels{position:absolute;inset:-15% -18%;display:grid;grid-template-columns:1fr 1fr;gap:7px;transform:rotate(-13deg);}
.dir-cinema-reel{align-self:start;animation:dir-film-forward 28s linear infinite;animation-play-state:paused;will-change:transform}
.dir-cinema-reel--reverse{animation-name:dir-film-reverse;animation-duration:34s}
.dir-cinema-sequence{display:flex;flex-direction:column;gap:7px;padding-bottom:7px}
.dir-panel2-media .dir-cinema img,.dir-panel-media .dir-cinema img{display:block;width:100%;height:auto;aspect-ratio:1.08;max-width:none;max-height:none;object-fit:cover;border-radius:5px;filter:saturate(.83) contrast(1.07);box-shadow:0 2px 10px #0008}
.dir-cinema-sequence img:first-child{object-position:48% 50%}
.dir-cinema-sequence img:nth-child(2){object-position:50% 68%}
.dir-cinema-glass{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 43% 38%,transparent 40%,#06071055 100%),linear-gradient(125deg,#ffffff18,transparent 45%,#07081425);box-shadow:inset 0 0 0 1px #ffffff30;pointer-events:none}
.dir-panel2.is-active .dir-cinema-reel,.dir-panel[aria-expanded="true"] .dir-cinema-reel{animation-play-state:running}
.dir-panel2:has(.dir-cinema) .dir-panel2-top{margin-bottom:24px}
@keyframes dir-film-forward{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes dir-film-reverse{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media(max-width:600px){.dir-panel2-media:has(.dir-cinema){width:min(66vw,260px)}.dir-panel2:has(.dir-cinema){padding:26px}.dir-panel2:has(.dir-cinema) .dir-panel2-index{font-size:44px}}
@media(prefers-reduced-motion:reduce){.dir-cinema-reel{animation:none!important;will-change:auto}.dir-cinema-reel--reverse{transform:translateY(-18%)}}
@media(min-width:901px){.dir-panel-stack{position:sticky;top:104px;height:auto;align-self:start}.dir-layout{align-items:start}}
@media(max-width:900px){
 .dir-layout{grid-template-columns:minmax(0,1fr);gap:24px}
 .dir-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .dir-row{grid-template-columns:22px minmax(0,1fr);gap:6px;padding:18px 0;min-height:68px}
 .dir-row-name{font-size:clamp(13px,2.7vw,20px);line-height:1.15;overflow-wrap:normal}
 .dir-row-num{font-size:11px}.dir-row-arrow{display:none}
 .dir-row[aria-selected="true"] .dir-row-name{transform:none}
 .dir-panel-stack{min-height:0}.dir-panel2{padding:26px}
}
@media(max-width:600px){.dir-row-name{overflow-wrap:anywhere}.dir-panel2:has(.dir-cinema) .dir-panel2-top{padding-right:0}.dir-panel2:has(.dir-cinema) .dir-panel2-index{position:absolute;right:0;top:0;font-size:36px}.dir-panel2-media:has(.dir-cinema){width:min(62vw,240px)}}
/* Desktop: компактный список направлений — все 8 строк помещаются в экран рядом с панелью. */
@media(min-width:901px){
 .dir-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);margin-top:clamp(24px,4vh,48px)}
 .dir-row{grid-template-columns:clamp(34px,3.4vw,54px) minmax(0,1fr) 32px;gap:10px;padding:0;height:clamp(48px,calc((100vh - 200px) / 8),84px)}
 .dir-row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
 .dir-row-name{font-size:clamp(17px,min(2.15vw,3.6vh),30px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.025em}
 .dir-row[aria-selected="true"] .dir-row-name{transform:translateX(10px)}
 .dir-row-arrow{font-size:clamp(18px,2vw,24px)}
 .dir-panel-stack{top:96px;min-height:0}
 .dir-panel2{padding:clamp(18px,3.2vh,36px)}
 .dir-panel2.is-active{max-height:calc(100vh - 120px);min-height:min(420px,calc(100vh - 120px))}
 .dir-panel2-media{width:clamp(110px,19vh,180px);height:clamp(110px,19vh,180px)}
 .dir-panel2-media:has(.dir-cinema){width:clamp(130px,min(24vh,24vw),240px)}
 .dir-panel2-index{font-size:clamp(44px,8vh,80px)}
 .dir-panel2-desc{font-size:clamp(15px,2.2vh,20px)}
 .dir-panel2-foot{margin-top:16px;padding-top:14px}
}

/* === Светлая тема блока «Направления» (по просьбе дизайнера, как блок новостей) ===
   Белый фон, navy-текст (#25264f на #fff ≈ 13:1), жёлтый — только фон/подчёркивание/стрелка-плашка. */
.section-formats{background:#fff;color:var(--ink)}
.section-formats h2{color:var(--ink)}
.section-formats .eyebrow{color:var(--purple)}
.section-formats .section-description{color:#4a4b6b}
.section-formats .dir-row{color:var(--ink);border-top-color:#d8d8e4}
.section-formats .dir-row:last-child,
.section-formats .dir-list>.dir-row:last-child{border-bottom:1px solid #d8d8e4}
.section-formats .dir-row-num{color:#5b5c80}
.section-formats .dir-row-name{opacity:1;color:#4a4b6b}
.section-formats .dir-row:hover .dir-row-name{color:var(--ink)}
.section-formats .dir-row[aria-selected="true"] .dir-row-num{color:var(--ink)}
.section-formats .dir-row[aria-selected="true"] .dir-row-name{color:var(--ink)}
.section-formats .dir-row-arrow{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--yellow);color:var(--ink);font-size:18px;line-height:1}
.section-formats .dir-row-bar{height:4px;background:var(--yellow)!important}
.section-formats .dir-row:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.section-formats .dir-panel2{box-shadow:0 20px 50px rgba(37,38,79,.18)}
@media(max-width:900px){.section-formats .dir-row-arrow{display:none}}
@media(max-width:600px){.section-formats .dir-row-name{font-size:clamp(11px,3.1vw,13px);letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}}

/* build 9: размер и подложка логотипа задаются данными направления (--logo-scale, is-on-navy), а не ключом. */
.dir-panel2-media .dir-vector[style] img,.dir-panel-media .dir-vector[style] img{width:calc(var(--logo-scale,.84)*100%);height:calc(var(--logo-scale,.84)*100%);max-width:calc(var(--logo-scale,.84)*100%);max-height:calc(var(--logo-scale,.84)*100%)}
.dir-panel2-media:has(.dir-vector.is-on-navy),.dir-panel-media:has(.dir-vector.is-on-navy){background:#25264f}
.dir-badge.is-on-navy{--badge-bg:#25264f;box-shadow:none}
.dir-badge[style]>img{width:calc(var(--logo-scale,.84)*92%);height:calc(var(--logo-scale,.84)*92%);max-width:calc(var(--logo-scale,.84)*92%);max-height:calc(var(--logo-scale,.84)*92%)}