/*
 * Abschnitt: Wohnungen nach Zimmerzahl
 *
 * Nachgebaut nach dem Abschnitt, der in der Vorlage direkt auf „Residences"
 * folgt. Links die Zimmerzahlen untereinander, rechts ein Bild, das beim
 * Darüberfahren wechselt und unten rechts das Wort „Wohnungen" trägt. Unter
 * einem feinen Strich steht, wie viele Wohnungen dieser Art verfügbar sind,
 * daneben der Knopf für die Anfrage.
 *
 * Alle Maße sind in der Vorlage bei 1512 Fensterbreite gemessen. Ihre
 * Grundgröße ist dort 12,55 Pixel und hängt an der Fensterbreite; ein rem
 * entspricht also 0,83 vw. Deshalb stehen die Maße hier in vw und wachsen
 * mit dem Fenster, so wie dort:
 *
 *   Bild rechts                55 vw       breit, volle Höhe, randlos
 *   Wort im Bild               5,19 vw     Grad, 4,17 vw von rechts und unten
 *   Spalte links, Rand          4,6 %      der Breite
 *   Spalte, Rand oben/unten     4,15 vw    (5 rem der Vorlage)
 *   Spalte, Inhaltsbreite      33,7 vw
 *   Zeilen, Grad                2,90 vw    Zeilenhöhe 4,15 vw
 *   „Alle ansehen", Abstand     2,12 vw    unter der Liste
 *   Strich                      1 px       über die volle Spaltenbreite
 *   Verfügbarkeit, Abstand      2,12 vw    unter dem Strich
 *   Zahl                        2,90 vw    Grad — so groß wie die Zeilen
 *   Einheit                     0,83 vw    Grad, auf 4,15 vw umbrochen
 *   Knopf, Abstand              4,56 vw    unter dem Strich, rechtsbündig
 *
 * Die Zeilen rollen beim Darüberfahren ab — dieselbe Machart wie bei den
 * Schaltflächen: Im Markup steht die Zeile einmal, die zweite legt das Skript
 * an. Stünde sie zweimal da, müsste der Kunde denselben Text an zwei Stellen
 * pflegen.
 *
 * Was hier steht, ist Form. Schriftart und Farbe tragen die Blöcke selbst.
 * Zwei Ausnahmen, beide unten begründet: die Farbe der gewählten Zeile und
 * der Strich neben ihr.
 */

.ld-wtypen {
	--ld-wt-rand: 4.15vw;
	--ld-wt-spalte: 33.7vw;
	--ld-wt-zeile: 4.15vw;

	position: relative;
	overflow: clip;
	padding: 0;
}

.ld-wtypen .ld-wtypen__buehne {
	position: relative;
	height: 100svh;
	margin: 0;
}

/* ------------------------------------------------------------ Bild rechts */

/*
 * Die Bilder liegen übereinander am rechten Rand und werden über die Deckung
 * gewechselt. 55 vw breit — in der Vorlage reicht das Bild weit über die
 * Mitte hinaus; ein schmalerer Streifen sähe angeklebt aus. Sie lassen den
 * Zeiger durch, angefasst wird links.
 */
.ld-wtypen__bilder {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 55vw;
	margin: 0;
	overflow: clip;
	pointer-events: none;
}

/*
 * Der Bildblock bringt als Figure eigene Maße mit; ohne die Angaben hier
 * stünde die Aufnahme als schmaler Streifen mitten in der Fläche.
 */
.ld-wtypen__bild {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(0.45, 0.03, 0.52, 0.96);
}

/*
 * Zwei Klassen im Selektor, weil der Bildblock von WordPress seinem Bild
 * width: auto mitgibt — mit nur einer stünde die Aufnahme als schmaler
 * Streifen mitten in der Fläche.
 */
.ld-wtypen__bilder .ld-wtypen__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ld-wtypen__bild.is-vorn {
	opacity: 1;
}

/* --------------------------------------------------------- Wort im Bild */

/*
 * Unten rechts im Bild steht das Wort noch einmal, halb so groß wie das
 * Riesenwort des Abschnitts davor. Es fängt den Zeiger nicht ab — darunter
 * liegt das Bild, und angefasst wird ohnehin links.
 */
.ld-wtypen__wort {
	position: absolute;
	inset-block-end: var(--ld-wt-rand);
	inset-inline-end: var(--ld-wt-rand);
	z-index: 2;
	margin: 0;
	font-size: clamp(2rem, 5.19vw, 6.2rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: var(--ld-light-lauf);
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

/*
 * Die Buchstaben steigen von unten herein, um 0,04 Sekunden versetzt und in
 * 0,8 Sekunden — so wie in der Vorlage, die dafür 2 rem Weg ansetzt. Das
 * Skript zerlegt das Wort und gibt jedem Zeichen seine Nummer; wann es an der
 * Reihe ist, rechnet das CSS daraus aus.
 */
.ld-wtypen__zeichen {
	display: inline-block;
	white-space: pre;
	opacity: 0;
	transform: translateY(1.66vw);
	transition: opacity 0.8s cubic-bezier(0.45, 0.03, 0.52, 0.96),
		transform 0.8s cubic-bezier(0.45, 0.03, 0.52, 0.96);
	transition-delay: calc(var(--ld-wt-nr, 0) * 0.04s);
}

.ld-wtypen.is-da .ld-wtypen__zeichen {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------------- Spalte links */

/*
 * Die Spalte reicht über die volle Höhe: oben die Zimmerzahlen samt Verweis,
 * unten die Verfügbarkeit samt Knopf, dazwischen der große leere Raum der
 * Vorlage. Deshalb ein Stapel mit Abstand nach außen statt vier absolut
 * gesetzter Ebenen.
 */
.ld-wtypen__spalte {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
	padding: var(--ld-wt-rand) 0 var(--ld-wt-rand) 4.6%;
	pointer-events: none;
}

/*
 * WordPress setzt über blockGap ein margin-block-start auf alle Kinder außer
 * dem ersten. Hier trägt der Stapel seine Abstände selbst — ohne das stünde
 * alles um 24 Pixel zu tief.
 */
.ld-wtypen__spalte > *,
.ld-wtypen__oben > *,
.ld-wtypen__unten > *,
.ld-wtypen__liste > *,
.ld-wtypen__stand > *,
.ld-wtypen__paar > * {
	margin-block: 0;
}

.ld-wtypen__oben,
.ld-wtypen__unten {
	width: var(--ld-wt-spalte);
	margin: 0;
}

/* Angefasst wird nur, was auch etwas tut. */
.ld-wtypen__liste,
.ld-wtypen__alle,
.ld-wtypen__schalter {
	pointer-events: auto;
}

/* --------------------------------------------------------- Zimmerzahlen */

.ld-wtypen__liste {
	position: relative;
	margin: 0;
}

/*
 * Links neben der gewählten Zeile steht ein feiner senkrechter Strich, der
 * beim Wechseln mitwandert. Er ist reine Auszeichnung und gehört deshalb ins
 * CSS und nicht in einen Block. Das Skript setzt nur die Nummer der
 * gewählten Zeile; wohin der Strich gehört, rechnet das CSS daraus aus.
 */
.ld-wtypen__liste::before {
	content: "";
	position: absolute;
	inset-inline-start: -1.06vw;
	inset-block-start: calc(var(--ld-wt-vorn, 0) * var(--ld-wt-zeile));
	width: 0.104vw;
	min-width: 1px;
	height: var(--ld-wt-zeile);
	background-color: var(--wp--preset--color--contrast);
	opacity: 0;
	transition: inset-block-start 0.55s cubic-bezier(0.45, 0.03, 0.52, 0.96),
		opacity 0.45s ease;
}

.ld-wtypen.is-da .ld-wtypen__liste::before {
	opacity: 1;
}

/*
 * Das Fenster ist genau eine Zeile hoch — sonst stünde die zweite
 * Ausfertigung sichtbar darunter statt außerhalb. Die Vorlage setzt die
 * Zeilen unmittelbar aneinander und gibt ihnen den Abstand über die Polster:
 * oben 0,83 vw, unten 0,415 vw.
 */
.ld-wtypen__zeile {
	box-sizing: border-box;
	margin: 0;
	padding-block: 0.83vw 0.415vw;
	font-size: clamp(1.5rem, 2.9vw, 3.5rem);
	font-weight: 300;
	line-height: 1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
	height: var(--ld-wt-zeile);
	cursor: pointer;
	transition: color 0.5s ease;
}

/*
 * Das Fenster für das Abrollen sitzt in der Rolle und nicht an der Zeile:
 * overflow schneidet an der Polsterkante ab, nicht an der Textkante — an der
 * Zeile bliebe unten ein Streifen der zweiten Ausfertigung sichtbar.
 */
.ld-wtypen__rolle {
	display: block;
	height: 1em;
	overflow: clip;
}

/*
 * Bewegt werden die beiden Ausfertigungen, nicht das Fenster: Läge der
 * Versatz an der Rolle, wanderte der Ausschnitt mit und man sähe immer
 * dasselbe. Die erste Zeile rollt nach oben hinaus, die zweite rückt nach.
 */
.ld-wtypen__rolle > span {
	display: block;
	line-height: 1;
	transition: transform 0.55s cubic-bezier(0.45, 0.03, 0.52, 0.96);
}

/*
 * Die zweite Ausfertigung wartet genau eine Zeilenhöhe tiefer, außerhalb des
 * Fensters. Beim Darüberfahren rollen beide gemeinsam nach oben.
 */
.ld-wtypen__nach {
	display: block;
}

.ld-wtypen__zeile.is-vorn .ld-wtypen__rolle > span,
.ld-wtypen__zeile:hover .ld-wtypen__rolle > span {
	transform: translateY(-1em);
}

/*
 * Die gewählte Zeile wechselt die Farbe — vom Mittelton ins Tiefe, so wie in
 * der Vorlage.
 *
 * Gefärbt wird dabei die Rolle und nicht die Zeile selbst, und das hat einen
 * handfesten Grund: WordPress schreibt die Farbwahl eines Blocks mit
 * !important ins Stylesheet, und dagegen kommt eine Regel auf demselben
 * Element nicht an. Die Rolle liegt darin und trägt keine Blockfarbe — dort
 * genügt eine gewöhnliche Angabe. Der Ruheton bleibt damit am Block und im
 * Editor änderbar, und der gewählte Zustand ist eine Sache des Entwurfs.
 */
.ld-wtypen__zeile.is-vorn .ld-wtypen__rolle,
.ld-wtypen__zeile:hover .ld-wtypen__rolle,
.ld-wtypen__zeile:focus-visible .ld-wtypen__rolle {
	color: var(--wp--preset--color--contrast);
}

.ld-wtypen__rolle {
	transition: color 0.5s ease;
}

/* --------------------------------------------------------- Alle ansehen */

.ld-wtypen__alle {
	margin: 2.12vw 0 0;
}

.ld-wtypen__alle a {
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	padding-block-end: 0.25em;
}

/* ------------------------------------------- Verfügbarkeit, Strich, Knopf */

/*
 * Der feine Strich über die volle Spaltenbreite. Gedämpft wird die Farbe und
 * nicht das Element — sonst nähme die Deckung alles darunter mit.
 */
.ld-wtypen__unten {
	position: relative;
	border-block-start: 1px solid
		color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
}

/*
 * Die vier Angaben liegen übereinander; sichtbar ist immer nur die zur
 * gewählten Zimmerzahl. Sie stehen bewusst nicht nebeneinander — sonst
 * wanderte die Grundlinie, sobald eine Zahl breiter ist als die andere.
 */
.ld-wtypen__stand {
	position: absolute;
	inset-block-start: 2.12vw;
	inset-inline-start: 0;
	margin: 0;
	height: 3.2vw;
}

.ld-wtypen__paar {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: flex;
	align-items: center;
	gap: 1.32vw;
	margin: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.ld-wtypen__paar.is-vorn {
	opacity: 1;
}

.ld-wtypen__zahl {
	margin: 0;
	font-size: clamp(1.5rem, 2.9vw, 3.5rem);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
}

/*
 * Der Text bricht auf zwei Zeilen um — in der Vorlage steht er auf 5 rem
 * Breite neben der Zahl und ist genau deshalb zweizeilig.
 */
.ld-wtypen__einheit {
	max-width: 4.15vw;
	margin: 0;
	font-size: clamp(0.7rem, 0.83vw, 0.95rem);
	line-height: 1.2;
}

/*
 * Der Knopf steht am rechten Rand der Spalte, nicht in ihrer Mitte. Sein
 * Abstand ist ab dem Strich gemessen; die Verfügbarkeit liegt daneben und
 * zählt im Fluss nicht mit.
 */
.ld-wtypen__schalter {
	display: flex;
	justify-content: flex-end;
	margin: 4.56vw 0 0;
}

/* ------------------------------------------------- Ohne Skript und ruhig */

/*
 * Ohne JavaScript gibt es kein Abrollen, keinen Bildwechsel und keinen
 * Auftritt. Dann steht das Wort sofort da, die erste Zahl und das erste Bild
 * sind sichtbar — der Abschnitt bleibt vollständig lesbar.
 */
html:not(.ld-motion) .ld-wtypen__zeile {
	cursor: default;
}

html:not(.ld-motion) .ld-wtypen__paar:first-child,
html:not(.ld-motion) .ld-wtypen__bild:first-child,
html:not(.ld-motion) .ld-wtypen__wort {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ld-wtypen__bild,
	.ld-wtypen__paar,
	.ld-wtypen__rolle,
	.ld-wtypen__rolle > span,
	.ld-wtypen__zeile,
	.ld-wtypen__zeichen,
	.ld-wtypen__liste::before {
		transition: none;
	}

	.ld-wtypen__zeichen {
		opacity: 1;
		transform: none;
	}

	/*
	 * Die zweite Ausfertigung wird auch hier angelegt — sie trägt den
	 * Farbwechsel. Gerollt wird aber nicht.
	 */
	.ld-wtypen__zeile.is-vorn .ld-wtypen__rolle > span,
	.ld-wtypen__zeile:hover .ld-wtypen__rolle > span {
		transform: none;
	}
}

/* ----------------------------------------------------------------- Mobil */

/*
 * Nebeneinander bleibt für das Bild kein Platz. Deshalb untereinander: oben
 * das Bild mit dem Wort darin, darunter die Zimmerzahlen, Verfügbarkeit und
 * Knopf. Angefasst wird dort nicht mit der Maus, also steht immer die erste
 * Zeile vorn.
 */
@media (max-width: 781px) {
	.ld-wtypen {
		--ld-wt-zeile: 2.6rem;
	}

	.ld-wtypen .ld-wtypen__buehne {
		height: auto;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
	}

	.ld-wtypen__bilder {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	.ld-wtypen__wort {
		inset-block-end: auto;
		inset-inline-end: auto;
		position: static;
		order: -1;
		margin: 0 6vw 0.6rem;
		font-size: 2.6rem;
		white-space: normal;
	}

	.ld-wtypen__spalte {
		position: relative;
		inset: auto;
		padding: clamp(1.5rem, 6vw, 3rem) 6vw clamp(2rem, 8vw, 4rem);
		gap: clamp(1.5rem, 6vw, 3rem);
		pointer-events: auto;
	}

	.ld-wtypen__oben,
	.ld-wtypen__unten {
		width: auto;
	}

	.ld-wtypen__liste::before {
		display: none;
	}

	.ld-wtypen__zeile {
		font-size: 1.9rem;
		padding-block: 0.5rem 0.2rem;
	}

	.ld-wtypen__stand {
		position: relative;
		inset: auto;
		height: 3rem;
	}

	.ld-wtypen__zahl {
		font-size: 1.9rem;
	}

	.ld-wtypen__einheit {
		max-width: 6rem;
		font-size: 0.8rem;
	}

	.ld-wtypen__schalter {
		justify-content: flex-start;
		margin-block-start: 1.5rem;
	}

	.ld-wtypen__unten {
		padding-block-start: 1.5rem;
	}
}