/*
 * Styly pro šablonu "Modul" (single-dsv_lekce.php).
 * Odvozeno z návrhu D:\Jobs\AI\bykraj\DSV-Moduly (Modul 1: Bezpečný start).
 *
 * Samostatná šablona od Úvodu (full-width-digi.php / .digi-skola-vareni)
 * - vlastní paleta i třídy, vše obalené .digi-skola-modul, aby se
 * navzájem neovlivňovaly a nedostaly se mimo tuto jednu stránku
 * (viz mu-plugin digi-skola-vareni.php).
 */

.digi-skola-modul {
	--green: #5b8f2a;
	--green2: #3f7021;
	--brown: #684b3b;
	--orange: #d26736;
	--cream: #f7f4ed;
	--paper: #fffdfa;
	--ink: #293126;
	--muted: #6d746b;
	--line: #ddd6ca;

	background: var(--cream);
	color: var(--ink);
	font-family: Roboto, Arial, sans-serif;
	line-height: 1.55;
}
.digi-skola-modul *,
.digi-skola-modul *:before,
.digi-skola-modul *:after {
	box-sizing: border-box;
}
.digi-skola-modul button,
.digi-skola-modul a {
	font: inherit;
}

.digi-skola-modul button {
	cursor: pointer;
}

.digi-skola-modul a {
	color: inherit;
	text-decoration: none !important;
}
.digi-skola-modul img {
	max-width: 100%;
	height: auto;
	display: block;
}

.digi-skola-modul .wrap {
	width: min(1120px, calc(100% - 32px));
	margin: auto;
}

.digi-skola-modul section {
	padding: 50px 0;
}
.digi-skola-modul .white {
	background: #fff;
}
.digi-skola-modul .eyebrow {
	color: var(--orange);
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.digi-skola-modul .section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}
.digi-skola-modul .section-head h2 {
	font-family: Georgia, serif;
	font-size: clamp(30px, 5vw, 50px);
	margin: 0;
	font-weight: 500;
}
.digi-skola-modul .section-head p {
	max-width: 560px;
	color: var(--muted);
	margin: 0;
}

/* Hero */
.digi-skola-modul .hero {
	padding: 44px 0 30px;
}
.digi-skola-modul .hero-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 30px;
	align-items: stretch;
}
.digi-skola-modul .hero h1 {
	font-family: Georgia, serif;
	font-size: clamp(38px, 6vw, 66px);
	line-height: 1.05;
	margin: 14px 0;
	font-weight: 500;
}
.digi-skola-modul .lead {
	font-size: 18px;
	max-width: 640px;
	margin: 0 0 14px;
}
.digi-skola-modul .chips {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
}
.digi-skola-modul .chip {
	background: #fff;
	border: 1px solid var(--line);
	padding: 9px 14px;
	border-radius: 999px;
	font-weight: 800;
	color: var(--brown);
	font-size: 13px;
}
.digi-skola-modul .actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.digi-skola-modul .button {
	display: inline-block;
	background: var(--orange);
	color: #fff;
	padding: 14px 20px;
	border-radius: 10px;
	font-weight: 900;
	border: 0;
}
.digi-skola-modul .button.secondary {
	background: var(--green);
}
.digi-skola-modul .hero-card {
	background: var(--green);
	color: #fff;
	border-radius: 26px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.digi-skola-modul .hero-card .plate-emoji {
	font-size: 64px;
	line-height: 1;
}
/* Odznak v hero - černobílý, dokud si ho člen nevyzvedne v sekci
   "Moje mise" (stejný princip jako .mission-badge tam dole - viz
   dsv-gate-claimed, přidává ho dsv-pracovni-listy.js). */
.digi-skola-modul .hero-card .hero-badge {
	filter: grayscale(100%);
}
.digi-skola-modul:has(.dsv-gate-claimed) .hero-card .hero-badge {
	filter: none;
}
.digi-skola-modul .hero-card .plate-foto {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	overflow: hidden;
	border: 6px solid #fff;
}
.digi-skola-modul .hero-card .plate-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.digi-skola-modul .hero-card h2 {
	font-size: 30px;
	margin: 10px 0 4px;
}
.digi-skola-modul .hero-card p {
	font-size: 15px;
	margin: 0 0 6px;
	opacity: .9;
}
.digi-skola-modul .hero-card strong {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	letter-spacing: .04em;
}

/* Mapa modulu */
.digi-skola-modul .module-map {
	margin-top: 24px;
	background: #fff;
	border: 2px solid var(--green);
	border-radius: 20px;
	padding: 20px;
}
.digi-skola-modul .module-map strong {
	display: block;
	color: var(--brown);
	font-size: 18px;
	margin-bottom: 10px;
}
.digi-skola-modul .module-map ol {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.digi-skola-modul .module-map li {
	background: #eef4e8;
	border-radius: 12px;
	padding: 12px 8px;
	font-weight: 800;
	font-size: 13px;
	text-align: center;
}
.digi-skola-modul .module-map a {
	color: var(--green2);
}

/* Karty (Co tě čeká / Pět pravidel / rodiče) */
.digi-skola-modul .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.digi-skola-modul .card {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 24px;
}
.digi-skola-modul .card .num {
	color: var(--orange);
	font-weight: 900;
	font-size: 14px;
}
.digi-skola-modul .card h3 {
	color: var(--brown);
	font-size: 20px;
	margin: 8px 0;
}
.digi-skola-modul .card p {
	margin: 0;
	color: var(--muted);
}
.digi-skola-modul .callout {
	background: var(--brown);
	color: #fff;
	border-radius: 24px;
	padding: 28px;
}
.digi-skola-modul .callout h3 {
	margin: 0 0 8px;
	color: #fff;
}
.digi-skola-modul .callout strong {
	color: #f4b078;
}
.digi-skola-modul .callout p {
	margin: 0;
}

/* Odměnová varianta callout boxu (např. "Moje mise") */
.digi-skola-modul .callout.mission {
	background: linear-gradient(160deg, var(--brown), #4a3527);
	border: 3px solid var(--orange);
	text-align: center;
}
.digi-skola-modul .callout.mission h3 {
	font-size: 24px;
	margin-top: 0;
}
.digi-skola-modul .callout.mission .mission-badge {
	font-size: 56px;
	line-height: 1;
	margin-bottom: 6px;
	filter: grayscale(100%);
}
/* Jakmile je mise splněná (viz dsv-pracovni-listy.js, třída
   dsv-gate-claimed), medaile se obarví. */
.digi-skola-modul .callout.mission:has(.dsv-gate-claimed) .mission-badge {
	filter: none;
}
.digi-skola-modul .dsv-mise-reward {
	background: rgba(255, 255, 255, .14);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 18px 0 0 !important;
}
.digi-skola-modul .dsv-gate-btn {
	margin-top: 20px;
	background: var(--orange);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 14px 22px;
	font-weight: 900;
	font-size: 16px;
}
.digi-skola-modul .dsv-gate-btn:disabled {
	background: #8a7f76;
	cursor: not-allowed;
	opacity: .75;
}
.digi-skola-modul .dsv-gate-claimed .dsv-gate-btn {
	background: var(--green);
}

/* Pracovní listy */
.digi-skola-modul .worksheet {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 26px;
	margin-top: 16px;
}
.digi-skola-modul .worksheet h3 {
	color: var(--brown);
	font-size: 23px;
	margin: 0 0 14px;
}
.digi-skola-modul .worksheet h4 {
	color: var(--brown);
	margin: 22px 0 8px;
}
.digi-skola-modul .checklist label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}
.digi-skola-modul .checklist label:last-child {
	border-bottom: 0;
}
.digi-skola-modul .checklist input[type="checkbox"],
.digi-skola-modul .checklist input[type="radio"] {
	width: 20px;
	height: 20px;
	accent-color: var(--green);
	flex: none;
}

/* Větší checkboxy vedle sebe na PC (např. "Moje mise") - na mobilu
   zůstávají pod sebou (viz Responzivita níže). */
.digi-skola-modul .checklist.checklist-large label {
	border-bottom: 0;
	color: #fff;
	font-weight: 700;
	text-align: left;
}
.digi-skola-modul .checklist.checklist-large input[type="checkbox"] {
	width: 28px;
	height: 28px;
}
@media (min-width: 641px) {
	.digi-skola-modul .checklist.checklist-large {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 28px;
	}
	.digi-skola-modul .checklist.checklist-large label {
		flex: 1 1 220px;
	}
}
.digi-skola-modul .text-field {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font: inherit;
	background: #fff;
	color: var(--ink);
}

/* Řádky pro krátké otevřené otázky (např. "Pohárová laboratoř") -
   pořád flexbox (řádek pod řádkem): popisek má pevnou širší šířku,
   pole na odpověď se natáhne přes zbytek řádku. */
.digi-skola-modul .checklist.lab-rows label {
	align-items: center;
	flex-wrap: nowrap;
}
.digi-skola-modul .checklist.lab-rows label span {
	flex: 0 0 260px;
	font-weight: 700;
	color: var(--brown);
}
.digi-skola-modul .checklist.lab-rows .text-field {
	flex: 1 1 auto;
	width: auto;
}
@media (max-width: 640px) {
	.digi-skola-modul .checklist.lab-rows label {
		flex-wrap: wrap;
	}
	.digi-skola-modul .checklist.lab-rows label span {
		flex-basis: 100%;
	}
	.digi-skola-modul .checklist.lab-rows .text-field {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* Tabulky (semafor, pořadí) - stejný účel jako check-table na Úvodu,
   jen v nové paletě. */
.digi-skola-modul .check-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
}
.digi-skola-modul .check-table tr {
	border-bottom: 1px solid var(--line);
}
.digi-skola-modul .check-table tr:last-child {
	border-bottom: 0;
}
.digi-skola-modul .check-table td {
	padding: 10px 8px;
}
.digi-skola-modul .check-table td.head {
	font-weight: 800;
	color: var(--brown);
}
.digi-skola-modul .check-table td.narrow {
	width: 64px;
	text-align: center;
}
.digi-skola-modul .check-table td.wide-label {
	width: 30%;
}

/* Zámek lekce, upozornění */
.digi-skola-modul .lekce-zamek {
	padding: 60px 0;
}
.digi-skola-modul .notice {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 6px solid var(--orange);
	border-radius: 12px;
	padding: 22px 26px;
}
.digi-skola-modul .notice a {
	color: var(--green2);
	font-weight: 800;
	text-decoration: underline !important;
}

.digi-skola-modul .video-card {
	border: 0;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: transparent;
}
.digi-skola-modul .video-card .play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	color: var(--green2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
.digi-skola-modul .video-card .video-label {
	letter-spacing: .16em;
	font-size: 12px;
	font-weight: 900;
	opacity: .85;
}
.digi-skola-modul .video-card b {
	font-size: 18px;
}
.digi-skola-modul .video-card small {
	opacity: .8;
	font-size: 13px;
}

.digi-skola-modul .video-recipe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	float: none;
	width: auto;
	margin: 0;
	position: static;
}
.digi-skola-modul .video-recipe-grid.cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.digi-skola-modul .video-recipe {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
}
.digi-skola-modul .video-recipe .video-placeholder {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--brown), #4a3527);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.digi-skola-modul .video-recipe .video-placeholder .play {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	color: var(--brown);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.digi-skola-modul .video-recipe .video-placeholder small {
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 800;
	opacity: .85;
}
.digi-skola-modul .video-recipe-copy {
	padding: 18px 20px;
}
.digi-skola-modul .video-recipe-copy h3 {
	color: var(--brown);
	margin: 0 0 6px;
	font-size: 19px;
}
.digi-skola-modul .video-recipe-copy p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.digi-skola-modul .grid + .steps {
	margin-top: 22px;
}
.digi-skola-modul .steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
.digi-skola-modul .step {
	counter-increment: step;
	background: #fff;
	border-radius: 16px;
	padding: 20px;
	border-left: 7px solid var(--green);
}
.digi-skola-modul .step:before {
	content: counter(step, decimal-leading-zero);
	display: block;
	color: var(--orange);
	font-weight: 900;
	margin-bottom: 6px;
}
.digi-skola-modul .step h3 {
	margin: 0 0 5px;
	color: var(--brown);
}

/* Rodiče */
.digi-skola-modul .parents {
	color: #fff;
	background: linear-gradient(90deg, #48372df0, #465335d9 48%, #5a6d4336), url(/wp-content/uploads/2026/09/paralax_digi-skola_rodice-partaci.jpg) 50% / cover fixed;
	align-items: center;
	min-height: 680px;
	padding: 90px clamp(22px, 7vw, 115px);
	display: flex;
}
.digi-skola-modul .parents .section-head h2 {
	color: #fff;
}
.digi-skola-modul .parents .section-head p {
	color: rgba(255, 255, 255, .85);
}
.digi-skola-modul .parents .card {
	background: #fff;
}

/* Tlačítko na další lekci */
.digi-skola-modul .dalsi-lekce-cta {
	padding: 20px 0 10px;
	text-align: center;
}

/* Pracovní list - tlačítko "Uložit odpovědi" (dsv-pracovni-listy.php) */
.digi-skola-modul .dsv-pl-akce {
	margin-top: 20px;
}
.digi-skola-modul .dsv-ulozit-btn {
	background: var(--orange);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 20px;
	font-weight: 900;
}
.digi-skola-modul .dsv-ulozeno-zprava {
	color: var(--green2);
	font-weight: 700;
	margin-left: 10px;
}
.digi-skola-modul .dsv-pl-poznamka {
	margin-top: 14px;
	color: var(--muted);
	font-size: .85rem;
}

/* Lehké přeladění vzhledu pluginu Quiz Creator, ať zapadne do palety
   téhle šablony - vlastní CSS pluginu (frontend.css) se nemění. */
.digi-skola-modul .quizCreator-quiz-container {
	max-width: 100%;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 26px;
	box-shadow: none;
	font-family: inherit;
}
.digi-skola-modul .quizCreator-quiz-title {
	font-family: Georgia, serif;
	color: var(--brown);
	font-weight: 500;
}
.digi-skola-modul .quizCreator-question {
	background: var(--cream);
	border-color: var(--line);
	border-radius: 12px;
}
.digi-skola-modul .quizCreator-submit-button,
.digi-skola-modul .quizCreator-submit button {
	background: var(--orange);
	border-radius: 10px;
	font-weight: 900;
}
.digi-skola-modul .quizCreator-result-pass {
	color: var(--green2);
}
.digi-skola-modul .quizCreator-result-fail {
	color: var(--orange);
}
.digi-skola-modul .quizCreator-result h2 {
	font-family: Georgia, serif;
}

.digi-skola-modul .quiz-passed-note {
	background: #e5f5e3;
	border-left: 4px solid var(--green);
	border-radius: 8px;
	color: var(--green);
	font-weight: 700;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.digi-skola-modul .callout.next-module {
	margin-top: 24px;
	text-align: center;
}
.digi-skola-modul .callout.next-module p {
	margin: 0 0 16px;
	color: #fff;
}

/* Drobný text (např. alergeny u receptu) */
.digi-skola-modul .small {
	font-size: 14px;
	color: var(--muted);
}
.digi-skola-modul .card .small {
	margin-top: 12px;
}

/* Responzivita */
@media (max-width: 900px) {
	.digi-skola-modul .hero-grid { grid-template-columns: 1fr; }
	.digi-skola-modul .grid { grid-template-columns: repeat(2, 1fr); }
	.digi-skola-modul .module-map ol { grid-template-columns: repeat(3, 1fr); }
	.digi-skola-modul .video-recipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.digi-skola-modul .grid { grid-template-columns: 1fr; }
	.digi-skola-modul .module-map ol { grid-template-columns: repeat(2, 1fr); }
	.digi-skola-modul .video-recipe-grid { grid-template-columns: 1fr; }
	.digi-skola-modul section { padding: 34px 0; }
	.digi-skola-modul .hero { padding: 30px 0 20px; }
	.digi-skola-modul .hero-card { padding: 22px; }
	.digi-skola-modul .actions { flex-direction: column; align-items: stretch; }
	.digi-skola-modul .actions .button { text-align: center; }
	.digi-skola-modul .section-head { display: block; }
	.digi-skola-modul .check-table { display: block; overflow-x: auto; white-space: nowrap; }
	.digi-skola-modul .steps { grid-template-columns: 1fr; }
}