/*
 * SmartEdu Core — sekcie rýchleho prehľadu: farebné karty, riadky so štítkom,
 * rámček, odrážky a obrázok. Premenné farieb a písma sú v prehlad.css, úpravy
 * pre úzke obrazovky, tlač a slidy sa načítajú po tomto súbore.
 */

/* Farebné karty — vedľa seba bez medzier ako vo vzore. */
.se-prehlad-karty {
	display: grid;
	grid-template-columns: repeat( var( --se-ph-stlpce, 3 ), minmax( 0, 1fr ) );
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.se-prehlad-karta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	align-items: center;
	padding: 0.85rem 0.75rem 1rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	text-align: center;
}

.se-prehlad-karta-znak {
	margin-bottom: 0.15rem;
	color: var( --se-ph-nadpis );
	font-size: 2.15rem;
	font-weight: 700;
	line-height: 1.05;
}

.se-prehlad-farba--peach {
	--se-ph-karta: var( --wp--preset--color--prehlad-peach, #f6e9df );
	--se-ph-riadok: var( --wp--preset--color--prehlad-peach-svetla, #fff3e0 );
}

.se-prehlad-farba--modra {
	--se-ph-karta: var( --wp--preset--color--prehlad-modra, #ddeff7 );
	--se-ph-riadok: var( --wp--preset--color--prehlad-modra-svetla, #e8f3fa );
}

.se-prehlad-farba--zelena {
	--se-ph-karta: var( --wp--preset--color--prehlad-zelena, #edf3d3 );
	--se-ph-riadok: var( --wp--preset--color--prehlad-zelena-svetla, #eaf5f0 );
}

.se-prehlad-farba--siva {
	--se-ph-karta: var( --wp--preset--color--prehlad-siva, #e7ebef );
	--se-ph-riadok: var( --wp--preset--color--prehlad-siva-svetla, #f1f4f6 );
}

.se-prehlad-karta {
	background: var( --se-ph-karta );
}

/* Definičné riadky: tmavý štítok vľavo, vysvetlenie vpravo. */
.se-prehlad-riadky {
	display: grid;
	gap: 1rem;
	margin: 0.9rem 0 0;
}

.se-prehlad-riadok {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	min-height: 3.6rem;
}

.se-prehlad-riadok dt,
.se-prehlad-riadok dd {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.6rem 0.9rem;
}

.se-prehlad-riadok dt {
	background: var( --se-ph-akcent );
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.se-prehlad-riadok dd {
	background: var( --se-ph-riadok );
}

/* Zvýraznený rámček — výstraha, informácia alebo tip. */
.se-prehlad-ramcek {
	margin: 0.9rem 0 0;
	padding: 0.75rem 1rem 1rem;
	background: var( --se-ph-vystraha-podklad );
	color: var( --se-ph-text );
}

.se-prehlad-ramcek-stitok {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	margin: 0 0 0.4rem;
	color: var( --se-ph-vystraha );
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}

.se-prehlad-ramcek--info {
	background: var( --se-ph-info-podklad );
}

.se-prehlad-ramcek--info .se-prehlad-ramcek-stitok {
	color: var( --se-ph-akcent-text );
}

.se-prehlad-ramcek--tip {
	background: var( --se-ph-tip-podklad );
}

.se-prehlad-ramcek--tip .se-prehlad-ramcek-stitok {
	color: var( --se-ph-tip );
}

/* Odrážky: guľôčka na okraji textu, text odsadený ako vo vzore. */
.se-prehlad-zoznam {
	margin: 0.3rem 0 0;
	padding: 0;
	list-style: none;
}

.se-prehlad-zoznam li {
	position: relative;
	margin: 0.2rem 0 0;
	padding-left: 1.9em;
}

.se-prehlad-zoznam li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0.1em;
	width: 0.34em;
	height: 0.34em;
	border-radius: 50%;
	background: currentColor;
}

.se-prehlad-obrazok {
	margin: 0.9rem 0 0;
}

.se-prehlad-obrazok-img {
	display: block;
	max-width: 70%;
	height: auto;
	margin: 0 auto;
}

.se-prehlad-obrazok figcaption {
	margin-top: 0.45rem;
	color: var( --se-ph-jemny );
	font-size: 0.9375rem;
	text-align: center;
}