/* =========================================================
   Секція: розгортаний SEO-текст
   З головної чинного сайту
   ========================================================= */

.phm-seo {
	padding-block: 96px;
}

.phm-seo--beige { background: var(--phm-beige); }
.phm-seo--white { background: var(--phm-white); }

.phm-seo__eyebrow {
	margin: 0 0 16px;
}

/* Заголовок тут дрібніший за звичайний H2: це довідковий текст
   під основним контентом, а не ще одна рівноправна секція. */
.phm-seo__title {
	margin: 0 0 28px;
	font-size: 28px;
	line-height: 1.35;
	max-width: 46ch;
}

/* ---- Тіло ----
   Згорнутий стан вмикає JS класом .is-collapsible. Без нього блок
   просто відкритий — так його бачать пошуковики й читачі без JS. */

.phm-seo__body.is-collapsible {
	position: relative;
	overflow: hidden;
	max-height: var(--phm-seo-collapsed, 220px);
	transition: max-height 0.45s var(--phm-ease-out);
}

/* Розгорнутий стан: висоту виставляє JS у пікселях, а після переходу
   знімає зовсім — щоб текст міг вільно перебудуватися при зміні
   ширини вікна. */
.phm-seo__body.is-open {
	max-height: none;
}

/* Розчинення нижнього краю — підказка, що текст триває. Живе лише
   в згорнутому стані, тому при розкритті зникає разом із класом. */
.phm-seo__body.is-collapsible::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 96px;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--phm-seo-fade, var(--phm-beige)));
	transition: opacity var(--phm-dur) var(--phm-ease);
}

.phm-seo--white .phm-seo__body.is-collapsible::after {
	--phm-seo-fade: var(--phm-white);
}

.phm-seo__body.is-open::after {
	opacity: 0;
}

/* ---- Кнопка ---- */

.phm-seo__actions:empty {
	display: none;
}

.phm-seo__actions {
	margin-top: 28px;
}

.phm-seo__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--phm-primary-dark);
	cursor: pointer;
	transition: color var(--phm-dur) var(--phm-ease);
}

.phm-seo__toggle:hover {
	color: var(--phm-primary);
}

/* Стрілка вниз, що перевертається при розкритті. */
.phm-seo__arrow {
	display: block;
	transition: transform var(--phm-dur) var(--phm-ease);
}

.phm-seo__toggle[aria-expanded="true"] .phm-seo__arrow {
	transform: rotate(180deg);
}

/* ---- Типографіка всередині ----
   Псевдозаголовки зі старого сайту приходять як <p><b>…</b></p>;
   робимо їх помітними, не змінюючи розмітку тексту. */

/* Довідковий текст, а не основний контент — трохи дрібніший. */
.phm-seo .phm-prose {
	font-size: 16px;
}

/* На всю ширину контейнера. Рядок виходить довгий, тому міжрядковий
   інтервал трохи більший — інакше око губить початок наступного рядка. */
.phm-seo--wide .phm-prose {
	max-width: none;
	line-height: 1.8;
}

.phm-seo--wide .phm-seo__title {
	max-width: none;
}

.phm-seo .phm-prose p > b:only-child,
.phm-seo .phm-prose p > strong:only-child {
	display: block;
	font-family: var(--phm-font-heading);
	font-weight: 500;
	font-size: 21px;
	line-height: 1.4;
	color: var(--phm-primary-dark);
	margin-top: 0.6em;
}

/* ---- Адаптив ---- */

@media (max-width: 1024px) {
	.phm-seo {
		padding-block: 72px;
	}

	.phm-seo__title {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	.phm-seo {
		padding-block: 48px;
	}

	.phm-seo .phm-prose p > b:only-child,
	.phm-seo .phm-prose p > strong:only-child {
		font-size: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phm-seo__body.is-collapsible,
	.phm-seo__arrow {
		transition: none;
	}
}