/*
 * content.css — оформлення СИРОГО HTML сторінки Lubnybase (_theme-spec.md §6).
 *
 * Контент лежить у WordPress одним блоком wp:freeform: усередині нього <p>, <h2>,
 * <blockquote>, <table>, <ul> НЕ отримують блокових класів Gutenberg, тож стилі
 * ядра до них не доїжджають — оформлюємо самі. Виняток — картинки: wp-payload.mjs
 * сам проставляє wp-block-image size-large і wp-element-caption, блоковий CSS їх
 * підхоплює, але свої правила ширини все одно потрібні.
 *
 * Написано по РЕАЛЬНОМУ payload «Клітки» (9 фото з підписами, 8 H2, 7 цитат,
 * 2 таблиці, 10 посилань), а не по уявному HTML. Чого в корпусі немає — h3, h4,
 * вкладених списків, <code> — тут і не стилізуємо.
 *
 * Токени беремо з theme.json (§4). Своїх кольорів і розмірів цей файл не вводить.
 */

/* ---------------------------------------------------------------- потік тексту */

.entry-content {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.7;
	/* Переноси в українському тексті: довгі слова у вузькій колонці інакше
	   роздирають рядок дірками. */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

.entry-content p {
	margin: 0 0 1.15em;
}

/* Абзац одразу після заголовка не потребує верхнього відступу — його дає сам H2. */
.entry-content h2 + p {
	margin-top: 0;
}

/* ------------------------------------------------------------------ заголовки */

/*
 * Повітря перед H2 — головний засіб читаності довгої сторінки: розділи мусять
 * розпізнаватися периферійним зором при прокрутці. Знизу відступ навмисно
 * менший за верхній: заголовок належить тексту під собою, а не над ним.
 */
.entry-content h2 {
	/*
	 * Серифні заголовки (рішення редактора 2026-08-04). Вага 700, а не 600:
	 * у PT Serif проміжної ваги немає, і на 600 браузер малює фальшивий
	 * напівжирний — кирилиця від цього пливе.
	 */
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-large );
	font-weight: 700;
	line-height: 1.25;
	margin: 2.75em 0 0.6em;
	/* Заголовки в проєкті іменні й довгі («Як садиба стала поліклінікою») —
	   переноси тут шкодять, ріжуть назву посеред слова. */
	hyphens: manual;
	text-wrap: balance;
}

/*
 * Латунна риска під H2 (141 заголовок у корпусі). Єдине місце, де токен mark
 * працює як видимий декор: контраст 6.32 йому дозволяє й текст, але текстом
 * латунь тут не потрібна — заголовок і так контрастний, рисці ж контраст
 * узагалі не потрібен, вона працює формою.
 */
.entry-content h2::after {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	margin-top: 0.45em;
	border-radius: 2px;
	background-color: var( --wp--preset--color--mark );
}

.entry-content > :first-child {
	margin-top: 0;
}

/*
 * ЛІД — перший абзац сторінки. H1 у .md публікатор знімає в заголовок поста,
 * тож перший абзац у контенті це завжди лід (перевірено на всіх 20 сторінках
 * корпусу). Обкладинку вставляє mu-plugin окремою figure, тому :first-of-type
 * по p його не зачіпає.
 *
 * Трохи більший кегль і приглушений тон: лід переказує сторінку цілком і
 * читається як вступ, а не як перший абзац розділу.
 */
.entry-content > p:first-of-type {
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.55;
	color: var( --wp--preset--color--ink-soft );
}

/* --------------------------------------------------------------------- цитати */

/*
 * Цитат багато (7 на «Клітці») і вони несуть голос міста — це не декор, а зміст.
 * Тому НЕ курсив (довгий курсив кирилицею читається гірше) і не збільшений кегль:
 * відрізняємо лівою лінією і підкладкою, а не «красивістю».
 */
.entry-content blockquote {
	margin: 1.75em 0;
	/*
	 * Підкладка, а не лише лінія: у темній темі сама тільки лінія ліворуч
	 * губиться серед тексту, бо контраст тла й тексту й так максимальний.
	 * Плашка surface відділяє голос міста від голосу автора обсягом, а не
	 * «красивістю» — курсиву й збільшеного кегля тут як не було, так і немає.
	 */
	padding: 0.9em 1.25em 0.9em 1.1em;
	background-color: var( --wp--preset--color--surface );
	border-left: 3px solid var( --wp--preset--color--accent );
	border-radius: 0 8px 8px 0;
	color: var( --wp--preset--color--contrast );
}

.entry-content blockquote p {
	margin: 0.65em 0;
}

/* --------------------------------------------------------------------- списки */

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.15em;
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.4em;
}

/* ---------------------------------------------------------------------- фото */

/*
 * ВАЖЛИВО про специфічність. wp-payload.mjs віддає кадр так:
 *   <img src alt style="max-width:100%;height:auto">
 * Інлайновий style сильніший за цей файл, тож перебивати max-width і height
 * звідси не можна (лише через !important, а це вже війна з публікатором).
 * Атрибутів width/height у розмітці НЕМАЄ — селектори на кшталт img[width]
 * мовчки не спрацюють, пропорцію кадру CSS теж не знає.
 * Тому керуємо тільки тим, що інлайн НЕ задає: max-height, width, тло, рамка.
 */
.entry-content figure.wp-block-image {
	margin: var( --wp--preset--spacing--40 ) 0;
}

/*
 * Ширина кадру = ширина колонки тексту, і крапка.
 *
 * Чому НЕ розширюємо до wideSize, хоча §4 спеки це припускала: усі кадри
 * проходять pad-пайплайн і приходять КВАДРАТНИМИ 1366×1366 (перевірено на всіх
 * 10 кадрах «Клітки»). Квадрат завширшки 1100px має висоту 1100px — це вище за
 * екран, читання рветься. У колонці 720px той самий кадр дає 720px висоти, і
 * саме так виглядає обкладинка, до якої питань немає.
 *
 * Чому НЕ ставимо max-height: квадратність означає, що вертикальних «на два
 * екрани» кадрів не буває — стеля висоти не рятує ні від чого. Зате вона
 * спрацьовувала завжди: висота впиралась у стелю, width:auto перераховував
 * ширину, і кадр ставав вужчим за колонку та від'їжджав від лівого краю тексту.
 *
 * Ширину задає інлайновий max-width:100% від публікатора: 1366px натуральних
 * обрізаються до ширини колонки. Своє width не оголошуємо — воно тут зайве.
 */
.entry-content figure.wp-block-image img,
.entry-content figure.lb-hero img {
	display: block;
	/*
	 * Підкладка під кадром = ТОЧНО той колір, яким pad-пайплайн доводить кадр
	 * до квадрата (#C7CED8, зміряно по всіх 10 кадрах «Клітки»). Раніше тут
	 * стояв surface — поки тема була світла й тепла, він лише приблизно збігався;
	 * у темній палітрі це дало б темну рамку навколо світлого поля кадру.
	 * Збіг 1:1 прибирає межу між кадром і рамкою: світле поле читається як
	 * картон паспарту, а не як дірка в сторінці. Змінювати цей токен можна
	 * тільки разом із кольором pad у пайплайні.
	 */
	background-color: var( --wp--preset--color--mount );
}

/* ------------------------------------------------------------------- підписи */

/*
 * Підпис візуально вторинний до кадру, але це повноцінний текст із фактом
 * і атрибуцією — не дрібний сірий шум. Гротеск + приглушений колір відділяють
 * його від прози, кегль лишається читабельним.
 */
.entry-content figcaption,
.entry-content .wp-element-caption {
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	color: var( --wp--preset--color--muted );
	margin-top: 0.6em;
	text-align: left;
	/* Підпис прив'язаний до колонки тексту, навіть коли кадр ширший. */
	max-width: var( --wp--style--global--content-size, 720px );
}

/* -------------------------------------------------------------------- таблиці */

/*
 * Таблиці приходять без <thead>/<tbody> — wp-payload.mjs віддає плоский набір
 * <tr>, де шапка це просто перший рядок із <th>. Тому чіпляємось за th, а не
 * за thead: селектор на thead тут мовчки не спрацював би.
 */
.entry-content table {
	width: 100%;
	margin: 1.75em 0;
	border-collapse: collapse;
	/*
	 * Таблиць у корпусі найбільше з усіх конструкцій (180 рядків на 20
	 * сторінках) — це основний носій хронології. Своє тло (raised) відриває
	 * таблицю від прози; зовнішня рамка бере СИЛЬНІШУ лінію, ніж лінії між
	 * рядками, інакше межа таблиці читається так само, як розділювач рядка.
	 */
	background-color: var( --wp--preset--color--raised );
	border: 1px solid var( --wp--preset--color--border-strong );
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.45;
}

.entry-content th,
.entry-content td {
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var( --wp--preset--color--border );
}

/*
 * D6. Заливку має ТІЛЬКИ шапка. Раніше surface стояв на всіх th — а бічні th
 * (перший стовпчик: період, рік) теж th, і колонка читалася як друга шапка.
 * Таблиці приходять без <thead>, шапка — просто перший <tr>, тому чіпляємось
 * за tr:first-child, а не за thead.
 */
.entry-content th {
	font-weight: 600;
	border-bottom-width: 2px;
}

.entry-content tr:first-child th {
	background-color: var( --wp--preset--color--surface );
}

/* --------------------------------------------------------------- посилання */

.entry-content a {
	color: var( --wp--preset--color--accent );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var( --wp--preset--color--accent-strong );
}

/*
 * Посилання [джерело] у підписах — довгі URL на facebook.com. Дозволяємо їм
 * рватися будь-де, інакше один такий рядок виносить підпис за межі екрана
 * і на мобільному з'являється горизонтальна прокрутка всієї сторінки.
 */
.entry-content figcaption a,
.entry-content .wp-element-caption a {
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- мобільний */

@media ( max-width: 600px ) {
	/*
	 * Таблиця скролиться ВСЕРЕДИНІ себе, а не тягне сторінку. Обгортку з
	 * overflow навколо неї поставити нема куди — HTML сирий і ми його не
	 * переписуємо (контракт рендера: .md → HTML один в один), тож робимо
	 * саму таблицю скрол-контейнером.
	 */
	.entry-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.entry-content h2 {
		margin-top: 2em;
	}

	.entry-content blockquote {
		padding-left: 1em;
	}

}

/* ------------------------------------------------------------------ друк (D2) */

/*
 * Краєзнавчий архів друкують — на стенд, у папку, старшим родичам. Без цього
 * блоку на папір іде темне тло сторінки.
 *
 * Кадри лишаємо: сторінка без світлин втрачає половину змісту. Підкладку
 * паспарту НЕ прибираємо — вона є в самому файлі кадру, CSS її не зніме.
 */
@media print {

	header,
	footer,
	.wp-block-navigation,
	.skip-link {
		display: none;
	}

	html,
	body,
	.entry-content {
		background: #fff;
		color: #000;
	}

	.entry-content h2 {
		margin-top: 1.4em;
		break-after: avoid;
	}

	.entry-content h2::after {
		display: none;
	}

	/* Кадр із підписом не має розриватися між аркушами. */
	.entry-content figure,
	.entry-content blockquote,
	.entry-content table {
		break-inside: avoid;
		background: transparent;
	}

	.entry-content blockquote {
		border-left: 2px solid #000;
	}

	.entry-content th {
		background: transparent;
	}

	.entry-content table,
	.entry-content th,
	.entry-content td {
		border-color: #000;
	}

	/*
	 * Посилання на папері не клікаються, а їхні адреси займають рядки й ріжуть
	 * абзац. Лишаємо підкреслення як слід тексту, URL не розкриваємо.
	 */
	.entry-content a {
		color: #000;
		text-decoration: underline;
	}

	.entry-content figcaption,
	.entry-content .wp-element-caption {
		color: #000;
	}
}