/* =========================================================
   Секція: заголовок сторінки з широким фото
   Сторінка «Unsere Praxis» → Hero
   ========================================================= */

.phm-page-intro {
	padding-block: var(--phm-section-y);
}

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

/* Проміжок між шапкою і кадром — gap контейнера. Margin на <figure> тут
   не працює: Elementor обнуляє його правилом
   `.elementor .elementor-widget:not(…) figure { margin: 0 }` вагою (0,4,1),
   і жоден однокласовий селектор компонента його не перебʼє. */
.phm-page-intro__inner {
	display: flex;
	flex-direction: column;
	gap: var(--phm-page-intro-gap, 64px);
}

/* ---- Шапка ----
   Заголовок ліворуч, опис праворуч. Вирівняні по першому рядку: базова
   лінія опису лягає на базову лінію eyebrow, тож обидві колонки
   починаються на одному рівні (правка замовниці від 28.08 — раніше було
   по нижньому краю, і довгий опис починався помітно вище). */

.phm-page-intro--head-split .phm-page-intro__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 80px;
}

.phm-page-intro--head-split .phm-page-intro__headline {
	max-width: 640px;
	flex-shrink: 0;
}

.phm-page-intro--head-split .phm-page-intro__lead {
	margin: 0;
	max-width: 46ch;
	text-align: right;
}

/* ---- Шапка стовпчиком (службові сторінки) ---- */

/* Опис тримаємо в межах читабельної колонки, а заголовку віддаємо всю
   ширину: «Barrierefreiheitserklärung» у 60px просить 721px і в 700
   не влазив — браузер рвав слово навпіл (правка від 29.08, п.3). */
.phm-page-intro--head-stacked .phm-page-intro__lead {
	margin: 32px 0 0;
	max-width: 700px;
}

.phm-page-intro__title {
	margin: 28px 0 0;

	/* «Barrierefreiheitserklärung» у 60px не влазить у колонку, і без
	   переносу браузер відривав від нього самотню літеру. Межі розриву
	   задає hyphenate-limit-chars у base.css. */
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Без eyebrow заголовок не має провисати від верхнього краю. */
.phm-page-intro__title:first-child {
	margin-top: 0;
}

/* ---- Кадр ----
   Рамка тримає пропорції й обрізає надлишок; висоту зображення всередині
   задає components/parallax. Без паралакса кадр заповнює рамку сам. */

.phm-page-intro__media {
	position: relative;
	aspect-ratio: var(--phm-page-intro-ratio, 1200 / 560);
	border-radius: var(--phm-radius);
	overflow: hidden;
	background: var(--phm-shell);
	box-shadow: var(--phm-shadow-card);
}

/* Два класи — з тієї самої причини, що й у doctor-card: інакше
   `.elementor img { height: auto }` не дає кадру заповнити рамку,
   щойно паралакс вимкнено. */
.phm-page-intro__media .phm-page-intro__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--phm-page-intro-focus, center);
}

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

@media (max-width: 1024px) {
	.phm-page-intro--head-split .phm-page-intro__head {
		gap: 48px;
	}

	.phm-page-intro--head-split .phm-page-intro__lead {
		max-width: 38ch;
	}

	.phm-page-intro__inner {
		--phm-page-intro-gap: 48px;
	}
}

@media (max-width: 767px) {
	/* Дві колонки на телефоні не читаються: опис іде під заголовок і
	   вирівнюється вліво, як решта тексту сторінки. */
	.phm-page-intro--head-split .phm-page-intro__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.phm-page-intro--head-split .phm-page-intro__lead {
		margin: 0;
		max-width: none;
		text-align: left;
	}

	.phm-page-intro__title {
		margin-top: 20px;
	}

	.phm-page-intro--head-stacked .phm-page-intro__lead {
		margin-top: 24px;
	}

	.phm-page-intro__inner {
		--phm-page-intro-gap: 32px;
	}
}