/* =========================================================
   Секція: Schwerpunkte & Behandlungen
   Макети «Fachrichtung *»
   ========================================================= */

.phm-topics {
	padding-block: 120px 140px;
}

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

.phm-topics--center .phm-topics__head {
	max-width: var(--phm-measure);
	margin-inline: auto;
	text-align: center;
}

.phm-topics__title {
	margin: 0;
}

.phm-topics__lead {
	margin: 20px 0 0;
}

.phm-topics--center .phm-topics__lead {
	margin-inline: auto;
}

/* ---- Сітка ---- */

.phm-topics__grid {
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--phm-gap);
}

.phm-topics__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phm-topics__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.phm-topics__item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--phm-white);
	/* Рамка з макета — прозорий відтінок основного кольору, а не окремий
	   токен: так вона лишається делікатною на будь-якому фоні секції. */
	border: 1px solid rgba(14, 83, 79, 0.14);
	border-radius: var(--phm-radius);
	padding: var(--phm-card-padding);
	transition: box-shadow var(--phm-dur) var(--phm-ease),
	            border-color var(--phm-dur) var(--phm-ease);
}

.phm-topics__item--link:hover,
.phm-topics__item:has(.phm-topics__link:focus-visible) {
	box-shadow: 0 2px 20px rgba(14, 83, 79, 0.08);
	border-color: rgba(14, 83, 79, 0.28);
}

.phm-topics__icon {
	width: 52px;
	height: 52px;
	object-fit: contain;
	align-self: flex-start;
}

.phm-topics__item-title {
	font-size: 22px;
	line-height: 1.35;
	margin: 24px 0 0;
	/* Назви на кшталт «Wundheilungsstörungen» у вузькій картці не влазять.
	   Сім літер після дефіса — та сама межа, що й у заголовках сторінок:
	   вона зсуває розрив на стик складеного слова («Wundheilungs-störungen»,
	   «Endometriose-sprechstunde», «Langlebigkeits-medizin»).
	   Виняток — «Bruxismusbehandlung»: у нього хвіст рівно вісім літер,
	   тож браузер і далі рве його як «Bruxismusbe-handlung». Підняти межу
	   до девʼяти не можна — тоді розсиплеться «Langlebigkeits-medizin».

	   До дефіса — чотири літери, не пʼять: інакше «Myomsprechstunde»
	   лишається без жодної дозволеної точки розриву, не влазить у колонку
	   на три пікселі й overflow-wrap рве його просто посеред слова
	   («Myomsprechstund / e»). */
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 14 4 7;
}

/* Іконки може не бути — тоді заголовок не має провисати. */
.phm-topics__icon + .phm-topics__item-title,
.phm-topics__item-title:first-child {
	margin-top: 24px;
}

.phm-topics__item-title:first-child {
	margin-top: 0;
}

.phm-topics__link {
	color: inherit;
}

/* Клікабельна вся картка, а не самі літери заголовка. */
.phm-topics__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--phm-radius);
}

.phm-topics__link:focus-visible {
	outline: none;
}

.phm-topics__text {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--phm-text);
}

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

@media (max-width: 1024px) {
	.phm-topics {
		padding-block: 80px 88px;
	}

	.phm-topics__grid,
	.phm-topics__grid--cols-3,
	.phm-topics__grid--cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 48px;
	}

	.phm-topics__item-title {
		font-size: 20px;
	}
}

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

	.phm-topics--center .phm-topics__head {
		margin-inline: 0;
		text-align: left;
	}

	.phm-topics__grid,
	.phm-topics__grid--cols-3,
	.phm-topics__grid--cols-2 {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 32px;
	}
}