/*
 * Buchungseinstieg — Zeitraum, Weg-Wahl und Klassenkarten-CTA.
 *
 * Gestaltet ausschliesslich aus Theme-Token (theme.json). Keine eigenen
 * Farbwerte, keine Important-Flags. Geladen wird die Datei nur, wenn einer der
 * Shortcodes [marina_buchungseinstieg], [marina_zeitraum] oder
 * [marina_klassen_cta] auf der Seite steht (marina-core/booking-entry.php).
 *
 * KEIN Verlass auf die Quellreihenfolge: ein Block-Theme rendert seine
 * Vorlage, bevor wp_head laeuft — der Shortcode meldet dieses Stylesheet also
 * frueher an als den Inline-Block `global-styles` aus theme.json. Jede Regel,
 * die eine theme.json-Elementregel ueberschreibt (Buttons!), traegt deshalb
 * eine Klasse mehr, als sie zum Treffen braucht:
 * `:root :where(.wp-element-button)` hat Spezifitaet 0,1,0 —
 * `.marina-entry .marina-entry__way` hat 0,2,0 und gewinnt unabhaengig davon,
 * welche Datei zuerst gedruckt wird.
 *
 * Aufbau:
 *   .marina-entry       Ein GET-Formular: zwei Datumsfelder, darunter die
 *                       gleichrangigen Wege (Hafenkarte / Groessenklasse).
 *   .marina-period      Dasselbe Formular auf /buchen/, plus Rueckweg zur Karte.
 *   .marina-classpick   Der CTA je Groessenklassen-Karte (eigenes POST-Formular).
 */

/* ---------------------------------------------------------------------------
 * 1. Zeitraum
 * ------------------------------------------------------------------------- */

.marina-entry {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.marina-entry__fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--custom--control--row-gap) var(--wp--preset--spacing--30);
}

.marina-entry__field {
	display: flex;
	flex: 1 1 9rem;
	flex-direction: column;
	gap: var(--wp--custom--control--label-gap);
	margin: 0;
}

.marina-entry__field label {
	color: var(--wp--preset--color--navy-heading);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
}

/*
 * Die Feldoptik — Höhe, Box-Rechnung, Polsterung, Rahmen, Radius, Farbe —
 * steht in style.css §7 und gilt für jedes Datumsfeld der Site. Hier stand
 * sie früher ein zweites Mal, mit abweichender Polsterung (0 statt 0.6rem)
 * und `height` statt `min-height`: bei content-box ergab das 48px statt 46px
 * und ein Feld, das 26px über seine Flex-Spalte hinausragte. Übrig bleibt,
 * was wirklich nur für Datumsfelder gilt: Tabellenziffern, damit die beiden
 * Daten stellengleich untereinander stehen.
 */
.marina-entry .marina-entry__field input[type="date"] {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.marina-entry__field--submit {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 2. Die zwei Wege — bewusst gleich gross
 * ------------------------------------------------------------------------- */

/*
 * Beide Wege fuehren zum selben Ziel und sind gleichwertig: gleiche Breite,
 * gleiche Hoehe, gleiche Schriftgroesse. Unterschieden werden sie nur durch
 * die Flaeche — Verlauf fuer den Karten-Weg, heller Rahmen fuer die
 * Klassenwahl —, damit die Karte nicht wie die einzige Option aussieht.
 */
.marina-entry__ways {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

.marina-entry .marina-entry__way {
	display: block;
	width: 100%;
	min-height: var(--wp--custom--control--submit-height);
	padding: 0.7rem 1rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-align: center;
	cursor: pointer;
}

.marina-entry .marina-entry__way--alt {
	color: var(--wp--preset--color--accent-deep);
	background: var(--wp--preset--color--surface);
	background-image: none;
	border: 1px solid var(--wp--preset--color--accent);
	box-shadow: none;
}

.marina-entry .marina-entry__way--alt:hover,
.marina-entry .marina-entry__way--alt:focus-visible {
	color: var(--wp--preset--color--accent-deep);
	background: var(--wp--preset--color--nav-hover);
	box-shadow: none;
}

.marina-entry__hint {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

.marina-entry__hint:empty {
	display: none;
}

.marina-entry__hint.is-error {
	color: var(--wp--preset--color--accent-deep);
	font-weight: 600;
}

.marina-entry__missing {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--s);
}

/* ---------------------------------------------------------------------------
 * 3. Zeitraum-Block auf /buchen/
 * ------------------------------------------------------------------------- */

.marina-period {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.marina-period__form {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--gradient--panel);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--card);
}

/* Auf /buchen/ steht der Submit neben den Feldern, nicht darunter. */
.marina-period__form .marina-entry__field--submit .marina-entry__way {
	width: auto;
	min-height: var(--wp--custom--control--height);
	padding: 0 1.25rem;
}

.marina-period__form .marina-entry__hint {
	font-size: var(--wp--preset--font-size--s);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.marina-period__map {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--s);
}

/* ---------------------------------------------------------------------------
 * 4. CTA der Klassenkarten
 * ------------------------------------------------------------------------- */

/*
 * Der CTA sitzt am Fuss seiner Karte. Das Raster traegt .cm-stretch
 * (style.css, Abschnitt 4a) und macht jede Karte zur Flex-Spalte; deshalb
 * reicht margin-top:auto, damit alle Buttons einer Reihe auf gleicher Hoehe
 * stehen — unabhaengig davon, wie viele Zeilen darueber stehen.
 */
.marina-classpick__cta {
	margin: auto 0 0;
	padding: 0;
}

.marina-classpick__cta .marina-classpick__go {
	display: block;
	width: 100%;
	min-height: var(--wp--custom--control--height);
	padding: 0.6rem 1rem;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-align: center;
	cursor: pointer;
}

.marina-classpick__cta .marina-classpick__go[disabled] {
	filter: grayscale(1);
	opacity: 0.6;
	cursor: not-allowed;
}

.marina-classpick__note {
	display: block;
	margin-top: var(--wp--custom--control--label-gap);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
}

/* ---------------------------------------------------------------------------
 * 5. Breite — Wege nebeneinander, im Hero jedoch gestapelt
 * ------------------------------------------------------------------------- */

/*
 * In der Hero-Karte (360–480px breit) bleiben die beiden Wege untereinander:
 * nebeneinander braechen die langen Beschriftungen in vier Zeilen um und die
 * Karten waeren nicht mehr gleich hoch. Ausserhalb des Heros — etwa in einem
 * breiten Inhaltsbereich — stehen sie ab 480px nebeneinander.
 */
@media (min-width: 480px) {
	.marina-entry__ways {
		grid-template-columns: 1fr 1fr;
	}

	.cm-booking-card .marina-entry__ways {
		grid-template-columns: 1fr;
	}
}