/* «Армия спорта», пятая страница: рассказ для руководства. Поверх as.css, s2.css, s3.css и s4.css. */

/* ---------- старт: заголовок и два знака на первом экране ---------- */
.s5-start{margin-top:0;padding-top:clamp(96px,11vh,136px);min-height:100svh;box-sizing:border-box}
.s5 .s5-start .as-vis{margin-top:clamp(20px,2.4vw,40px)}
.s5 .s5-start .as-wasnow{max-width:calc((100svh - 300px) * 2.5 + 16px);margin:0 auto}

/* ---------- новый знак: каждая компоновка в своей клетке, написание одного размера ---------- */
.s5-set{--u:clamp(14px,1.85vw,30px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s5-set figure{margin:0;display:flex;align-items:center;justify-content:center;min-width:0;padding:clamp(40px,5.4vw,96px) 16px}
.s5-set figure:nth-child(odd){border-right:1px solid var(--line)}
.s5-set figure:nth-child(-n+2){border-bottom:1px solid var(--line)}
.s5-set .pic{display:flex;max-width:100%}
/* ---------- новый знак: цветное написание — по нажатию ---------- */
.s5-more{display:flex;justify-content:center;margin-top:clamp(24px,3vw,40px)}
.s5-more .as-btn{border:0;cursor:pointer}
.s5-set svg path{transition:fill .5s var(--ease)}

/* ---------- блоки проявляются по очереди, как шаги рассказа ---------- */
.as-vis.as-up .s5-set figure,.as-vis.as-up .s3-vers figure,.as-vis.as-up .s3-use .part,.as-vis.as-up .s3-co .logos>*,.as-vis.as-up .s5-rules figure,.as-vis.as-up .s3-okp .grp{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.as-vis.as-up.in .s5-set figure,.as-vis.as-up.in .s3-vers figure,.as-vis.as-up.in .s3-use .part,.as-vis.as-up.in .s3-co .logos>*,.as-vis.as-up.in .s5-rules figure,.as-vis.as-up.in .s3-okp .grp{opacity:1;transform:none}
.as-vis.as-up.in .s5-set figure:nth-child(2),.as-vis.as-up.in .s3-vers figure:nth-child(2),.as-vis.as-up.in .s3-use .part:nth-child(2),.as-vis.as-up.in .s3-co .logos>:nth-child(2),.as-vis.as-up.in .s5-rules figure:nth-child(2){transition-delay:.12s}
.as-vis.as-up.in .s5-set figure:nth-child(3),.as-vis.as-up.in .s3-vers figure:nth-child(3),.as-vis.as-up.in .s3-co .logos>:nth-child(3){transition-delay:.24s}
.as-vis.as-up.in .s5-set figure:nth-child(4),.as-vis.as-up.in .s3-vers figure:nth-child(4),.as-vis.as-up.in .s3-co .logos>:nth-child(4){transition-delay:.36s}
.as-vis.as-up.in .s3-co .logos>:nth-child(5){transition-delay:.48s}
.as-vis.as-up.in .s3-co .logos>:nth-child(6){transition-delay:.6s}
@media (prefers-reduced-motion:reduce){
  .as-vis.as-up .s5-set figure,.as-vis.as-up .s3-vers figure,.as-vis.as-up .s3-use .part,.as-vis.as-up .s3-co .logos>*,.as-vis.as-up .s5-rules figure,.as-vis.as-up .s3-okp .grp{opacity:1!important;transform:none!important}
}

/* ---------- малые размеры: пропорции нового знака ---------- */
.s5 .s2-ruler .lg{width:calc(var(--lh,2cm) * var(--ar,8.4))}
.s5 .s5-rules .s2-ruler{padding:0;background:none}
.s5 .s5-rules .s2-engrave .plate{padding:8%}
.s5 .s5-rules .s2-engrave .print{box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- фирменная графика: паттерны в кадре медленно плывут. Не transform: его s2.css держит через !important ---------- */
.s5 .s2-pt .as-ph img{animation:s5-drift 14s ease-in-out infinite alternate!important;scale:1.18}
.s5 .s2-pt .as-ph:nth-child(2n) img{animation-direction:alternate-reverse!important;animation-duration:18s!important}
.s5 .s2-pt .as-ph:nth-child(3n) img{animation-duration:22s!important}
@keyframes s5-drift{from{translate:-6% -5%}to{translate:6% 5%}}
@media (prefers-reduced-motion:reduce){.s5 .s2-pt .as-ph img{animation:none!important;scale:1}}

/* ---------- носители: заголовки строчными, как знак ---------- */
.s4.s5 .s3-type .mocks h3{text-transform:none}

/* ---------- вкладка браузера: как в настоящем браузере, системный шрифт, крестик и новая вкладка ---------- */
.s5 .s5-br{--sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-family:var(--sys)}
.s5 .s5-br .bar{display:flex;align-items:flex-end;gap:6px;padding:8px 10px 0;background:#DEE1E6}
.s5 .s5-br .tab{flex:0 1 240px;min-width:0;margin:0;padding:9px 10px 9px 12px;background:#fff;border-radius:10px 10px 0 0;font-family:var(--sys)!important;color:#202124}
.s5 .s5-br .tab span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.s5 .s5-br .tab .fav{width:18px;height:18px;border-radius:0}
.s5 .s5-br svg{flex:none;width:18px;height:18px;fill:none;stroke:#5F6368;stroke-width:1.5;stroke-linecap:round}
.s5 .s5-br .add{margin-bottom:9px}
.s5 .s5-br .url{padding:8px 10px;border:0;font-family:var(--sys)!important;color:#202124}
.s5 .s5-br .url span{display:block;padding:7px 16px;background:#F1F3F4;border-radius:999px}

/* ---------- крупно по нажатию: на этой же странице, с кнопкой закрыть ---------- */
.s5 .s3-okp .tiles a{cursor:zoom-in}
.s5 .s5-close{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);width:48px;height:48px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.s5 .s5-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- носители открыты сразу ---------- */
.s5 .s3-okp{margin-top:0;animation:none}
.s5 .s3-okp .grp:first-child{margin-top:0}
/* пример графики: стенды вертикальные, показаны целиком, по три в ряд на любом экране */
.s5 .s3-okp .grp:nth-child(2) .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.s5 .s3-okp .grp:nth-child(2) .tiles a{aspect-ratio:3/4}
/* шлепанцы: кадр от верха, чтобы звезда не обрезалась */
.s5 .s3-okp .grp:first-child .tiles a:nth-child(7) img{object-position:50% 0}
/* карандаши широкие: на две ячейки, ряд закрывается без пустоты */
.s5 .s3-okp .grp:first-child .tiles a:nth-child(5){grid-column:span 2;aspect-ratio:auto;position:relative}
.s5 .s3-okp .grp:first-child .tiles a:nth-child(5) img{position:absolute;inset:0}

@media (max-width:1100px) and (orientation:portrait){
  .s5-start{min-height:0}   /* вертикальный планшет: без пустоты под двумя знаками */
}
@media (min-width:641px) and (max-width:1100px){
  .s5 .s3-use{grid-template-columns:1fr 1fr}
  .s5 .s3-use .p-solid .pic svg.lg{width:30%}
}
@media (max-width:640px){
  .s5-set{--u:4vw;grid-template-columns:minmax(0,1fr)}
  .s5-set figure:nth-child(odd){border-right:0}
  .s5-set figure:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .s5 .s3-okp .grp:first-child .tiles a:nth-child(5){aspect-ratio:2/1}   /* здесь карандаши в ряду одни: высоту задает сама плитка */
  .s5-start{min-height:0}
  .s5 .s5-start .as-wasnow{max-width:none}
}
@media (max-width:480px){
  .s5 .s3-vers{grid-template-columns:1fr;gap:28px}
  .s5 .s3-vers .pic{aspect-ratio:16/9}
  .s5 .s3-vers .pic svg.lg{width:52%}
}