/*
 * MemTCG Agenda - Frontend Styles v2.3.0
 * ---------------------------------------
 * Design-taal: hero-event (game-glow, datum-blok, countdown, zwevende
 * kaarten) + dunne donkere rijen met hover-reveal beschrijving en
 * prijs-chip. Maand-groepen op de volledige agenda-pagina.
 * Knoppen (.mta-wa) en prijs-logica (gratis = groen) uit v1 behouden.
 * Kleur: accent-blauw is overal de hoofdkleur, games hebben geen eigen
 * kleur. In de hero dwarrelen kleine kaartjes door de rechterhelft
 * (de kaartenregen) in drie diepte-lagen.
 */

.mta-section {
	padding: 60px 0;
	color: #FFF;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.mta-section *,
.mta-section *::before,
.mta-section *::after {
	box-sizing: border-box;
}

/* Iets specifieker dan strikt nodig, als milde verdediging tegen
   losse pagina-regels op .mta-container. */
.mta-section .mta-container {
	max-width: 1192px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Vangnet tegen wpautop: lege of kale paragrafen die een editor-widget
   in onze markup injecteert mogen geen ruimte innemen. De PHP strip al
   alle newlines zodat wpautop niets te converteren heeft; dit is de
   tweede verdedigingslinie. */
.mta-section p:empty {
	display: none;
	margin: 0;
}
.mta-datebar > p,
.mta-hero > p:not([class]),
.mta-row-body > p:not([class]) {
	margin: 0;
	line-height: inherit;
}

/* Mobiel-only onderdelen: op desktop uit. Onder 768px nemen ze het
   over van de hero-behandeling en de rij-datumkolom. */
.mta-datebar,
.mta-mobile-meta,
.mta-link--bottom {
	display: none;
}

/* ---------- Sectiekop ---------- */

.mta-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 20px;
	gap: 16px;
}
.mta-eyebrow {
	display: block;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #2596BE;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.mta-title {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #FFF;
	margin: 0;
	line-height: 1.15;
}
.mta-link {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #74B6D2;
	text-decoration: none;
	padding: 8px 16px;
	border: 1px solid rgba(116, 182, 210, 0.4);
	border-radius: 50px;
	white-space: nowrap;
	letter-spacing: 0.3px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mta-link:hover,
.mta-link:focus {
	background: rgba(37, 150, 190, 0.15);
	color: #FFF;
	border-color: rgba(116, 182, 210, 0.7);
}

.mta-empty {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	color: rgba(255, 255, 255, 0.55);
	padding: 24px 0;
	text-align: center;
	margin: 0;
}

/* Vangnet: lege <p> die wpautop rond de shortcode-output injecteert */
.mta-head-left > p:empty {
	display: none;
	margin: 0;
}

/* ---------- Hero event ---------- */

.mta-hero {
	position: relative;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	padding: 40px 44px;
	display: flex;
	align-items: center;
	gap: 32px;
	background:
		radial-gradient(ellipse 55% 95% at 88% 20%, rgba(37, 150, 190, 0.13) 0%, transparent 72%),
		linear-gradient(135deg, #151515 0%, #0e0e0e 55%, #121212 100%);
}

/* ---------- Kaartenregen ----------
   Kleine kaartjes dwarrelen door de rechterhelft van de hero. Drie
   diepte-lagen geven perspectief: laag 1 groot en helder, laag 3 klein
   en vaag. Elk kaartje krijgt een eigen duur, vertraging en draaiing,
   zodat het patroon niet zichtbaar herhaalt. Alleen transform en
   opacity, dus geen layout-werk tijdens het animeren. */

.mta-hero-rain {
	position: absolute;
	inset: 0;
	left: 45%;
	pointer-events: none;
	z-index: 1;
	mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.mta-rain-card {
	position: absolute;
	top: -60px;
	aspect-ratio: 3 / 4.2;
	border-radius: 5px;
	border: 1px solid rgba(116, 182, 210, 0.35);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(37, 150, 190, 0.08) 100%);
	box-shadow: 0 0 14px rgba(37, 150, 190, 0.10);
	animation: mta-rain-fall linear infinite;
}

@keyframes mta-rain-fall {
	0%   { transform: translateY(-70px) rotate(var(--mta-r0, -8deg)); }
	100% { transform: translateY(320px) rotate(var(--mta-r1, 10deg)); }
}

.mta-rain-card--l1 { width: 34px; opacity: 0.55; }
.mta-rain-card--l2 { width: 24px; opacity: 0.32; }
.mta-rain-card--l3 { width: 16px; opacity: 0.18; }

.mta-rain-card:nth-child(1)  { left: 6%;  --mta-r0: -14deg; --mta-r1: 9deg;   animation-duration: 13s; animation-delay: -4s; }
.mta-rain-card:nth-child(2)  { left: 18%; --mta-r0: 6deg;   --mta-r1: -12deg; animation-duration: 17s; animation-delay: -11s; }
.mta-rain-card:nth-child(3)  { left: 30%; --mta-r0: -4deg;  --mta-r1: 14deg;  animation-duration: 12s; animation-delay: -7s; }
.mta-rain-card:nth-child(4)  { left: 42%; --mta-r0: 12deg;  --mta-r1: -6deg;  animation-duration: 18s; animation-delay: -2s; }
.mta-rain-card:nth-child(5)  { left: 54%; --mta-r0: -9deg;  --mta-r1: 11deg;  animation-duration: 14s; animation-delay: -9s; }
.mta-rain-card:nth-child(6)  { left: 66%; --mta-r0: 5deg;   --mta-r1: -13deg; animation-duration: 16s; animation-delay: -13s; }
.mta-rain-card:nth-child(7)  { left: 76%; --mta-r0: -11deg; --mta-r1: 7deg;   animation-duration: 13s; animation-delay: -5s; }
.mta-rain-card:nth-child(8)  { left: 86%; --mta-r0: 8deg;   --mta-r1: -9deg;  animation-duration: 19s; animation-delay: -15s; }
.mta-rain-card:nth-child(9)  { left: 12%; --mta-r0: -6deg;  --mta-r1: 12deg;  animation-duration: 21s; animation-delay: -8s; }
.mta-rain-card:nth-child(10) { left: 48%; --mta-r0: 10deg;  --mta-r1: -8deg;  animation-duration: 22s; animation-delay: -17s; }
.mta-rain-card:nth-child(11) { left: 72%; --mta-r0: -13deg; --mta-r1: 6deg;   animation-duration: 20s; animation-delay: -3s; }
.mta-rain-card:nth-child(12) { left: 92%; --mta-r0: 7deg;   --mta-r1: -11deg; animation-duration: 23s; animation-delay: -12s; }

/* Statische fallback: minder kaartjes, geen beweging */
@media (prefers-reduced-motion: reduce) {
	.mta-rain-card {
		animation: none;
		transform: translateY(120px) rotate(var(--mta-r1, 8deg));
	}
	.mta-rain-card:nth-child(n+7) {
		display: none;
	}
}

/* Datum-blok */
.mta-hero-date {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	width: 96px;
	text-align: center;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	padding: 16px 10px 14px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.mta-day {
	display: block;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: #FFF;
	letter-spacing: -0.5px;
}
.mta-month {
	display: block;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #74B6D2;
	margin-top: 5px;
}
.mta-wkday {
	display: block;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 3px;
}

/* Hero body */
.mta-hero-body {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 2;
}
.mta-hero-toprow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.mta-hero-tag {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #74B6D2;
	border: 1px solid rgba(116, 182, 210, 0.45);
	border-radius: 4px;
	padding: 4px 8px;
}
.mta-hero-countdown {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #FFF;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50px;
	padding: 4px 12px;
}
.mta-hero-title {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #FFF;
	line-height: 1.25;
	margin: 0 0 8px;
}
.mta-hero-meta {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 8px;
}
.mta-hero-meta strong {
	color: rgba(255, 255, 255, 0.78);
	font-weight: 500;
}
.mta-hero-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	line-height: 1.55;
	margin: 0 0 16px;
	max-width: 640px;
}
.mta-hero-ctarow {
	display: flex;
	align-items: center;
	gap: 14px;
}
.mta-hero-price {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}
.mta-hero-price--free {
	color: #6BC76D;
}

/* ---------- Knoppen: v1 stijlen ---------- */

.mta-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(74, 222, 128, 0.05);
	color: #4ADE80;
	border: 1px solid rgba(74, 222, 128, 0.4);
	border-radius: 6px;
	padding: 10px 18px;
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mta-wa:hover,
.mta-wa:focus {
	background: rgba(74, 222, 128, 0.12);
	border-color: rgba(74, 222, 128, 0.7);
	color: #4ADE80;
	transform: translateY(-1px);
	text-decoration: none;
}
.mta-wa--full {
	background: rgba(245, 134, 133, 0.05);
	color: #F58685;
	border-color: rgba(245, 134, 133, 0.4);
	cursor: not-allowed;
}
.mta-wa--full:hover,
.mta-wa--full:focus {
	background: rgba(245, 134, 133, 0.05);
	border-color: rgba(245, 134, 133, 0.4);
	color: #F58685;
	transform: none;
}
.mta-wa--sm {
	padding: 8px 16px;
}

/* ---------- Prijs-chip ---------- */

.mta-price {
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.85);
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
}
.mta-price--free {
	color: #6BC76D;
	background: rgba(107, 199, 109, 0.08);
}

/* ---------- Maand-groepen (volledige pagina) ---------- */

.mta-month-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 48px 0 14px;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #74B6D2;
}
.mta-month-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
}
.mta-month-count {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: none;
	color: rgba(255, 255, 255, 0.40);
}

/* ---------- Dunne rijen ---------- */

.mta-rows {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.mta-section--full .mta-rows {
	margin-top: 0;
}

.mta-row {
	display: flex;
	align-items: center;
	gap: 18px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 14px 18px;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
	.mta-row:hover {
		border-color: rgba(37, 150, 190, 0.5);
		background: rgba(37, 150, 190, 0.04);
	}
}

.mta-row-date {
	width: 52px;
	text-align: center;
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	flex-shrink: 0;
}
.mta-row-day {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #FFF;
	line-height: 1;
}
.mta-row-month {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #74B6D2;
	margin-top: 3px;
}

.mta-row-body {
	flex: 1;
	min-width: 0;
}
.mta-row-game {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #74B6D2;
}
.mta-row-title {
	font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #FFF;
	margin: 2px 0 0;
	line-height: 1.35;
}
.mta-row-meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 2px;
}

/* Hover-reveal beschrijving: desktop dicht, klapt open op hover.
   Op touch staat de beschrijving altijd open. */
.mta-row-desc {
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
	max-width: 72ch;
}
@media (hover: hover) and (pointer: fine) {
	.mta-row-desc {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
	}
	.mta-row:hover .mta-row-desc {
		max-height: 300px;
		opacity: 1;
		margin-top: 5px;
	}
}
@media (hover: none) {
	.mta-row-desc {
		margin-top: 5px;
	}
}

.mta-row-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* ---------- Volledige pagina: header-glow ---------- */

.mta-section--full {
	overflow-x: clip;
}
.mta-section--full .mta-container {
	position: relative;
}
.mta-section--full .mta-container::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	left: 50%;
	top: -12px;
	transform: translateX(-50%);
	width: min(1100px, 132%);
	height: 620px;
	background: radial-gradient(ellipse 55% 48% at 50% 0%,
		rgba(37, 150, 190, 0.4) 0%,
		rgba(116, 182, 210, 0.18) 30%,
		transparent 72%);
	filter: blur(48px);
	opacity: 0.55;
	animation: mta-glow-drift 16s ease-in-out infinite alternate;
}
.mta-section--full .mta-container > * {
	position: relative;
	z-index: 1;
}
@keyframes mta-glow-drift {
	0%   { transform: translateX(-54%) scale(1);    opacity: 0.5; }
	100% { transform: translateX(-46%) scale(1.08); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
	.mta-section--full .mta-container::before {
		animation: none;
	}
}

/* ============================================================
   MOBIEL (<= 768px)
   Geen hero-behandeling: elk event is dezelfde kaart met een
   datumregel bovenaan (dag, maand, weekdag links, prijs rechts),
   daaronder game, tijd en locatie, titel, beschrijving en een
   knop over de volle breedte. Game-kleuren staan uit; alles volgt
   het accent-blauw, met een blauwe glow rechtsboven in de kaart.
   ============================================================ */

@media (max-width: 768px) {

	.mta-section {
		padding: 40px 0;
	}
	.mta-section .mta-container {
		padding: 0 16px;
	}
	.mta-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 18px;
	}
	.mta-title {
		font-size: 23px;
	}

	/* Alle evenementen: op mobiel als laatste knop van de sectie */
	.mta-link--top {
		display: none;
	}
	.mta-link--bottom {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 6px;
		padding: 13px 18px;
	}

	/* ---------- Gedeelde kaart ---------- */

	.mta-hero,
	.mta-row {
		display: block;
		background:
			radial-gradient(ellipse 70% 60% at 88% 0%, rgba(37, 150, 190, 0.13) 0%, transparent 72%),
			rgba(255, 255, 255, 0.025);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
		padding: 18px;
		margin-bottom: 12px;
	}

	.mta-rows {
		margin-top: 12px;
		gap: 0;
	}
	.mta-section--full .mta-rows {
		margin-top: 0;
	}

	/* Desktop-onderdelen die op mobiel vervallen */
	.mta-hero-rain,
	.mta-hero-date,
	.mta-hero-toprow,
	.mta-hero-meta,
	.mta-row-date,
	.mta-row-game,
	.mta-row-meta {
		display: none;
	}

	/* ---------- Datumregel ---------- */

	.mta-datebar {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding-bottom: 13px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		margin-bottom: 13px;
	}
	.mta-datebar-left {
		display: flex;
		align-items: baseline;
		gap: 9px;
		font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	}
	.mta-datebar-day {
		font-size: 27px;
		font-weight: 800;
		line-height: 1;
		color: #FFF;
		letter-spacing: -0.5px;
	}
	.mta-datebar-month {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1.6px;
		text-transform: uppercase;
		color: #2596BE;
	}
	.mta-datebar-wkday {
		font-size: 9.5px;
		font-weight: 600;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.45);
	}
	.mta-datebar-price {
		font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
		font-size: 13px;
		font-weight: 700;
		color: #FFF;
		background: rgba(255, 255, 255, 0.06);
		border-radius: 4px;
		padding: 4px 10px;
		white-space: nowrap;
	}
	.mta-datebar-price--free {
		color: #6BC76D;
		background: rgba(107, 199, 109, 0.08);
	}

	/* ---------- Meta-regel ---------- */

	.mta-mobile-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
		margin-bottom: 7px;
		font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 1.3px;
		text-transform: uppercase;
	}
	.mta-mobile-game {
		color: #2596BE;
	}
	.mta-mobile-info {
		color: rgba(255, 255, 255, 0.5);
		font-weight: 600;
	}
	.mta-mobile-info::before {
		content: "\00b7";
		color: rgba(255, 255, 255, 0.22);
		font-weight: 400;
		margin-right: 8px;
		display: inline-block;
	}

	/* Rijen hebben geen eigen mobiele meta-regel: hun bestaande
	   game- en meta-elementen worden hier hergebruikt in dezelfde vorm. */
	.mta-row-body > .mta-row-game,
	.mta-row-body > .mta-row-meta {
		display: none;
	}

	/* ---------- Titel, beschrijving, knop ---------- */

	.mta-hero-body,
	.mta-row-body {
		display: block;
		min-width: 0;
	}

	.mta-hero-title,
	.mta-row-title {
		font-size: 17px;
		font-weight: 700;
		line-height: 1.3;
		margin: 0 0 7px;
	}

	.mta-hero-desc,
	.mta-row-desc {
		font-size: 13.5px;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.72);
		margin: 0 0 15px;
		max-width: none;
		max-height: none;
		opacity: 1;
		overflow: visible;
	}

	.mta-hero-ctarow,
	.mta-row-right {
		display: block;
		width: 100%;
	}

	/* Prijs staat al rechtsboven in de datumregel */
	.mta-hero-price,
	.mta-row-right .mta-price {
		display: none;
	}

	.mta-wa,
	.mta-wa--sm {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 12px 18px;
	}
}