/* Страницы предметов (группы с преподавателем) поверх olimp-v2.css: всё в .sj, общие классы ov-* не меняются.
   Генератор — tools/subjects/gen.py, данные — tools/subjects/<предмет>.json */
.sj{--sj-r:22px}
.sj .ov-h1 b{display:block}  /* в первом экране выделенная часть — своей строкой; в заголовках разделов — в строку, если помещается */
.sj .ov-h2{text-wrap:balance}
.sj h3{text-wrap:balance}

/* ---------- 1. первый экран: фото преподавателя на синем круге ---------- */
.sj-hero .ov-person{width:min(64%,230px);right:6%;bottom:0}
.sj-hero .ov-glow{width:min(60%,214px);right:calc(6% + 8px);bottom:6%}
.sj-hero .ov-tags{flex-wrap:wrap}
@media (max-width:599px){.sj-hero .ov-hero-visual{height:270px}}
.sj-hero .ov-tags li{white-space:nowrap}
@media (min-width:600px) and (max-width:999px){
  .sj-hero .ov-hero-visual{height:380px}
  .sj-hero .ov-person{width:330px}
  .sj-hero .ov-glow{width:300px;right:calc(6% + 15px)}
  .sj-hero .ov-hero-visual{margin-top:8px}  /* фото шире, чем на «Олимпологии»: не поднимаем к кнопкам */
  .sj-hero .ov-author{top:auto;bottom:36px}
}
@media (min-width:1000px){
  .sj-hero .ov-photo{top:-6%;left:-6%;right:-6%}
  .sj-hero .ov-person{left:50%;right:auto;transform:translateX(-50%);height:auto;width:96%;max-width:640px;bottom:-2%}
  .sj-hero .ov-glow{width:88%;top:14%}
  .sj-hero .ov-cta{margin-top:56px}
  .sj-hero .ov-phrase{margin-top:48px}
  .sj-hero .ov-tags{margin-top:28px}
}

/* преимущества под первым экраном */
.sj-facts{padding:8px 0 4px}
.sj-facts-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.sj-facts-l li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--sj-r);background:var(--card);border:1px solid var(--card-line)}
.sj-facts-l i,.sj-steps i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}
.sj-facts-l i svg,.sj-steps i svg{width:22px;height:22px}
.sj-facts-l h3{margin:0;font-size:15.5px;font-weight:800;line-height:1.25}
.sj-facts-l p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (min-width:600px){.sj-facts-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .sj-facts{padding:0 0 12px;margin-top:-8px}
  .sj-facts-l{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .sj-facts-l li{flex-direction:column;padding:22px;gap:14px}
  .sj-facts-l h3{font-size:17px}
  .sj-facts-l p{font-size:14.5px}
}

/* ---------- 2. как проходит обучение ---------- */
.sj-study-g{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px}
.sj-study-v{position:relative;margin:0;padding:12px 0 0}
.sj-study-v img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.sj-bubble{position:absolute;right:0;top:0;display:flex;align-items:center;gap:8px;max-width:200px;margin:0;padding:10px 12px;border-radius:16px 16px 4px 16px;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-soft);font-size:12.5px;font-weight:700;line-height:1.3}
.sj-bubble svg{flex:none;width:22px;height:22px;color:var(--primary)}
.sj-study-r{display:flex;flex-direction:column;gap:10px;min-width:0}
.sj-consult{padding:18px;border-radius:var(--sj-r);background:var(--primary-soft)}
.sj-consult h3{margin:4px 0 0;font-size:18px;font-weight:800;line-height:1.25}
.sj-consult p:last-child{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.sj-step-k{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-small)}
.sj-step-k2{margin-top:8px}
.sj-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sj-steps li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--sj-r);background:var(--card);border:1px solid var(--card-line)}
.sj-steps h3{margin:0;font-size:16px;font-weight:800;line-height:1.25}
.sj-steps p{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.sj-cta{margin-top:20px}
@media (max-width:599px){.sj-cta{flex-direction:column}.sj-cta .ov-btn{width:100%}}
@media (min-width:1000px){
  .sj-study-g{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;margin-top:32px}
  .sj-study-v img{max-width:none}
  .sj-bubble{right:2%;top:4%;max-width:230px;font-size:14px;padding:12px 14px}
  .sj-consult{padding:24px 26px}
  .sj-consult h3{font-size:21px}
  .sj-consult p:last-child{font-size:15.5px}
  .sj-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sj-steps li{flex-direction:column;padding:20px}
  .sj-steps h3{font-size:17px}
  .sj-steps p{font-size:14.5px}
  .sj-cta{margin-top:36px}
}

/* ---------- 3. преподаватель ---------- */
.sj-tc{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:18px;padding:18px;border-radius:26px;background:var(--card);border:1px solid var(--card-line)}
.sj-tc-ph{position:relative;height:250px;max-width:420px;width:100%;margin:0 auto}
.sj-pol{position:absolute;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18))}
.sj-pol1{left:0;top:6px;width:54%;transform:rotate(-4deg)}
.sj-pol2{right:0;top:0;width:54%;transform:rotate(5deg)}
.sj-tc-r h3{margin:0;font-size:22px;font-weight:800}
.sj-reg{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.sj-reg li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.sj-reg svg,.sj-tf-l svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--primary)}
.sj-quote{position:relative;margin:12px 0 0;padding:20px 20px 20px 54px;border-radius:26px;background:var(--primary);color:#fff}
.sj-quote>span{position:absolute;left:16px;top:8px;font-size:56px;line-height:1;font-weight:800;opacity:.55}
.sj-quote p{margin:0;font-size:14.5px;line-height:1.5;font-weight:600;font-style:italic}
.sj-quote p+p{margin-top:6px;font-weight:500}
html.dark .sj-quote{background:#0b6f9e}
@media (min-width:1000px){
  .sj-tc{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:32px;padding:32px 40px}
  .sj-tc-ph{height:330px;max-width:470px}
  .sj-tc-r h3{font-size:28px}
  .sj-reg{gap:14px;margin-top:18px}
  .sj-reg li{font-size:16px}
  .sj-quote{margin-top:16px;padding:26px 40px 26px 88px}
  .sj-quote>span{left:32px;top:14px;font-size:84px}
  .sj-quote p{font-size:17px}
}

/* ---------- 4. отзывы ---------- */
.sj-rvs{display:flex;gap:10px;margin:16px -16px 0;padding:2px 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sj-rvs::-webkit-scrollbar{display:none}
.sj-rv{flex:none;width:78%;scroll-snap-align:start;scroll-margin-left:16px;display:flex;flex-direction:column;padding:16px;border-radius:var(--sj-r);background:var(--card);border:1px solid var(--card-line)}
.sj-rv-x{flex:1;margin:0;font-size:14.5px;line-height:1.5}
.sj-rv-who{margin:14px 0 0;padding-top:12px;border-top:2px solid var(--primary);font-size:13px;line-height:1.35;color:var(--muted)}
.sj-rv-who b{display:block;color:var(--fg);font-size:15px}
.sj-rv-v{align-items:stretch}
.sj-circle{position:relative;display:block;width:100%;max-width:240px;aspect-ratio:1;margin:0 auto;padding:0;border:0;border-radius:50%;overflow:hidden;background:#000;cursor:pointer;flex:none;height:auto;margin:auto}  /* кружок, не овал: не растягивать по высоте карточки */
.sj-circle video{display:block;width:100%;height:100%;object-fit:cover}
.sj-circle i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--primary);color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:opacity .2s,transform .2s}
.sj-circle i svg{width:28px;height:28px}
.sj-circle:hover i{transform:scale(1.06)}
.sj-circle.on i{opacity:0}
.sj-circle.on.paused i{opacity:1}
@media (min-width:1000px){
  .sj-rvs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:32px 0 0;padding:0;overflow:visible}
  .sj-rv{width:auto;padding:22px}
  .sj-rv-x{font-size:15px}
}

/* ---------- 5. тарифы: две карточки ---------- */
.sj-buy .ov-tfs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:16px 0 0;padding:0;overflow:visible}
.sj-buy .ov-tf{width:auto}
.sj-buy .ov-tf h3{min-height:0}
.sj-buy .ov-switch em{font-style:normal;margin-left:4px;opacity:.85}
.sj-tf-l{list-style:none;flex:1;margin:16px 0 18px;padding:14px 0 0;border-top:1px solid var(--card-line);display:grid;gap:10px;align-content:start}
.sj-tf-l li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--muted)}
.sj-tf-l b{display:block;color:var(--fg);font-weight:800}
.sj-tf-b{display:grid;gap:8px}
.sj-tf-b .ov-btn{width:100%;white-space:normal;text-align:center}
@media (min-width:1000px){
  .sj-buy .ov-tfs{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
  .sj-tf-l{margin:20px 0 24px;padding-top:18px;gap:12px}
  .sj-tf-l li{font-size:15px}
  .sj-tf-b .ov-btn{padding:17px 20px;font-size:16px}
}
/* «Как проходит обучение» — в один экран на ноутбуке: шаги сеткой 2×2 */
@media (min-width:1000px){
  .sj-study-g{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;margin-top:24px}
  .sj-study-v img{max-height:52vh;width:auto;max-width:100%}
  .sj-consult{padding:18px 22px}
  .sj-consult h3{font-size:19px}
  .sj-consult p:last-child{font-size:14px;margin-top:6px}
  .sj-step-k2{margin-top:4px}
  .sj-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sj-steps li{padding:12px 14px}
  .sj-steps h3{font-size:15px}
  .sj-steps p{font-size:13.5px;line-height:1.4}
  .sj-cta{margin-top:18px}
}