/* Інформаційна сторінка — вміст без вписаних руками класів.
   ---------------------------------------------------------------------------
   Було: автор мусив пам'ятати, що секції потрібен `delivery-content`, блоку
   колонок — `container block-with-cols`, кожній колонці — `col-50`, і що на
   сусідній сторінці класи вже інші. Частина з них до того ж нічого не робила:
   `delivery-content` жив у delivery.css, який на цій сторінці не підключений,
   а `privacy-policy page-text-content` приїхав копіпастом зі сторінки політики.

   Стало: автор ставить рідний блок «Колонки» з вибиралки й пише заголовки,
   абзаци та списки. Класи `wp-block-*` проставляє сам Gutenberg — їх не треба
   ні знати, ні вписувати.

   Числа нижче не вигадані: це ті самі значення, що давали `.block-with-cols`,
   `.col-50` і `section.wp-block-group`, щоб перехід нічого не зсунув. */

.tsep-doc {
	padding-bottom: 100px;
	min-height: 40dvh;
}

/* Ритм відступів на margin, а не на flex-gap ---------------------------------
   Через gap кожна пряма дитина отримувала однакові 30px — і абзаци всередині
   одного розділу розліталися так само далеко, як самі розділи. У старій
   розмітці цього не було: абзаци лежали в колонці з відступом 15px, а 30px
   стояли лише між секціями. Повертаємо ту саму ієрархію, але без обгорток. */
.tsep-doc > * {
	margin-top: var(--blocks-indent);
}
.tsep-doc > h2,
.tsep-doc > h3,
.tsep-doc > .wp-block-columns {
	margin-top: calc(var(--blocks-indent) * 2);
}
.tsep-doc > *:first-child {
	margin-top: 0;
}

/* Абзац дорівнюємо до пункту списку, а не навпаки -----------------------------
   Глобальне `ul.wp-block-list li` дає 16px/24 без брейкпойнтів, а `p` у темі
   зменшується до 14/18 на телефоні. Зрівняти можна було в обидва боки; беремо
   більший кегль, бо це сторінка суцільного тексту, і 14px на ній дрібні.
   Специфічність (0,1,1) перебиває медіазапити теми з голим `p`. */
.tsep-doc p {
	font-size: 16px;
	line-height: 24px;
}
/* `.container` сам себе не центрує — у старій розмітці це робив батьківський
   `section.wp-block-group` через `align-items: center`. Секцію ми прибрали,
   тож поля задаємо тут явно, інакше текст прилипає до лівого краю. */
.tsep-doc.container {
	margin-left: auto;
	margin-right: auto;
}

/* Колонки — копія .block-with-cols + .col-50 з base.css, але прив'язана до
   рідного класу Gutenberg. `flex-basis` замість `width` — щоб працювало і на
   трьох колонках, не лише на двох. */
.tsep-doc .wp-block-columns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--blocks-indent);
}
.tsep-doc .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: var(--blocks-indent);
	flex: 1 1 calc(50% - var(--blocks-indent) / 2);
}

/* Логотипи платіжних систем — єдиний блок, який лишився сирим HTML.
   Селектор по шляху до файлу, а не по класу: блок `wp:html` WordPress рендерить
   БЕЗ обгортки (`.wp-block-html` у DOM немає), а вішати клас на кожну картинку
   означало б повернути те, від чого йдемо. Заразом це не зачепить майбутні
   ілюстрації в тексті — правило бачить лише /img/pay/.

   Висоти саме тут, а не атрибутом height у розмітці: атрибут програє правилу
   теми `img { height: auto }`, і логотипи розтягуються на всю ширину колонки. */
.tsep-doc img[src*="/img/pay/"] {
	/* inline-block перебиває глобальне `img { display: block }` теми — без
	   цього логотипи стають у стовпчик. Обійшлись без :has() на абзаці:
	   відступ дає margin, і працює це в будь-якому браузері. */
	display: inline-block;
	width: auto;
	height: 19px;
	vertical-align: middle;
	margin-right: 10px;
}
.tsep-doc img[src*="/img/pay/plata"] {
	height: 15px;
}
.tsep-doc img[src*="/img/pay/"]:last-child {
	margin-right: 0;
}

@media (max-width: 1279px) {
	.tsep-doc {
		padding-bottom: 50px;
	}
	.tsep-doc .wp-block-column {
		flex-basis: 100%;
	}
}

/* Роздільник перед підсумковим абзацом ---------------------------------------
   Був інлайновим `border-top` на самому абзаці; тепер це окремий блок
   «Роздільник», який автор ставить із вибиралки. */
.tsep-doc hr {
	border: 0;
	border-top: 1px solid #eee;
	margin: calc(var(--blocks-indent) * 2) 0 0;
}

/* «Про нас» має власний, більший заголовок — так було до перенесення сторінки
   на спільний шаблон. Прив'язка до класу body, який WordPress ставить сам,
   щоб не чіпати решту документних сторінок. */
.page-id-7922 .tsep-doc h2 {
	font-size: 34px;
	line-height: 42px;
}