/* Сітка сайту — стандарт (Олег 27–28.10.2026, журнал №164–168; правила й чекліст — docs/40_Сітка_стандарт_чекліст.md).
   Перенесено 1:1 з лабораторії demo/_proto/grid/fix.css, де його затверджено на About і цінах. Підключається ОСТАННІМ
   на кожній сторінці (tools/build_site.py, після стилів сторінки) — як у лабораторії, тому вигляд збігається зі зразками.
   !important — там, де старі правила article.css теж мають !important; прибрати їх — окремим прибиранням. */
@media (min-width: 1200px) {
  /* мірки — у відсотках від ширини батька: основна частина = 8 колонок, шапка статті = 12, колонка тексту картки = 7 */

  /* 1 — меню (Олег 27.10): у трьох останніх колонках 10–12 — над боковою панеллю; перше слово на лінії колонки 10,
     останнє — на правому краю, проміжки між словами однакові */
  .desktop-nav-buttons-container { flex: none; width: calc((100% - 11 * 24px) / 12 * 3 + 2 * 24px); }
  .desktop-nav-buttons { width: 100%; margin: 0; justify-content: space-between; }
  .desktop-nav-buttons li { padding: 0; }

  /* 2а — заголовки розділів (h2) переносяться в тій самій колонці, що й текст під ними (було 24 знаки — кінчались будь-де) */
  .art .art-main h2.sec-h, .art .art-main .qa h2, .art .art-main .statement .big { max-width: var(--measure) !important; }
  .art .art-main .win-doc h2 { max-width: calc(var(--measure) - 24px) !important; }   /* у рамці — як абзаци в ній */
  /* 2 — абзаци: правий край — кінець колонки 5, лінія картки-доказу 5 + 3 (Олег 28.10; було — колонка 6) */
  /* ширина тексту статей (--measure, була 41 / 46rem) — 5 колонок основної частини (1200–1439 — 8, п. 22; до 1199 — уся ширина, п. 25) */
  .art-main { container-type: inline-size; }
  .art .art-main { --measure: calc((100cqw - 7 * 24px) / 8 * 5 + 4 * 24px); }
  .art .art-hero .hero-sub > p:not(.hero-meta) { max-width: calc((100% - 7 * 24px) / 8 * 5 + 4 * 24px) !important; }   /* % — від колонок 1–8 (п. 10) */
  .art-main .sec-lead, .art-main .team-lead, .art-main .ps-run { max-width: calc((100% - 7 * 24px) / 8 * 5 + 4 * 24px) !important; }
  .art-main .c3 > p:not(.num) { max-width: calc((100% - 6 * 24px) / 7 * 4 + 3 * 24px) !important; }

  /* 3 — бокова панель: рамки — рівно в колонках 10–12 (Олег 27.10: «не вилазити за три колонки»); текст у рамках — єдиний відступ 24 px */
  .art-aside .aside-card { padding-left: 24px; padding-right: 24px; }
  .art-aside .toc.fold-on .toc-cur { padding-left: 24px; padding-right: 24px; }

  /* 4 — картки 01–03: номер у колонці 1, текст — з колонки 2 */
  .art-main .c3 { grid-template-columns: calc((100% - 7 * 24px) / 8) minmax(0, 1fr); column-gap: 24px; }

  /* 5 — картки-докази: 5 + 3 колонки, проміжок 24; рамка виходить за поле, щоб самі картки стояли на лініях; текст — +24 */
  .art-main .qframe { grid-template-columns: calc((100% - 7 * 24px) / 8 * 5 + 4 * 24px) minmax(0, 1fr) !important; gap: 24px; padding: 12px; margin: 0 -13px; }
  .art-main .qc { padding-left: 24px; padding-right: 24px; }

  /* 6 — фото засновників: проміжок 24 → колонки 1–4 і 5–8 */
  .art .team { gap: 2rem 24px; }

  /* 7 — мініатюри «See it built»: колонки 10, 11, 12 */
  /* (на сайті середня ширша, бо «Architecture» — 93 px, а колонка — 85: тут підпис виступає в проміжок) */
  .art-aside .aside-demos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; }

  /* 8 — підвал — своя сітка (Олег 27.10: «між колонками різна відстань — дивно»): п'ять груп завширшки за своїм текстом,
     порожні проміжки між ними однакові; перша — на лівому краю, остання закінчується на правому */
  .fz-cols { display: flex; justify-content: space-between; gap: 24px; }
  .fz-cols > * { flex: none; }
  /* 9 — рядок реквізитів: так само — лого ліворуч, «© 2026…» посередині між ними, «Back to top» праворуч */
  .fz-bar { display: flex; justify-content: space-between; }

  /* ── сторінка цін (27.10): блоки, яких на About немає ── */
  /* 10 — шапка статті (Олег 28.10: «підпис не має своїх меж — тисне на вступ і вилазить у колонку 9»): сітка 12 колонок;
     вступ — у колонках 1–8 (обмежений колонкою 5, п. 2), підпис автора — лише в колонках 10–12, рядки переносяться в них */
  .art .hero-sub { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .art .hero-sub > p:not(.hero-meta) { grid-column: 1 / span 8; }
  .art .hero-sub > .hero-meta { grid-column: 10 / span 3; white-space: normal !important; }
  .art .hero-sub > .hero-meta .upd a { display: block; }
  /* 11 — рамки графіків: внутрішній відступ — єдиний 24 px */
  .art-main .ccard { padding-left: 24px !important; padding-right: 24px !important; }
  /* 12 — списки у дві колонки й питання FAQ: проміжок 24 → половини на колонках 1–4 і 5–8 */
  .art-main .cols2 { column-gap: 24px !important; }
  .art-main .qa-cols { column-gap: 24px !important; }
  /* 13 — «вікно» ринку і джерела в ньому: текст — рамка + 24 */
  .art-main .win-doc, .art-main .win-src { padding-left: 24px !important; padding-right: 24px !important; }
  .art-main .win-src ul { column-gap: 24px !important; }   /* друга колонка джерел — на лінії колонки 5 */
  .art-main .win-doc > p, .art-main .win-doc .ch-note { max-width: calc(var(--measure) - 24px) !important; }   /* абзаци в рамці — теж до кінця колонки 5 */
  /* 14 — три фігури FIG: текст після вертикальної лінії — + 24 (як у рамці) */
  .art-main .figc { padding-right: 24px; }
  .art-main .figc + .figc { padding-left: 24px; }
  /* 15 — списки з «+» і «≈»: значок виступає ліворуч, текст — на лінії колонки (як заголовок над списком) */
  .art-main .cols2 li { padding-left: 0; }
  .art-main .cols2 li::before { left: -1.25em; }
  /* 16 — рядки цифр (Олег 28.10): рядок із трьох — до кінця колонки 5, як абзаци; рядок із чотирьох — на всі 8 колонок
     (цифри на лініях 1, 3, 5, 7): у 5 колонках «$1,100» налазить на сусіда */
  .art-main .proof-sm ul { max-width: var(--measure); }
  .art-main .proof-sm b { font-size: 34px !important; }   /* у 5 колонках «$50–200» інакше виступав на 31 px (1280) */
  /* рядок, де число широке («400–500 KB» — 192 px), у 5 колонках не влазить — на всі 8, як рядок із чотирьох цифр
     (перенос 28.10: довідник про розмір зображень; позначка proof-wide — у самій сторінці) */
  .art-main .proof-sm.proof-wide ul { max-width: none; }
  .art-main .proof-sm.proof-wide b { font-size: 40px !important; }
  /* 17 — нумерований список у картці (Олег 28.10): цифри — на лінії тексту, текст пункту — трохи правіше */
  .art-main .c3 ol { padding-left: 26px; list-style: none; counter-reset: c3n; }
  .art-main .c3 ol li { position: relative; counter-increment: c3n; }
  .art-main .c3 ol li::before { content: counter(c3n) "."; position: absolute; left: -26px; }
  /* 18 — панель заклику: текст — рамка + 24; абзац праворуч — на лінії колонки 5 */
  .art-main .pre.pre-panel { padding-left: 24px !important; padding-right: 24px !important; column-gap: 24px !important; }
  /* 19 — підпис джерел під рядком цифр (Олег 27.10: «дуже притиснутий»): 16 → 40 px (крок --s3 шкали відступів) */
  .art .proof .cap { margin-top: var(--s3) !important; }
  /* 20 — картки 01–03 (Олег 28.10, картка 03 на цінах): список — тієї ж ширини, що абзаци; відступ після списку — як перед ним;
     абзаци — по ширині, як на всьому сайті (Олег 28.10: «рівний справа»); номер — на лінії першого рядка заголовка */
  .art .art-main .c3 ol { max-width: calc((100% - 6 * 24px) / 7 * 4 + 3 * 24px) !important; margin-bottom: 0; }
  .art .art-main .c3 > h3 { max-width: calc((100% - 6 * 24px) / 7 * 4 + 3 * 24px); }   /* заголовок картки — у колонці тексту картки (перевірка 28.10: ішов до кол. 8) */
  .art .art-main .c3 .num { padding-top: 0; align-self: start; line-height: calc(var(--t-lead) * 1.25); margin-top: calc(.7rem + 11px); }   /* +11 — базова лінія дрібного номера = базова лінія заголовка (заміряно) */
  /* 21 — бокова панель (Олег 28.10): під час прокрутки — далі від меню (бургер закінчується на 83 px: було 37 px до картки,
     стало 117 — утричі); зміст «On this page» — завжди розгорнутий */
  .aside-in { top: 200px !important; }
  /* розгорнутий — лише на екранах від 900 px заввишки (Олег 28.10, варіант 2): нижче все не влазить — список згорнутий, як був */
  @media (min-height: 900px) {
    .toc.fold-on:not(.open) ol { display: block !important; }
    .toc.fold-on .toc-cur { display: none !important; }   /* список завжди відкритий — перемикач над ним не потрібен */
    .toc.fold-on ol { margin-top: 0; }
  }
}

/* 24 — вузька картка-доказ (3 колонки): кнопка «↻ The numbers» — над підписом, як на телефоні;
   підпис — на всю ширину картки (інакше «Three-year cost» ламався на 3 рядки) */
@media (min-width: 1200px) {
  .art-main .qc.c2 .qf-hint { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: auto 0 12px; }
  .art-main .qc.c2.qf .who { padding-right: 0; margin-top: 0; }
  .art-main .qc.c2 .qf-the { display: none; }
}

/* 22 — коли текст переходить з колонки 8 на колонку 5 (Олег 28.10: «один текст перестрибнув, інший ні — безлад»):
   УВЕСЬ текст разом, на одній межі — 1440. Вужче — до колонки 8 (абзаци 79–94 знаки, вступ 59–71);
   від 1440 — до колонки 5 (абзаци 58–78, вступ 44–58) */
@media (min-width: 1200px) and (max-width: 1439px) {
  .art .art-main { --measure: 100cqw; }
  .art .art-hero .hero-sub > p:not(.hero-meta) { max-width: none !important; }
  .art-main .sec-lead, .art-main .team-lead, .art-main .ps-run { max-width: 100% !important; }
  .art .art-main .c3 > p:not(.num), .art .art-main .c3 ol, .art .art-main .c3 > h3 { max-width: 100% !important; }
  .art-main .proof-sm ul { max-width: none; }
  .art-main .proof-sm b { font-size: 40px !important; }   /* у 8 колонках числа влазять у звичайному розмірі */
  /* меню — у колонках 9–12 (Олег 28.10: «роби як краще»): у трьох колонках тут 3–18 px між словами — злипались; у чотирьох — 41+ */
  .desktop-nav-buttons-container { width: calc((100% - 11 * 24px) / 12 * 4 + 3 * 24px); }
}

/* 25 — планшет і телефон, до 1199 px (Олег 28.10: «логіка має бути однакова всюди»): колонок сітки тут нема — текст іде
   до правого краю поля; картки 01–03 — одна під одною, як на комп'ютері: номер ліворуч, текст поруч */
@media (max-width: 1199px) {
  .art { --measure: none; }
  .art .hero-sub { flex-direction: column; align-items: flex-start; }   /* підпис автора — під вступом, вступ на всю ширину */
  .art .hero-sub .hero-meta { white-space: normal; text-align: left; }
  /* абзаци — по ширині, як на комп'ютері (правий край рівний); переноси слів, щоб не було дірок */
  .art .hero-sub > p:not(.hero-meta), .art .art-main .win-doc > p, .art .art-main .sec-lead, .art .art-main .sec-after,
  .art .art-main .lede p, .art .art-main .stage-note, .art .art-main .c3 p, .art .art-main .team-lead, .art .art-main section > p:not(.cap):not(.num) {
    text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
  .art .hero-sub > p:not(.hero-meta), .art .art-main p, .art .art-main .c3 ol, .art .art-main .sec-lead { max-width: none !important; }
  .art .art-main h2.sec-h, .art .art-main .qa h2, .art .art-main .statement .big, .art .art-main .c3 > h3 { max-width: none !important; }   /* заголовки — на ширину тексту (було 24 знаки) */
  .art-main .cols3 { grid-template-columns: 1fr !important; }
  .art-main .c3 { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; padding: 2rem 0 0; }
  .art-main .c3 + .c3 { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 2rem; }
  .art-main .c3 .num { grid-row: 1 / span 9; align-self: start; line-height: calc(var(--t-lead) * 1.25); margin-top: calc(.7rem + 11px); padding-top: 0; }
  .art-main .c3 > :not(.num) { grid-column: 2; }
  .art-main .c3 ol { padding-left: 26px; list-style: none; counter-reset: c3n; }
  .art-main .c3 ol li { position: relative; counter-increment: c3n; }
  .art-main .c3 ol li::before { content: counter(c3n) "."; position: absolute; left: -26px; }
}

/* 26 — підпис автора біля заголовка (Олег 28.10): від 1200 — обидва рядки по правому краю сторінки (та сама лінія, що
   «contact» у меню й рамки бокової панелі); вужче — підпис під вступом, обидва рядки від лівого краю, як вступ */
@media (min-width: 1200px) { .art .hero-sub .hero-meta { text-align: right !important; justify-items: end !important; } }
@media (max-width: 1199px) { .art .hero-sub .hero-meta { text-align: left !important; justify-items: start !important; } }

/* 27 — вступ під заголовком на 1440–1679 (Олег 28.10, варіант 2): 22 px замість 24 — заміряно: з 24 px там лише ≈ 46 знаків
   у рядку, і вирівнювання по ширині давало дірки; з 22 px — 46–52. Від 1680 і з 24 px — ≥ 52 */
@media (min-width: 1440px) and (max-width: 1679px) {
  .art .art-hero .hero-sub > p:not(.hero-meta) { font-size: 22px !important; }
}

/* 28 — бокова панель на 1200–1365 (перевірка 28.10): три колонки там 249–286 px, а рядок цін «Small website · from $2,000» —
   228 px, кнопка — 205: з відступом 24 рамка виходила за правий край (на 1200 — на 29 px; на сайті й раніше — на ≈ 15).
   Відступ у рамці — 16, ціни — .8rem, кнопка — вужчі поля */
@media (min-width: 1200px) and (max-width: 1365px) {
  .art-aside .aside-card { padding-left: 16px; padding-right: 16px; }
  .art-aside .toc.fold-on .toc-cur { padding-left: 16px; padding-right: 16px; }
  .art-aside .aside-prices dt, .art-aside .aside-prices dd { font-size: .8rem !important; }
  .art-aside .aside-card .cta-hole { padding: 0 14px 0 28px; }
}

/* 29 — телефон (перевірка 28.10): заголовок картки 20 px замість 24 — номер на базовій лінії з поправкою +7 (а не +11) */
@media (max-width: 768px) {
  .art-main .c3 .num { margin-top: calc(.7rem + 7px) !important; }
}

/* 30 — хаб довідників /guides/ (Олег 28.10): картки дві на дві, розділова лінія посередині проміжку між колонками 4 і 5,
   текст правої картки — рівно з колонки 5, лівої — до кінця колонки 4 (як половини 4 + 4). Половина основної частини =
   4 колонки + 12 px, тож відступ від лінії — 12 */
@media (min-width: 1200px) {
  .art-main .hub-card { padding-right: 12px; }
  .art-main .hub-card:nth-child(even) { padding-left: 12px; padding-right: 0; }
}

/* 31 — Contact (Олег 28.10): вступ і контакти — колонки 1–5, колонка 6 — повітря, форма й часті питання — 7–12;
   «Contact» з колонки 1, «Visuals» — з колонки 4; картки тарифів — по дві колонки (три в ряд, проміжок 24);
   рамка картки мала (160–260 px) — відступ 16, як у боковій панелі на вузьких; опис тарифу після лінії — +24 */
@media (min-width: 1200px) {
  .contact-hero .content-container { width: 90%; }
  .contact-hero .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .contact-hero .contact-grid > div:first-child { grid-column: 1 / span 5; }
  .contact-hero .contact-grid > .form-col { grid-column: 7 / span 6; }
  .contact-hero .intro { max-width: none; }
  .contact-hero .contact-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
  .contact-hero .contact-item:first-child { grid-column: 1 / span 3; }
  .contact-hero .contact-item + .contact-item { grid-column: 4 / span 2; }
  .contact-hero .scope-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .contact-hero .sc { padding-left: 16px; padding-right: 16px; }
  .contact-hero .scope-info { padding-left: 24px; }
  /* три частини розбору (28.10): номер — у колонці 1, текст — з колонки 2 (як картки 01–03) */
  .contact-hero .parts li { grid-template-columns: calc((100% - 4 * 24px) / 5) minmax(0, 1fr); column-gap: 24px; }
}

/* 32 — Legal (Олег 28.10): зміст — колонки 1–3, текст — з колонки 5; у реквізитах назва — дві колонки, значення — з колонки 7.
   Ширина — як перемикання в статтях: 1200–1439 до кінця колонки 11 (64–74 знаки в рядку), від 1440 — п'ять колонок, до кінця
   колонки 9 (заміряно: сім колонок на 1920 давали 103 знаки в рядку, п'ять — ≈ 70) */
@media (min-width: 1200px) {
  .legal .legal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .legal .legal-grid > .toc { grid-column: 1 / span 3; }
  .legal .legal-grid > .doc { grid-column: 5 / span 7; max-width: none; }
  .legal .card { grid-template-columns: calc((100% - 6 * 24px) / 7 * 2 + 24px) minmax(0, 1fr); column-gap: 24px; }
}
@media (min-width: 1440px) {
  .legal .legal-grid > .doc { grid-column: 5 / span 5; }
  .legal .card { grid-template-columns: calc((100% - 4 * 24px) / 5 * 2 + 24px) minmax(0, 1fr); }
}