/*
 * SmartEdu Core — rýchly učiteľský prehľad na webe.
 *
 * Vzhľad podľa vzorového PDF „Rýchly učiteľský prehľad“: nadpisy Calibri,
 * text Times New Roman, tmavomodrý názov, tyrkysové nadpisy sekcií a koralový
 * podnadpis. Písma sú systémové (nič sa nesťahuje) s metricky zhodnými
 * náhradami Carlito a Tinos. Farby kariet a riadkov sú predvoľby theme.json
 * prehlad-…; farby dokumentu sú premenné nižšie. Prehľad je biely hárok —
 * rovnaký v každom štýlovom variante témy. Tlač: prehlad-tlac.css.
 */

.se-prehlad,
.se-prehlad-lista,
.se-slidy {
	--se-ph-nadpis: #123b5d;
	--se-ph-akcent: #087e8b;
	--se-ph-akcent-text: #06707b;
	--se-ph-koral: #f05d5e;
	--se-ph-text: #243447;
	--se-ph-jemny: #5a6b7c;
	--se-ph-ciara: #4f81bd;
	--se-ph-pas: #eaf5f5;
	--se-ph-zebra: #f3f8fa;
	--se-ph-vystraha: #c43d4b;
	--se-ph-vystraha-podklad: #fff0f0;
	--se-ph-info-podklad: #eaf5f5;
	--se-ph-tip: #9a4a07;
	--se-ph-tip-podklad: #fff6e5;
	--se-ph-pismo-nadpis: Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--se-ph-pismo-text: "Times New Roman", Tinos, "Liberation Serif", Times, serif;
}

/* --- Lišta nad prehľadom --------------------------------------------------- */

.se-prehlad-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	align-items: center;
	max-width: 58rem;
	margin: 0 auto 1.25rem;
}

.se-prehlad-lista .se-oblubene {
	display: contents;
}

.se-prehlad-ikona {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Hárok ------------------------------------------------------------------ */

.se-prehlad {
	box-sizing: border-box;
	max-width: 58rem;
	margin: 0 auto;
	padding: clamp( 1.25rem, 4.5vw, 3.25rem ) clamp( 1rem, 5vw, 3.5rem ) clamp( 1.75rem, 4.5vw, 3.25rem );
	border: 1px solid #dde4ea;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.05 ), 0 18px 40px -24px rgba( 15, 23, 42, 0.28 );
	color: var( --se-ph-text );
	font-family: var( --se-ph-pismo-text );
	font-size: 1.0625rem;
	line-height: 1.45;
}

.se-prehlad *,
.se-prehlad *::before,
.se-prehlad *::after {
	box-sizing: border-box;
}

.se-prehlad ::selection {
	background: #c7ecef;
	color: #0b2b3f;
}

.se-prehlad a {
	color: var( --se-ph-nadpis );
	text-underline-offset: 0.18em;
}

.se-prehlad :focus-visible {
	outline: 3px solid var( --se-ph-akcent );
	outline-offset: 2px;
}

/* --- Hlavička --------------------------------------------------------------- */

.se-prehlad-kontext {
	margin: 0 0 0.9rem;
	color: var( --se-ph-akcent );
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: right;
	text-transform: uppercase;
}

.se-prehlad-nazov {
	margin: 0;
	padding: 0 0 0.3rem;
	border-bottom: 1.5px solid var( --se-ph-ciara );
	color: var( --se-ph-nadpis );
	font-family: var( --se-ph-pismo-nadpis );
	font-size: clamp( 1.9rem, 4.6vw, 2.9rem );
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.1;
	text-wrap: balance;
}

/* Podnadpis je tučný a aspoň 19 px — koralová mu tak dáva kontrast veľkého textu. */
.se-prehlad-podnadpis {
	margin: 0.5rem 0 0;
	color: var( --se-ph-koral );
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.25;
}

.se-prehlad-udaje {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0.25rem 1rem;
	margin: 1.1rem 4.5% 0;
	padding: 0.7rem 0.85rem 0.8rem;
	background: var( --se-ph-pas );
}

.se-prehlad-udaj {
	min-width: 0;
}

.se-prehlad-udaj dt {
	color: var( --se-ph-akcent-text );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.se-prehlad-udaj dd {
	margin: 0.1rem 0 0;
	color: var( --se-ph-nadpis );
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* --- Sekcie ----------------------------------------------------------------- */

.se-prehlad-sekcia {
	margin-top: 1.95rem;
}

.se-prehlad-udaje + .se-prehlad-obsah .se-prehlad-sekcia:first-child,
.se-prehlad-hlavicka + .se-prehlad-obsah .se-prehlad-sekcia:first-child {
	margin-top: 1.6rem;
}

.se-prehlad-nadpis {
	margin: 0 0 0.55rem;
	color: var( --se-ph-akcent );
	font-family: var( --se-ph-pismo-nadpis );
	font-size: clamp( 1.45rem, 3vw, 1.8rem );
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.15;
	text-wrap: balance;
}

.se-prehlad-text {
	max-width: 75ch;
	margin: 0 0 0.45rem;
}

.se-prehlad-retaz {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0;
	margin: 0.7rem 0 0;
	padding: 0;
	color: var( --se-ph-akcent );
	font-weight: 700;
	list-style: none;
}

.se-prehlad-retaz li + li::before {
	content: "→";
	margin: 0 0.55em;
	font-weight: 700;
}

/* Tabuľka presahuje text rovnako ako vo vzore. */
.se-prehlad-tabulka-obal {
	margin: 0.9rem calc( -1 * clamp( 0rem, 2.4vw, 1.4rem ) ) 0;
}

.se-prehlad-tabulka {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.se-prehlad-tabulka thead th {
	padding: 0.75rem 0.9rem;
	background: var( --se-ph-nadpis );
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: left;
	text-transform: uppercase;
}

.se-prehlad-tabulka tbody th,
.se-prehlad-tabulka tbody td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.se-prehlad-tabulka tbody th {
	width: 37.4%;
	color: var( --se-ph-nadpis );
	font-weight: 700;
}

.se-prehlad-tabulka tbody tr:nth-child( odd ) {
	background: var( --se-ph-zebra );
}

/* --- Hry na zopakovanie ----------------------------------------------------- */

.se-prehlad-hry {
	display: grid;
	gap: 0.85rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
}

.se-prehlad-hra {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 1rem 1.5rem;
	align-items: center;
	padding: 1rem 1.25rem;
	border: 1px solid #d5e3e8;
	border-radius: 6px;
	background: var( --se-ph-zebra );
}

.se-prehlad-hra-nazov {
	margin: 0;
	color: var( --se-ph-nadpis );
	font-family: var( --se-ph-pismo-nadpis );
	font-size: 1.3rem;
	line-height: 1.2;
}

.se-prehlad-hra-typ,
.se-prehlad-hra-kod {
	margin: 0.2rem 0 0;
	color: var( --se-ph-jemny );
}

.se-prehlad-kod {
	color: var( --se-ph-nadpis );
	font-family: ui-monospace, Consolas, "Liberation Mono", monospace;
	font-size: 1.1em;
	letter-spacing: 0.12em;
}

.se-prehlad-hra-akcia {
	margin: 0.7rem 0 0;
}

.se-prehlad-qr {
	width: 7.5rem;
	aspect-ratio: 1;
	background: #fff;
}

.se-prehlad-qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.se-prehlad-prazdny {
	margin: 1.5rem 0 0;
	color: var( --se-ph-jemny );
}

/* --- Úzke obrazovky --------------------------------------------------------- */

@media ( max-width: 40rem ) {
	.se-prehlad {
		border-right: 0;
		border-left: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.se-prehlad-udaje {
		grid-template-columns: minmax( 0, 1fr );
		margin-inline: 0;
	}

	.se-prehlad-tabulka-obal {
		margin-inline: 0;
	}

	.se-prehlad-tabulka thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
	}

	.se-prehlad-tabulka tr {
		display: block;
		padding: 0.55rem 0.8rem 0.65rem;
	}

	.se-prehlad-tabulka tbody th,
	.se-prehlad-tabulka tbody td {
		display: block;
		width: auto;
		padding: 0;
	}

	.se-prehlad-karty {
		grid-template-columns: minmax( 0, 1fr );
	}

	.se-prehlad-riadok {
		grid-template-columns: minmax( 0, 1fr );
	}

	.se-prehlad-riadok dt {
		padding-block: 0.45rem;
	}

	.se-prehlad-hra {
		grid-template-columns: minmax( 0, 1fr );
	}
}