/******************************************************************
Szülői Kisokos – az „Óvodás leszek” modulválasztó stílusa

Csak a page-ovodas-leszek.php sablonon töltődik be (library/kisokos.php),
ezért a :root itt nem szivárog át más oldalakra.

Formanyelv: a TudásPonttal egy család – lekerekített felületek, halk keretek,
finom árnyék. A csempe hangsúlya a borítóillusztráció, alatta a cím és egy
rövid leírás. Kártyánként egyetlen művelet van: a modul megnyitása.
******************************************************************/

:root {
	--kk-zold: #a5c711;
	--kk-zold-sotet: #617603;
	--kk-zold-sotetebb: #4e5f02;
	--kk-felulet: #ffffff;
	--kk-alap: #f7f8f5;
	--kk-vonal: #e6e8e1;
	--kk-szoveg: #32332e;
	--kk-halvany: #6d7268;
	--kk-ker: 14px;
	--kk-arnyek: 0 1px 2px rgba(24, 28, 20, 0.04), 0 1px 3px rgba(24, 28, 20, 0.07);
	--kk-arnyek-emelt: 0 10px 28px rgba(24, 28, 20, 0.10), 0 2px 6px rgba(24, 28, 20, 0.05);
}

/* Csak képernyőolvasónak. A gomb felirata rövid („Modul megnyitása”), a
   kiegészítés mondja meg, melyik modulról van szó és hogy új lap nyílik. */
.kisokos-rejtett {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Oldalfejléc ---------- */

/* A téma header.section-title h5 szabálya valódi <h5>-re illeszkedik,
   a <h1 class="h5"> nem kapja meg – itt pótoljuk. */
.section-title.kisokos-head h1 {
	color: #555653;
}

.section-title.kisokos-head .img-container {
	width: 68px;
	height: 62px;
	flex: 0 0 auto;
}

.section-title.kisokos-head .img-container i {
	color: #fff;
	font-size: 26px;
}

/* ---------- Bevezető ---------- */

/* Nincs sorhossz-korlát: a bevezető a konténer teljes szélességét használja,
   ahogy a téma többi szövege is. Korláttal a sor jóval a doboz széle előtt
   tört meg, ami véletlenszerűnek látszott. */
.kisokos-bevezeto {
	margin-bottom: 2rem;
}

.kisokos-bevezeto__szoveg {
	margin-bottom: 0;
	color: var(--kk-szoveg);
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* ---------- Csemperács ---------- */

/* A sávszélesség úgy van belőve, hogy teljes szélességen négy csempe férjen
   egy sorba – ez a téma saját kártyarácsának ritmusa (col-xl-3). Keskenyebb
   ablakban magától kevesebb oszlopra vált. */
.kisokos-racs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
	gap: 28px;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.kisokos-csempe {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--kk-vonal);
	border-radius: var(--kk-ker);
	background: var(--kk-felulet);
	box-shadow: var(--kk-arnyek);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* A csempe egésze kattintható: a gomb ::after eleme kiterítve lefedi a
   kártyát. Így a hozzáférhetőségi fában továbbra is egyetlen hivatkozás van. */
.kisokos-csempe:hover,
.kisokos-csempe:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--kk-arnyek-emelt);
}

.kisokos-csempe--hamarosan:hover {
	transform: none;
	box-shadow: var(--kk-arnyek);
}

/* ---------- Borítókép ---------- */

/* A min-height tartalék: borítókép nélküli csempén (és olyan böngészőn, amely
   nem ismeri az aspect-ratio-t) a doboz így sem lapul nullára, tehát a
   sorszámjelölés nem csúszik rá a címre. */
.kisokos-csempe__kep {
	position: relative;
	min-height: 58px;
	aspect-ratio: 3 / 2;
	background: var(--kk-alap);
}

.kisokos-csempe__kep img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kisokos-csempe--hamarosan .kisokos-csempe__kep img {
	filter: grayscale(0.7);
	opacity: 0.75;
}

.kisokos-csempe__sorszam {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	border-radius: 8px;
	background: rgba(24, 28, 20, 0.72);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ---------- Csempetörzs ---------- */

.kisokos-csempe__torzs {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 20px 22px 22px;
}

.kisokos-csempe__cim {
	margin: 0;
	color: var(--kk-szoveg);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.kisokos-csempe__alcim {
	margin: 4px 0 0;
	color: var(--kk-halvany);
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.4;
}

.kisokos-csempe__leiras {
	margin: 12px 0 20px;
	color: var(--kk-szoveg);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* A gomb a törzs aljára kerül, hogy eltérő hosszúságú leírások mellett is
   egy vonalban legyenek a csempéken. */
.kisokos-csempe__gomb,
.kisokos-csempe__jelzes {
	display: inline-block;
	margin-top: auto;
	align-self: flex-start;
	padding: 11px 22px;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
}

/* Fehér szöveghez a téma világoszöldje csak ~2:1 – ezért a sötét zöld. */
.kisokos-csempe__gomb {
	background: var(--kk-zold-sotet);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.kisokos-csempe__gomb:hover,
.kisokos-csempe__gomb:focus {
	background: var(--kk-zold-sotetebb);
	color: #fff;
	text-decoration: none;
}

.kisokos-csempe__gomb::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.kisokos-csempe__gomb:focus-visible {
	outline: 3px solid var(--kk-zold-sotet);
	outline-offset: 2px;
}

.kisokos-csempe__jelzes {
	border: 1px dashed var(--kk-vonal);
	background: var(--kk-alap);
	color: var(--kk-halvany);
}

/* ---------- Gyengénlátó mód ----------

A téma partialsight.css-e a dekoratív képeket nem szürkíti, hanem elrejti
(display: none), hogy a szöveg vigye a hangsúlyt. A csempeborítók is
dekoratívak (alt=""), ezért ugyanígy kezeljük őket. A sorszámjelölés viszont
információ, az marad – kikerül a képdobozból a szöveg fölé. */

body.partialsight .kisokos-csempe__kep img {
	display: none !important;
}

body.partialsight .kisokos-csempe__kep {
	min-height: 0;
	aspect-ratio: auto;
	padding: 14px 22px 0;
	background: none;
}

body.partialsight .kisokos-csempe__sorszam {
	position: static;
	display: inline-block;
}

/* ---------- Kis képernyő ---------- */

@media (max-width: 575px) {
	.kisokos-racs {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.kisokos-csempe__torzs {
		padding: 18px 18px 20px;
	}
}