/* Общая адаптивная компоновка страниц разделов (section-1…4.html).
   Подключается после встроенных стилей страницы и только меняет раскладку:
   цвета, шрифты, темы и содержание остаются прежними. */

/* ширина: ~92 % окна, потолок 2300 px; отступы растут вместе с экраном */
.wrap{max-width:2300px;padding:12px clamp(16px,3.5vw,72px) 32px}

/* длина строки текста */
.lead{max-width:72ch}

/* ---------- все четыре раздела: верх страницы и список семинаров ---------- */
@media (min-width:1100px){
 .head{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:14px clamp(32px,3.5vw,72px);margin-bottom:8px}
}
@media (min-width:1800px){
 .head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.head>.mini{justify-self:end}
@media (min-width:1100px){.head>.mini{width:100%;max-width:820px}}
@media (max-width:1099px){
 .head{grid-template-columns:minmax(0,1fr)}
 .head>.mini{width:100%;max-width:560px;justify-self:start}
}
.sems{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.sem{margin:0;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sem .qs,.sem .sysq{align-self:stretch}
.sem .semact{margin-top:auto;padding-top:4px}
@media (min-width:1000px){
 .sems{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(20px,2.5vw,40px)}
}
@media (min-width:1900px){
 .sems{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- разделы I и II (.wide2): единая геометрия и ритм ----------
   Система: радиус 12 px, внутренний отступ 16–18 px, связанные элементы 14 px,
   крупные секции 28 px. Колонки верха и ряд «карта + клетка» строятся на одной сетке,
   поэтому внешние границы блоков совпадают. Длину строки ограничивает текст, а не контейнер. */
.wide2{--gx:clamp(32px,3.5vw,72px);--gap:14px;--sec:28px}
.wide2 .howto,.wide2 .mapentry,.wide2 .sem{margin:0}
.wide2 .goal,.wide2 .howto,.wide2 .mapentry,.wide2 .sem{border-radius:12px;padding:16px 18px}
.wide2 .goal,.wide2 .howto,.wide2 .mapentry{border-left:4px solid var(--u-ui,var(--acc));max-width:none}
.wide2 .goal{padding-right:max(18px,calc(100% - 78ch))}
.wide2 .howto>p:first-child{font-size:18px;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.wide2 .howto ol,.wide2 .howto .quiet{max-width:78ch}
.wide2 .mapentry h2{font-size:18px;line-height:1.3;margin:0 0 6px}
.wide2 .mapentry>div{flex:1 1 280px;min-width:0;align-self:flex-start}
.wide2 .mapentry p{max-width:62ch}
.wide2 .mapentry .btn{flex:none;align-self:center}

/* верх: две колонки одинаковой ширины; слева текст и инструкция, справа схема */
.wide2 .col-a,.wide2 .col-b{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.wide2 .head{margin:0}
.wide2 .head .mini{width:100%;max-width:none;justify-self:stretch}
.wide2 .goal{margin:0 0 12px}
.wide2 .status{margin:0 0 12px}
.wide2 .minp{margin:0}
/* ссылка на минимум: спокойнее, но с красным акцентом */
.wide2 .minlink{gap:8px;font-size:16px;line-height:1.35;font-weight:600;font-style:normal}
.wide2 .minarr{width:22px;height:14px;animation:none}
.wide2 .minlink span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ряд «системная карта + интерактивная клетка»: те же две колонки, общая верхняя линия */
.wide2 .entries{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);margin:var(--sec) 0 0;align-items:stretch}
.wide2 .mapentry{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;background:var(--surface);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.wide2 .semh{margin:var(--sec) 0 12px}
.wide2 .sems{gap:var(--gap) var(--gx)}
.wide2 .sem{gap:0}
.wide2 .sem h2{margin:4px 0 10px}
.wide2 .sem .qs{margin:0 0 14px}

@media (min-width:1100px){
 .wide2 .head,.wide2 .entries{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gx)}
 .wide2 .head{align-items:start}
}
/* планшет и телефон: одна колонка — введение → схема → инструкция → карта → клетка → семинары */
@media (max-width:1099px){
 .wide2 .head,.wide2 .entries{max-width:760px}
 .wide2 .head{display:flex;flex-direction:column;gap:var(--gap)}
 .wide2 .col-a,.wide2 .col-b{display:contents}
 .wide2 .col-a>:first-child{order:1}
 .wide2 .col-b>.mini{order:2}
 .wide2 .col-a>.howto{order:3}
 .wide2 .entries{margin-top:var(--gap)}
}
@media (min-width:1000px) and (max-width:1099px){
 .wide2 .sems{grid-template-columns:repeat(2,minmax(0,1fr))}
}