/* =========================================================
   Секція A: Hero
   Макет «Startseite» → Hero
   ========================================================= */

.phm-hero {
	position: relative;
	background: var(--phm-beige);
	overflow: hidden;
}

/* ---- Фото ---- */

.phm-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;

	/* 58%, а не 46%: смуга стала ближчою за пропорцією до самих знімків,
	   тому `cover` тепер зрізає з боків 7–20% замість 28–35%.
	   Ліва частина ховається під маскою, тож візуально смуга не поширшала
	   (правка від 29.08, п.5). */
	width: 58%;

	/* ТЗ §5.1-A: ліва межа фото розчиняється у фоні секції.
	   Маска, а не запечений градієнт — фото міняється одним завантаженням.

	   Перша половина розчинення — суцільна прозорість, і лише потім
	   градієнт. Смуга тепер заходить на текстову колонку (див. width
	   нижче), і без цієї «мертвої зони» фото просвічувало б крізь текст. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--phm-hero-mask, 38%) * 0.5), #000 var(--phm-hero-mask, 38%));
	        mask-image: linear-gradient(to right, transparent 0, transparent calc(var(--phm-hero-mask, 38%) * 0.5), #000 var(--phm-hero-mask, 38%));
}

/* Селектор навмисно з двох класів: Elementor має власне
   `.elementor img { height: auto }`, яке інакше перебиває висоту.

   `cover` — кадр заповнює смугу цілком. Був `contain` (правка від 28.08,
   щоб нічого не різалось), але тоді під фото лишалася смуга фону з чітко
   видимою нижньою межею, і верхній блок розсипався на дві частини.
   Правка від 29.08, п.5: замовниця просила золоту середину — хай ріже,
   але помірно. Помірність дає ширша смуга, а не `contain`. */
.phm-hero .phm-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Окремим правилом і одним класом навмисно: горизонтальне кадрування
   задається контролом віджета, а він пише селектором у дві ваги. Якби
   значення лишалося в правилі вище, контрол би його не перебив. */
.phm-hero__photo {
	object-position: center;
}

/* ---- Текст ---- */

.phm-hero__inner {
	position: relative;
	padding-block: 120px 200px;   /* знизу більше: на нього заходять картки секції B */
}

/* Варіант для внутрішніх сторінок.
   У макеті «Kontakt» тут 150/160, але це дає смугу під 490px — удвічі вище
   за шапку сторінки команди. Тиснемо до 88/96: фото лишається (воно
   горизонтальне, тож нижча смуга йому навіть личить), а сторінка починає
   читатись одразу. */
.phm-hero--page .phm-hero__inner {
	padding-block: 88px 96px;
}

/* Над шапкою вже є хлібні крихти — верхній відступ ще менший */
.phm-has-breadcrumbs .phm-hero--page .phm-hero__inner {
	padding-top: 56px;
}

.phm-hero__content {
	max-width: 600px;
}

.phm-hero__title {
	margin-top: 28px;

	/* «Langlebigkeitsmedizin» у 60px не влазить у колонку 560px, і без
	   переносу браузер відривав від нього самотню літеру. Межі розриву
	   задає hyphenate-limit-chars у base.css.

	   Тут хвіст довший за глобальний: сім літер після дефіса — рівно
	   стільки, щоб розрив упав на межу складеного слова
	   («Langlebigkeits-medizin», а не «Langlebigkeitsme-dizin»).
	   Правка замовниці від 28.08. */
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 7;
}

.phm-hero__text {
	margin-top: 32px;
}

.phm-hero__actions {
	margin-top: 44px;
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

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

@media (max-width: 1024px) {
	.phm-hero__media {
		width: 64%;
	}

	.phm-hero__inner {
		padding-block: 80px 180px;
	}

	.phm-hero--page .phm-hero__inner {
		padding-block: 64px 72px;
	}

	.phm-hero__content {
		max-width: 46%;
	}
}

/* ТЗ §7: на мобільних фото над текстом */
@media (max-width: 767px) {
	.phm-hero__media {
		position: relative;
		width: 100%;
		height: 320px;
		-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
		        mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	}

	.phm-hero__inner {
		padding-block: 32px 160px;
	}

	.phm-hero--page .phm-hero__inner {
		padding-block: 24px 40px;
	}

	.phm-has-breadcrumbs .phm-hero--page .phm-hero__inner {
		padding-top: 24px;
	}

	.phm-hero__content {
		max-width: none;
	}

	.phm-hero__actions {
		gap: 20px;
		flex-direction: column;
		align-items: stretch;
	}

	.phm-hero__actions .phm-btn--text {
		justify-content: flex-start;
	}
}

/* Декоративна риска під заголовком — макети «Fachrichtung *». */
.phm-hero__rule {
	width: 64px;
	height: 2px;
	background: var(--phm-rose);
	margin-top: 28px;
}

@media (max-width: 767px) {
	.phm-hero__rule {
		margin-top: 20px;
	}
}