/* ============================================================
   Domeček Hořovice – Frontend CSS
   ============================================================ */

:root {
	--primary:     #e8882a;   /* oranžová z loga */
	--primary-dark:#c96e18;
	--secondary:   #3a8c8a;   /* teal z loga – hlavní text */
	--secondary-dark:#2a6b69;
	--teal:        #3a8c8a;
	--teal-light:  #7ecbca;   /* světlý tyrkys z loga */
	--purple:      #c0417a;   /* fialová/magenta ze střechy */
	--yellow:      #f5c842;   /* žlutá z loga */
	--green:       #8cc63f;   /* zelená z loga */
	--navy:        #1e4d6b;   /* tmavě modrá z loga */
	--text:        #2c3e50;
	--text-muted:  #6c7a89;
	--bg-light:    #fafafa;
	--bg-section:  #f0f7f7;   /* velmi světlý teal */
	--bg-warm:     #fdf4ec;   /* velmi světlá oranžová */
	--white:       #ffffff;
	--radius:      12px;
	--shadow:      0 4px 20px rgba(0,0,0,.08);
	--shadow-hover:0 8px 32px rgba(0,0,0,.15);
}

/* ── Kopírování kontaktu ──────────────────────────────
   Nenápadné tlačítko vedle e-mailu a telefonu. Na počítači se totiž kontakt
   nedá ani označit myší (kliknutí spustí mailto:/tel:) a dialog „čím to
   otevřít" většinou nabídne prázdno. Barvu si bere od okolního textu, takže
   funguje i na tmavém pruhu v Kontaktu. */
.js-copy {
	border: 0;
	background: none;
	padding: 0 .35rem;
	margin-left: .15rem;
	color: inherit;
	opacity: .55;
	font-size: .85em;
	line-height: 1;
	cursor: pointer;
	transition: opacity .15s, color .15s;
	vertical-align: baseline;
}
.js-copy:hover, .js-copy:focus-visible { opacity: 1; color: var(--primary); }
.js-copy--done { opacity: 1; color: #27ae60; }

/* Řádek kontaktu, aby tlačítko zůstalo vedle odkazu a nepadalo pod něj. */
.contact-line { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; }
.lektor-contact-wrap { display: flex; align-items: center; gap: .25rem; }
.lektor-contact-wrap .lektor-contact-row { flex: 1; min-width: 0; }

/* ── Base ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
	font-family: 'Nunito', 'Segoe UI', sans-serif;
	color: var(--text);
	background: var(--white);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main { flex: 1; }

h1, h2, h3, h4 { font-weight: 800; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

.btn-primary {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	font-weight: 700;
	border-radius: 50px;
	padding: .6rem 1.8rem;
	transition: all .2s;
}
.btn-primary:hover {
	background: var(--primary-dark);
	border-color: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(244,160,34,.4);
}

.btn-outline-primary {
	border-color: var(--primary);
	color: var(--primary);
	font-weight: 700;
	border-radius: 50px;
	padding: .6rem 1.8rem;
	transition: all .2s;
}
.btn-outline-primary:hover {
	background: var(--primary);
	color: #fff;
	transform: translateY(-2px);
}

.section-title {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: .5rem;
}

.section-subtitle {
	color: var(--text-muted);
	font-size: 1.05rem;
	margin-bottom: 2.5rem;
}

.section-label {
	display: inline-block;
	background: var(--teal);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .25rem .9rem;
	border-radius: 50px;
	margin-bottom: .75rem;
}

/* ── Navbar ───────────────────────────────────────────── */
.navbar-domecek {
	background: var(--white);
	box-shadow: 0 2px 12px rgba(0,0,0,.08);
	padding: .1rem 0;
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Mobilní rozbalené menu – pokud je delší než viewport, zpřístupnit scroll uvnitř.
   Bez tohoto fixu sticky navbar přeteče dolů a uživatel scrolloval celou stránku
   místo menu, takže se ke spodním položkám nedostal. */
@media (max-width: 991.98px) {
	.navbar-domecek .navbar-collapse {
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}

.navbar-domecek .navbar-brand {
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--primary);
	display: flex;
	align-items: center;
	gap: .5rem;
}

.navbar-logo {
	height: 80px;
	width: auto;
	object-fit: contain;
}

.footer-logo {
	height: 56px;
	width: auto;
	object-fit: contain;
	display: block;
}

.navbar-domecek .navbar-brand .brand-sub {
	font-weight: 400;
	color: var(--text-muted);
	font-size: .9rem;
}

.navbar-domecek .nav-link {
	color: var(--text) !important;
	font-weight: 600;
	font-size: .95rem;
	padding: .4rem .9rem !important;
	border-radius: 8px;
	transition: all .15s;
}

.navbar-domecek .nav-link:hover,
.navbar-domecek .nav-link.active {
	color: var(--primary) !important;
	background: rgba(244,160,34,.08);
}

.navbar-domecek .btn-nav {
	background: var(--teal);
	color: #fff !important;
	border-radius: 50px;
	padding: .4rem 1.2rem !important;
	font-weight: 700;
}

.navbar-domecek .btn-nav:hover {
	background: var(--secondary-dark);
	transform: translateY(-1px);
}

/* ── Dropdown split – menší gap mezi textem a šipkou ──── */
.navbar-domecek .nav-item.dropdown { gap: 0; }
.navbar-domecek .nav-item .dropdown-toggle-split { padding-left: .15rem !important; padding-right: .4rem !important; }
.navbar-domecek .nav-link { white-space: nowrap; }

/* ── E-shop menu link ─────────────────────────────────── */
.navbar-domecek .nav-link-eshop {
	color: #16a34a !important;
	font-weight: 700;
}
.navbar-domecek .nav-link-eshop:hover,
.navbar-domecek .nav-link-eshop.active {
	color: #fff !important;
	background: #16a34a;
	border-radius: 6px;
}

/* ── Rezervace menu link ──────────────────────────────── */
.navbar-domecek .nav-link-reservations {
	color: #7c3aed !important;
	font-weight: 700;
}
.navbar-domecek .nav-link-reservations:hover,
.navbar-domecek .nav-link-reservations.active {
	color: #fff !important;
	background: #7c3aed;
	border-radius: 6px;
}

/* ── Sekční podbarvení navbaru ────────────────────────── */
.navbar-domecek.section-eshop {
	border-top: 3px solid #16a34a;
	background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}
.navbar-domecek.section-activities {
	border-top: 3px solid var(--primary);
	background: linear-gradient(180deg, #fff8ed 0%, #fff 100%);
}
.navbar-domecek.section-reservations {
	border-top: 3px solid #7c3aed;
	background: linear-gradient(180deg, #f5f3ff 0%, #fff 100%);
}

/* ── O nás dropdown ───────────────────────────────────── */
.dropdown-menu-onas {
	min-width: 280px;
	border: none;
	border-radius: 14px;
	box-shadow: 0 16px 48px rgba(0,0,0,.13);
	padding: .5rem;
}
.dropdown-menu-onas .dropdown-item {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .6rem .75rem;
	border-radius: 10px;
	transition: background .12s;
}
.dropdown-menu-onas .dropdown-item:hover {
	background: var(--bg-section);
}
.onas-item-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--bg-warm);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	flex-shrink: 0;
	transition: background .12s, color .12s;
}
.dropdown-menu-onas .dropdown-item:hover .onas-item-icon {
	background: var(--primary);
	color: #fff;
}
.onas-item-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.onas-item-text strong {
	font-size: .88rem;
	font-weight: 700;
	color: var(--text);
}
.onas-item-text small {
	font-size: .75rem;
	color: var(--text-muted);
}
.dropdown-menu-onas .dropdown-divider {
	margin: .3rem .5rem;
	border-color: rgba(0,0,0,.07);
}

/* ── Mega-menu ────────────────────────────────────────── */
.megamenu {
	min-width: 720px;
	border: none;
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0,0,0,.14);
	overflow: hidden;
	padding: 0 !important;
}

.megamenu-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.megamenu-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 2rem 1.5rem;
	color: var(--text);
	text-decoration: none;
	border-right: 1px solid rgba(0,0,0,.06);
	transition: background .15s;
}
.megamenu-col:last-child { border-right: none; }

.megamenu-col:hover {
	background: var(--bg-section);
	color: var(--text);
	text-decoration: none;
}
.megamenu-col:hover .megamenu-col-icon {
	background: var(--primary);
	color: #fff;
}
.megamenu-col:hover .megamenu-col-title {
	color: var(--primary);
}

.megamenu-col-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bg-warm);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	margin-bottom: 1rem;
	transition: background .15s, color .15s;
}

.megamenu-col-title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text);
	margin-bottom: .6rem;
	letter-spacing: -.01em;
	transition: color .15s;
}

.megamenu-col-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.megamenu-col-list li {
	font-size: .82rem;
	color: var(--text-muted);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: .45rem;
}

.megamenu-col-list li i {
	font-size: .45rem;
	color: var(--teal-light);
	flex-shrink: 0;
}

/* 2×2 grid variant pro Kontakt mega-menu */
/* Megamenu pozicování – centrovat pod navbar */
.navbar-nav > .nav-item.dropdown:has(.megamenu) {
	position: static;
}
.navbar-nav > .nav-item.dropdown > .megamenu {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	min-width: min(780px, 95vw);
}
.megamenu:has(.megamenu-inner--6col) {
	min-width: min(980px, 95vw);
}

.megamenu-inner--2col {
	grid-template-columns: repeat(2, 1fr);
}

.megamenu-inner--4col {
	grid-template-columns: repeat(4, 1fr);
}

.megamenu-inner--5col {
	grid-template-columns: repeat(5, 1fr);
}

.megamenu-inner--6col {
	grid-template-columns: repeat(6, 1fr);
}

.megamenu-col--img {
	padding: 0 !important;
	overflow: hidden;
}

.megamenu-col-thumb {
	width: 100%;
	height: 110px;
	overflow: hidden;
}

.megamenu-col-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.megamenu-col--img:hover .megamenu-col-thumb img {
	transform: scale(1.08);
}

.megamenu-col--img .megamenu-col-body {
	padding: .75rem 1rem 1rem;
}

.megamenu-col-desc {
	font-size: .78rem;
	color: var(--text-muted);
	line-height: 1.4;
	margin: .25rem 0 0;
}

/* poslední položka zabere celý řádek v 2col gridu */
.megamenu-inner--2col .megamenu-col--wide {
	grid-column: 1 / -1;
	border-right: none;
	border-top: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 991px) {
	.megamenu,
	.navbar-nav > .nav-item.dropdown > .megamenu {
		min-width: 0;
		width: 100%;
		border-radius: 12px;
		left: 0 !important;
		transform: none;
	}
	.megamenu-inner,
	.megamenu-inner--2col,
	.megamenu-inner--4col,
	.megamenu-inner--5col,
	.megamenu-inner--6col {
		grid-template-columns: 1fr;
	}
	.megamenu-col-thumb { height: 80px; }
	.megamenu-inner--2col .megamenu-col--wide {
		grid-column: auto;
		border-top: none;
	}
	.megamenu-col {
		padding: 1rem 1.25rem;
		border-right: none;
		border-bottom: 1px solid rgba(0,0,0,.06);
		flex-direction: row;
		align-items: flex-start;
		gap: 1rem;
	}
	.megamenu-col:last-child { border-bottom: none; }
	.megamenu-col-icon { margin-bottom: 0; flex-shrink: 0; }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 55%, var(--primary) 100%);
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: .5;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(30,77,107,.85) 0%, rgba(58,140,138,.6) 60%, rgba(232,136,42,.25) 100%);
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	font-weight: 900;
	color: #fff;
	line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

.hero h1 span {
	color: var(--primary);
}

.hero .lead {
	color: rgba(255,255,255,.9);
	font-size: 1.2rem;
	max-width: 540px;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	backdrop-filter: blur(8px);
	border-radius: 50px;
	padding: .4rem 1rem;
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.hero-stats {
	display: flex;
	gap: 2rem;
	margin-top: 2.5rem;
}

.hero-stat {
	text-align: center;
}

.hero-stat .number {
	font-size: 2rem;
	font-weight: 900;
	color: var(--primary);
	line-height: 1;
}

.hero-stat .label {
	color: rgba(255,255,255,.8);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.hero-image-card {
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-hover);
	transform: rotate(2deg);
	transition: transform .3s;
}

.hero-image-card:hover { transform: rotate(0deg) scale(1.02); }

.hero-image-card img {
	width: 100%;
	height: 380px;
	object-fit: cover;
}

.hero-domecek {
	width: clamp(240px, 30vw, 420px);
	height: auto;
	transform: rotate(8deg);
	filter: drop-shadow(0 8px 32px rgba(0,0,0,.2));
	opacity: .4;
	animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
	0%, 100% { transform: rotate(8deg) translateY(0); }
	50%      { transform: rotate(8deg) translateY(-14px); }
}

/* ── O nás ────────────────────────────────────────────── */
.about {
	padding: 6rem 0;
	background: var(--white);
}

.about-image {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	position: relative;
}

.about-image img {
	width: 100%;
	height: 440px;
	object-fit: cover;
}

.about-image-badge {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	background: var(--primary);
	color: #fff;
	border-radius: var(--radius);
	padding: .75rem 1.25rem;
	font-weight: 700;
	box-shadow: var(--shadow);
}

.about-features {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
}

.about-feature {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-weight: 600;
}

.about-feature-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	flex-shrink: 0;
}

/* ── Aktivity ─────────────────────────────────────────── */
.activities {
	padding: 6rem 0;
	background: var(--bg-warm);
}

.activity-card {
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: all .3s;
	height: 100%;
}

.activity-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-hover);
}

/* Dlaždice s odkazem – celá karta je proklik */
a.activity-card--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
a.activity-card--link:hover { text-decoration: none; color: inherit; }

.activity-card-img {
	height: 200px;
	overflow: hidden;
}

.activity-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.activity-card:hover .activity-card-img img {
	transform: scale(1.05);
}

.activity-card-body {
	padding: 1.5rem;
}

.activity-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 1rem;
}

.activity-card-body h4 {
	font-size: 1.1rem;
	margin-bottom: .4rem;
}

.activity-card-body p {
	color: var(--text-muted);
	font-size: .9rem;
	margin-bottom: 1rem;
}

.activity-tag {
	display: inline-block;
	background: var(--bg-section);
	color: var(--text-muted);
	font-size: .75rem;
	font-weight: 600;
	padding: .2rem .7rem;
	border-radius: 50px;
}

/* ── Aktivity – slider dlaždic ────────────────────────────
   Vodorovný scroll-snap slider pro kategorie s více než 4 položkami.
   Šipky a tečky ovládá act-slider.js; karty samotné jsou .activity-card. */
.act-slider {
	position: relative;
}

.act-track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: .5rem;
	/* skrytý scrollbar – ovládání přes šipky/tečky */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.act-track::-webkit-scrollbar { display: none; }

.act-slide {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 3 * 1.5rem) / 4); /* 4 karty na desktopu */
	min-width: 0;
}

@media (max-width: 991.98px) {
	.act-slide { flex-basis: calc((100% - 1.5rem) / 2); } /* 2 karty */
}
@media (max-width: 575.98px) {
	.act-slide { flex-basis: 85%; } /* 1 karta + náznak další */
}

/* Šipky */
.act-slider-arrow {
	position: absolute;
	top: 100px; /* zhruba na výšku obrázku karty */
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--white);
	color: var(--primary);
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	transition: background .2s, color .2s, opacity .2s, transform .2s;
}
.act-slider-arrow:hover {
	background: var(--primary);
	color: #fff;
}
.act-slider-arrow--prev { left: -10px; }
.act-slider-arrow--next { right: -10px; }

.act-slider-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 1199.98px) {
	.act-slider-arrow--prev { left: 4px; }
	.act-slider-arrow--next { right: 4px; }
}

/* Tečky */
.act-slider-dots {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.5rem;
}
.act-slider-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #d3dce6;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.act-slider-dots button.active {
	background: var(--primary);
	transform: scale(1.3);
}

/* ── Aktivity – taby ─────────────────────────────────── */
/* Hint nad přepínačem – pomáhá lidem rozpoznat, že tu mají vybírat. */
.act-tabs-hint {
	font-size: .9rem;
	letter-spacing: .02em;
}

/* Segmentovaný přepínač (pill toggle): jeden zaoblený kontejner, 3 segmenty.
   Vizuálně jednoznačně signalizuje „jeden ze tří", místo 3 izolovaných karet.

   Bootstrap přidává display:flex přes .nav – necháme ho, jen ho přesvědčíme
   ať se zužuje na obsah a centruje se margin:auto. */
.act-tabs {
	display: flex;
	gap: 0;
	margin: 0 auto 2.5rem;
	width: fit-content;
	max-width: 100%;
	background: #f1f5f9;
	border-radius: 999px;
	padding: .35rem;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
	list-style: none;
}

.act-tabs .nav-item { margin: 0; }

.act-tab {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.4rem;
	background: transparent;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s, color .18s, transform .12s;
	color: var(--text);
	font-family: inherit;
	font-weight: 700;
	font-size: .95rem;
	white-space: nowrap;
}

.act-tab:hover:not(.active) {
	background: rgba(255, 255, 255, .7);
	transform: none;
}

.act-tab.active {
	background: var(--primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(244,160,34,.35);
}

.act-tab-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.act-tab-label {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Mobilní: na úzkých obrazovkách rozšíříme segmenty na plný řádek pod sebou,
   ať se nezalomí ošklivě. */
@media (max-width: 575.98px) {
	.act-tabs {
		flex-direction: column;
		border-radius: 16px;
		padding: .25rem;
		width: 100%;
	}
	.act-tab {
		justify-content: center;
		width: 100%;
	}
}

/* ── Aktuality ────────────────────────────────────────── */
.news {
	padding: 6rem 0;
	background: var(--white);
}

/* Aktivity (.about) i Aktuality (.news) mají bílé pozadí a obě 6rem padding –
   po sobě se mezery sčítaly (6rem dole + 6rem nahoře = obří díra). Když .news
   následuje hned po .about, horní padding zrušíme; spodní padding .about stačí. */
.about + .news {
	padding-top: 0;
}

.news-card {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: all .3s;
	height: 100%;
	background: var(--white);
	border: 1px solid #eef0f3;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.news-card-img {
	height: 200px;
	overflow: hidden;
	position: relative;
}

.news-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s;
}

.news-card:hover .news-card-img img { transform: scale(1.05); }

.news-card-date {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: var(--primary);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	padding: .3rem .7rem;
	border-radius: 50px;
}

.news-card-body {
	padding: 1.5rem;
}

.news-card-body h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .5rem;
	line-height: 1.4;
}

.news-card-body p {
	color: var(--text-muted);
	font-size: .88rem;
	margin-bottom: 0;
}

/* ── Kontakt ──────────────────────────────────────────── */
.contact {
	padding: 6rem 0;
	background: var(--bg-section);   /* světlý teal */
}

.contact-card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 2.5rem;
	box-shadow: var(--shadow);
	height: 100%;
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.contact-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(244,160,34,.1);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.contact-item .label {
	font-size: .75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}

.contact-item .value {
	font-weight: 700;
	color: var(--text);
}

/* ── Kontakt – barevná sekce ─────────────────────────── */
.contact-dark {
	background: linear-gradient(135deg, var(--navy) 0%, var(--secondary) 100%);
	color: rgba(255,255,255,.85);
	padding: 5rem 0 0;
}

.contact-dark h2 {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 3.5rem;
}

.contact-dark h4 {
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 1.5rem;
}

.contact-dark p,
.contact-dark address {
	color: rgba(255,255,255,.65);
	font-size: .95rem;
	line-height: 1.7;
	font-style: normal;
}

/*
	Patička – kontaktní sloupec. Nahoře řádky „kam přijít / zavolat / napsat",
	pod linkou úřední údaje. Ikony mají pevnou šířku, aby texty lícovaly na
	jedné svislici i tehdy, když se adresa zalomí do dvou řádků.
*/
.footer-contact-row {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	margin-bottom: .5rem;
}
.footer-contact-row > i:first-child {
	flex: 0 0 1rem;
	width: 1rem;
	text-align: center;
}
.footer-contact-hint {
	display: block;
	margin-top: .1rem;
	font-size: .78rem;
	opacity: .55;
}

.footer-official {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,.12);
}
.footer-official-title {
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .45;
	margin-bottom: .5rem;
}
/* Popisek a hodnota vedle sebe: samotné „35-7041020237/0100" na řádku nikomu
   neřekne, co to je, a „Bankovní spojení: …" se zase lámalo přes dva řádky. */
.footer-official dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .15rem .6rem;
	margin: 0;
	font-size: .78rem;
	line-height: 1.5;
}
.footer-official dt {
	font-weight: 400;
	opacity: .45;
	white-space: nowrap;
}
.footer-official dd {
	margin: 0;
	opacity: .7;
	overflow-wrap: anywhere;
}

/*
	Kontakt má dvě adresy: nahoře tu, kam má člověk přijít (recepce), dole
	sídlo pro úřady a faktury. Rozdíl musí být vidět na první pohled, jinak
	se návštěvník vydá na sídlo a nikoho nenajde – proto je ulice recepce
	zvýrazněná a sídlo oddělené linkou a menším písmem.
*/
.contact-address-street {
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
}
.contact-note {
	font-size: .85rem !important;
	line-height: 1.55 !important;
	color: rgba(255,255,255,.6) !important;
}
.contact-office {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,.15);
}
.contact-office h5 {
	color: rgba(255,255,255,.75);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: .5rem;
}
.contact-office address {
	font-size: .9rem !important;
	margin-bottom: .4rem;
}

.contact-dark strong {
	color: rgba(255,255,255,.9);
}

.contact-dark a {
	color: var(--primary);
}

.contact-dark a:hover {
	color: var(--primary-dark);
}

.hours-row {
	display: flex;
	justify-content: space-between;
	padding: .35rem 0;
	border-bottom: 1px solid rgba(255,255,255,.12);
	font-size: .9rem;
}

.hours-row:last-child { border-bottom: none; }

.hours-row .day { color: rgba(255,255,255,.55); }
.hours-row .time { color: rgba(255,255,255,.9); font-weight: 600; }
.hours-row .time.closed { color: rgba(255,255,255,.35); font-weight: 400; }

.contact-dark-divider {
	border: none;
	border-top: 1px solid rgba(255,255,255,.08);
	margin: 3.5rem 0 0;
}

.contact-map-wrap {
	position: relative;
}

/* Výška: pruh 380 px byl úzký na to, aby šla poznat okolní ulice. Roste
   s výškou okna, ale nikdy nepřeroste obrazovku. */
.contact-map-wrap iframe,
.contact-map-wrap #contactMap {
	width: 100%;
	height: clamp(420px, 62vh, 620px);
	display: block;
}
.contact-map-wrap iframe { filter: grayscale(20%) brightness(0.95); }
.contact-map-wrap #contactMap { z-index: 0; } /* ať popup nepřekryje lištu */

/* Špendlík pracoviště – vlastní, aby šlo odlišit sídlo a nepotřebovali jsme
   obrázkové ikony Leafletu. */
/* Leaflet dává vlastním ikonám bílý rámeček (.leaflet-div-icon) a jeho styly
   se načítají až za front.css – proto ta zdvojená třída, jinak by špendlík
   seděl v bílém čtverečku. */
.leaflet-div-icon.contact-pin, .contact-pin { background: none; border: 0; }
.contact-pin-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: #0ea5e9;
	color: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.35);
	border: 2px solid #fff;
}
.contact-pin-dot i { transform: rotate(45deg); font-size: .72rem; }
.contact-pin--main .contact-pin-dot { background: var(--primary, #e67e22); width: 36px; height: 36px; }
.contact-pin--main { margin-left: -3px; margin-top: -6px; }
.contact-pin--main .contact-pin-dot i { font-size: .85rem; }
.contact-pin--camp .contact-pin-dot { background: #16a34a; }

/* Legenda pod mapou – bez ní se barvy špendlíků musí hádat. */
.contact-map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	justify-content: center;
	margin-top: .9rem;
	padding-bottom: 1.25rem;
	font-size: .82rem;
	color: rgba(255,255,255,.75); /* legenda leží na tmavém pozadí sekce */
}
.contact-map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.contact-map-legend i { font-size: .7rem; }
.contact-map-legend .l-main { color: var(--primary, #e67e22); }
.contact-map-legend .l-workplace { color: #0ea5e9; }
.contact-map-legend .l-camp { color: #16a34a; }
/* Mapa sedí v tmavé sekci (.contact-dark s bílým textem) a bublina Leafletu
   je bílá – barvy textu proto musí být určené natvrdo, jinak je bílý název
   na bílém pozadí neviditelný. */
.leaflet-popup-content { font-size: .88rem; line-height: 1.5; min-width: 190px; color: #374151; }
.contact-popup-kind {
	display: block;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #94a3b8;
	margin-bottom: .15rem;
}
.contact-popup-title { display: block; font-size: .95rem; color: #1f2937; }
.contact-popup-line { display: block; color: #6b7280; }
.contact-popup-note { display: block; margin-top: .35rem; color: #6b7280; font-size: .82rem; }
.contact-popup-nav {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .6rem;
	color: var(--primary, #e67e22) !important;
	font-weight: 700;
}

.contact-map-btn {
	position: absolute;
	z-index: 500; /* nad mapovými dlaždicemi */
	border: 0;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	color: var(--text) !important;
	font-weight: 700;
	font-size: .9rem;
	padding: .7rem 1.8rem;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(0,0,0,.3);
	display: flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
	transition: all .2s;
}

.contact-map-btn:hover {
	background: var(--primary);
	color: #fff !important;
	transform: translateX(-50%) translateY(-2px);
}

/* ── Utility ──────────────────────────────────────────── */
.py-6 { padding-top: 5rem; padding-bottom: 5rem; }
.fw-600 { font-weight: 600; }

/* ── Pracoviště ───────────────────────────────────────── */
.pracoviste-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.75rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s, transform .2s;
}
.pracoviste-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}
.pracoviste-card-header {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.1rem;
}
.pracoviste-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--bg-section);
	color: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
}
.pracoviste-badge {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--teal);
	background: var(--bg-section);
	padding: .2rem .7rem;
	border-radius: 50px;
}
.pracoviste-card h4 {
	font-size: 1.05rem;
	font-weight: 800;
	margin-bottom: .25rem;
	color: var(--text);
}
.pracoviste-addr {
	font-size: .85rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}
.pracoviste-info {
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	flex: 1;
}
.pracoviste-info li {
	font-size: .88rem;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: .6rem;
}
.pracoviste-info li i {
	width: 16px;
	color: var(--primary);
	font-size: .8rem;
	flex-shrink: 0;
}
.pracoviste-map-link {
	font-size: .82rem;
	font-weight: 700;
	color: var(--teal);
	text-decoration: none;
	margin-top: auto;
}
.pracoviste-map-link:hover { color: var(--primary); }

/* ── Tým ──────────────────────────────────────────────── */
.team-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 1.5rem 1.5rem;
	text-align: center;
	transition: box-shadow .2s, transform .2s;
}
.team-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}
.team-avatar {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 1rem;
	letter-spacing: .02em;
	text-decoration: none;
	overflow: hidden;
	transition: transform .2s, box-shadow .2s;
}
/* Fotka uvnitř kolečka – vyplní celý kruh, ostré zobrazení (žádné CSS škálování nad rámec zdroje) */
.team-avatar--photo { padding: 0; background: none; }
.team-avatar--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Portréty mají hlavu v horní části – zarovnáme kruh nahoru, ať se neuřízne temeno */
	object-position: top center;
	border-radius: 50%;
	display: block;
}
.team-card:hover .team-avatar {
	transform: scale(1.04);
	box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.team-avatar--teal   { background: linear-gradient(135deg, var(--teal), var(--teal-light)); }
.team-avatar--orange { background: linear-gradient(135deg, var(--primary), var(--yellow)); }
.team-avatar--purple { background: linear-gradient(135deg, var(--purple), #e879a8); }
.team-avatar--green  { background: linear-gradient(135deg, var(--green), #b5e05a); }
.team-card-body h5 {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: .2rem;
	color: var(--text);
}
.team-name-link { color: inherit; text-decoration: none; }
.team-name-link:hover { color: var(--primary); }
.team-role {
	font-size: .82rem;
	color: var(--text-muted);
	margin-bottom: .35rem;
}
.team-workplace {
	font-size: .78rem;
	color: var(--teal);
	font-weight: 600;
	margin-bottom: .9rem;
}
.team-contacts {
	display: flex;
	gap: .5rem;
	justify-content: center;
}
.team-contacts a {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--bg-section);
	color: var(--teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	transition: background .15s, color .15s;
}
.team-contacts a:hover {
	background: var(--primary);
	color: #fff;
}

/* ── Externí lektoři ──────────────────────────────────── */
.externi-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: box-shadow .15s, transform .15s;
}
.externi-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}
.externi-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--navy), var(--teal));
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.externi-info {
	flex: 1;
	min-width: 0;
}
.externi-info strong {
	display: block;
	font-size: .9rem;
	font-weight: 700;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.externi-info span {
	font-size: .78rem;
	color: var(--text-muted);
}
.externi-tag {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--teal);
	background: var(--bg-section);
	padding: .2rem .6rem;
	border-radius: 50px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Dokumenty ────────────────────────────────────────── */
.doc-card {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 1rem;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem;
	text-decoration: none;
	transition: background .15s, border-color .15s, transform .15s;
}
.doc-card:hover {
	background: rgba(255,255,255,.13);
	border-color: var(--primary);
	transform: translateY(-2px);
	text-decoration: none;
}
.doc-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	line-height: 44px;
	flex-shrink: 0;
}
.doc-card-icon--pdf    { background: rgba(220,53,69,.2);  color: #ff6b6b; }
.doc-card-icon--word   { background: rgba(46,134,193,.2); color: #74b9ff; }
.doc-card-icon--report { background: rgba(39,174,96,.2);  color: #55efc4; }
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-title {
	font-size: .92rem;
	font-weight: 700;
	color: rgba(255,255,255,.9);
	margin-bottom: .2rem;
}
.doc-card-meta {
	font-size: .75rem;
	color: rgba(255,255,255,.4);
}
.doc-card-dl {
	color: rgba(255,255,255,.3);
	font-size: .9rem;
	flex-shrink: 0;
	transition: color .15s;
}
.doc-card:hover .doc-card-dl { color: var(--primary); }

/* ── Stránka O nás ────────────────────────────────────── */
.about-page-hero {
	padding: 5rem 0 4rem;
	background: linear-gradient(160deg, var(--bg-section) 0%, #fff 60%);
}
.about-page-title {
	font-size: 2.8rem;
	font-weight: 900;
	line-height: 1.15;
	color: var(--text);
	margin-bottom: 1rem;
}
.about-page-lead {
	font-size: 1.1rem;
	color: var(--text-muted);
	margin-bottom: 2rem;
	line-height: 1.7;
}
.about-page-submenu {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}
.about-page-submenu-link {
	display: inline-block;
	padding: .4rem 1.1rem;
	border-radius: 50px;
	font-size: .88rem;
	font-weight: 700;
	color: var(--text-muted);
	border: 1.5px solid rgba(0,0,0,.1);
	text-decoration: none;
	transition: all .15s;
}
.about-page-submenu-link:hover,
.about-page-submenu-link.active {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.about-page-hero-img {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0,0,0,.12);
}
.about-page-hero-img img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}

.about-page-stats {
	background: var(--navy);
	padding: 3rem 0;
}
.about-stat {
	text-align: center;
}
.about-stat-number {
	font-size: 2.8rem;
	font-weight: 900;
	color: var(--primary);
	line-height: 1;
	margin-bottom: .35rem;
}
.about-stat-label {
	font-size: .85rem;
	color: rgba(255,255,255,.55);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.about-story-imgs {
	position: relative;
	padding-bottom: 3rem;
	padding-right: 3rem;
}
.about-story-img--main {
	width: 100%;
	border-radius: 16px;
	object-fit: cover;
	height: 380px;
	display: block;
	box-shadow: var(--shadow-hover);
}
.about-story-img--over {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 55%;
	height: 200px;
	object-fit: cover;
	border-radius: 14px;
	border: 4px solid #fff;
	box-shadow: var(--shadow-hover);
}
.about-value {
	display: flex;
	align-items: center;
	gap: .65rem;
	font-size: .88rem;
	font-weight: 700;
	color: var(--text);
}
.about-value i {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--bg-warm);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .8rem;
	flex-shrink: 0;
}

.about-offer-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.75rem;
	height: 100%;
	transition: box-shadow .2s, transform .2s;
}
.about-offer-card:hover {
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}
.about-offer-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	margin-bottom: 1rem;
}
.about-offer-card h4 {
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: .5rem;
	color: var(--text);
}
.about-offer-card p {
	font-size: .88rem;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.6;
}

/* ── Tabulka charakteristiky organizace ──────────────── */
.org-table-wrap {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	border: 1px solid rgba(0,0,0,.06);
}
.org-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}
.org-table tbody tr {
	border-bottom: 1px solid rgba(0,0,0,.06);
	transition: background .12s;
}
.org-table tbody tr:last-child {
	border-bottom: none;
}
.org-table tbody tr:hover {
	background: var(--bg-section);
}
.org-table th {
	width: 35%;
	padding: .85rem 1.25rem;
	font-weight: 700;
	color: var(--text-muted);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--bg-light);
	vertical-align: top;
	white-space: nowrap;
}
.org-table td {
	padding: .85rem 1.25rem;
	color: var(--text);
	font-weight: 500;
	vertical-align: top;
	line-height: 1.6;
}
.org-table-note {
	font-size: .8rem;
	color: var(--text-muted);
	font-weight: 400;
}
@media (max-width: 575px) {
	.org-table th,
	.org-table td {
		display: block;
		width: 100%;
		padding: .5rem 1rem;
	}
	.org-table th {
		padding-bottom: .2rem;
		white-space: normal;
	}
	.org-table td {
		padding-top: .2rem;
		padding-bottom: .75rem;
	}
}

/* ── Footer ───────────────────────────────────────────── */
.footer {
	background: #2d2d2d;   /* tmavě šedá */
	color: rgba(255,255,255,.75);
	padding: 4rem 0 2rem;
}

.footer h5 {
	color: #fff;
	font-weight: 700;
	margin-bottom: 1.2rem;
}

.footer a {
	color: rgba(255,255,255,.65);
	text-decoration: none;
	display: block;
	margin-bottom: .4rem;
	transition: color .15s;
}

.footer a:hover { color: var(--primary); }

.footer-brand {
	font-size: 1.4rem;
	font-weight: 900;
	color: #fff;
	margin-bottom: .5rem;
}

.footer-brand span { color: var(--primary); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .4rem 1.5rem;
	border-top: 1px solid rgba(255,255,255,.1);
	margin-top: 3rem;
	padding-top: 1.5rem;
	font-size: .85rem;
	color: rgba(255,255,255,.4);
}
/* Vlevo pohromadě „kdo web provozuje" – na úzkém displeji se zalomí pod sebe. */
.footer-bottom-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .55rem;
}
.footer-dot { opacity: .45; }
/* .footer a je blokový kvůli sloupcům odkazů výš – tady musí být v řádku,
   jinak „Tucan" spadne pod „website created by". */
.footer-bottom a,
.footer-credit a {
	display: inline;
	margin-bottom: 0;
}
.footer-credit {
	text-align: center;
	margin-top: 1.1rem;
	font-size: .72rem;
	color: rgba(255,255,255,.2);
	letter-spacing: .02em;
}
.footer-credit a {
	color: rgba(255,255,255,.35);
	text-decoration: none;
}
.footer-credit a:hover {
	color: rgba(255,255,255,.6);
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255,255,255,.1);
	color: rgba(255,255,255,.7) !important;
	font-size: 1rem;
	transition: all .2s;
	margin-right: .5rem;
}

.social-link:hover {
	background: var(--primary);
	color: #fff !important;
	transform: translateY(-2px);
}

/* ── News card link ───────────────────────────────────── */
.news-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.news-card-link:hover { color: inherit; }
.news-card-link:hover .news-card { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ── Posts ────────────────────────────────────────────── */

.badge-filter {
	display: inline-block;
	padding: .35rem 1rem;
	border-radius: 50px;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	transition: all .2s;
}
.badge-filter:hover, .badge-filter.active {
	background: var(--primary);
	color: #fff;
}

.post-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: all .25s;
	color: var(--text);
	background: #fff;
	height: 100%;
}
.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
	color: var(--text);
}
.post-card-img {
	position: relative;
	height: 200px;
	overflow: hidden;
}
.post-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s;
}
.post-card:hover .post-card-img img { transform: scale(1.04); }
.post-card-img-placeholder {
	width: 100%;
	height: 100%;
	background: var(--bg-section);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--teal-light);
}
.post-type-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .25rem .75rem;
	border-radius: 50px;
	font-size: .75rem;
	font-weight: 700;
	color: #fff;
}
.post-type-aktualita { background: var(--teal); }
.post-type-akce       { background: var(--primary); }
.post-type-oznameni   { background: var(--purple); }

.post-card-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.post-card-date {
	font-size: .8rem;
	color: var(--text-muted);
	margin-bottom: .5rem;
}
.post-card-title {
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: .5rem;
	line-height: 1.4;
}
.post-card-perex {
	font-size: .9rem;
	color: var(--text-muted);
	flex: 1;
	margin-bottom: .75rem;
}
.post-card-more {
	font-size: .85rem;
	font-weight: 700;
	color: var(--primary);
}

/* Detail */
/*
	Hlavní obrázek příspěvku se nesmí ořezávat. Plakáty a pozvánky bývají na
	výšku a s `object-fit: cover` z nich zbyl jen prostředek – uříznutý nadpis
	nahoře i podrobnosti dole (BT #188, Barevný běh). Obrázek se proto vejde
	celý: šířka nejvýš na sloupec, výška nejvýš 70 % okna, poměr stran zůstává.
	Obrázek na výšku se tím zúží a vycentruje, širokou fotku to nijak nemění.
*/
.post-featured-img img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 70vh;
	margin: 0 auto;
	object-fit: contain;
}

.post-body {
	font-size: 1.05rem;
	line-height: 1.8;
}
.post-body h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: .75rem; color: var(--navy); }
.post-body h3 { font-size: 1.2rem; margin-top: 1.5rem; color: var(--teal); }
.post-body ul, .post-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.post-body li { margin-bottom: .4rem; }
.post-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.post-body table th, .post-body table td { padding: .6rem 1rem; border: 1px solid #dee2e6; }
.post-body table thead { background: var(--bg-section); }
.post-body a { color: var(--primary); font-weight: 600; }

.post-share .btn { border-radius: 50px; font-size: .85rem; }

/* Sidebar */
.sidebar-card {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.25rem;
}
.sidebar-card-title {
	font-size: .9rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text-muted);
	margin-bottom: 1rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--bg-section);
}
.sidebar-info-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sidebar-info-list li {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	font-size: .9rem;
	margin-bottom: .5rem;
}
.sidebar-info-list i { color: var(--primary); margin-top: .2rem; width: 1rem; }
.sidebar-attachment { font-size: .9rem; }
.sidebar-attachment a { color: var(--navy); font-weight: 600; }
.sidebar-attachment a:hover { color: var(--primary); }

/* Klikatelný název přihlášky v Můj Domeček (BT: Ema – odkaz na detail činnosti) */
.prihlaska-title-link:hover { color: var(--primary, #4361ee) !important; text-decoration: underline !important; }

/* ── Přihláška Doplnit – varianta 2 (středně husté) ────────────────────────
   A/B test pro Emin BT „Moc info na jednom místě“. Žádné karty, label vlevo
   (col-3) + input vpravo, sekce odděleny jen nadpisem a tenkou linkou. */
.prihlaska-v2 {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: .375rem;
	padding: .75rem 1rem;
	font-size: .9rem;
}
.prihlaska-v2-sechead {
	font-weight: 700;
	font-size: .85rem;
	color: var(--navy, #1e3a5f);
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: .2rem;
	margin-bottom: .35rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.prihlaska-v2-row {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: .5rem;
	align-items: center;
	padding: .15rem 0;
}
/* Zvýraznění chybějících polí – sdílený blok pro všechny varianty níže. */
.prihlaska-v2-label {
	margin: 0;
	font-size: .85rem;
	color: #555;
	text-align: right;
}
.prihlaska-v2-value { min-width: 0; }
.prihlaska-v2-value .form-control,
.prihlaska-v2-value .form-select { font-size: .85rem; }
.prihlaska-v2-remaining .form-label { font-size: .85rem; margin-bottom: .15rem; }
.prihlaska-v2-remaining .mb-3 { margin-bottom: .35rem !important; }

/* ── Sbalovací sekce údajů osoby (varianta 2) ── */
.prihlaska-v2-person { border: none; }
.prihlaska-v2-person-summary {
	display: flex;
	align-items: center;
	gap: .35rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.prihlaska-v2-person-summary::-webkit-details-marker { display: none; }
.prihlaska-v2-person-summary .badge { text-transform: none; letter-spacing: 0; }
.prihlaska-v2-chevron { transition: transform .2s; color: #64748b; }
.prihlaska-v2-person[open] .prihlaska-v2-chevron { transform: rotate(180deg); }
.prihlaska-v2-person-body { padding-top: .35rem; }

/* ── Přihláška Doplnit – varianta 3 (maximálně husté, inspirováno starým webem) ──
   Inline labely („Jméno: [input]“) řazené do 3 sloupců gridu. Vše vidět najednou,
   bez karet, bez ikon u sekcí, drobné písmo. */
.prihlaska-v3 {
	font-size: .85rem;
	line-height: 1.3;
}
.prihlaska-v3-head {
	padding: .35rem .5rem;
	background: #f8f9fa;
	border: 1px solid #e5e7eb;
	border-radius: .25rem;
	margin-bottom: .35rem;
	font-size: .9rem;
}
.prihlaska-v3-pending {
	padding: .3rem .5rem;
	background: #fff8e1;
	border: 1px solid #f0e0a0;
	border-radius: .25rem;
	margin-bottom: .35rem;
	color: #856404;
}
.prihlaska-v3-sec { margin-bottom: .5rem; }
.prihlaska-v3-sectitle {
	font-weight: 700;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--navy, #1e3a5f);
	border-bottom: 1px solid #d0d4da;
	padding: .15rem 0;
	margin-bottom: .25rem;
}
.prihlaska-v3-grid {
	display: grid;
	grid-template-columns: auto minmax(8rem, 1fr) auto minmax(8rem, 1fr);
	gap: .15rem .5rem;
	align-items: center;
}
.prihlaska-v3-grid .lbl {
	font-size: .8rem;
	color: #555;
	white-space: nowrap;
	padding-right: .25rem;
}
.prihlaska-v3-grid .lbl.miss { color: #b45309; font-weight: 600; }
.prihlaska-v3-grid .val { min-width: 0; }
.prihlaska-v3-grid .val--narrow { max-width: 7rem; }
.prihlaska-v3-grid .val--wide { grid-column: span 3; }
.prihlaska-v3-grid .form-control,
.prihlaska-v3-grid .form-select { font-size: .8rem; padding: .15rem .4rem; height: auto; }
.prihlaska-v3-grid textarea.form-control { padding: .2rem .4rem; }
/* Zvýraznění chybějících polí – viz sdílený blok „Chybějící povinná pole" níže. */
.prihlaska-v3-line { padding: .15rem 0; }
.prihlaska-v3-details { margin-bottom: .5rem; }
.prihlaska-v3-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .15rem 0;
	border-bottom: 1px solid #d0d4da;
	margin-bottom: .25rem;
}
.prihlaska-v3-summary::-webkit-details-marker { display: none; }
.prihlaska-v3-summary .prihlaska-v3-sectitle {
	border-bottom: none;
	padding: 0;
	margin: 0;
}
.prihlaska-v3-chevron {
	margin-left: auto;
	color: #888;
	transition: transform .15s ease;
}
.prihlaska-v3-details[open] .prihlaska-v3-chevron { transform: rotate(180deg); }
@media (max-width: 768px) {
	.prihlaska-v3-grid { grid-template-columns: auto 1fr; }
	.prihlaska-v3-grid .val--wide { grid-column: span 2; }
	.prihlaska-v2-row { grid-template-columns: 1fr; }
	.prihlaska-v2-label { text-align: left; }
}

/* ══════════ Chybějící povinná pole (doplnění přihlášky, editace osoby) ══════════
   Sdílené pro VŠECHNY varianty šablon (výchozí .field-missing/.row-missing,
   varianta 2/3 .is-missing). Musí být velmi výrazné – na první pohled (BT:
   rodiče ukládali formulář a nevěděli, co jim chybí). JS _missingFieldsJs.latte
   třídy odebírá po vyplnění, vrací po smazání a přidává .missing-pulse po
   pokusu o odeslání / návratu ze serveru. */
.field-missing,
.row-missing,
.prihlaska-v2-row.is-missing,
.prihlaska-v3-consents .is-missing {
	position: relative;
	background: #fff3e0;
	border: 2px solid #ea580c;
	border-radius: .5rem;
	padding: .6rem .75rem .35rem;
	box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
	scroll-margin-top: 90px;
}
/* Husté varianty – menší vnitřní odsazení, ať se nerozpadne mřížka. */
.prihlaska-v2-row.is-missing { padding: .3rem .5rem; margin: .6rem 0 .35rem; }
.prihlaska-v3-consents .is-missing,
.prihlaska-v3-remaining .field-missing,
.prihlaska-v3 .field-missing,
.prihlaska-v3 .row-missing { padding: .3rem .5rem; margin: .6rem 0 .35rem; border-radius: .35rem; }
.field-missing .form-control:not(.is-filled),
.field-missing .form-select:not(.is-filled),
.row-missing .form-control:not(.is-filled),
.row-missing .form-select:not(.is-filled),
.is-missing .form-control:not(.is-filled),
.is-missing .form-select:not(.is-filled) {
	border-color: #ea580c;
	background-color: #fff;
}
.field-missing::before,
.row-missing::before,
.prihlaska-v2-row.is-missing::before,
.prihlaska-v3-consents .is-missing::before {
	content: '⚠ chybí vyplnit';
	position: absolute;
	top: -10px;
	right: 10px;
	background: #ea580c;
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
	letter-spacing: .05em;
	text-transform: uppercase;
	z-index: 2;
}
/* Pulz po pokusu o odeslání s chybějícími poli – přitáhne oko k problému. */
.missing-pulse {
	animation: missingPulse 1s ease-in-out 3;
}
@keyframes missingPulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(234, 88, 12, .12); }
	50% { box-shadow: 0 0 0 9px rgba(234, 88, 12, .4); }
}

/* ══════════ Příklady v polích (placeholder) ══════════
   BT z Hořovic: v registraci bylo v poli Město „Hořovice" a v PSČ „268 01"
   běžnou tmavou šedí – lidé to četli jako předvyplněnou hodnotu a pole
   nechali prázdná. Příklady proto zůstávají jen tam, kde nesou formát
   (telefon, rodné číslo), a musí být zřetelně světlejší než zadaný text. */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
	color: #b7bec6;
	opacity: 1; /* Firefox si placeholder sám zesvětluje – ať je všude stejný */
}

/* Hláška u konkrétního pole – patří k poli, ne jen do souhrnu nahoře. */
.invalid-note {
	font-size: .82rem;
	font-weight: 600;
	color: #c2410c;
	margin-top: .25rem;
}

/* ══════════ Nevyplněné pole ve formuláři (registrace, přihlášení) ══════════
   Stejná oranžová jako u „chybí vyplnit" v doplnění přihlášky – není to
   chyba uživatele, jen nedokončený formulář. Bootstrapí .is-invalid má
   červený rámeček a vlastní ikonu, tady ho sjednocujeme se zbytkem webu. */
.form-control.is-invalid,
.form-select.is-invalid {
	border-color: #ea580c;
	box-shadow: 0 0 0 3px rgba(234, 88, 12, .12);
	background-image: none; /* pryč s bootstrapím vykřičníkem, kazí zarovnání */
	padding-right: .75rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
	border-color: #ea580c;
	box-shadow: 0 0 0 3px rgba(234, 88, 12, .25);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
	.hero { min-height: 70vh; }
	.hero h1 { font-size: 2rem; }
	.hero-stats { gap: 1.2rem; }
	.about, .activities, .news, .contact { padding: 4rem 0; }
	.section-title { font-size: 1.6rem; }
}

/* ── Dlaždice rozcestníků ──────────────────────────────────────────────────
   Používá /cinnosti i rozcestník poskládaný z podpoložek menu (Page/hub.latte).
   Dřív byly tyhle styly v <style> uvnitř šablony činností, takže rozcestník
   je nedostal a rozsypal se. */
.cinnosti-tile {
	display: block;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: #333;
	box-shadow: 0 2px 12px rgba(0,0,0,.06);
	transition: all .25s ease;
	height: 100%;
}
.cinnosti-tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(0,0,0,.12);
	color: #333;
}
.cinnosti-tile-img {
	height: 180px;
	overflow: hidden;
}
.cinnosti-tile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.cinnosti-tile:hover .cinnosti-tile-img img {
	transform: scale(1.05);
}
.cinnosti-tile-body {
	padding: 1.5rem;
}
.cinnosti-tile-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}
.cinnosti-tile-title {
	font-size: 1.25rem;
	font-weight: 800;
	margin-bottom: .5rem;
}
.cinnosti-tile-desc {
	font-size: .9rem;
	color: #666;
	line-height: 1.5;
	margin-bottom: 1rem;
}
.cinnosti-tile-link {
	font-size: .85rem;
	font-weight: 700;
	color: var(--primary, #e67e22);
	transition: color .2s;
}
.cinnosti-tile:hover .cinnosti-tile-link {
	color: #d35400;
}
.cinnosti-tile-count {
	display: inline-flex; align-items: center; justify-content: center;
	background: #f0f0f0; color: #888;
	font-size: .7rem; font-weight: 700;
	min-width: 22px; height: 22px;
	border-radius: 11px; padding: 0 6px;
	margin-left: .3rem; vertical-align: middle;
}
.cinnosti-tile:hover .cinnosti-tile-count {
	background: var(--primary, #e67e22); color: #fff;
}

/* ── Spodní sekce /cinnosti: text vlevo, kontaktní karta vpravo ──────── */
.cinnosti-seo h2 {
	font-size: clamp(1.5rem, 2.4vw, 1.95rem);
	font-weight: 800;
	margin-bottom: 1rem;
}
.cinnosti-seo h3 {
	font-size: 1.02rem;
	font-weight: 700;
	margin: 1.6rem 0 .35rem;
}
.cinnosti-seo p {
	line-height: 1.75;
	color: #4b5563;
	margin-bottom: .85rem;
	max-width: 62ch; /* delší řádek se čte hůř */
}
.cinnosti-seo a {
	color: var(--primary, #e67e22);
	text-decoration: underline;
	text-underline-offset: .15em;
}
.cinnosti-seo a:hover { color: #d35400; }
/* Kdyby redaktor do textu vložil obrázek, ať nevyčnívá z layoutu. */
.cinnosti-seo img { max-width: 100%; height: auto; border-radius: 12px; }

.cinnosti-aside {
	background: #fff;
	border: 1px solid #e9ecef;
	border-radius: 14px;
	overflow: hidden;
}
.cinnosti-aside > img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}
.cinnosti-aside-body { padding: 1.25rem; }
.cinnosti-aside-body h3 {
	font-size: 1.02rem;
	font-weight: 800;
	margin-bottom: .6rem;
}
.cinnosti-aside-address {
	font-style: normal;
	font-size: .9rem;
	line-height: 1.6;
	color: #4b5563;
	margin-bottom: .75rem;
}
.cinnosti-aside-contact {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	font-size: .9rem;
}
.cinnosti-aside-contact li {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .3rem;
	overflow-wrap: anywhere;
}
.cinnosti-aside-contact i { color: var(--primary, #e67e22); font-size: .8rem; }
.cinnosti-aside-contact a { color: #374151; text-decoration: none; }
.cinnosti-aside-contact a:hover { color: var(--primary, #e67e22); }
.cinnosti-aside-cta { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Ikona bez vlastní barvy (rozcestník ji bere z položky menu) – ať má vždy
   podklad a nevisí ve vzduchu. */
.cinnosti-tile-icon {
	background: #f1f5f9;
	color: var(--primary, #e67e22);
}

/* ── Lišta náhledu nepublikovaných činností (admin/editor) ───────────────────
   Záměrně nápadná a v jiné barvě než bannery – nesmí splynout s obsahem webu. */
.nahled-lista {
	background: #1f2937; color: #f8fafc;
	font-size: .9rem; padding: .5rem 0;
	border-bottom: 3px solid #f59e0b;
}
.nahled-lista-in {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; flex-wrap: wrap;
}
.nahled-lista i { color: #f59e0b; }
.nahled-lista-off {
	flex: 0 0 auto; color: #f8fafc; text-decoration: underline;
	font-weight: 700; white-space: nowrap;
}
.nahled-lista-off:hover { color: #f59e0b; }

/* Štítek u činnosti, kterou návštěvník zatím nevidí */
.nahled-stitek {
	display: inline-block; background: #1f2937; color: #fff;
	font-size: .72rem; font-weight: 700; letter-spacing: .02em;
	padding: .2rem .5rem; border-radius: 6px; margin-bottom: .35rem;
}
.nahled-stitek i { color: #f59e0b; margin-right: .3rem; }
@media print { .nahled-lista, .nahled-stitek { display: none !important; } }

/* ── Bannery z administrace (modul Bannery) ───────────────────────────────────
   Jeden vzhled pro všechna umístění, barvu určuje varianta (dbn--info…).
   Pruh na homepage vypadá stejně jako dřívější napevno psaný odkaz na návod. */
.hpx-bannery { padding-top: 0; }
.dbn {
	--dbn-accent: #e67e22;
	--dbn-bg1: #fff7ed; --dbn-bg2: #ffedd5;
	--dbn-border: #fed7aa; --dbn-text: #7c5a3a;
}
.dbn--info    { --dbn-accent: #0284c7; --dbn-bg1: #f0f9ff; --dbn-bg2: #e0f2fe; --dbn-border: #bae6fd; --dbn-text: #38607a; }
.dbn--warning { --dbn-accent: #e67e22; --dbn-bg1: #fff7ed; --dbn-bg2: #ffedd5; --dbn-border: #fed7aa; --dbn-text: #7c5a3a; }
.dbn--success { --dbn-accent: #16a34a; --dbn-bg1: #f0fdf4; --dbn-bg2: #dcfce7; --dbn-border: #bbf7d0; --dbn-text: #3f6b4c; }
.dbn--danger  { --dbn-accent: #dc2626; --dbn-bg1: #fef2f2; --dbn-bg2: #fee2e2; --dbn-border: #fecaca; --dbn-text: #7f3b3b; }
.dbn--neutral { --dbn-accent: #64748b; --dbn-bg1: #f8fafc; --dbn-bg2: #f1f5f9; --dbn-border: #e2e8f0; --dbn-text: #475569; }

.dbn-box {
	display: flex; align-items: center; gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, var(--dbn-bg1) 0%, var(--dbn-bg2) 100%);
	border: 1px solid var(--dbn-border); border-left: 6px solid var(--dbn-accent);
	border-radius: 14px;
}
.dbn-ico {
	flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	background: var(--dbn-accent); color: #fff; font-size: 1.4rem;
}
.dbn-img { flex: 0 0 auto; width: 96px; height: 68px; object-fit: cover; border-radius: 10px; }
.dbn-text { flex: 1 1 auto; min-width: 0; }
.dbn-text h3 { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 800; }
.dbn-text p { margin: 0; color: var(--dbn-text); font-size: .95rem; }
.dbn-go {
	flex: 0 0 auto; font-weight: 700; color: var(--dbn-accent);
	white-space: nowrap; text-decoration: none;
}
.dbn-go:hover { color: var(--dbn-accent); text-decoration: underline; }
.dbn-x {
	flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
	color: var(--dbn-text); opacity: .6; font-size: 1.5rem; line-height: 1;
	padding: 0 .25rem;
}
.dbn-x:hover { opacity: 1; }

/* Homepage – široký pás pod úvodním obrázkem */
.dbn--homepage + .dbn--homepage { margin-top: .75rem; }
.dbn--homepage .dbn-box { transition: box-shadow .2s ease, transform .2s ease; }
.dbn--homepage .dbn-box:hover { box-shadow: 0 10px 28px rgba(0,0,0,.10); transform: translateY(-2px); }

/* Lišta pod menu / pás na vybraných stránkách – přes celou šířku, nižší */
.dbn--bar .dbn-box, .dbn--pages .dbn-box {
	border-radius: 0; border-left: 0;
	border-top: 0; border-right: 0;
	border-bottom: 3px solid var(--dbn-accent);
	padding: .75rem 1.25rem;
	max-width: 1200px; margin: 0 auto;
	border-radius: 0 0 14px 14px;
}
.dbn--bar .dbn-text h3, .dbn--pages .dbn-text h3 { font-size: 1rem; }
.dbn--bar .dbn-ico, .dbn--pages .dbn-ico { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px; }
.dbn--bar .dbn-img, .dbn--pages .dbn-img { width: 64px; height: 44px; }

/* Vyskakovací okno */
.dbn--popup {
	position: fixed; inset: 0; z-index: 1080;
	display: flex; align-items: center; justify-content: center;
	padding: 1rem; background: rgba(15, 23, 42, .55);
}
.dbn--popup .dbn-box {
	flex-direction: column; align-items: flex-start; text-align: left;
	max-width: 460px; width: 100%; position: relative;
	border-left-width: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
	padding: 1.75rem;
}
.dbn--popup .dbn-img { width: 100%; height: auto; max-height: 220px; }
.dbn--popup .dbn-text h3 { font-size: 1.3rem; }
.dbn--popup .dbn-x { position: absolute; top: .5rem; right: .75rem; }

@media (max-width: 640px) {
	.dbn-box { flex-wrap: wrap; gap: .75rem; }
	.dbn-go { width: 100%; }
	.dbn-x { position: absolute; top: .35rem; right: .5rem; }
	.dbn { position: relative; }
}