/**
 * Cinemore statok widget stílusa.
 * Szám + címke kártyák rácsa.
 */

.cinemore-statok {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* A színeket CSS-változók adják; a --{séma} módosítók (widget „Színséma"
   kontroll) csak ezeket írják át. Egyedi séma: inline style-ból jönnek. */
.cinemore-statok__kartya {
	--st-bg: #f4faf7;
	--st-keret: #e0efe7;
	--st-szam: #0a8f63;
	--st-cimke: #5a7067;
	background: var(--st-bg);
	border: 1px solid var(--st-keret);
	border-radius: 16px;
	padding: 18px;
}

.cinemore-statok__szam {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--st-szam);
	line-height: 1;
}

.cinemore-statok__cimke {
	font-size: 13px;
	color: var(--st-cimke);
	font-weight: 600;
	margin-top: 8px;
	line-height: 1.35;
}

/* === Színsémák === */
.cinemore-statok__kartya--zold {
	--st-bg: #0a8f63;
	--st-keret: transparent;
	--st-szam: #fff;
	--st-cimke: #cdefe1;
}

.cinemore-statok__kartya--pink {
	--st-bg: #b0568a;
	--st-keret: transparent;
	--st-szam: #fff;
	--st-cimke: #f3d9e8;
}

.cinemore-statok__kartya--zold-vilagos {
	--st-bg: #e7f6ef;
	--st-keret: transparent;
	--st-szam: #0a8f63;
	--st-cimke: #2c4239;
}

.cinemore-statok__kartya--pink-vilagos {
	--st-bg: #f9f0f6;
	--st-keret: transparent;
	--st-szam: #b0568a;
	--st-cimke: #7a4463;
}

.cinemore-statok__kartya--sotet {
	--st-bg: #07130e;
	--st-keret: transparent;
	--st-szam: #fff;
	--st-cimke: #8fb0a6;
}

/* Egyedi: a --st-bg / --st-szam / --st-cimke inline style-ból jön (a widget
   a háttér fényessége alapján számolja a szövegszíneket). */
.cinemore-statok__kartya--egyedi {
	--st-keret: transparent;
}

/* Felső színes csík (opcionális, a widget „Felső színes csík" kontrollja). */
.cinemore-statok__kartya--csik-zold {
	border-top: 4px solid #14c98d;
}

.cinemore-statok__kartya--csik-pink {
	border-top: 4px solid #b0568a;
}

/* Oszlopyszám: desktopon az Elementor widget responsive „Oszlopok" kontrollja
   állítja (alap 3 — a kontroll CSS-e mentéskor generálódik). A lentebbi
   media szabályok fallback-ként szolgálnak, amíg az oldal nincs újramentve /
   ha a kontroll nincs beállítva. Specifikusság szándékos: a 767px-es szabály
   sima osztály (az Elementor (0,2,0)-s mobil szabálya felülírja), a 480px-es
   hármas lánc viszont MINDEN felett győz. */
@media (max-width: 767px) {
	.cinemore-statok {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.cinemore-statok.cinemore-statok.cinemore-statok {
		grid-template-columns: 1fr;
	}
}