/*
 * Модульная сетка сайта (согласована 04.10.2026): класс v2 стоит на <html> во всех шаблонах.
 * Принцип: одна сетка на 12 колонок для всех разделов. Номер и подпись раздела —
 * в колонках 1–3, заголовки и описания начинаются с колонки 4 — одна вертикаль на всём сайте.
 * Синий — только то, куда нажимать, и номера разделов. Превью работ — в одном тоне.
 */

html.v2 { --wrap: 1360px; --gut: 24px; }
html.v2 .wrap { padding: 0 clamp(20px, 3vw, 40px); }
html.v2 main { counter-reset: sec; }

/* ── Шапка раздела: номер слева, заголовок с 4-й колонки ── */
html.v2 .section-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 20px;
  align-items: start; margin-bottom: 64px; padding-top: 22px; border-top: 1px solid var(--line-strong);
}
html.v2 .night .section-head { border-top-color: #2b2e35; }
html.v2 .section-head > div { display: contents; }
html.v2 .section-head .eyebrow { grid-column: 1 / span 3; margin: 0; padding-top: 12px; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
html.v2 .section-head .eyebrow::before {
  counter-increment: sec; content: counter(sec, decimal-leading-zero);
  width: auto; height: auto; background: none; color: var(--accent); font-family: var(--mono); font-size: 12px;
}
html.v2 .section-head .h2 { grid-column: 4 / span 9; max-width: 17ch; font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -0.045em; }
html.v2 .section-head > p { grid-column: 4 / span 6; max-width: none; font-size: 18px; line-height: 1.55; }

/* ── Первый экран по той же сетке ── */
html.v2 .hero { padding: 40px 0 72px; }
html.v2 .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
html.v2 .hero__grid > :first-child { grid-column: 1 / span 8; }
html.v2 .hero__photo { grid-column: 9 / span 4; }
html.v2 .hero h1 { font-size: clamp(52px, 8.6vw, 136px); line-height: .9; letter-spacing: -0.055em; }
html.v2 .hero__lead { font-size: 20px; max-width: 32em; }
html.v2 .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); margin-top: 72px; }
html.v2 .fact, html.v2 .fact + .fact { padding: 22px 0 0; border-left: 0; }
html.v2 .fact b { font-size: clamp(34px, 4vw, 56px); }

/* ── «Не только сайты»: вкладки в колонках 1–3, слайд с 4-й ── */
html.v2 .deck { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
html.v2 .deck__tabs { grid-column: 1 / span 3; }
html.v2 .deck__slides { grid-column: 4 / span 9; min-width: 0; }

/* ── Модули: группа слева, карточки с 4-й колонки ── */
html.v2 .mods__group { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
html.v2 .mods__title { grid-column: 1 / span 3; }
html.v2 .mods__list { grid-column: 4 / span 9; }

/* ── Обо мне ── */
html.v2 .about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
html.v2 .about__photo { grid-column: 1 / span 5; }
html.v2 .about__text { grid-column: 7 / span 6; }

/* ── Частые вопросы: вопросы с 4-й колонки, как все заголовки ── */
html.v2 .faq { margin-left: calc((100% + var(--gut)) * 3 / 12); }

/* ── Отступы между разделами — один ритм ── */
html.v2 .section { padding-block: clamp(80px, 9vw, 136px); }
html.v2 .section--tight { padding-block: clamp(64px, 7vw, 104px); }

@media (max-width: 1080px) {
  html.v2 .deck__tabs, html.v2 .deck__slides { grid-column: 1 / -1; }
  html.v2 .mods__title, html.v2 .mods__list { grid-column: 1 / -1; }
  html.v2 .hero__grid > :first-child { grid-column: 1 / span 7; }
  html.v2 .hero__photo { grid-column: 8 / span 5; }
}
@media (max-width: 980px) {
  html.v2 .hero__grid > :first-child, html.v2 .hero__photo { grid-column: 1 / -1; }
  html.v2 .about__photo, html.v2 .about__text { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  html.v2 .section-head { margin-bottom: 40px; }
  html.v2 .section-head .eyebrow, html.v2 .section-head .h2, html.v2 .section-head > p { grid-column: 1 / -1; }
  html.v2 .section-head .eyebrow { padding-top: 0; }
  html.v2 .section-head .h2 { font-size: clamp(36px, 10vw, 48px); }
  html.v2 .facts { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  html.v2 .faq { margin-left: 0; }
}


/* Кнопка в шапке раздела («Все статьи») — под заголовком, с той же вертикали. */
html.v2 .section-head > a, html.v2 .section-head > .btn { grid-column: 4 / span 4; justify-self: start; }
@media (max-width: 760px) { html.v2 .section-head > a, html.v2 .section-head > .btn { grid-column: 1 / -1; } }