/**
 * Стилі сторінок напрямків (Гідроциліндри, Маслостанції, Модернізація)
 *
 * Секції:
 * - .directions-page-content — основна секція
 * - .directions-page-body — контентний блок (без sidebar; на ПК/ноутбук фіксована
 *   ширина 80vw з мінімумом 1200px, по центру). Структура — flex-column + gap,
 *   той самий патерн що .text-page-col в page-text.css (НЕ margin-хаки), щоб
 *   довільний набір блоків (заголовок/список/таблиця/колонки) отримував
 *   контрольований однаковий відступ незалежно від пари тегів.
 *
 * Залежності: base.css, components.css
 * Використовується в: pages/directions.php
 *
 * Історія змін:
 * - 2026-07-14: Створено на основі page-text.css (задача #1119), без sidebar-навігації.
 * - 2026-07-14: Виправлено накладення заголовок+список (фідбек Олександра) —
 *   .directions-page-body переведено з block на flex-column+gap патерн
 *   .text-page-col: негативний margin теми (.text-box h2+ul) розрахований на
 *   роботу поверх gap, без gap він валить елемент в overlap. h1 primary-колір
 *   тепер класом .primary в HTML (як в delivery.php), не окремим CSS-правилом.
 */

/* Directions Page - Start */
.directions-page-content {
	overflow: visible !important;
	padding: 15px 0 120px;
}

.directions-page-body {
	display: flex;
	flex-direction: column;
	gap: var(--blocks-indent);
	background: var(--white);
	border-radius: var(--radius-medium);
	padding: 30px;
}

/* ПК/ноутбук — фіксована ширина по центру */
@media (min-width: 1280px) {
	.directions-page-body {
		width: 80vw;
		min-width: 1200px;
		margin: 0 auto;
	}
}

@media (max-width: 1279px) {
	.directions-page-content {
		padding: 15px 0 80px;
	}
	.directions-page-body {
		padding: 20px;
	}
}

/* Demo Gutenberg blocks (list/table/columns) - задача #1119 */
.directions-page-body .wp-block-table {
	overflow-x: auto;
}
.directions-page-body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}
.directions-page-body .wp-block-table th,
.directions-page-body .wp-block-table td {
	padding: 10px 15px;
	border: 1px solid var(--border);
	text-align: left;
	font-size: 16px;
}
.directions-page-body .wp-block-table thead th {
	background: var(--light-gray);
	font-weight: 600;
}

.directions-page-body .wp-block-columns {
	display: flex;
	gap: var(--blocks-indent);
}
.directions-page-body .wp-block-column {
	flex: 1;
	min-width: 0;
}
.directions-page-body .wp-block-column img {
	border-radius: var(--radius-small);
}

@media (max-width: 767px) {
	.directions-page-body .wp-block-columns {
		flex-direction: column;
	}
	.directions-page-body .wp-block-table th,
	.directions-page-body .wp-block-table td {
		padding: 8px 10px;
		font-size: 14px;
	}
}
/* Directions Page - End */