/*
Theme name: KDU-ČSL a Nestraníci, Ostravice
Author: Luděk Pasecký, ludek.pasecky@gmail.com
Version: 2.0



/* =====================================================================
   1. ZÁKLAD
   ===================================================================== */

* {
  box-sizing: border-box;
}

:root {
  	--yellow: #FFF84D;
  	--black: #000000;
 	--white: #FFFFFF;
	--light: #FFFDD3;
}

.yellow {background-color: var(--yellow) !important;}
.black {background-color: var(--black) !important;}
.white {background-color: var(--white) !important;}
.light {background-color: var(--light) !important;}

h1 {
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 900;
	font-style: normal;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 300px;
  background-color: white;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* viditelný fokus pro klávesnici — černý obrys funguje na všech
   podkladech webu (žlutá, bílá, světlá i bílé karty na černé) */
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--black);
	outline-offset: 2px;
}

/* respekt k systémovému nastavení omezeného pohybu */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}


/* =====================================================================
   2. SPOLEČNÉ STYLY (platí na desktopu i mobilu)
   ===================================================================== */

/* ---------- CO SE POVEDLO — společné ---------- */

section#co-se-povedlo {
	position: relative;
}

.povedlo-karta__foto--placeholder {
	background-color: var(--black);
	color: var(--yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-family: "owners", sans-serif;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.povedlo-karta__telo {
    width: 100%;
}

.povedlo-karta__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.povedlo-karta__body {
	list-style: none;
	margin: 0;
	padding: 0;
}

.povedlo-karta__body li {
	position: relative;
}

/* žlutý čtvereček místo puntíku — ladí s ostrými rohy tématu */
.povedlo-karta__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	background-color: var(--yellow);
	border: 1px solid var(--black);
}

/* kotva nezajede pod horní okraj při kliknutí v rozcestníku */
.povedlo-karta {
	scroll-margin-top: 4vw;
}


/* ---------- CO VÁS TRÁPÍ — společné ---------- */

section#co-vas-trapi {
	position: relative;
}

/* honeypot — schovaný mimo obrazovku, ne display:none (roboti to poznají) */
.trapi-form__past {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.trapi-form__pole {
	display: block;
	width: 100%;
	background: var(--white);
	border: 2px solid var(--black);
	border-radius: 0;
	color: var(--black);
}

.trapi-form__pole:focus {
	outline: none;
	box-shadow: 0 0 0 4px var(--yellow);
}

textarea.trapi-form__pole {
	resize: vertical;
}

/* odstavce do bloku, poslední řádek na střed */
.trapi-uvod,
.trapi-osobne {
	text-align: justify;
	text-align-last: center;
	hyphens: auto;
	-webkit-hyphens: auto;
}


/* ---------- NÁŠ TÝM — společné ---------- */

/* tlačítko Bio vždy u spodního okraje karty */
.lide-karta {
	display: flex;
	flex-direction: column;
}

.lide-karta__telo {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lide-karta__tlacitko {
	margin-top: auto;
	align-self: flex-start;
}

/* prázdný blok kontaktů (bez odkazů) nedělá mezeru v kartě */
.lide-karta__kontakty:not(:has(a)) {
	display: none;
}


/* ---------- NÁŠ PROGRAM — společné ---------- */

section#nas-program {
	position: relative;
}

.program-bod summary {
	display: flex;
	align-items: stretch;
	cursor: pointer;
	list-style: none;   /* schová výchozí trojúhelníček */
}

.program-bod summary::-webkit-details-marker {
	display: none;      /* totéž pro starší Safari */
}

.program-bod summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--yellow);
}

.program-bod__cislo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--yellow);
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 900;
	transition: background 0.2s ease, color 0.2s ease;
}

/* otevřený bod i hover: číslo se invertuje */
.program-bod[open] .program-bod__cislo,
.program-bod summary:hover .program-bod__cislo {
	background: var(--black);
	color: var(--yellow);
}

.program-bod__nazev {
	flex: 1;
	display: flex;
	align-items: center;
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--black);
}

.program-bod__plus {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--black);
	font-family: "owners", sans-serif;
	font-weight: 600;
	transition: transform 0.2s ease;
}

/* + se otočí na × */
.program-bod[open] .program-bod__plus {
	transform: rotate(45deg);
}

.program-bod__obsah p {
	color: var(--black);
}

.program-bod__obsah p:last-child {
	margin-bottom: 0;
}


/* ---------- AKTUALITY — společné ---------- */

section#aktuality {
	position: relative;
}

/* nadpis sekce musí být na černé bílý */
section#aktuality h2 {
	color: var(--white);
}

.aktualita {
	display: flex;
	align-items: flex-start;
	background: var(--white);
	text-decoration: none;
	color: var(--black);
	transition: background 0.2s ease;
}

.aktualita:hover {
	background: var(--light);
}

/* novinky 4–10 schované do kliknutí na tlačítko (přidává PHP loop) */
.aktualita--skryta {
	display: none;
}

.aktualita__foto {
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--yellow);
	display: flex;
	align-items: center;
	justify-content: center;
}

.aktualita__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aktualita__foto-placeholder {
	color: var(--black);
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.aktualita__datum {
	color: #999;
	font-family: inter-18pt, sans-serif;
}

.aktualita__nadpis {
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
}

.aktualita__precist {
	display: inline-block;
	background: var(--yellow);
	color: var(--black);
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

.aktualita__precist span {
	display: inline-block;
	transition: transform 0.2s ease;
}

.aktualita:hover .aktualita__precist span {
	transform: translateX(4px);
}

/* tlačítko a prázdná hláška se vykreslují podmíněně — styly ponechat */
.aktuality-tlacitko {
	display: block;
	background: var(--yellow);
	color: var(--black);
	border: none;
	border-radius: 0;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.aktuality-tlacitko:hover {
	background: var(--white);
}

.aktuality-prazdno {
	text-align: center;
	color: var(--white);
	font-family: inter-18pt, sans-serif;
}


/* ---------- PATIČKA — společné ---------- */

.paticka {
	position: relative;
}

.paticka__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.paticka__odkazy a {
	display: block;
	color: var(--black);
	text-decoration: none;
	font-family: "owners", sans-serif;
	font-weight: 600;
}

.paticka__role {
	font-family: "owners", sans-serif;
	font-weight: 600;
	color: var(--black);
}

.paticka__jmeno {
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--black);
}

.paticka__udaj,
.paticka__udaj a {
	font-family: inter-18pt, sans-serif;
	color: var(--black);
}

.paticka__udaj a {
	text-decoration: none;
}

.paticka__udaj a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.paticka__site a {
	display: inline-block;
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

.paticka__site a:hover {
	background: var(--white);
	color: var(--black);
}

.paticka__copy {
	text-align: center;
	color: var(--black);
	font-family: inter-18pt, sans-serif;
	border-top: 1px solid var(--black);
}


/* ---------- DETAIL (single.php) — společné ---------- */

/* na podstránkách se schová velká hero fotka */
body.single .hero_pic {
	display: none;
}

.detail__zpet {
	display: inline-block;
	color: var(--black);
	text-decoration: none;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

.detail__zpet:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.detail__datum {
	display: inline-block;
	background: var(--yellow);
	color: var(--black);
	font-family: "owners", sans-serif;
	font-weight: 600;
}

.detail__nadpis {
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	text-align: left;
}

.detail__pozice {
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
}

.detail__vek {
	color: #999;
	font-family: inter-18pt, sans-serif;
}

.detail__kontakty {
	display: flex;
	flex-wrap: wrap;
}

.detail__kontakty a {
	display: inline-block;
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

.detail__kontakty a:hover {
	background: var(--yellow);
	color: var(--black);
}

.detail__foto img {
	width: 100%;
	height: auto;
	display: block;
}

.detail__obsah p,
.detail__obsah li {
	color: var(--black);
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
}

/* nadpisy v obsahu nesmí zdědit obří vycentrovaný styl tématu */
.detail__obsah h2,
.detail__obsah h3 {
	width: auto;
	text-align: left;
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
}

.detail__obsah a {
	color: var(--black);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.detail__obsah a:hover {
	background: var(--yellow);
}

.detail__obsah img {
	max-width: 100%;
	height: auto;
}

.detail__obsah blockquote {
	margin: 0;
	border-left: 4px solid var(--yellow);
	font-family: "owners", sans-serif;
	font-weight: 600;
}

.detail__tlacitko {
	display: inline-block;
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

.detail__tlacitko:hover {
	background: var(--yellow);
	color: var(--black);
}


/* =====================================================================
   3. DESKTOP (min-width: 699px)
   ===================================================================== */

@media only screen and (min-width: 699px) {

/* přepínač prvků pro desktop/mobil — připraveno pro mobilní menu */
.desktop {
	display: block;
}

.mobile {
    display: none !important;
}


/* ---------- TOP MENU ---------- */

.top_line {
	position: relative;
	width: 100%;
	height: 20vw;
	background-color: var(--yellow);
	margin-bottom: 15vw;
}

.top_logo {
	position: absolute;
	left: 50%;
	top: 0vw;
	transform: translateX(-52%);
	width: 12vw;
	height: 6vw;
	background-image: url("images/logo_kdu.svg");
	background-position: center center;
	background-size: 50%;
	background-repeat: no-repeat;
	transition: 0.2s ease;
	transform-origin: center center;
}

.top_logo:hover {
	transform: translateX(-52%) scale(105%);
}

.menu_left {
	position: absolute;
	left: 0;
	top: 1.75vw;
	width: calc(50% - 6vw - 2.5vw);
	height: 2.5vw;
	display: flex;
	gap: 2.5vw;
	flex-direction: row;
	justify-content: flex-end;
	font-size: 1vw;
    line-height: 3vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	font-style: normal;
}

.menu_right {
	position: absolute;
	right: 0;
	top: 1.75vw;
	width: calc(50% - 6vw - 2.5vw);
	height: 2.5vw;
	display: flex;
	gap: 2.5vw;
	flex-direction: row;
	justify-content: flex-start;
	font-size: 1vw;
    line-height: 3vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	font-style: normal;
}

a.menu-item {
    color: black;
    text-decoration: none;
	transition: 0.2s ease;
}

a.menu-item:hover {
    scale: 105%;
}


/* ---------- HERO ---------- */

.hero_pic {
	position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(+50%);
	height: 28vw;
	aspect-ratio: 16 / 9;
	background-color: var(--black);
	background-image: url("images/hero_pic_2.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

h1 {
	position: relative;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 10vw;
	line-height: 9vw;
	margin: 0 0 10vw 0;
	padding: 0;
}

h2 {
	position: relative;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 5vw;
	line-height: 5vw;
	margin: 0;
	padding: 0;
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 900;
	font-style: normal;
	margin-bottom: 2.5vw;
}


/* ---------- CO SE POVEDLO — desktop ---------- */

section#co-se-povedlo {
	padding: 5vw 8vw;
}

.povedlo-rozcestnik {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1vw;
	margin-bottom: 4vw;
}

.povedlo-rozcestnik a {
	display: inline-block;
	padding: 0 1.25vw;
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	font-size: 1.1vw;
	line-height: 2.5vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.1vw;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

.povedlo-rozcestnik a:hover {
	background: var(--light);
	color: var(--black);
}

.povedlo-karty {
	display: flex;
	flex-direction: column;
	gap: 2.5vw;
}

.povedlo-karta {
	display: flex;
	gap: 2.5vw;
	align-items: flex-start;
	background: var(--white);
	padding: 2.5vw;
}

/* střídání: sudé karty mají fotku vpravo */
.povedlo-karta:nth-child(even) .povedlo-karta__foto {
	order: 2;
}

.povedlo-karta__foto {
	width: 30vw;
	aspect-ratio: 4 / 3;
}

.povedlo-karta__foto--placeholder {
	font-size: 1vw;
	line-height: 1.6vw;
}

.povedlo-karta__nadpis {
	margin: 0 0 0.75vw;
	font-size: 2.25vw;
	line-height: 2.5vw;
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.1vw;
}

.povedlo-karta__perex {
	margin: 0 0 1vw;
	font-size: 1.2vw;
	line-height: 1.8vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	color: var(--black);
}

.povedlo-karta__body {
	display: flex;
	flex-direction: column;
	gap: 0.5vw;
}

.povedlo-karta__body li {
	padding-left: 1.5vw;
	font-size: 1vw;
	line-height: 1.6vw;
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
	color: var(--black);
}

.povedlo-karta__body li::before {
	width: 0.6vw;
	height: 0.6vw;
}


/* ---------- CO VÁS TRÁPÍ — desktop ---------- */

section#co-vas-trapi {
	padding: 5vw 8vw;
}

.trapi-uvod {
	max-width: 48vw;
	margin: 0 auto 3vw;
	font-size: 1.2vw;
	line-height: 1.9vw;
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
	color: var(--black);
}

.trapi-zprava {
	max-width: 48vw;
	margin: 0 auto 2vw;
	padding: 1vw 1.5vw;
	background: var(--yellow);
	text-align: center;
	font-size: 1.1vw;
	line-height: 1.7vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
}

.trapi-zprava--chyba {
	background: var(--light);
	border: 2px solid var(--black);
}

.trapi-form {
	max-width: 48vw;
	margin: 0 auto;
}

.trapi-form__popisek {
	display: block;
	margin: 0 0 0.4vw;
	font-size: 1vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05vw;
}

.trapi-form__popisek span {
	text-transform: none;
	font-weight: 400;
	color: #999;
	letter-spacing: 0;
}

.trapi-form__pole {
	padding: 0.75vw 1vw;
	font-size: 1vw;
	line-height: 1.6vw;
	font-family: inter-18pt, sans-serif;
	margin-bottom: 1.25vw;
}

.trapi-form__kontakty {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25vw;
}

.trapi-form__anonym {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6vw;
	margin: 0 0 1.5vw;
	font-size: 1vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	cursor: pointer;
}

.trapi-form__anonym input {
	width: 1.1vw;
	height: 1.1vw;
	accent-color: var(--black);
	cursor: pointer;
}

.trapi-form__tlacitko {
	display: block;
	margin: 0 auto;
	padding: 0 2vw;
	background: var(--black);
	color: var(--white);
	border: none;
	border-radius: 0;
	font-size: 1.25vw;
	line-height: 3vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	letter-spacing: 0.1vw;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.trapi-form__tlacitko:hover {
	background: var(--yellow);
	color: var(--black);
}

.trapi-form__gdpr {
	margin: 1vw 0 0;
	text-align: center;
	font-size: 0.85vw;
	color: #999;
	font-family: inter-18pt, sans-serif;
}

.trapi-osobne {
	max-width: 48vw;   /* sjednoceno s formulářem (dřív 40vw) */
	margin: 3vw auto 0;
	font-size: 1.1vw;
	line-height: 1.8vw;
	font-family: inter-18pt, sans-serif;
	color: var(--black);
}

.trapi-osobne a {
	color: var(--black);
	font-weight: 600;
}


/* ---------- NÁŠ TÝM — desktop ---------- */

section#nas-tym {
    position: relative;
    padding: 5vw 8vw;
}

.lide-karty {
    display: flex;
	gap: 2.5vw;
	flex-wrap: wrap;
	justify-content: center;
}

.lide-karta {
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    background: #fff;
	width: 19vw;
}

.lide-karta__foto {
    width: 100%;
}

.lide-karta__foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.lide-karta__telo {
    padding: 1.5vw;
}

.lide-karta__jmeno {
    margin: 0 0 0.5vw;
    font-size: 2vw;
	color: black;
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.1vw;
}

.lide-karta__pozice {
    margin: 0 0 0.5vw;
    font-size: 1.5vw;
    line-height: 1.75vw;
    /* žádný min-height */
    color: black;
    font-family: "owners-xxnarrow", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1vw;
}

.lide-karta__vek {
    margin: 0 0 1vw;              /* žádné auto — věk drží hned pod pozicí */
    font-size: 1vw;
    color: #999;
    font-family: inter-18pt, sans-serif;
}

.lide-karta__tlacitko {
    margin-top: auto;       /* volný prostor se hromadí TADY, nad tlačítkem */
    /* + ponechat align-self: flex-start a ostatní stávající vlastnosti */
}

.lide-karta__kontakty {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 10px 0 14px;
    font-size: .9rem;
}

.lide-karta__kontakty a {
    color: #444;
    text-decoration: none;
}

.lide-karta__kontakty a:hover {
    text-decoration: underline;
}

.lide-karta__tlacitko {
     display: inline-block;
     padding: 0vw 1.25vw;
     background: #000000;
     color: #fff;
     text-decoration: none;
     font-size: 1.25vw;
     line-height: 2.5vw;
     transition: background .2s ease;
     font-family: "owners", sans-serif;
     font-weight: 600;
     font-style: normal;
     letter-spacing: 0.1vw;
}

.lide-karta__tlacitko:hover {
    background: var(--yellow);
	color: var(--black);
}


/* ---------- NÁŠ PROGRAM — desktop ---------- */

section#nas-program {
	padding: 5vw 8vw;
}

.program-heslo {
	margin: 0 0 0.5vw;
	text-align: center;
	font-size: 1.4vw;
	line-height: 2vw;
	font-family: "owners", sans-serif;
	font-weight: 600;
	color: var(--black);
}

.program-podtitul {
	margin: 0 0 3vw;
	text-align: center;
	font-size: 1.1vw;
	line-height: 1.5vw;
	font-family: "owners", sans-serif;
	font-weight: 400;
	color: var(--black);
}

.program-akordeon {
	max-width: 54vw;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.75vw;
}

.program-bod {
	background: var(--light);
}

.program-bod summary {
	min-height: 3.5vw;
}

.program-bod__cislo {
	width: 3.5vw;
	font-size: 1.75vw;
}

.program-bod__nazev {
	padding: 0.5vw 1.5vw;
	font-size: 1.5vw;
	line-height: 1.7vw;
	letter-spacing: 0.05vw;
}

.program-bod__plus {
	width: 3.5vw;
	font-size: 1.75vw;
}

.program-bod__obsah {
	padding: 0.5vw 3.5vw 1.75vw 5vw;   /* levý odskok = šířka čísla + odsazení názvu */
}

.program-bod__obsah p {
	margin: 0 0 0.9vw;
	font-size: 1vw;
	line-height: 1.7vw;
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
}


/* ---------- AKTUALITY — desktop ---------- */

section#aktuality {
	padding: 5vw 8vw;
}

.aktuality-seznam {
	max-width: 54vw;   /* stejná šířka jako programový akordeon */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.75vw;
}

.aktualita {
	padding: 1vw;
	gap: 1.5vw;
}

.aktualita__foto {
	width: 9vw;
}

.aktualita__foto-placeholder {
	font-size: 0.9vw;
	letter-spacing: 0.1vw;
}

.aktualita__datum {
	margin: 0 0 0.3vw;
	font-size: 0.85vw;
	line-height: 1.2vw;
}

.aktualita__nadpis {
	margin: 0 0 0.6vw;
	font-size: 1.5vw;
	line-height: 1.7vw;
	letter-spacing: 0.05vw;
}

.aktualita__precist {
	padding: 0.15vw 0.75vw;
	font-size: 0.85vw;
	line-height: 1.5vw;
	letter-spacing: 0.05vw;
}

.aktuality-tlacitko {
	margin: 2vw auto 0;
	padding: 0 2vw;
	font-size: 1.1vw;
	line-height: 3vw;
	letter-spacing: 0.1vw;
}

.aktuality-prazdno {
	font-size: 1.1vw;
	line-height: 1.8vw;
}


/* ---------- PATIČKA — desktop ---------- */

.paticka {
	padding: 4vw 8vw 1.5vw;
}

.paticka__mrizka {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3vw;
	align-items: center;
}

.paticka__odkazy {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;    /* levý sloupec, zarovnáno doleva */
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 0.75vw;
}

.paticka__odkazy a {
	font-size: 1vw;
	line-height: 1.6vw;
	letter-spacing: 0.05vw;
	transition: 0.2s ease;
}

.paticka__odkazy a:hover {
	scale: 105%;
}

.paticka__logo {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;   /* logo na středu patičky */
	transform: scale(100%) translateX(-1.5vw) translateY(-0.5vw);
}

.paticka__logo img {
	max-width: 17vw;
	transition: 0.2s ease;
}

.paticka__logo img:hover {
	scale: 105%;
}

.paticka__kontakt {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;      /* vizitka k pravému okraji */
}

.paticka__role {
	margin: 0 0 0.4vw;
	font-size: 1vw;
	line-height: 1.6vw;
	letter-spacing: 0.1vw;
}

.paticka__jmeno {
	margin: 0 0 0.75vw;
	font-size: 1.75vw;
	line-height: 2vw;
	letter-spacing: 0.05vw;
	text-align: right;
}

.paticka__udaj {
	margin: 0 0 0.3vw;
	font-size: 1vw;
	line-height: 1.5vw;
	text-align: right;
}

.paticka__site {
	display: flex;
	gap: 0.5vw;
	margin-top: 1vw;
	justify-content: flex-end;
}

.paticka__site a {
	padding: 0 1vw;
	font-size: 0.9vw;
	line-height: 2.2vw;
	letter-spacing: 0.05vw;
}

.paticka__copy {
	margin: 3vw 0 0;
	padding-top: 1.25vw;
	font-size: 0.85vw;
	line-height: 1.3vw;
}


/* ---------- DETAIL (single.php) — desktop ---------- */

/* menší hlavička bez hero fotky */
body.single .top_line {
	height: 10vw;
	margin-bottom: 4vw;
}

.detail {
	padding: 0 8vw 5vw;
}

.detail__clanek {
	max-width: 48vw;   /* stejná šířka jako formulář Co vás trápí */
	margin: 0 auto;
}

.detail__zpet {
	margin: 0 0 2vw;
	font-size: 0.9vw;
	line-height: 1.4vw;
	letter-spacing: 0.05vw;
}

.detail__datum {
	margin: 0 0 0.75vw;
	padding: 0.15vw 0.75vw;
	font-size: 0.85vw;
	line-height: 1.5vw;
	letter-spacing: 0.05vw;
}

.detail__nadpis {
	margin: 0 0 1vw;
	font-size: 3vw;
	line-height: 3.2vw;
	letter-spacing: 0.05vw;
}

.detail__pozice {
	margin: 0 0 0.3vw;
	font-size: 1.5vw;
	line-height: 1.8vw;
	letter-spacing: 0.05vw;
}

.detail__vek {
	margin: 0 0 1vw;
	font-size: 1vw;
	line-height: 1.5vw;
}

.detail__kontakty {
	gap: 0.5vw;
	margin: 0 0 1.5vw;
}

.detail__kontakty a {
	padding: 0 1vw;
	font-size: 0.9vw;
	line-height: 2.2vw;
	letter-spacing: 0.05vw;
}

.detail__foto {
	margin: 0 0 2vw;
}

.detail__obsah p,
.detail__obsah li {
	margin: 0 0 1vw;
	font-size: 1.05vw;
	line-height: 1.8vw;
	text-align: justify;
}

.detail__obsah h2 {
	margin: 2vw 0 0.75vw;
	font-size: 2vw;
	line-height: 2.2vw;
	letter-spacing: 0.05vw;
}

.detail__obsah h3 {
	margin: 1.5vw 0 0.5vw;
	font-size: 1.5vw;
	line-height: 1.7vw;
	letter-spacing: 0.05vw;
}

.detail__obsah ul,
.detail__obsah ol {
	margin: 0 0 1vw;
	padding-left: 1.5vw;
}

.detail__obsah blockquote {
	margin: 0 0 1vw;
	padding: 0.5vw 0 0.5vw 1.25vw;
	font-size: 1.2vw;
	line-height: 1.9vw;
}

.detail__obsah img {
	margin: 1vw 0;
}

.detail__tlacitko {
	margin-top: 2vw;
	padding: 0 1.5vw;
	font-size: 1vw;
	line-height: 2.75vw;
	letter-spacing: 0.05vw;
}

}
/* ===== KONEC DESKTOP MEDIA QUERY ===== */



/* =====================================================================
   4. MOBILE (max-width: 699.5px)
   Nahraď tímto celý stávající (prázdný) mobilní blok na konci style.css.

   Zásady:
   - velikosti v px (ne vw) — mobilní rozsah 300–699px je moc široký
     na to, aby vw dávalo rozumné hodnoty; výjimkou jsou jen velké
     nadpisy h1/h2, kde je škálování žádoucí
   - formulářová pole mají font-size 16px — pod touto hranicí iPhone
     při kliknutí do pole zoomuje celou stránku
   - karty a mřížky se skládají pod sebe, fotky jdou nad text
   ===================================================================== */

@media only screen and (max-width: 699.5px) {

.desktop {
	display: none !important;
}

.mobile {
	display: block;
}


/* ---------- HLAVIČKA A MENU ---------- */

.top_line {
	position: relative;
	width: 100%;
	background-color: var(--yellow);
	padding: 24px 16px 0;
	margin-bottom: 40px;
}

.top_logo {
	display: block;
	width: 130px;
	height: 62px;
	margin: 0 auto 18px;
	background-image: url("images/logo_kdu.svg");
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* obě poloviny menu se chovají stejně — vyjdou jako dva vystředěné řádky */
.menu_left,
.menu_right {
	position: static;
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 18px;
	font-family: "owners", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 14px;
	line-height: 26px;
}

a.menu-item {
	color: var(--black);
	text-decoration: none;
}


/* ---------- HERO ---------- */

.hero_pic {
	position: relative;
	bottom: -20px;          /* mírný přesah přes spodní okraj žlutého pruhu */
	left: auto;
	transform: none;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-top: 20px;
	background-color: var(--black);
	background-image: url("images/hero_pic.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

h1 {
	position: relative;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 900;
	font-size: 13vw;
	line-height: 0.95;
	margin: 0 0 40px;
	padding: 0 16px;
}

h2 {
	position: relative;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 9vw;
	line-height: 1;
	margin: 0 0 24px;
	padding: 0;
}


/* ---------- CO SE POVEDLO ---------- */

section#co-se-povedlo {
	padding: 40px 20px;
}

.povedlo-rozcestnik {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
}

.povedlo-rozcestnik a {
	display: inline-block;
	padding: 6px 12px;
	background: var(--black);
	color: var(--white);
	text-decoration: none;
	font-family: "owners", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.povedlo-karty {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.povedlo-karta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--white);
	padding: 16px;
	scroll-margin-top: 16px;
}

/* na mobilu je fotka vždy nahoře, i u sudých karet */
.povedlo-karta:nth-child(even) .povedlo-karta__foto {
	order: 0;
}

.povedlo-karta__foto {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.povedlo-karta__foto--placeholder {
	font-size: 13px;
	line-height: 1.5;
}

.povedlo-karta__nadpis {
	margin: 10px 0 10px;
	font-size: 30px;
	line-height: 1.1;
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.povedlo-karta__perex {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.45;
	font-family: "owners", sans-serif;
	font-weight: 600;
	color: var(--black);
}

.povedlo-karta__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.povedlo-karta__body li {
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.5;
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
	color: var(--black);
}

.povedlo-karta__body li::before {
	width: 9px;
	height: 9px;
}


/* ---------- CO VÁS TRÁPÍ ---------- */

section#co-vas-trapi {
	padding: 40px 20px;
}

/* na úzké obrazovce dělá bloková sazba díry — raději na střed */
.trapi-uvod,
.trapi-osobne {
	text-align: center;
	text-align-last: auto;
}

.trapi-uvod {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.55;
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
	color: var(--black);
}

.trapi-zprava {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--yellow);
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	font-family: "owners", sans-serif;
	font-weight: 600;
}

.trapi-zprava--chyba {
	background: var(--light);
	border: 2px solid var(--black);
}

.trapi-form__popisek {
	display: block;
	margin: 0 0 5px;
	font-size: 13px;
	font-family: "owners", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.trapi-form__popisek span {
	text-transform: none;
	font-weight: 400;
	color: #6b6b6b;
	letter-spacing: 0;
}

.trapi-form__pole {
	padding: 10px 12px;
	font-size: 16px;   /* pod 16px iPhone při fokusu zoomuje stránku */
	line-height: 1.5;
	font-family: inter-18pt, sans-serif;
	margin-bottom: 16px;
}

.trapi-form__kontakty {
	display: block;
}

.trapi-form__anonym {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 20px;
	font-size: 15px;
	font-family: "owners", sans-serif;
	font-weight: 600;
	cursor: pointer;
}

.trapi-form__anonym input {
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: var(--black);
}

.trapi-form__tlacitko {
	display: block;
	width: 100%;
	padding: 14px 20px;
	background: var(--black);
	color: var(--white);
	border: none;
	border-radius: 0;
	font-size: 16px;
	line-height: 1.2;
	font-family: "owners", sans-serif;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

.trapi-form__gdpr {
	margin: 10px 0 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.4;
	color: #6b6b6b;
	font-family: inter-18pt, sans-serif;
}

.trapi-osobne {
	margin: 28px 0 0;
	font-size: 15px;
	line-height: 1.55;
	font-family: inter-18pt, sans-serif;
	color: var(--black);
}

.trapi-osobne a {
	color: var(--black);
	font-weight: 600;
}


/* ---------- NÁŠ TÝM ---------- */

section#nas-tym {
	position: relative;
	padding: 40px 20px;
}

/* dva sloupce — 15 karet v jednom sloupci by byl nekonečný scroll */
.lide-karty {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.lide-karta {
	width: calc(50% - 6px);
	background: #fff;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.lide-karta__foto {
	width: 100%;
}

.lide-karta__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.lide-karta__telo {
	padding: 12px;
}

.lide-karta__jmeno {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.1;
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lide-karta__pozice {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.15;
	color: var(--black);
	font-family: "owners-xxnarrow", sans-serif;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.lide-karta__vek {
	margin: 0 0 12px;
	font-size: 12px;
	color: #6b6b6b;
	font-family: inter-18pt, sans-serif;
}

.lide-karta__kontakty {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 8px 0 10px;
	font-size: 12px;
}

.lide-karta__kontakty a {
	color: #444;
	text-decoration: none;
}

.lide-karta__tlacitko {
	display: inline-block;
	margin-top: auto;
	align-self: flex-start;
	padding: 6px 14px;
	background: #000;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	line-height: 1.2;
	font-family: "owners", sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.05em;
}


/* ---------- NÁŠ PROGRAM ---------- */

section#nas-program {
	padding: 40px 20px;
}

.program-heslo {
	margin: 0 0 6px;
	text-align: center;
	font-size: 17px;
	line-height: 1.3;
	font-family: "owners", sans-serif;
	font-weight: 600;
	color: var(--black);
}

.program-podtitul {
	margin: 0 0 24px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	font-family: "owners", sans-serif;
	font-weight: 400;
	color: var(--black);
}

.program-akordeon {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.program-bod {
	background: var(--light);
}

.program-bod summary {
	min-height: 52px;
}

.program-bod__cislo {
	width: 44px;
	font-size: 20px;
}

.program-bod__nazev {
	padding: 10px 12px;
	font-size: 18px;
	line-height: 1.15;
	letter-spacing: 0.03em;
}

.program-bod__plus {
	width: 40px;
	font-size: 22px;
}

.program-bod__obsah {
	padding: 4px 16px 18px;
}

.program-bod__obsah p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.55;
	font-family: inter-18pt, sans-serif;
	font-weight: 400;
}


/* ---------- AKTUALITY ---------- */

section#aktuality {
	padding: 40px 20px;
}

.aktuality-seznam {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aktualita {
	padding: 10px;
	gap: 12px;
}

.aktualita__foto {
	width: 88px;
}

.aktualita__foto-placeholder {
	font-size: 11px;
	letter-spacing: 0.05em;
}

.aktualita__datum {
	margin: 0 0 3px;
	font-size: 12px;
	line-height: 1.3;
}

.aktualita__nadpis {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.15;
	letter-spacing: 0.03em;
}

.aktualita__precist {
	padding: 3px 9px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.aktuality-tlacitko {
	margin: 20px auto 0;
	padding: 12px 24px;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.aktuality-prazdno {
	font-size: 15px;
	line-height: 1.55;
}


/* ---------- PATIČKA ---------- */

.paticka {
	padding: 36px 20px 14px;
}

.paticka__mrizka {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
}

.paticka__logo img {
	max-width: 170px;
	margin: 0 auto;
}

.paticka__odkazy {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.paticka__odkazy a {
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.03em;
}

.paticka__role {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.paticka__jmeno {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: 0.02em;
}

.paticka__udaj {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.5;
}

.paticka__site {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.paticka__site a {
	padding: 8px 16px;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.paticka__copy {
	margin: 30px 0 0;
	padding-top: 14px;
	font-size: 12px;
	line-height: 1.4;
}


/* ---------- DETAIL (single.php) ---------- */

/* hero je skrytý (společná část) — pruhu chybí spodní odsazení */
body.single .top_line {
	padding-bottom: 24px;
	margin-bottom: 24px;
}

.detail {
	padding: 0 20px 40px;
}

.detail__zpet {
	margin: 0 0 20px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.detail__datum {
	margin: 0 0 8px;
	padding: 3px 9px;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.detail__nadpis {
	margin: 0 0 12px;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: 0.02em;
	padding: 0;
}

.detail__pozice {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.detail__vek {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
}

.detail__kontakty {
	gap: 8px;
	margin: 0 0 18px;
}

.detail__kontakty a {
	padding: 7px 14px;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

.detail__foto {
	margin: 0 0 18px;
}

.detail__obsah p,
.detail__obsah li {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;   /* bloková sazba je na úzké obrazovce nečitelná */
}

.detail__obsah h2 {
	margin: 24px 0 8px;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: 0.02em;
}

.detail__obsah h3 {
	margin: 18px 0 6px;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.detail__obsah ul,
.detail__obsah ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.detail__obsah blockquote {
	margin: 0 0 12px;
	padding: 6px 0 6px 14px;
	font-size: 17px;
	line-height: 1.5;
}

.detail__obsah img {
	margin: 12px 0;
}

.detail__tlacitko {
	margin-top: 24px;
	padding: 10px 18px;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.05em;
}

}
/* ===== KONEC MOBILE MEDIA QUERY ===== */