/* Колонка тексту Neve (.entry-content): FAQ від Yoast — у статтях і на звичайних
   сторінках; блок CTA — лише в статтях. Підключає inc/blog-post.php: у статтях
   завжди, на інших сторінках — коли в колонці є блок Yoast FAQ.
   Блочні сторінки (головна, page-blocks.php) не мають .entry-content — там Yoast
   FAQ виводиться секцією як блок FAQ головної, і цей файл їх не зачіпає. */

/* ==========================================================================
   FAQ — акордеон з головної (розмітку дає фільтр yoast/faq-block)
   ========================================================================== */

/* Група навколо FAQ має клас .faq, а стилі блоку FAQ дають .faq{padding-top:
   var(--section-gap)} (~90px) — у потоці тексту це дірка над «Часті питання». */
.entry-content .wp-block-group.faq {
	padding-top: 0;
}

/* Поправки з ТЗ: список — на всю колонку (а не 820px по центру), ближче до заголовка */
.entry-content .post-faq {
	max-width: none;
	margin: 16px 0 0;
}

.entry-content .wp-block-group.faq > h2 {
	margin-bottom: 8px;
}

/* ==========================================================================
   CTA (блок acf/cta, section.fin) — під колонку статті (~70% контейнера)

   Блок рахує розміри від ширини ВІКНА (vw): фігура clamp(360px,40vw,520px),
   заголовок до 52px, мінімальна висота панелі до 460px. На головній у нього
   ~1112px, у статті — 789px, тож фігура 416×520 лишала тексту ~112px, і
   заголовок розсипався на 13 рядків. Тут розміри рахуються від ширини самого
   блоку (container queries, одиниці cqi), тож CTA підлаштовується під будь-яку
   колонку.
   ========================================================================== */

.single-post .entry-content .fin.wrap {
	container-type: inline-size;
	max-width: none;
	/* Без бічних відступів .wrap — панель рівно по краях тексту статті (а не
	   з відступом 44px). Зверху/знизу — помірно: --section-gap (~100px) у
	   потоці тексту дає порожні смуги. */
	padding: clamp(24px, 3.5vw, 40px) 0;
}

.single-post .entry-content .fin .fin-in {
	min-height: 0;
	gap: clamp(12px, 3cqi, 28px);
	padding: clamp(24px, 5cqi, 40px) clamp(22px, 5.5cqi, 44px);
}

/* Фігура: та сама «знизу з виходом за край», але виступ дорівнює новому
   нижньому падингу панелі, а висота — від ширини блоку, не вікна. */
.single-post .entry-content .fin .fin-side {
	justify-content: center;
	margin: 0 0 calc(-1 * clamp(24px, 5cqi, 40px)) 0;
}

.single-post .entry-content .fin .fin-side::before {
	width: min(320px, 140%);
}

.single-post .entry-content .fin .fin-fig {
	max-width: 100%;
	max-height: min(320px, 44cqi);
}

/* Типографіка — від ширини блоку. Глобальний .h2 тягнеться до 52px від
   ширини вікна, а в колонці статті це три рядки по 2-3 слова. */
.single-post .entry-content .fin .h2 {
	font-size: clamp(22px, 4.2cqi, 34px);
	line-height: 1.15;
}

.single-post .entry-content .fin .fin-lead {
	margin-top: 12px;
	font-size: clamp(14.5px, 2.1cqi, 16.5px);
}

.single-post .entry-content .fin .hero-cta {
	flex-wrap: wrap;
	margin-top: clamp(18px, 3cqi, 26px);
}

/* Дві кнопки-картки — у ряд, поки влазять (≥220px кожна), інакше одна під одною.
   :not(:only-child) — щоб не перебити правило для однієї кнопки з blocks/cta. */
.single-post .entry-content .fin .hero-cta .btn-cta:not(:only-child) {
	flex: 1 1 220px;
}

/* ---------- CTA з фігурою: показувати Марічку чи ні — за ШИРИНОЮ БЛОКУ ----------
   Блок cta на ≤1024px вікна ховає фігуру й ставить одну колонку (на головній він
   на всю ширину, і там це доречно). У статті колонка вужча й від вікна не
   залежить прямо: на 900px вікна вона ширша (Neve дає 100%), ніж на 1024px (70%).
   Тож рішення приймаємо від ширини самого блоку — і так, щоб розкладка й фігура
   ЗАВЖДИ мінялись разом. Раніше дві колонки тут були безумовні, а фігуру на
   701–1024px ховав медіазапит блоку — текст стискався в першу колонку (34%), а
   друга стояла порожня. */

/* Блок достатньо широкий — Марічка поруч із текстом, текст ліворуч (як на десктопі),
   незалежно від ширини вікна. Перебиваємо медіазапит блоку (≤1024px): він ховає
   фігуру, центрує текст і кнопки. */
@container (min-width: 641px) {
	.single-post .entry-content .fin .fin-in:not(.is-solo) {
		grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
		text-align: left;
	}

	.single-post .entry-content .fin .fin-in:not(.is-solo) .fin-side {
		display: flex;
	}

	.single-post .entry-content .fin .fin-in:not(.is-solo) .h2,
	.single-post .entry-content .fin .fin-in:not(.is-solo) .fin-lead {
		margin-left: 0;
		margin-right: 0;
	}

	.single-post .entry-content .fin .fin-in:not(.is-solo) .hero-cta {
		justify-content: flex-start;
	}
}

/* Вузький блок — одна колонка без фігури (на ≤1024px вікна текст центрує сам
   блок cta; на ширшому вікні з вузькою колонкою — сайдбар, інші налаштування
   Neve — лишається вирівнювання десктопу). */
@container (max-width: 640px) {
	.single-post .entry-content .fin .fin-in:not(.is-solo) {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-post .entry-content .fin .fin-side {
		display: none;
	}
}