/* Prvky národní jednostránky. Barvy jen z tokenů tématu (theme.json),
   šikmý řez a štítky dodává převzatá assets/sablona.css. */

.zdn-hero h1 { max-width: 18ch; }
.zdn-hero .ded-hero-obraz img { width: 100%; height: 100%; min-height: 420px; }

.zdn-sekce { padding-block: 48px; }
.zdn-sekce + .zdn-sekce { border-top: 1px solid var(--wp--preset--color--linka, #e2e2e2); }
.zdn-sekce h2 { margin-bottom: 18px; }

/* Constrained layout centruje děti vygenerovaným pravidlem
   margin-inline:auto !important, takže vlaječka štítku a odstavce
   uskakovaly doprava od nadpisu. Přebíjí se stejně důrazně a vyšší
   specificitou; odstavcům zůstává čitelná šířka řádku, vlaječka
   (taky odstavec) se z ní vynechává. */
.zdn-sekce.zdn-sekce > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.zdn-sekce.zdn-sekce > p:not(.ded-stitek-radek) { max-width: 72ch; }

/* Pět oblastí: prostý seznam s červenou odrážkovou linkou. */
.zdn-oblasti {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px 28px;
	margin-top: 10px;
}
.zdn-oblast {
	margin: 0;
	padding: 14px 16px 14px 18px;
	border-left: 3px solid var(--wp--preset--color--cervena, #a81521);
	background: var(--wp--preset--color--pas, #efefef);
	font-size: var(--wp--preset--font-size--male, 15px);
	line-height: 1.6;
}
.zdn-oblast strong { display: block; margin-bottom: 6px; font-size: var(--wp--preset--font-size--zaklad, 16px); }

/* Rozcestník krajů. */
.zdn-kraje {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin-top: 16px;
}
.zdn-kraj {
	margin: 0;
	box-sizing: border-box;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--linka, #e2e2e2);
	background: var(--wp--preset--color--pas, #efefef);
	color: var(--wp--preset--color--tichy, #7d7d7d);
	font-size: var(--wp--preset--font-size--male, 15px);
	line-height: 1.5;
}
.zdn-kraj span { font-size: var(--wp--preset--font-size--drobne, 13px); }
.zdn-kraj a { color: var(--wp--preset--color--inkoust, #000000); text-decoration: none; font-weight: 600; }
.zdn-kraj a:hover { text-decoration: underline; }
.zdn-kraj-aktivni {
	background: var(--wp--preset--color--papir, #ffffff);
	border: 2px solid var(--wp--preset--color--cervena, #a81521);
	color: var(--wp--preset--color--inkoust, #000000);
	font-weight: 700;
}
.zdn-kraj-aktivni a { color: var(--wp--preset--color--cervena, #a81521); text-decoration: none; }
.zdn-kraj-aktivni a:hover { text-decoration: underline; }
.zdn-kraj-aktivni span { font-weight: 400; color: var(--wp--preset--color--text, #4a4a4a); }

/* Milý výhled na národní web. */
.zdn-vyhled {
	margin-top: 22px;
	padding: 16px 20px;
	border-left: 3px solid var(--wp--preset--color--cervena, #a81521);
	background: var(--wp--preset--color--pas, #efefef);
	max-width: 70ch;
}

/* Ukázky aplikace: odkazové dlaždice. */
.zdn-ukazky {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
	margin-block: 16px;
}
.zdn-ukazka { margin: 0; }
.zdn-ukazka a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--linka, #e2e2e2);
	border-top: 3px solid var(--wp--preset--color--inkoust, #000000);
	color: var(--wp--preset--color--inkoust, #000000);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--male, 15px);
	line-height: 1.55;
}
.zdn-ukazka a:hover {
	border-color: var(--wp--preset--color--cervena, #a81521);
	border-top-color: var(--wp--preset--color--cervena, #a81521);
}
.zdn-ukazka strong { display: block; margin-bottom: 6px; }

/* Drobečková navigace podstránek: cesta zpět na úvod. */
.zdn-drobecky { max-width: 1560px; margin-inline: auto; padding: 12px 32px 0; }
.zdn-drobecky p { margin: 0; font-size: var(--wp--preset--font-size--drobne, 13px); color: var(--wp--preset--color--tichy, #7d7d7d); }
.zdn-drobecky a { color: var(--wp--preset--color--text, #4a4a4a); text-decoration: none; }
.zdn-drobecky a:hover { color: var(--wp--preset--color--cervena, #a81521); text-decoration: underline; }
.zdn-drobecky span[aria-hidden] { margin-inline: 6px; }