/*
 * Inhaltsseiten — nur das, was sich im Blockmarkup nicht lösen lässt.
 * Ausschliesslich auf body.page, damit Shop und Produktseiten unberührt bleiben.
 *
 * Schriftgrössen in px: Hestia setzt html { font-size: 10px }, ein rem ist hier
 * also 10 und nicht 16 Pixel. rem-Werte fallen dadurch rund 45 % zu klein aus.
 */

/* --- Lead-Absatz unter der Seitenüberschrift --- */

.page .ghm-lead {
	margin-bottom: 2rem;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	color: #4a4a4a;
}

/* --- Galerie: gleiche Kachelhöhe --- */

/*
 * Die Bilder haben gemischte Seitenverhältnisse (4:3, 4:5, 16:9). Ohne feste
 * Ratio werden die Kacheln einer Reihe unterschiedlich hoch und die Galerie
 * franst aus. is-cropped allein reicht nicht, weil Gutenberg dort nur
 * object-fit setzt, aber keine Höhe vorgibt.
 */
.page .wp-block-gallery.has-nested-images figure.wp-block-image {
	align-self: stretch;
}

.page .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}

/* --- media-text --- */

.page .wp-block-media-text {
	margin: 2rem 0;
	gap: 0 2rem;
	align-items: center;
}

.page .wp-block-media-text__media img {
	border-radius: 8px;
}

/* Einzelbild-Block — gleiche Anmutung wie Galerie und media-text. */
.page .wp-block-image img {
	border-radius: 8px;
}

.page .wp-block-media-text__content > *:first-child {
	margin-top: 0;
}

.page .wp-block-media-text__content > *:last-child {
	margin-bottom: 0;
}

/* --- Listen --- */

.page .entry-content .wp-block-list,
.page .page-content-wrap .wp-block-list {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

.page .wp-block-list li {
	margin-bottom: .2rem;
}

/*
 * Luft zum Footer. Hestia setzt unter dem Inhaltsbereich keinen Abstand; endet
 * eine Seite mit Bild oder Liste, klebt der Footer direkt daran.
 */
.page .page-content-wrap {
	padding-bottom: 40px;
}

/* --- Trenner --- */

.page .wp-block-separator {
	margin: 2.5rem auto;
}

@media (max-width: 782px) {
	/*
	 * Gestapelt braucht das Bild wieder Abstand zum Text — im Grid-Modus
	 * übernimmt das die column-gap, die hier wegfällt.
	 */
	.page .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		margin-bottom: 1.25rem;
	}

	.page .wp-block-media-text {
		margin: 1.5rem 0;
	}
}

@media (max-width: 600px) {
	.page .ghm-lead {
		font-size: 20px;
	}

	.page .wp-block-gallery.has-nested-images figure.wp-block-image img {
		aspect-ratio: 3 / 2;
	}
}