/* ==========================================================================
   Escape Academy Homeboxen – Karten-Galerie (Querformat)
   Bildgeführte Karten, ein einheitliches Dunkel-/Akzent-System.
   Ruhezustand: helles Bild + Titel. Hover: Bild abdunkeln + Infos einblenden.
   Akzent pro Karte über --ea-accent (Inline, Default = Gold).
   ========================================================================== */

.ea-boxes-grid {
	--ea-bg: #0d0a08;
	--ea-surface: #17120e;
	--ea-surface-2: #1f1812;
	--ea-gold: #d4963a;
	--ea-text: #f4ede2;
	--ea-text-muted: rgba(244, 237, 226, 0.7);
	--ea-text-dim: rgba(244, 237, 226, 0.32);
	--ea-teal: #6fd0d0;
	--ea-orange: #f4a060;
	--ea-accent: var(--ea-gold); /* pro Karte überschrieben */

	--ea-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */

	display: grid;
	grid-template-columns: repeat(var(--ea-cols, 3), minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Karte (Querformat)
   -------------------------------------------------------------------------- */

.ea-box-card {
	position: relative;
	overflow: hidden;
	background: var(--ea-surface);
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	isolation: isolate;
	/* getrennte Eigenschaften, damit Einblenden (translate) und Hover (scale)
	   sich nicht überschreiben */
	transition:
		scale 0.5s var(--ea-ease),
		box-shadow 0.5s var(--ea-ease),
		opacity 0.6s var(--ea-ease),
		translate 0.6s var(--ea-ease);
}

/* Karte wächst beim Hover leicht und hebt sich ab – ohne die anderen zu verschieben */
.ea-box-card:hover,
.ea-box-card:focus-within {
	scale: 1.04;
	z-index: 5;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);
}

/* Feine Akzentlinie oben, die beim Hover aufläuft */
.ea-box-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 4;
	background: var(--ea-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ea-ease);
}
.ea-box-card:hover::before,
.ea-box-card:focus-within::before {
	transform: scaleX(1);
}

/* Dunkel-Schleier: nur beim Hover, macht den Text lesbar */
.ea-box-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(10, 8, 6, 0.62);
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}
.ea-box-card:hover::after,
.ea-box-card:focus-within::after {
	opacity: 1;
}

/* Bildebene */
.ea-box-media {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	transform: scale(1.02); /* minimal, vermeidet Kanten beim Zoom */
	transition: transform 0.7s var(--ea-ease), filter 0.5s ease;
}
/* Ruhezustand: Bild hell zeigen (Showcase) */
.ea-box-card.has-image .ea-box-media {
	filter: saturate(1.05);
}
.ea-box-card:hover .ea-box-media,
.ea-box-card:focus-within .ea-box-media {
	transform: scale(1.06);
}

/* Fallback ohne Bild: Akzent-Glow + Geister-Nummer + Schloss */
.ea-box-card.no-image .ea-box-media {
	background:
		radial-gradient(120% 90% at 50% 22%, color-mix(in srgb, var(--ea-accent) 24%, transparent), transparent 62%),
		var(--ea-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ea-box-ghost {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 900;
	font-size: clamp(64px, 9vw, 120px);
	line-height: 1;
	color: color-mix(in srgb, var(--ea-accent) 20%, transparent);
	user-select: none;
}
.ea-box-lock {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	color: color-mix(in srgb, var(--ea-accent) 60%, transparent);
}

/* Lesbarkeits-Scrim für den Titel im Ruhezustand (nur unten) */
.ea-box-scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		to top,
		rgba(13, 10, 8, 0.85) 0%,
		rgba(13, 10, 8, 0.35) 28%,
		transparent 58%
	);
}

/* --------------------------------------------------------------------------
   Badges & Nummer
   -------------------------------------------------------------------------- */

.ea-box-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	font-family: var(--ea-tag-font, "Outfit", system-ui, sans-serif);
	font-size: var(--ea-tag-size, 9px);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid;
	border-radius: 3px;
	backdrop-filter: blur(2px);
	transition: opacity 0.3s ease;
}
.ea-box-tag.kids  { color: var(--ea-tag-color, var(--ea-orange)); border-color: rgba(244, 160, 96, 0.55); background: rgba(28, 16, 6, 0.62); }
.ea-box-tag.adult { color: var(--ea-tag-color, var(--ea-teal));   border-color: rgba(111, 208, 208, 0.55); background: rgba(6, 22, 24, 0.62); }
/* Altersfeld beim Hover/Fokus ausblenden – wie die Überschrift */
.ea-box-card:hover .ea-box-tag,
.ea-box-card:focus-within .ea-box-tag {
	opacity: 0;
	pointer-events: none;
}

.ea-box-number {
	position: absolute;
	top: 16px;
	right: 18px;
	z-index: 3;
	font-family: var(--ea-number-font, "Playfair Display", Georgia, serif);
	font-size: var(--ea-number-size, 13px);
	font-weight: 700;
	color: var(--ea-number-color, var(--ea-text));
	opacity: 0.7;
	letter-spacing: 0.08em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Inhaltsblock
   -------------------------------------------------------------------------- */

.ea-box-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	padding: 24px 26px 26px; /* unten = links (26px) */
}

.ea-box-name {
	font-family: var(--ea-title-font, "Playfair Display", Georgia, serif);
	font-size: var(--ea-title-size, clamp(19px, 1.5vw, 23px));
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
	max-height: 7em;
	overflow: hidden;
	text-wrap: balance;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	transition: color 0.25s ease, max-height 0.4s var(--ea-ease), opacity 0.3s ease;
}
/* Überschrift beim Hover/Fokus ausblenden – Details rücken nach unten */
.ea-box-card:hover .ea-box-name,
.ea-box-card:focus-within .ea-box-name {
	max-height: 0;
	opacity: 0;
	margin: 0;
}
.ea-box-name a {
	color: var(--ea-title-color, var(--ea-text));
	text-decoration: none;
	transition: color 0.25s ease;
}
.ea-box-card:hover .ea-box-name a,
.ea-box-card:focus-within .ea-box-name a {
	color: var(--ea-accent);
}

/* Details: erst beim Hover/Fokus ausgefahren */
.ea-box-reveal {
	box-sizing: border-box;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.5s var(--ea-ease), opacity 0.4s ease;
}
.ea-box-card:hover .ea-box-reveal,
.ea-box-card:focus-within .ea-box-reveal {
	max-height: 460px;
	opacity: 1;
	padding-top: 14px;
}

/* Meta-Zeile: Schwierigkeit + Spieldauer */
.ea-box-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-bottom: 12px;
}
.ea-box-meta .ea-box-level { margin: 0; }

.ea-box-duration {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--ea-duration-font, "Outfit", system-ui, sans-serif);
	font-size: var(--ea-duration-size, 12px);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--ea-duration-color, var(--ea-text-muted));
}
.ea-box-clock {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--ea-accent);
}

.ea-box-desc {
	font-family: var(--ea-desc-font, "Outfit", system-ui, sans-serif);
	font-size: var(--ea-desc-size, 13px);
	font-weight: 300;
	line-height: 1.55;
	color: var(--ea-desc-color, var(--ea-text));
	margin: 0;
}

.ea-box-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	margin-bottom: 0;
	font-family: var(--ea-cta-font, "Outfit", system-ui, sans-serif);
	font-size: var(--ea-cta-size, 11px);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ea-cta-color, var(--ea-accent));
	text-decoration: none;
}
.ea-box-cta::after {
	content: "→";
	transition: transform 0.3s var(--ea-ease);
}
.ea-box-cta:hover::after { transform: translateX(4px); }

/* Sichtbarer Tastatur-Fokus */
.ea-box-name a:focus-visible,
.ea-box-cta:focus-visible {
	outline: 2px solid var(--ea-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Schwierigkeits-Pips
   -------------------------------------------------------------------------- */

.ea-box-level {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ea-level-label {
	font-family: var(--ea-label-font, "Outfit", system-ui, sans-serif);
	font-size: var(--ea-label-size, 9px);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ea-label-color, var(--ea-text-muted));
}
.ea-level-pips { display: flex; gap: 3px; }
.ea-pip {
	width: 16px;
	height: 3px;
	border-radius: 1px;
	background: rgba(244, 237, 226, 0.22);
}
.ea-pip.active { background: var(--ea-accent); }
/* halbe Stufe: linke Hälfte im Akzent, rechte Hälfte inaktiv */
.ea-pip.half {
	background: linear-gradient(to right, var(--ea-accent) 50%, rgba(244, 237, 226, 0.22) 50%);
}

/* --------------------------------------------------------------------------
   Standalone-Skala ([ea_homebox_level]) – funktioniert auch außerhalb der
   Karte und passt sich an helle wie dunkle Hintergründe an (currentColor).
   -------------------------------------------------------------------------- */

.ea-level-standalone {
	--ea-accent: #d4963a;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: "Outfit", system-ui, sans-serif;
}
.ea-level-standalone .ea-level-label {
	color: var(--ea-level-color, currentColor);
	font-family: var(--ea-level-font, "Outfit", system-ui, sans-serif);
	font-size: var(--ea-level-size, 9px);
	opacity: 0.85;
}
.ea-level-standalone .ea-pip { background: var(--ea-level-pip-empty-color, color-mix(in srgb, currentColor 22%, transparent)); }
.ea-level-standalone .ea-pip.active { background: var(--ea-level-pip-color, var(--ea-accent)); }
.ea-level-standalone .ea-pip.half {
	background: linear-gradient(to right, var(--ea-level-pip-color, var(--ea-accent)) 50%, var(--ea-level-pip-empty-color, color-mix(in srgb, currentColor 22%, transparent)) 50%);
}
@supports not (background: color-mix(in srgb, red, blue)) {
	.ea-level-standalone .ea-pip { background: var(--ea-level-pip-empty-color, rgba(128, 128, 128, 0.35)); }
	.ea-level-standalone .ea-pip.half { background: linear-gradient(to right, var(--ea-level-pip-color, var(--ea-accent)) 50%, var(--ea-level-pip-empty-color, rgba(128, 128, 128, 0.35)) 50%); }
}

/* --------------------------------------------------------------------------
   Scroll-Reveal (verstärkt einen bereits sichtbaren Default)
   Inhalt ist ohne JS sichtbar; die Animation greift nur, wenn JS .ea-js setzt.
   Nutzt translate (nicht transform), damit der Hover-scale unangetastet bleibt.
   -------------------------------------------------------------------------- */

.ea-boxes-grid.ea-js .ea-box-card {
	opacity: 0;
	translate: 0 22px;
}
.ea-boxes-grid.ea-js.ea-visible .ea-box-card {
	opacity: 1;
	translate: 0 0;
}
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(1) { transition-delay: 0.04s; }
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(2) { transition-delay: 0.11s; }
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(3) { transition-delay: 0.18s; }
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(4) { transition-delay: 0.25s; }
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(5) { transition-delay: 0.32s; }
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(6) { transition-delay: 0.39s; }
.ea-boxes-grid.ea-js.ea-visible .ea-box-card:nth-child(n+7) { transition-delay: 0.44s; }

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

@media (max-width: 1024px) {
	.ea-boxes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ea-boxes-grid { grid-template-columns: minmax(0, 1fr); }
	/* Gestapelt: Bild oben, Info-Panel darunter (kein Overlay, keine Überlappung) */
	.ea-box-card {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}
	.ea-box-media {
		position: relative;
		inset: auto;
		height: 190px;
		flex: none;
		transform: none;
	}
	.ea-box-scrim,
	.ea-box-card::after { display: none; }
	.ea-box-content {
		position: relative;
		background: var(--ea-surface);
		padding: 18px 20px 22px;
	}
	.ea-box-card::before { transform: scaleX(1); }
	.ea-box-reveal { max-height: none; opacity: 1; padding-top: 12px; }
	.ea-box-desc { -webkit-line-clamp: initial; line-clamp: initial; }
}

/* --------------------------------------------------------------------------
   Reduzierte Bewegung – Animationen aus, Hover bleibt (nur ohne Übergang)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ea-boxes-grid *,
	.ea-box-card::before,
	.ea-box-card::after { transition: none !important; }
	.ea-boxes-grid.ea-js .ea-box-card { opacity: 1; translate: 0 0; }
	.ea-box-media { transform: none !important; }
}