/* ==========================================================================
   Stránka Aplikace. Zapouzdřeno pod .zdn-apl, ale ŘÍZENO ŠABLONOU:
   barevné tokeny se berou z theme.json (--wp--preset--color--*) s věrným
   fallbackem, takže změna palety šablony se propíše i sem. Tmavý režim má
   vlastní hodnoty (šablona tmavou paletu nedefinuje).
   Vnitřní uspořádání prvků = „atlasová" podoba (1.1.20): jeden atom
   (červený proužek/kruh, titulek, ztišený popis), dlaždice se zaoblením
   a stínem, tabulky s červeným záhlavím a bílými popisky.
   Pattern nemá žádné inline styly; náhradou jsou POMOCNÉ třídy na konci.
   ========================================================================== */

.zdn-apl {
	color-scheme: light dark;

	--papir:    var(--wp--preset--color--papir,   #ffffff);
	--ink:      var(--wp--preset--color--inkoust, #000000);
	--text:     var(--wp--preset--color--text,    #3d3d40);
	--mut:      var(--wp--preset--color--tichy,   #77777c);
	--linka:    var(--wp--preset--color--linka,   #e2e2e2);
	--pas:      var(--wp--preset--color--pas,     #efefef);
	--red:      var(--wp--preset--color--cervena, #a81521);

	--linka-tm:   color-mix(in srgb, var(--linka) 89%, #000);
	--red-tm:     color-mix(in srgb, var(--red) 75%, #000);
	--red-svetla: color-mix(in srgb, var(--red) 9%, #fff);

	--obal: 1560px;
	--rez: 12px;
	--radius: 8px;
	--stin: 0 2px 6px rgba(0, 0, 0, .05);
	--stin-zdvih: 0 12px 26px rgba(0, 0, 0, .10);
}

@media (prefers-color-scheme: dark) {
	.zdn-apl {
		--papir: #0f0f11;
		--ink: #f4f4f5;
		--text: #c3c3c8;
		--mut: #8d8d95;
		--linka: #2a2a2f;
		--pas: #17171a;
		--red: #e2606a;
		--linka-tm: #3a3a41;
		--red-tm: #f08a92;
		--red-svetla: #2a1417;
	}
}

.zdn-apl * { box-sizing: border-box; }
.zdn-apl {
	margin: 0;
	background: var(--papir);
	color: var(--text);
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
.zdn-apl .obal { max-width: var(--obal); margin-inline: auto; padding-inline: 24px; }

/* --- Typografie ----------------------------------------------------------- */
.zdn-apl h1, .zdn-apl h2, .zdn-apl h3 {
	color: var(--ink);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
	margin: 0;
}
.zdn-apl h1 { font-size: clamp(34px, 4.9vw, 54px); }
.zdn-apl h2 { font-size: clamp(27px, 3.6vw, 38px); }
.zdn-apl h3 { font-size: 19px; letter-spacing: -0.015em; line-height: 1.3; }
.zdn-apl p { margin: 0; }
.zdn-apl .lead { font-size: clamp(17.5px, 1.7vw, 20px); line-height: 1.55; color: var(--ink); font-weight: 600; max-width: 46ch; }
.zdn-apl .uvod { max-width: 90ch; }
.zdn-apl a { color: var(--red); }
.zdn-apl a:focus-visible, .zdn-apl button:focus-visible, .zdn-apl summary:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }
.zdn-apl strong { color: var(--ink); font-weight: 700; }
.zdn-apl .stitek {
	display: inline-block;
	background: var(--ink);
	color: var(--papir);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 26px 6px 12px;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--rez)) 100%, 0 100%);
}
.zdn-apl .stitek--red { background: var(--red); color: #fff; }

/* --- Skladba stránky ------------------------------------------------------ */
.zdn-apl .hlava { padding-block: clamp(24px, 3.5vw, 44px) clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--linka); }
.zdn-apl .hlava h1 { margin-block: 20px 24px; max-width: 17ch; }
.zdn-apl .hlava h1 em { font-style: normal; color: var(--red); }
.zdn-apl .hlava .uvod { margin-top: 18px; }
.zdn-apl .hlava .tlacitko { margin-top: 28px; }
.zdn-apl .hlava-mrizka { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 24px 56px; align-items: start; }
.zdn-apl .hlava-mrizka > .fakta { margin-top: 8px; }
.zdn-apl section { padding-block: clamp(48px, 7vw, 84px); border-bottom: 1px solid var(--linka); }
.zdn-apl section > .obal > .stitek { margin-bottom: 18px; }
.zdn-apl section h2 { margin-bottom: 20px; max-width: 28ch; }
.zdn-apl section h2 + .uvod { margin-bottom: 40px; }
.zdn-apl .pas { background: var(--pas); }

/* --- Hero fakta: vystupující karta, popisek nad hodnotou ------------------ */
.zdn-apl .fakta {
	display: grid;
	margin: 0;
	background: var(--papir);
	border: 1px solid var(--linka);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	padding: 8px 24px;
}
.zdn-apl .fakta div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font-size: 14.5px; }
.zdn-apl .fakta div + div { border-top: 1px solid var(--linka); }
.zdn-apl .fakta div.fakta-skupina { border-top: 3px solid var(--linka); margin-top: 6px; padding-top: 14px; }
.zdn-apl .fakta dt { color: var(--mut); margin: 0; white-space: nowrap; font-size: 13px; font-weight: 600; }
.zdn-apl .fakta dd { color: var(--ink); font-weight: 700; margin: 0; text-align: right; font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* --- Atom: titulek s proužkem, ztišený popis ------------------------------ */
.zdn-apl .karta h3, .zdn-apl .otazky h3 { position: relative; padding-top: 14px; color: var(--ink); }
.zdn-apl .karta h3::before, .zdn-apl .otazky h3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--red);
}
.zdn-apl .karta p, .zdn-apl .otazky p, .zdn-apl .kroky p { color: var(--text); opacity: .85; font-size: 15px; line-height: 1.65; }

/* --- Karty: volné dlaždice se zaoblením, stínem a zdvihem ----------------- */
.zdn-apl .karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.zdn-apl .karta {
	background: var(--papir);
	border: 1px solid var(--linka);
	border-radius: var(--radius);
	box-shadow: var(--stin);
	padding: 24px 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform .15s, box-shadow .15s;
}
.zdn-apl .karta:hover { transform: translateY(-3px); box-shadow: var(--stin-zdvih); }
.zdn-apl .karta--prazdna { border: 2px dashed var(--linka-tm); background: transparent; box-shadow: none; }

/* --- Výčty: řádkové karty s prstencovou odrážkou -------------------------- */
.zdn-apl .vycet { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zdn-apl .vycet li { position: relative; padding-left: 26px; }
.zdn-apl .vycet li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 14px; height: 2px; background: var(--red); }
.zdn-apl .vycet strong { display: block; margin-bottom: 2px; }
.zdn-apl .vycet--siroky { gap: 14px 18px; }
.zdn-apl .vycet--siroky li {
	background: var(--pas);
	border: 1px solid var(--linka);
	border-radius: var(--radius);
	padding: 18px 20px 18px 52px;
	max-width: none;
}
.zdn-apl .pas .vycet--siroky li { background: var(--papir); }
.zdn-apl .vycet--siroky li::before {
	left: 20px;
	top: 24px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 5px solid var(--red);
	background: transparent;
}
.zdn-apl .vycet--siroky strong { margin-bottom: 4px; font-size: 16.5px; color: var(--ink); }
@media (min-width: 1100px) { .zdn-apl .vycet--siroky { grid-template-columns: 1fr 1fr; } }

/* --- Dvojice a sloupce (rezervní vzory patternu) -------------------------- */
.zdn-apl .dvojice { display: grid; gap: 1px; background: var(--linka); border-block: 1px solid var(--linka); margin-top: 8px; }
.zdn-apl .dvojice > div { background: var(--papir); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 40px; padding: 24px 0; }
.zdn-apl .pas .dvojice > div { background: var(--pas); }
.zdn-apl .sloupce { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 48px; }
.zdn-apl .sloupce h3 { margin-bottom: 10px; }

/* --- FAQ: dlaždice s mezerami --------------------------------------------- */
.zdn-apl .otazky { display: grid; gap: 16px; }
@media (min-width: 1100px) { .zdn-apl .otazky { grid-template-columns: 1fr 1fr; } }
.zdn-apl .otazky > div { background: var(--papir); border: 1px solid var(--linka); border-radius: var(--radius); padding: 22px 24px; }
.zdn-apl .otazky h3 { margin-bottom: 8px; font-size: 17.5px; }
.zdn-apl .otazky p { max-width: none; }
.zdn-apl .otazky p + p { margin-top: 10px; }

/* --- Kroky: dlaždice s kruhovým číslem ------------------------------------ */
.zdn-apl .kroky { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: k; }
@media (min-width: 1100px) { .zdn-apl .kroky { grid-template-columns: repeat(3, 1fr); } }
.zdn-apl .kroky li { display: flex; flex-direction: column; background: var(--papir); border: 1px solid var(--linka); border-radius: var(--radius); padding: 24px; }
.zdn-apl .kroky li::before {
	counter-increment: k;
	content: counter(k);
	font-weight: 800;
	font-size: 17px;
	color: #fff;
	background: var(--red);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	margin-bottom: 14px;
}
/* Placený krok (Etapa 0): číslo v inkoustu; text „placený" zůstává. */
.zdn-apl .kroky li:nth-child(2)::before { background: var(--ink); color: var(--papir); }
.zdn-apl .kroky h3 { font-size: 18.5px; margin-bottom: 8px; }
.zdn-apl .krok-meta { font-weight: 400; color: var(--mut); }
.zdn-apl .krok-meta--placeny { color: var(--red); }

/* --- Tabulky: červené záhlaví, zebra, zaoblený rám ------------------------ */
.zdn-apl .tabulka-obal { overflow-x: auto; border: 1px solid var(--linka); border-radius: var(--radius); }
.zdn-apl table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.zdn-apl th, .zdn-apl td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linka); vertical-align: top; }
.zdn-apl th { width: 34%; color: var(--mut); font-weight: 600; white-space: nowrap; }
.zdn-apl td { color: var(--ink); }
.zdn-apl td code, .zdn-apl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--ink); }
.zdn-apl table tr:first-child td { background: var(--red); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 0; }
.zdn-apl table tr:first-child td strong { color: #fff; }
.zdn-apl table tr:nth-child(even) td { background: var(--pas); }
.zdn-apl tbody tr:hover td { background: var(--red-svetla); }
.zdn-apl table tr:first-child:hover td { background: var(--red); }

/* --- Poznámky a poznámkové bloky ------------------------------------------ */
.zdn-apl .poznamka { font-size: 13.5px; color: var(--mut); line-height: 1.6; }
.zdn-apl .poznamka-blok {
	margin-top: 28px;
	background: var(--ink);
	color: var(--pas);
	border-radius: var(--radius);
	padding: 22px 26px;
	font-size: 15.5px;
}
.zdn-apl .poznamka-blok strong { color: var(--papir); }
.zdn-apl .poznamka-blok p { max-width: 110ch; }

/* --- Stav položek dalšího vývoje: tichá pilulka --------------------------- */
.zdn-apl .stav-vyvoje {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 2px;
	padding: 4px 12px;
	background: var(--pas);
	color: var(--mut);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Tlačítka a akce ------------------------------------------------------ */
.zdn-apl .tlacitko {
	display: inline-block;
	background: var(--red);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 15.5px;
	padding: 13px 24px;
	border-radius: var(--radius);
}
.zdn-apl .tlacitko:hover { background: var(--red-tm); }
.zdn-apl .tlacitko--klid { background: transparent; color: var(--red); border: 1.5px solid var(--linka-tm); }
.zdn-apl .tlacitko--klid:hover { background: var(--red-svetla); }
.zdn-apl .akce { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; }

/* --- Rozbalovací technická část ------------------------------------------- */
.zdn-apl details.technika { border-top: 1px solid var(--linka); margin-top: 48px; }
.zdn-apl details.technika > summary {
	cursor: pointer;
	list-style: none;
	padding-block: 18px;
	font-weight: 700;
	color: var(--ink);
	font-size: 16px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
}
.zdn-apl details.technika > summary::-webkit-details-marker { display: none; }
.zdn-apl details.technika > summary::after { content: "Rozbalit"; font-weight: 600; font-size: 13.5px; color: var(--red); }
.zdn-apl details.technika > summary:hover::after { text-decoration: underline; }
.zdn-apl details.technika[open] > summary::after { content: "Sbalit"; }
.zdn-apl details.technika[open] > summary { border-bottom: 1px solid var(--linka); }
.zdn-apl details.technika .obsah { padding-top: 20px; }

/* --- Patička -------------------------------------------------------------- */
.zdn-apl .paticka { padding-block: clamp(44px, 6vw, 72px); border-bottom: 0; }
.zdn-apl .paticka .obal { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 48px; }
.zdn-apl .paticka h3 { margin-bottom: 8px; }

/* --- POMOCNÉ třídy (náhrada dřívějších inline stylů patternu) ------------- */
.zdn-apl .h2--dalsi-blok { margin-top: 56px; }
.zdn-apl .h3--cerveny { color: var(--red); }
.zdn-apl .karty--tri { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.zdn-apl .karty--ctyri { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 1100px) { .zdn-apl .karty--pevne { grid-template-columns: repeat(3, 1fr); } }
.zdn-apl .karty--odsazene { margin-top: 24px; }
.zdn-apl .karta-cena { margin-top: 10px; }
.zdn-apl .odstavec-navaz { margin-top: 8px; }
.zdn-apl .poznamka--pod-kartami { margin-top: 14px; }
.zdn-apl .poznamka--pod-akci { margin-top: 18px; }
.zdn-apl .h3--mezera { margin-block: 32px 14px; }
.zdn-apl .tabulka--kompakt table { font-size: 13.5px; }
.zdn-apl .tabulka--kompakt th, .zdn-apl .tabulka--kompakt td { padding: 9px 14px; }
.zdn-apl .tabulka--kompakt table tr:first-child td { font-size: 12px; white-space: nowrap; }
.zdn-apl .tabulka--uzka { max-width: 920px; }

/* --- Responzivní chování -------------------------------------------------- */
@media (max-width: 430px) {
	.zdn-apl .stitek { letter-spacing: 0.08em; padding-right: 22px; }
}
@media (max-width: 760px) {
	.zdn-apl .hlava-mrizka { grid-template-columns: 1fr; gap: 34px; align-items: start; }
	.zdn-apl .dvojice > div { grid-template-columns: 1fr; gap: 6px; }
	.zdn-apl .lead { max-width: none; }
	.zdn-apl th { width: auto; white-space: normal; }
	.zdn-apl table, .zdn-apl tbody, .zdn-apl tr, .zdn-apl th, .zdn-apl td { display: block; }
	.zdn-apl th { padding-bottom: 2px; border-bottom: 0; }
	.zdn-apl td { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.zdn-apl * { transition: none !important; animation: none !important; }
}