/* Tile Grid – Statische CSS-Regeln.
 *
 * Layout: Root = CSS Grid (Spalten nebeneinander).
 *         Jede Spalte (.tg-column) = Flex-Column (Karten übereinander).
 *
 * Bricks-gesteuerte Properties (per Breakpoint konfigurierbar, NICHT inline style):
 *   --tg-columns                               → repeat() in grid-template-columns
 *   gap          (Root + .tg-column)           → Abstände zwischen Spalten & Karten
 *   margin-top   (.tg-column:nth-child(even))  → Stagger-Versatz
 *
 * PHP inline style (nicht responsive, stabile Werte):
 *   --tg-radius, --tg-card-h, --tg-card-ar,
 *   --tg-overlay-bg, --tg-blur, --tg-gradient-alpha,
 *   --tg-title-size, --tg-title-weight, --tg-desc-size, --tg-desc-weight
 *
 * Overlay-Zustands-Modifier (BEM):
 *   .tile-grid--overlay-hover   → Standard (Overlay erscheint bei Hover, kein Extra-Code nötig)
 *   .tile-grid--overlay-static  → Overlay immer sichtbar
 *   .tile-grid--overlay-hidden  → Overlay nie sichtbar
 */

/* ── Root: CSS Grid für Spalten ──────────────────────────────────────────── */
.brxe-tile-grid {
	display: grid;
	grid-template-columns: repeat(var(--tg-columns, 4), 1fr);
	/* Bricks setzt --tg-gap als unitlose Zahl (z.B. 32).
	 * calc(N * 1px) wandelt sie in einen gültigen px-Wert um. */
	gap: calc(var(--tg-gap, 32) * 1px);
	padding-top: 8px;
	align-items: start;
	/* position: relative wird für den absolut positionierten Toggle-Button benötigt */
	position: relative;
}

/* ── Spalte: Flex-Column für Karten ─────────────────────────────────────── */
.brxe-tile-grid .tg-column {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tg-gap, 32) * 1px);
}

/* Stagger: --tg-offset kommt als unitlose Zahl von Bricks (z.B. 136).
 * calc(N * 1px) macht daraus 136px. Fallback 0 → kein Versatz. */
.brxe-tile-grid .tg-column:nth-child(even) {
	margin-top: calc(var(--tg-offset, 0) * 1px);
}

/* ── Karte ───────────────────────────────────────────────────────────────── */
.brxe-tile-grid .tg-card {
	width: 100%;
	height: var(--tg-card-h);
	aspect-ratio: var(--tg-card-ar);
	border-radius: var(--tg-radius);
	background-color: #eeeeee;
	position: relative;
	overflow: hidden;
	clip-path: inset(0 round var(--tg-radius));
	cursor: pointer;
	text-decoration: none;
	display: block;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brxe-tile-grid .tg-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.brxe-tile-grid .tg-card:hover {
	will-change: transform;
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.brxe-tile-grid .tg-card:focus-visible {
	outline: 2px solid var(--weber-green, #036048);
	outline-offset: 2px;
}

/* Verlaufs-Schatten am unteren Kartenrand */
.brxe-tile-grid .tg-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / var(--tg-gradient-alpha)) 0%, transparent 55%);
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}

/* ── Overlay (Standard: Hover-Zustand) ───────────────────────────────────── */
.brxe-tile-grid .tg-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--tg-overlay-bg);
	backdrop-filter: blur(var(--tg-blur));
	-webkit-backdrop-filter: blur(var(--tg-blur));
	padding: 24px 20px 28px;
	border-radius: 0 0 var(--tg-radius) var(--tg-radius);
	clip-path: inset(0 0 0 0 round 0 0 var(--tg-radius) var(--tg-radius));
	transform: translateY(100%) translateZ(0);
	transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 2;
}

/* Standard-Hover-Verhalten: Overlay fährt bei Hover herein */
.brxe-tile-grid .tg-card:hover .tg-card-overlay {
	transform: translateY(0) translateZ(0);
}

/* ── Overlay-Zustands-Modifier ───────────────────────────────────────────── */

/* .tile-grid--overlay-hover: explizit gesetzter Standard-Modifier, kein
 * Extra-Code nötig – entspricht dem Default-Verhalten oben. Hier zur
 * Dokumentation und für JS-Targeting aufgeführt. */

/* .tile-grid--overlay-static: Overlay dauerhaft sichtbar, kein Hover nötig */
.brxe-tile-grid.tile-grid--overlay-static .tg-card-overlay {
	transform: translateY(0) translateZ(0);
}

/* Hover-Anhebung der Karte im static-Modus trotzdem erhalten */
.brxe-tile-grid.tile-grid--overlay-static .tg-card:hover .tg-card-overlay {
	transform: translateY(0) translateZ(0);
}

/* .tile-grid--overlay-hidden: Overlay wird grundsätzlich nie angezeigt */
.brxe-tile-grid.tile-grid--overlay-hidden .tg-card-overlay {
	display: none;
}

/* ── Typografie ──────────────────────────────────────────────────────────── */
.brxe-tile-grid .tg-card-title {
	font-size: var(--tg-title-size);
	font-weight: var(--tg-title-weight);
	color: #1b2321;
	line-height: 150%;
	margin-bottom: 10px;
}

.brxe-tile-grid .tg-card-desc {
	font-size: var(--tg-desc-size);
	font-weight: var(--tg-desc-weight);
	color: #1b2321;
}

/* ── Toggle-Panel (via JS injiziert) ─────────────────────────────────────── */

/* Container: absolut oben rechts im Grid positioniert.
 * Setzt position: relative am .brxe-tile-grid voraus (bereits gesetzt). */
.tile-grid-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 6px;
	align-items: center;
	z-index: 10;
}

/* Einzelne Toggle-Buttons */
.tile-grid-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	border: 1.5px solid #d0d0d0;
	border-radius: 6px;
	background-color: #ffffff;
	color: #1b2321;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

/* Hover-Zustand: dezent Brand-Grün andeuten */
.tile-grid-toggle__btn:hover {
	border-color: #036048;
	color: #036048;
	background-color: #f0f7f5;
}

/* Aktiver Zustand (aria-pressed="true"): Brand-Grün als Hintergrund */
.tile-grid-toggle__btn[aria-pressed="true"] {
	background-color: #036048;
	border-color: #036048;
	color: #ffffff;
}

/* Aktiver Button beim Hover: leicht aufgehellt, aber grün bleiben */
.tile-grid-toggle__btn[aria-pressed="true"]:hover {
	background-color: #024d38;
	border-color: #024d38;
	color: #ffffff;
}

.tile-grid-toggle__btn:focus-visible {
	outline: 2px solid #036048;
	outline-offset: 2px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.brxe-tile-grid .tg-card-overlay {
		padding: 24px 16px 20px;
	}
	.brxe-tile-grid .tg-card-title {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.brxe-tile-grid .tg-card-desc {
		font-size: 14px;
	}
}