/* ═══════════════════════════════════════════════
   SAR Travel List Block – blockspezifische Styles

   Das visuelle Karten-System (.sar-travel-list +
   .sar-travel-card inkl. Grid und Responsive) liegt
   gemeinsam in assets/css/travel-cards.css und wird
   ueber das Style-Handle `sar-travel-cards` geladen
   (siehe block.json -> "style"). Hier verbleiben nur
   die Teile, die ausschliesslich dieser Block nutzt:
   Heading, Titel-Liste, Mehr-Link, Block-Wrapper,
   Editor-Vorschau.
   ═══════════════════════════════════════════════ */

/* Dynamische Überschrift über der Liste (z. B. aus Country-Meta
   `travel_list_heading`). Nur sichtbar wenn redaktionell gepflegt. */
.sar-travel-list__heading {
	margin: 0 0 16px;
}

/* Jahres-Umschaltung auf Monatsseiten (/reisen-im-MONAT/).
   Erscheint nur, wenn fuer den Monat mehr als ein Jahr mit kommenden
   Abfahrten verfuegbar ist. Reine Tab-Leiste, brandfarbener Akzent. */
.sar-travel-list__years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
.sar-travel-list__year {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #1a3a5c;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sar-travel-list__year:hover,
.sar-travel-list__year:focus {
	border-color: #e87722;
	color: #e87722;
}
.sar-travel-list__year.is-active {
	background-color: #e87722;
	border-color: #e87722;
	color: #fff;
}

/* Toolbar auf Monatsseiten: Jahres-Umschaltung links, Status-Filter rechts. */
.sar-travel-list__toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.sar-travel-list__toolbar .sar-travel-list__years {
	margin-bottom: 0;
}
.sar-travel-list__statusfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sar-travel-list__statusbtn {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	color: #1a3a5c;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sar-travel-list__statusbtn:hover,
.sar-travel-list__statusbtn:focus {
	border-color: #e87722;
	color: #e87722;
}
.sar-travel-list__statusbtn.is-active {
	background-color: #e87722;
	border-color: #e87722;
	color: #fff;
}

/* „Mehr anzeigen"-Button (Load-more, view.js). Ohne JS nicht vorhanden,
   dann sind alle Treffer sichtbar. */
.sar-travel-list__loadmore {
	display: block;
	margin: 24px auto 0;
	padding: 10px 28px;
	background: #e87722;
	color: #fff;
	border: none;
	border-radius: 999px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sar-travel-list__loadmore:hover,
.sar-travel-list__loadmore:focus {
	background: #d4561e;
}


/* ═══════════════════════════════════════════════
   Block-Wrapper (umfasst Heading, Liste, Mehr-Link)
   Damit der Mehr-Link in mehrspaltigen Layouts (z.B. core/columns,
   Getwid-Spalten) unten bündig liegt und alle Spalten gleich hoch sind.
   In einspaltigem Layout bleibt das Verhalten visuell identisch.
   ═══════════════════════════════════════════════ */

/* Block-Wrapper ist visuell neutral: keine eigene Höhe, kein Stretch.
   Die Spalten-Höhe regelt der Spalten-Container (core/columns hat von
   Haus aus align-items: stretch). Für Bündigkeit eines manuellen
   Button-Blocks unter der Liste dem Button-Block die Klasse
   `sar-stick-to-bottom` vergeben. */
.sar-travel-list-block {
	display: block;
}

/* Falls der eingebaute Mehr-Link doch genutzt wird (Label + URL gesetzt),
   sitzt er direkt unter der Liste mit etwas Abstand. */
.sar-travel-list-block > .sar-travel-list__more {
	margin: 12px 0 0;
}

/* Hilfsklasse für manuell platzierte Blocks im Spalten-Layout.
   Item mit dieser Klasse wird per margin-top: auto ans untere Ende der
   Spalte gezogen, sodass z.B. Buttons in mehreren Spalten auf einer
   Linie sitzen. Im Block-Editor an dem Button-Block setzen:
   Block-Settings → Erweitert → Zusätzliche CSS-Klasse: sar-stick-to-bottom

   Damit margin-top: auto wirken kann, muss der Parent (also die Spalte
   selbst) ein flex-column-Container sein. core/columns und Getwid-
   Section-Columns sind das standardmäßig NICHT. Wir aktivieren das
   gezielt nur für Spalten, die ein sar-stick-to-bottom enthalten.
   :has() ist seit Chrome 105 / Firefox 121 / Safari 15.4 verfügbar. */
.wp-block-column:has( .sar-stick-to-bottom ),
.wp-block-getwid-section-column:has( .sar-stick-to-bottom ) {
	display: flex;
	flex-direction: column;
}

.sar-stick-to-bottom {
	margin-top: auto !important;
}

/* ─── Title-Only-Modus ─────────────────────── */
/* Schlichte Linkliste mit Pfeil-Marker. Kein list-style-disc,
   stattdessen ein eigenes ::before-Chevron, weil es sich besser stylen
   und beim Hover mit-animieren laesst. */

.sar-travel-list--title-only {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #e0e0e0;
}

.sar-travel-list__title-item {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #e0e0e0;
}

.sar-travel-list__title-link {
	position: relative;
	display: block;
	padding: 12px 16px 12px 28px;
	color: #1a3a5c;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease, background-color 0.15s ease, padding-left 0.15s ease;
}

.sar-travel-list__title-link::before {
	content: "›";
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 1.2em;
	line-height: 1;
	color: #e87722;
	transition: transform 0.15s ease, left 0.15s ease;
}

.sar-travel-list__title-link:hover,
.sar-travel-list__title-link:focus-visible {
	color: #e87722;
	background-color: #f8f9fa;
	padding-left: 32px;
}

.sar-travel-list__title-link:hover::before,
.sar-travel-list__title-link:focus-visible::before {
	left: 12px;
}

/* ─── Mehr-Link unter der Liste ────────────── */
/* Wird gerendert, wenn die Trefferzahl groesser als das gesetzte Limit
   ist und Label + URL im Inspector gepflegt sind. */

.sar-travel-list__more {
	margin: 16px 0 0;
}

.sar-travel-list__more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: #1a3a5c;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.sar-travel-list__more-link::after {
	content: "›";
	font-size: 1.2em;
	line-height: 1;
	transition: transform 0.15s ease;
}

.sar-travel-list__more-link:hover,
.sar-travel-list__more-link:focus-visible {
	background: #e87722;
	color: #fff;
}

.sar-travel-list__more-link:hover::after,
.sar-travel-list__more-link:focus-visible::after {
	transform: translateX( 3px );
}

/* ─── Empty State ──────────────────────────── */

.sar-travel-list--empty {
	padding: 40px 20px;
	text-align: center;
}

/* ─── Editor-Vorschau ──────────────────────── */

.sar-travel-list-editor-preview {
	border: 2px dashed #c3c4c7;
	padding: 20px;
	text-align: center;
	background: #f9f9f9;
}

.sar-travel-list-editor-preview__icon {
	margin-bottom: 8px;
}

.sar-travel-list-editor-preview__title {
	margin: 0 0 4px;
}