/*
 * Event Card Loop – Stylesheet
 * Layout: responsives Raster (1/2/--secl-columns Spalten), jede Karte mit
 * weissem Rahmen. Bild oben im 4:5-Format als Hintergrund-Container (S/W,
 * harter Kontrast) mit Titel/Byline- und Datum-Chip (nur textbreit,
 * zentriert unten im Bild). Darunter der Textblock: zuerst der Ticket-
 * Button (schwarze Box, weisser Rahmen wie die Karte, Hover invertiert),
 * dann Venue/Zeiten/Preise links + Social-Icons rechts (oben ausgerichtet),
 * dann die Bio – Button+Details stecken in einem Wrapper mit min-height,
 * damit die Bio bei allen Karten einer Reihe auf gleicher Höhe startet.
 *
 * Alle Klassen sind mit "secl-" (Siebensinn Event Card Loop) namespaced UND
 * unter .secl-eventcard-grid genestet + mit !important versehen. Grund:
 * Themes und vor allem Elementors globale Kit-Styles (Typography/Buttons/
 * Link-Farben) setzen oft eigene Regeln auf ganz normale Tags (a, h3, p) an
 * -- ohne diese Härtung gewinnt sonst z.B. die globale Link-Farbe des Themes
 * gegen unseren weissen/schwarzen Ticket-Button-Text.
 *
 * Farben/Schriftgrössen liegen zusätzlich als CSS-Variablen auf
 * .secl-eventcard-grid -> einfach im Elementor "Custom CSS" oder in einem
 * Child-Theme überschreiben (am besten mit eigenem !important, sonst
 * gewinnt ggf. unsere Regel).
 */

.secl-eventcard-grid {
	--secl-columns: 4; /* Spaltenzahl ab Desktop-Breakpoint, siehe Media Queries unten */

	/* Schrift (Titel/Byline/Datum ca. 30% grösser als im vorherigen Entwurf) */
	--secl-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--secl-title-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.95rem);
	--secl-byline-size: 1.05rem;
	--secl-cap-date-size: 1.1rem; /* auch für den Ticket-Button verwendet */

	/* Farben: Caption-Chips auf dem Bild */
	--secl-caption-bg: #000000;
	--secl-caption-text: #ffffff;
	--secl-byline-text: rgba(255, 255, 255, 0.72);

	/* Farben: Textblock unter dem Bild */
	--secl-body-bg: #000000;
	--secl-body-text: #ffffff;
	--secl-body-text-muted: rgba(255, 255, 255, 0.72);

	/* Ticket-Button: schwarzer Hintergrund, weisse Schrift, weisser Rahmen wie die Karte; Hover invertiert komplett */
	--secl-ticket-bg: #000000;
	--secl-ticket-text: #ffffff;
	--secl-ticket-bg-hover: #ffffff;
	--secl-ticket-text-hover: #000000;

	--secl-bg-media: #1c1c1c;

	/* Weisser Rahmen um die ganze Karte (auch vom Ticket-Button wiederverwendet) */
	--secl-card-border-color: #ffffff;
	--secl-card-border-width: 8px;
	--secl-card-radius: 0px;

	/* Innenabstand Textblock links/rechts */
	--secl-body-padding-x: 60px;

	/* Ticket-Button: bricht aus dem Innenabstand aus, volle Breite mit nur diesem Randabstand */
	--secl-ticket-btn-edge: 10px;

	/* Mindesthöhe für Button+Meta/Socials, damit die Bio bei allen Karten einer Reihe auf gleicher Höhe startet */
	--secl-info-min-height: 190px;

	--secl-gap: 1.5rem;

	/* Bild-Effekt: hartes S/W */
	--secl-img-filter: grayscale(1) contrast(1.9) brightness(0.92);

	/*
	 * Flexbox statt CSS-Grid: dadurch bilden nicht volle Reihen (z.B. nur
	 * 2 von 4 Karten in der letzten Zeile) automatisch eine zentrierte
	 * Gruppe statt links auszurichten und rechts eine Lücke zu lassen
	 * (was bei "grid-template-columns: repeat(4, 1fr)" passieren würde).
	 */
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: var(--secl-gap) !important;
	font-family: var(--secl-font) !important;
	margin: 2rem 0 !important;
}

/* Handy Portrait: 1 Event pro Zeile */
.secl-eventcard-grid > .secl-eventcard {
	flex: 0 1 100% !important;
}

/* iPad / Tablet: 2 Events nebeneinander */
@media (min-width: 641px) {
	.secl-eventcard-grid > .secl-eventcard {
		flex: 0 1 calc((100% - var(--secl-gap)) / 2) !important;
	}
}

/* Desktop / MacBook: Spaltenzahl aus --secl-columns (Standard 4, per Shortcode-Attribut "columns" änderbar) */
@media (min-width: 1100px) {
	.secl-eventcard-grid > .secl-eventcard {
		flex: 0 1 calc((100% - (var(--secl-columns) - 1) * var(--secl-gap)) / var(--secl-columns)) !important;
	}
}

.secl-eventcard-empty {
	opacity: 0.7 !important;
	font-family: var(--secl-font) !important;
}

/* ---------- Reset: neutralisiert Theme-/Elementor-Vorgaben auf Standard-Tags ---------- */

.secl-eventcard-grid,
.secl-eventcard-grid *,
.secl-eventcard-grid *::before,
.secl-eventcard-grid *::after {
	box-sizing: border-box !important;
}

.secl-eventcard-grid h1,
.secl-eventcard-grid h2,
.secl-eventcard-grid h3,
.secl-eventcard-grid h4,
.secl-eventcard-grid p,
.secl-eventcard-grid ul,
.secl-eventcard-grid li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
	font-family: var(--secl-font) !important;
}

.secl-eventcard-grid a,
.secl-eventcard-grid a:link,
.secl-eventcard-grid a:visited {
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none !important;
	background: none !important;
	font-family: var(--secl-font) !important;
	transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* ---------- Card ---------- */

.secl-eventcard-grid .secl-eventcard {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border-radius: var(--secl-card-radius) !important;
	border: var(--secl-card-border-width) solid var(--secl-card-border-color) !important;
}

/* ---------- Bild-Container ---------- */

.secl-eventcard-grid .secl-eventcard__media {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 4 / 5 !important;
	overflow: hidden !important;
	background: var(--secl-bg-media) !important;
}

.secl-eventcard-grid .secl-eventcard__media-bg {
	position: absolute !important;
	inset: 0 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	filter: var(--secl-img-filter) !important;
	transition: filter 0.3s ease, transform 0.4s ease !important;
}

.secl-eventcard-grid .secl-eventcard:hover .secl-eventcard__media-bg {
	transform: scale(1.02) !important;
}

.secl-eventcard-grid .secl-eventcard__media-bg--placeholder {
	background-image: repeating-linear-gradient(
		45deg,
		#222,
		#222 10px,
		#2b2b2b 10px,
		#2b2b2b 20px
	) !important;
	filter: none !important;
}

/*
 * Caption: liegt UNGEFILTERT über dem Bild (eigenes Element, kein Kind des
 * gefilterten Bildlayers), Ausrichtung Center/Center-unten im Bild-Container.
 * Durch "align-items: center" auf dem Flex-Container schrumpfen Titel- und
 * Datum-Chip automatisch auf die Breite ihres Texts (Font-Hintergrund statt
 * durchgehendem Balken).
 */
.secl-eventcard-grid .secl-eventcard__caption {
	position: absolute !important;
	left: 1rem !important;
	right: 1rem !important;
	bottom: 1.25rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.4rem !important;
	text-align: center !important;
	z-index: 1 !important;
}

.secl-eventcard-grid .secl-eventcard__cap-title {
	max-width: 100% !important;
	background: var(--secl-caption-bg) !important;
	padding: 0.4rem 0.9rem !important;
	border-radius: var(--secl-card-radius) !important;
}

.secl-eventcard-grid .secl-eventcard__title {
	max-width: 100% !important;
	overflow-wrap: break-word !important;
	font-family: var(--secl-font) !important;
	font-size: var(--secl-title-size) !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em !important;
	text-transform: uppercase !important;
	color: var(--secl-caption-text) !important;
}

.secl-eventcard-grid .secl-eventcard__byline {
	margin-top: 0.25rem !important;
	font-family: var(--secl-font) !important;
	font-size: var(--secl-byline-size) !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--secl-byline-text) !important;
}

.secl-eventcard-grid .secl-eventcard__cap-date {
	max-width: 100% !important;
	background: var(--secl-caption-bg) !important;
	padding: 0.3rem 0.8rem !important;
	border-radius: var(--secl-card-radius) !important;
}

.secl-eventcard-grid .secl-eventcard__date {
	overflow-wrap: break-word !important;
	font-family: var(--secl-font) !important;
	font-size: var(--secl-cap-date-size) !important;
	font-weight: 800 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: var(--secl-caption-text) !important;
}

/* ---------- Textblock ---------- */

.secl-eventcard-grid .secl-eventcard__body {
	background: var(--secl-body-bg) !important;
	color: var(--secl-body-text) !important;
	padding: 1.75rem var(--secl-body-padding-x) 2rem !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 1.25rem !important;
}

/*
 * Umschliesst Ticket-Button + Details-Zeile (Venue/Zeiten/Preise + Socials).
 * min-height sorgt dafür, dass die Bio darunter bei allen Karten einer Reihe
 * auf derselben Höhe beginnt, auch wenn einzelne Events weniger Angaben haben.
 */
.secl-eventcard-grid .secl-eventcard__info {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.1rem !important;
	min-height: var(--secl-info-min-height) !important;
}

.secl-eventcard-grid .secl-eventcard__details-row {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
}

.secl-eventcard-grid .secl-eventcard__meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.2rem !important;
	font-family: var(--secl-font) !important;
	font-size: 0.9rem !important;
	line-height: 1.55 !important;
	color: var(--secl-body-text) !important;
}

.secl-eventcard-grid .secl-eventcard__meta-line {
	color: var(--secl-body-text) !important;
}

.secl-eventcard-grid .secl-eventcard__venue {
	font-weight: 700 !important;
}

.secl-eventcard-grid .secl-eventcard__prices {
	margin-top: 0.5rem !important;
}

/* ---------- Socials (weisse Icons) ---------- */

.secl-eventcard-grid .secl-eventcard__socials {
	display: flex !important;
	gap: 0.9rem !important;
}

.secl-eventcard-grid .secl-eventcard__social {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--secl-body-text) !important;
	opacity: 1 !important;
}

.secl-eventcard-grid .secl-eventcard__social svg {
	width: 1.35rem !important;
	height: 1.35rem !important;
	fill: none !important;
	stroke: currentColor !important;
}

.secl-eventcard-grid .secl-eventcard__social:hover {
	opacity: 0.6 !important;
}

/* ---------- Ticket-Button: schwarze Box mit weissem Rahmen (wie die Karte), Hover invertiert komplett ---------- */

.secl-eventcard-grid a.secl-eventcard__ticket-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: stretch !important;
	/* Bricht bewusst aus dem 60px-Innenabstand des Textblocks aus: nur noch
	   ~10px Abstand zum Kartenrand statt 60px, über den ganzen Textblock breit. */
	margin-left: calc(-1 * (var(--secl-body-padding-x) - var(--secl-ticket-btn-edge))) !important;
	margin-right: calc(-1 * (var(--secl-body-padding-x) - var(--secl-ticket-btn-edge))) !important;
	padding: 0.75rem 1.7rem !important;
	background: var(--secl-ticket-bg) !important;
	background-color: var(--secl-ticket-bg) !important;
	color: var(--secl-ticket-text) !important;
	font-family: var(--secl-font) !important;
	font-weight: 800 !important;
	font-size: var(--secl-cap-date-size) !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	border-radius: 0 !important;
	border: var(--secl-card-border-width) solid var(--secl-card-border-color) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.secl-eventcard-grid a.secl-eventcard__ticket-btn:hover,
.secl-eventcard-grid a.secl-eventcard__ticket-btn:focus,
.secl-eventcard-grid a.secl-eventcard__ticket-btn:active {
	background: var(--secl-ticket-bg-hover) !important;
	background-color: var(--secl-ticket-bg-hover) !important;
	color: var(--secl-ticket-text-hover) !important;
	border-color: var(--secl-ticket-text-hover) !important;
}

/* ---------- Bio ---------- */

.secl-eventcard-grid .secl-eventcard__bio {
	font-family: var(--secl-font) !important;
	font-size: 0.85rem !important;
	line-height: 1.6 !important;
	color: var(--secl-body-text-muted) !important;
}

.secl-eventcard-grid .secl-eventcard__bio p {
	margin: 0 0 0.9em 0 !important;
}

.secl-eventcard-grid .secl-eventcard__bio p:last-child {
	margin-bottom: 0 !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	.secl-eventcard-grid .secl-eventcard__cap-title {
		padding: 0.85rem 1.1rem 0.35rem !important;
	}

	.secl-eventcard-grid .secl-eventcard__cap-date {
		padding: 0.4rem 1.1rem 0.85rem !important;
	}
}