/* ═══════════════════════════════════════════════
   SAR Reise-Karten – gemeinsames Karten-System
   Orientiert am schulz-aktiv-reisen Design.

   Diese Datei enthaelt das visuelle Karten-System
   (.sar-travel-list + .sar-travel-card), das von
   mehreren Bloecken genutzt wird: sar/travel-list und
   sar/handpicked-travels. Sie wird ueber das in PHP
   registrierte Style-Handle `sar-travel-cards`
   eingebunden (block.json -> "style": [ ... ]).

   Block-spezifische Styles (Titel-Liste, Mehr-Link,
   Block-Wrapper, Promo-Overlay) liegen weiterhin in
   der jeweiligen Block-style.css.
   ═══════════════════════════════════════════════ */

.sar-travel-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ─── Einzelne Karte ────────────────────────── */

.sar-travel-card {
	border-bottom: 1px solid #e0e0e0;
	/* Positionierungs-Kontext fuer optionale Overlays (z.B. Promo-Link).
	   Ohne top/left ohne Layout-Wirkung fuer Karten ohne Overlay. */
	position: relative;
}

.sar-travel-card:first-child {
	border-top: 1px solid #e0e0e0;
}

.sar-travel-card__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px 16px 16px 0;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.sar-travel-card__link:hover {
	background-color: #f2f2f2;
}

/* Das Theme (Neve) senkt beim Link-Hover die Deckkraft, wodurch der gesamte
   Karteninhalt ausbleicht (Titel/Preis/Text wirken blass). Hier erzwingen wir
   volle Deckkraft: beim Hover aendert sich nur der Hintergrund, Text und Bild
   bleiben voll lesbar. */
.sar-travel-card:hover,
.sar-travel-card__link:hover,
.sar-travel-card__link:hover * {
	opacity: 1 !important;
}

/* ─── Bild (links) ──────────────────────────── */

.sar-travel-card__image {
	flex-shrink: 0;
	width: 220px;
	min-height: 150px;
	align-self: stretch;
	overflow: hidden;
	position: relative;
}

.sar-travel-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sar-travel-card__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
}

/* ─── Content (Mitte) ──────────────────────── */

.sar-travel-card__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sar-travel-card__countries {
}

.sar-travel-card__title {
	margin: 0;
}

/* Das Theme (Neve) wechselt beim Link-Hover die Schriftfarbe von
   --nv-primary-accent zu --nv-secondary-accent, wodurch der Text ausbleicht
   ("Overlay"-Effekt). Hier auf die primaere Farbe festnageln: beim Hover
   aendert sich nur der Hintergrund, die Schrift bleibt gleich. */
.sar-travel-card__link:hover,
.sar-travel-card__link:hover .sar-travel-card__title,
.sar-travel-card__link:hover .sar-travel-card__countries,
.sar-travel-card__link:hover .sar-travel-card__price,
.sar-travel-card__link:hover .sar-travel-card__pax,
.sar-travel-card__link:hover .sar-travel-card__date {
	color: var( --nv-primary-accent, #1a3a5c ) !important;
}

.sar-travel-card__meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.sar-travel-card__duration {
	white-space: nowrap;
	color: #e87722;
	font-weight: 600;
}

/* Tage + Kurzbeschreibung nebeneinander: Tage links (orange), Text eingerueckt daneben. */
.sar-travel-card__details {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.sar-travel-card__details .sar-travel-card__subtitle {
	margin: 0;
	flex: 1;
	min-width: 0;
}

/* Fließtext / Kurzbeschreibung – auf 2 Zeilen gekürzt mit "…" */
.sar-travel-card__subtitle {
	margin: 4px 0 4px 0;
	color: #555;
	font-size: 0.95em;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ─── Aktivitäts-Icons ──────────────────────── */

.sar-travel-card__activities {
	display: flex;
	gap: 4px;
	margin-top: 4px;
	flex-wrap: wrap;
}

.sar-travel-card__activity {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #1a3a5c;
	border-radius: 50%;
	overflow: hidden;
}

.sar-travel-card__activity:has( > img ) {
	background: none;
}

.sar-travel-card__activity img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Badges (Klassiker + Neu) */
.sar-travel-card__badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 80px;
}

.sar-travel-card__klassiker,
.sar-travel-card__neu {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
}

/* ─── Rechte Seite (Preis etc.) ─────────────── */

.sar-travel-card__aside {
	flex-shrink: 0;
	width: 160px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	text-align: right;
}

.sar-travel-card__price {
}

/* Buchungsstatus-Icon (Termin-Kachel), gleiche Symbole wie Detailseite. */
.sar-travel-card__status {
	display: inline-flex;
	align-items: center;
}

.sar-travel-card__status .sar-booking-icon {
	display: block;
	width: 36px;
	height: 36px;
}

/* Inklusiv-Leistungen (inkl. Flug/Zug/Bus) neben dem Preis. */
.sar-travel-card__inclusion {
	font-size: 0.9em;
	color: #555;
	line-height: 1.3;
}

/* Abfahrtsdatum als eigene Spalte (Termin-Kontext), zwischen Inhalt und Preis. */
.sar-travel-card__date {
	flex-shrink: 0;
	white-space: nowrap;
	color: #1a3a5c;
	font-weight: 600;
	padding: 0 8px;
}

/* Status + Pfeil als Zeile: Status-Icon links neben dem orangen Button. */
.sar-travel-card__actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Aktions-Button: keine Custom-Formatierung mehr. Der Span traegt die
   Neve-Klassen `button button-primary` und uebernimmt damit den gefuellten
   Primary-Button des Themes (Hintergrund/Farbe/Padding aus dem Customizer,
   definiert in neve/style-main-new.css: `.button.button-primary`). */

/* List-Layout: Inhalt oben am Bild, Aktivitäten + Button unten am Bild,
   Label (Klassiker/Neu), Datum und Preisblock vertikal zentriert. */
.sar-travel-list--list .sar-travel-card__link {
	align-items: stretch;
}
.sar-travel-list--list .sar-travel-card__activities {
	margin-top: auto;
}
.sar-travel-list--list .sar-travel-card__badge,
.sar-travel-list--list .sar-travel-card__date {
	align-self: center;
}
/* Preisblock samt Button am unteren Bildrand; Button steht unter Preis/Teilnehmer. */
.sar-travel-list--list .sar-travel-card__aside {
	align-self: flex-end;
}
.sar-travel-list--list .sar-travel-card__actions {
	margin-top: 6px;
}

/* Alternative Bild-Option: festes 16:10-Format, oben-bündig (statt volle Höhe). */
.sar-travel-list--img-ratio .sar-travel-card__image {
	align-self: flex-start;
	min-height: 0;
	height: auto;
	aspect-ratio: 16 / 10;
}

/* Gleiche Option in der Kachel-/Grid-Ansicht: feste Grid-Bildhoehe (180px)
   ueberschreiben, damit auch die Kacheln 16:10 nutzen. Hoehere Spezifitaet
   (zwei Klassen am Container) als die Grid-Basisregel. */
.sar-travel-list--grid.sar-travel-list--img-ratio .sar-travel-card__image {
	height: auto;
	align-self: start;
	aspect-ratio: 16 / 10;
}


.sar-travel-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #e87722;
	border-radius: 50%;
	margin-top: 4px;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.sar-travel-card__link:hover .sar-travel-card__arrow {
	background: #d4561e;
	transform: scale(1.1);
}

/* ═══════════════════════════════════════════════
   GRID-/KACHELANSICHT
   Aktiviert durch .sar-travel-list--grid + --cols-N.
   Die Card behält ihre Klassen, die innere Anordnung
   wird aber per Grid umgestellt: Bild oben, Inhalt
   darunter, Badge als Overlay auf dem Bild, Aside
   (Preis/Pfeil) unten. So entstehen klassische
   Kachel-Karten ohne neue HTML-Struktur.
   ═══════════════════════════════════════════════ */

.sar-travel-list--grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( var( --sar-tl-cols, 3 ), minmax( 0, 1fr ) );
}

.sar-travel-list--cols-2 { --sar-tl-cols: 2; }
.sar-travel-list--cols-3 { --sar-tl-cols: 3; }
.sar-travel-list--cols-4 { --sar-tl-cols: 4; }

/* Card im Grid-Modus */
.sar-travel-list--grid .sar-travel-card {
	border: 1px solid #e0e0e0;
	background: #fff;
	display: flex;
	height: 100%;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.sar-travel-list--grid .sar-travel-card:first-child {
	border-top: 1px solid #e0e0e0;
}

.sar-travel-list--grid .sar-travel-card:hover {
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.08 );
}

.sar-travel-list--grid .sar-travel-card__link {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"image"
		"content"
		"aside";
	align-items: stretch;
	gap: 0;
	padding: 0;
	width: 100%;
	position: relative;
}

.sar-travel-list--grid .sar-travel-card__link:hover {
	background-color: transparent;
}

/* Bild: ganze Breite, fester Höhenrahmen */
.sar-travel-list--grid .sar-travel-card__image {
	grid-area: image;
	width: 100%;
	height: 180px;
	min-height: 0;
	align-self: auto;
}

/* Content: innen padding, nicht die Card selbst */
.sar-travel-list--grid .sar-travel-card__content {
	grid-area: content;
	padding: 14px 16px 8px 16px;
	gap: 6px;
}

/* Badge als Overlay oben rechts auf dem Bild */
.sar-travel-list--grid .sar-travel-card__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	min-width: 0;
	z-index: 2;
	pointer-events: none;
}

.sar-travel-list--grid .sar-travel-card__klassiker,
.sar-travel-list--grid .sar-travel-card__neu {
	width: 64px;
	height: 64px;
}

/* Aside (Preis + Teilnehmer + Pfeil) unten in einer Zeile */
.sar-travel-list--grid .sar-travel-card__aside {
	grid-area: aside;
	width: auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px 14px 16px;
	text-align: left;
	border-top: 1px solid #f0f0f0;
}

.sar-travel-list--grid .sar-travel-card__pax {
	font-size: 0.9em;
	color: #555;
}

.sar-travel-list--grid .sar-travel-card__arrow {
	margin-top: 0;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

/* 4-Spalten-Grid wird unterhalb 1200 px zu 3, dann 2, dann 1 */
@media ( max-width: 1199px ) {
	.sar-travel-list--cols-4 { --sar-tl-cols: 3; }
}

@media ( max-width: 900px ) {
	.sar-travel-list--cols-3,
	.sar-travel-list--cols-4 { --sar-tl-cols: 2; }
}

@media ( max-width: 600px ) {
	.sar-travel-list--grid {
		--sar-tl-cols: 1 !important;
		gap: 16px;
	}

	.sar-travel-list--grid .sar-travel-card__image {
		height: 200px;
	}
}

/* ─── Responsive (Listenansicht) ───────────────────────────── */

@media (max-width: 768px) {
	.sar-travel-card__link {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 14px 14px 0;
	}

	.sar-travel-card__image {
		width: 100%;
		height: 200px;
	}

	.sar-travel-card__content {
		width: 100%;
	}

	.sar-travel-card__aside {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.sar-travel-card__arrow {
		margin-top: 0;
	}
}

@media (max-width: 480px) {

	.sar-travel-card__image {
		height: 160px;
	}
}

/* ─── Teilnehmer + Inklusiv-Hinweise: kleiner und untereinander ─── */
.sar-travel-card__subinfo {
	display: flex;
	flex-direction: column;
}
.sar-travel-card__subinfo .sar-travel-card__inclusion,
.sar-travel-card__subinfo .sar-travel-card__pax {
	font-size: 0.8em;
	line-height: 1.3;
}
.sar-travel-list--list .sar-travel-card__subinfo {
	align-items: flex-end;
}

/* ─── Labels (Klassiker/Neu) auf den Kacheln gegen das Bild absetzen ───
   Erste Loesung: harter weisser Halo (Shadow), folgt der Badge-Form.
   Bewusst geringe Streuung, mehrfach gestapelt fuer einen relativ harten Rand.
   Feinjustierbar (z. B. weisser Kreis hinter dem Klassiker-Stempel). */
/* Weisse Fuellflaechen (Klassiker-Kreis als CSS, NEU steckt im neu-weiss.svg)
   kombiniert mit der harten weissen Aussenkontur (8er-Stern, 0 Blur) aus der
   frueheren Version. Da die Innenflaechen jetzt deckend weiss sind, scheint
   nichts mehr durch - die Kontur grenzt nur noch sauber zum Foto ab. */
.sar-travel-list--grid .sar-travel-card__klassiker {
	background: #fff;
	border-radius: 50%;
	/* Etwas tiefer, da der weisse Rand + Schatten den Patch optisch
	   naeher an den oberen Bildrand ruecken. */
	margin-top: 6px;
}
.sar-travel-list--grid .sar-travel-card__neu {
	filter:
		drop-shadow( 1px 0 0 #fff )
		drop-shadow( -1px 0 0 #fff )
		drop-shadow( 0 1px 0 #fff )
		drop-shadow( 0 -1px 0 #fff )
		drop-shadow( 1px 1px 0 #fff )
		drop-shadow( -1px 1px 0 #fff )
		drop-shadow( 1px -1px 0 #fff )
		drop-shadow( -1px -1px 0 #fff );
}
/* Klassiker: gleiche weisse Kontur, plus am Ende der Kette ein dezenter,
   harter Schatten zur Abgrenzung auf hellen (verschneiten) Motiven. */
.sar-travel-list--grid .sar-travel-card__klassiker {
	filter:
		drop-shadow( 1px 0 0 #fff )
		drop-shadow( -1px 0 0 #fff )
		drop-shadow( 0 1px 0 #fff )
		drop-shadow( 0 -1px 0 #fff )
		drop-shadow( 1px 1px 0 #fff )
		drop-shadow( -1px 1px 0 #fff )
		drop-shadow( 1px -1px 0 #fff )
		drop-shadow( -1px -1px 0 #fff )
		drop-shadow( 0 0 2px rgba( 255, 255, 255, 0.5 ) );
}