/* Page layout, article typography, cards and shared sections. Loaded globally and in the editor. */

/* ---------- Main ---------- */

.dh-main {
	margin-block: 0;
	padding-bottom: 0;
}

.dh-main > * + * {
	margin-block-start: var(--wp--preset--spacing--80);
}

.dh-main > .dh-content:first-child,
.dh-main--landing > .dh-content {
	margin-block-start: 0;
}

.dh-page-head {
	padding-block: var(--wp--preset--spacing--60) 0;
	padding-inline: var(--wp--custom--gutter);
}

.dh-page-head > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.dh-main > .dh-appointment {
	margin-block-start: var(--wp--preset--spacing--80);
}

/* ---------- Content column (post-content) ---------- */

.dh-content {
	padding-inline: var(--wp--custom--gutter);
}

.dh-content > * + * {
	margin-block-start: 1.5rem;
}

.dh-content > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.dh-content > :is(h2, h3, h4) + * {
	margin-block-start: 1.25rem;
}

.dh-content > :is(.alignwide, .alignfull, .wp-block-image, figure) {
	margin-block: var(--wp--preset--spacing--70);
}

.dh-content > .alignfull {
	margin-inline: calc(var(--wp--custom--gutter) * -1);
}

.dh-content :where(p, li) a {
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.dh-content ul,
.dh-content ol {
	padding-inline-start: 1.25em;
}

.dh-content li + li {
	margin-block-start: 0.5em;
}

.is-style-lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.2;
}

/* Article: the Figma intro paragraph is wider than the text column. */
.dh-content--article > .is-style-lead:first-child {
	max-width: 1115px !important;
}

/* ---------- Article head ---------- */

.dh-article__head {
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	padding-inline: var(--wp--custom--gutter);
	text-align: center;
}

.dh-article__head .wp-block-post-title {
	max-width: 22ch;
	margin-inline: auto !important;
}

.dh-article__meta {
	gap: 0.5rem;
	margin-block-start: var(--wp--preset--spacing--50) !important;
	align-items: center;
}

.dh-article__date {
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dh-article__date::before {
	content: "Aktualisiert ";
}

.dh-article__image {
	padding-inline: var(--wp--custom--gutter);
	margin-block-end: var(--wp--preset--spacing--80) !important;
}

.dh-article__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dh-article .hacker-reviewed {
	margin-block-start: var(--wp--preset--spacing--70);
	margin-inline: max(var(--wp--custom--gutter), calc((100% - 660px) / 2));
}

.dh-article__split {
	padding: var(--wp--preset--spacing--70) var(--wp--custom--gutter) var(--wp--preset--spacing--80);
	gap: var(--wp--preset--spacing--50) 1.5rem;
}

.dh-main--portrait .dh-article__image {
	padding: 0;
	margin: 0 !important;
}

.dh-main--portrait .dh-article__image img {
	aspect-ratio: 3 / 4;
}

/* ---------- Chips (category buttons, Figma "Magazin Kategorie Button") ---------- */

.dh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
}

.dh-chips .wp-block-post-terms__separator {
	display: none;
}

.dh-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--wp--preset--color--nude);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.dh-chips a:hover {
	border-color: var(--wp--preset--color--ink);
}

/* ---------- Cards and grid ---------- */

.dh-post-grid {
	padding-inline: var(--wp--custom--gutter);
}

.dh-post-grid__list.is-layout-grid {
	gap: var(--wp--preset--spacing--70) 1.5rem;
	align-items: start;
}

.dh-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* The title link covers the card (one tab stop); chips stay clickable above it. */
.dh-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dh-card .dh-chips {
	position: relative;
	z-index: 1;
}

.dh-card:has(.dh-card__title a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

.dh-card__title a:focus-visible {
	outline: none;
}

.dh-card > * {
	margin: 0 !important;
}

.dh-card__image {
	overflow: hidden;
}

.dh-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 600ms var(--wp--custom--transition);
}

.dh-card:hover .dh-card__image img {
	transform: scale(1.03);
}

.dh-card__title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
}

.dh-card__title a {
	text-decoration: none;
}

.dh-card__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

@media (max-width: 781px) {
	.dh-post-grid__list.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Pagination (Figma "Blog Zähler") ---------- */

.dh-pagination {
	margin-block-start: var(--wp--preset--spacing--70) !important;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
}

.dh-pagination .page-numbers,
.dh-pagination .wp-block-query-pagination-previous,
.dh-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.5rem;
	background: var(--wp--preset--color--nude);
	text-decoration: none;
	margin: 0;
}

.dh-pagination .page-numbers.current {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.dh-pagination .page-numbers.dots {
	background: transparent;
}

/* ---------- Related ---------- */

.dh-related {
	padding-inline: var(--wp--custom--gutter);
	padding-block-start: var(--wp--preset--spacing--80);
}

.dh-related > * + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ---------- Appointment module (Figma "Termin Modul") ---------- */

.dh-appointment {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 37.5rem;
}

.dh-appointment > * {
	margin: 0 !important;
}

.dh-appointment__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter);
}

.dh-appointment__claim {
	max-width: 39rem;
}

.dh-appointment__avatar {
	display: none;
	margin: 0;
}

.dh-appointment__avatar img {
	border-radius: 50%;
}

.dh-appointment__image {
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) !important;
}

@media (max-width: 781px) {
	.dh-appointment {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dh-appointment__text {
		background: var(--wp--preset--color--nude);
		padding: 2rem;
		gap: 4.5rem;
		aspect-ratio: 1;
	}

	.dh-appointment__claim {
		font-family: var(--wp--preset--font-family--display);
		font-style: normal;
	}

	.dh-appointment__avatar {
		display: block;
	}

	.dh-appointment__image {
		display: none !important;
	}
}

/* ---------- Tables (Figma "Tabelle") ---------- */

.wp-block-table.is-style-prices table,
.dh-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.dh-content .wp-block-table :is(td, th) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--nude);
	padding: 1rem 0;
	text-align: start;
	vertical-align: top;
}

.dh-content .wp-block-table th {
	font-weight: 500;
}

.wp-block-table.is-style-prices td:last-child {
	text-align: end;
	white-space: nowrap;
	padding-inline-start: 1.5rem;
}

/* ---------- Buttons (block styles) ---------- */

.wp-block-button.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-on-dark .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: currentColor;
}

.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-more .wp-block-button__link {
	border: 0;
	padding-inline: 0;
	gap: 0.75rem;
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: inherit;
}

.wp-block-button.is-style-more .wp-block-button__link::after {
	content: "";
	width: 1.5rem;
	height: 0.5rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4h22M19 1l3 3-3 3' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4h22M19 1l3 3-3 3' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform var(--wp--custom--transition);
}

.wp-block-button.is-style-more .wp-block-button__link:hover::after {
	transform: translateX(0.25rem);
}

/* ---------- Lists (block styles) ---------- */

.wp-block-list.is-style-check {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-check li {
	position: relative;
	padding-inline-start: 1.75rem;
}

.wp-block-list.is-style-check li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.45em;
	width: 0.875rem;
	height: 0.625rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.wp-block-list.is-style-links {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-links a {
	text-decoration: none;
}

.wp-block-list.is-style-links a:hover {
	text-decoration: underline;
}

/* ---------- Group card style ---------- */

.wp-block-group.is-style-card {
	border: 1px solid var(--wp--preset--color--nude);
	padding: 1.5rem;
}

/* ---------- FAQ (core/details, style "faq") ---------- */

.wp-block-details.is-style-faq {
	border-bottom: 1px solid var(--wp--preset--color--ink);
	padding-block: 1.5rem;
}

.wp-block-details.is-style-faq > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	min-height: 2.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
}

.wp-block-details.is-style-faq > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-faq > summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.75rem;
	font-weight: 300;
	line-height: 1;
	transition: transform var(--wp--custom--transition);
}

.wp-block-details.is-style-faq[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details.is-style-faq > :not(summary) {
	margin-block-start: 1rem;
}

/* ---------- Split page head (Figma "Behandlung Detailseite") ---------- */

.dh-split-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: min(45.6875rem, 80svh);
}

.dh-split-head > * {
	margin: 0 !important;
}

.dh-split-head__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter) var(--wp--preset--spacing--60);
}

.dh-split-head__text > * {
	margin: 0 !important;
}

.dh-split-head__title {
	margin-top: auto !important;
	max-width: 16ch;
}

.dh-split-head__image,
.dh-split-head__image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.dh-backlink {
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dh-backlink a {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.5rem;
	text-decoration: none;
}

.dh-backlink a::before {
	content: "";
	width: 1.5rem;
	height: 0.5rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M24 4H2M5 1L2 4l3 3' fill='none' stroke='black'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M24 4H2M5 1L2 4l3 3' fill='none' stroke='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

.dh-backlink a:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.dh-main--treatment > .dh-content {
	margin-block-start: var(--wp--preset--spacing--70);
}

.dh-main--treatment > .hacker-reviewed {
	margin-block-start: var(--wp--preset--spacing--70);
	margin-inline: max(var(--wp--custom--gutter), calc((100% - 660px) / 2));
}

/* Treatment intro is wider than the text column (Figma: 1116px). */
.dh-content--treatment > .is-style-lead:first-child {
	max-width: 1116px !important;
	margin-inline: var(--wp--custom--gutter) auto !important;
}

@media (max-width: 781px) {
	.dh-split-head {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dh-split-head__image {
		order: -1;
		aspect-ratio: 1;
	}

	.dh-split-head__text {
		gap: 1.5rem;
		padding-block: 1.5rem 0;
	}

	.dh-split-head__title {
		margin-top: 0 !important;
	}

	.dh-content--treatment > .is-style-lead:first-child {
		margin-inline: auto !important;
	}
}

/* ---------- Facts list (Figma "Behandlungs Überblick") ---------- */

.wp-block-list.is-style-facts {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--nude);
}

.wp-block-list.is-style-facts > li {
	display: grid;
	grid-template-columns: minmax(7rem, 30%) 1fr;
	gap: 1rem;
	margin: 0;
	padding-block: 0.875rem;
	border-bottom: 1px solid var(--wp--preset--color--nude);
}

.wp-block-list.is-style-facts > li > strong:first-child {
	font-size: var(--wp--preset--font-size--caps);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-top: 0.2em;
}

/* ---------- FAQ section (Figma "FAQ", nude background) ---------- */

.dh-content > .dh-faq {
	background: var(--wp--preset--color--nude);
	margin-block: var(--wp--preset--spacing--80) !important;
	padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter);
}

.dh-faq > .wp-block-heading {
	margin-block-end: var(--wp--preset--spacing--50);
}

.dh-faq > .wp-block-details {
	margin-block: 0 !important;
}

.dh-faq > .wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--ink);
}

/* ---------- Shooting images between treatment sections (Figma: 656x806 / 660x440 in the text column) ---------- */

.dh-content > .wp-block-image.dh-shoot {
	max-width: 660px !important;
	margin-inline: auto !important;
	margin-block: var(--wp--preset--spacing--70) !important;
}

.dh-content > .wp-block-image.dh-shoot img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.dh-content > .wp-block-image.dh-shoot:nth-of-type(even) img {
	aspect-ratio: 3 / 2;
}