/*
 * FKK Herzsprung – Blöcke
 * Nachbau der bisherigen .section-/.abschnitt-/.ausflugsziele-Gestaltung mit Standard-Blöcken.
 * Gilt im Frontend und im Block-Editor.
 */

/* ------------------------------------------------------------------
 * 1. Abschnitt (Gruppe mit Stil „Abschnitt (volle Breite)“)
 *    ersetzt: .section > .section-content > .section-text / .section-image
 * ------------------------------------------------------------------ */

.wp-block-group.is-style-fkk-abschnitt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 400px;
	margin: 0;
	padding: 0;
}

/* Klassische Themes bekommen einen zusätzlichen Innen-Container. */
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

/* Inhalt auf 1000px zentrieren (wie .section-content). */
.wp-block-group.is-style-fkk-abschnitt > :not(.wp-block-group__inner-container),
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container > * {
	width: 100%;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* Abwechselnd grau hinterlegt (wie .section:nth-child(odd)). */
:where(.entry-content, .is-root-container) > .wp-block-group.is-style-fkk-abschnitt:nth-child(odd) {
	background: #eaeaea;
}

/* Text direkt im Abschnitt (ohne Spalten). */
.wp-block-group.is-style-fkk-abschnitt > :is(h1, h2, h3, h4, h5, h6, p, ul, ol),
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container > :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
	padding-left: 16px;
	padding-right: 16px;
}

.wp-block-group.is-style-fkk-abschnitt > :not(.wp-block-group__inner-container):first-child,
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container > :first-child {
	padding-top: 16px;
}

.wp-block-group.is-style-fkk-abschnitt > :not(.wp-block-group__inner-container):last-child,
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container > :last-child {
	padding-bottom: 16px;
}

/* Einzelnes Bild im Abschnitt: volle Breite, natürliche Höhe. */
.wp-block-group.is-style-fkk-abschnitt > .wp-block-image,
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container > .wp-block-image {
	padding: 0 !important;
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-group.is-style-fkk-abschnitt > .wp-block-image img,
.wp-block-group.is-style-fkk-abschnitt > .wp-block-group__inner-container > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Spalten im Abschnitt: Text | Bild – brechen wie früher ab 2×250px um. */
:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0 !important;
}

:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column {
	flex: 1 0 250px !important;
	min-width: 250px;
	margin: 0 !important;
	align-self: stretch !important;
}

/* Text-Spalte (wie .section-text). */
:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column:not(:has(> .wp-block-image, > .wp-block-gallery)) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 0;
}

:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column:not(:has(> .wp-block-image, > .wp-block-gallery)) > * {
	padding-left: 16px;
	padding-right: 16px;
}

/* Bild-Spalte (wie .section-image): Bild füllt die Spalte. */
:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column:has(> .wp-block-image, > .wp-block-gallery) {
	display: flex;
	flex-direction: column;
	min-height: 250px;
	padding: 0;
}

:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column > .wp-block-image {
	position: relative;
	flex: 1 1 auto;
	min-height: 250px;
	margin: 0;
}

:is(.is-style-fkk-abschnitt, .is-style-fkk-abschnitt > .wp-block-group__inner-container) > .wp-block-columns > .wp-block-column > .wp-block-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------
 * 2. Diashow (Galerie mit Stil „Diashow“)
 *    ersetzt: .gelaende-image-slider1 … 4
 *    Im Editor bleibt die Galerie eine normale Bildreihe zum Bearbeiten.
 * ------------------------------------------------------------------ */

.entry-content .wp-block-gallery.is-style-fkk-diashow {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	min-height: 250px;
	margin: 0;
	overflow: hidden;
}

.entry-content .wp-block-column > .wp-block-gallery.is-style-fkk-diashow {
	flex: 1 1 auto;
	aspect-ratio: auto;
}

.entry-content .wp-block-gallery.is-style-fkk-diashow > .wp-block-image {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.entry-content .wp-block-gallery.is-style-fkk-diashow > .wp-block-image.is-active,
.entry-content .wp-block-gallery.is-style-fkk-diashow:not(.fkk-diashow-laeuft) > .wp-block-image:first-child {
	opacity: 1;
}

.entry-content .wp-block-gallery.is-style-fkk-diashow > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* ------------------------------------------------------------------
 * 3. Kacheln (Galerie mit Stil „Kacheln mit Bildtext“)
 *    ersetzt: .ausflugsziele-content und .mu-image-row
 *    Spaltenzahl wird in der Galerie eingestellt (Umgebung: 2, Mietunterkünfte: 3).
 * ------------------------------------------------------------------ */

.wp-block-gallery.is-style-fkk-kacheln {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--style--unstable-gallery-gap, 16px);
}

.wp-block-gallery.is-style-fkk-kacheln figure.wp-block-image:not(#fkk) {
	flex-direction: column;
	justify-content: flex-start;
}

.wp-block-gallery.is-style-fkk-kacheln figure.wp-block-image:not(#fkk) img {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wp-block-gallery.is-style-fkk-kacheln figure.wp-block-image:not(#fkk) figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	margin: 0;
	padding: 0.5em 0 0;
	background: none;
	color: inherit;
	font-size: inherit;
	text-align: left;
	text-shadow: none;
}

.wp-block-gallery.is-style-fkk-kacheln figure.wp-block-image:not(#fkk)::before {
	display: none;
}

.wp-block-gallery.is-style-fkk-kacheln figure.wp-block-image:not(#fkk) figcaption a {
	color: inherit;
}

@media screen and (max-width: 640px) {
	.wp-block-gallery.is-style-fkk-kacheln figure.wp-block-image:not(#fkk) {
		width: 100% !important;
	}
}