/* =========================================================
   RP Stav / HORSKY Studio - hlavní styly
   Přesná replika rpstav.webliska.cz (fonty, barvy, obrázky, animace
   ověřené z reálného zdrojového kódu webu).
   ========================================================= */

:root {
	--color-dark: #222752;
	--color-dark-soft: #2C315A;
	--color-accent: #5C7A94;
	--color-text: #444444;
	--color-text-2: #666666;
	--color-text-light: #C5C5C5;
	--color-bg-light: #F5F5F5;
	--color-border: #D5D5D5;
	--color-white: #ffffff;
	--font-heading: 'Be Vietnam Pro', sans-serif;
	--font-body: 'DM Sans', sans-serif;
	--container: 1200px;
	--radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Bezpečnostní pojistka: sekce jako .mise-banner úmyslně "vylamují" šířku
   přes celý viewport (100vw) kvůli fotce přes celou stránku - na některých
   zařízeních (hlavně mobilní) to ale kvůli šířce scrollbaru/adresního řádku
   umí způsobit vodorovné posunutí/scroll celé stránky a jiné sekce pak
   vypadají "useknuté" mimo obrazovku. overflow-x: hidden na html i body
   tomu spolehlivě zabrání, aniž by to omezilo běžný svislý scroll. */
html, body { overflow-x: hidden; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text-2);
	background: var(--color-white);
	line-height: 1.65;
	font-size: 16px;
	width: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; line-height: 1.3; margin: 0 0 16px; color: var(--color-dark); overflow-wrap: break-word; word-break: break-word; }
h1 { font-size: clamp(2.2rem, 5vw, 5rem); font-weight: 500; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 3.2vw, 3rem); font-weight: 500; }
h3 { font-size: 1.5rem; }
p { margin: 0 0 16px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 820px; }
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); overflow: hidden; height: 1px; width: 1px; }

.eyebrow {
	display: inline-block;
	color: var(--color-text-2);
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .82rem;
	margin-bottom: 14px;
	padding-left: 16px;
	position: relative;
}
.eyebrow::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--color-accent); }
.dark-section .eyebrow, .mise-banner-card .eyebrow { color: #F5F5F5; }

.section { padding: 80px 0; }
.section-lead { max-width: 560px; color: var(--color-text-2); font-size: 1rem; }
.dark-section { background: var(--color-dark); color: #C5C5C5; }
.dark-section h2, .dark-section h3, .dark-section h4 { color: #fff; }
.dark-section .section-lead { color: #C5C5C5; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	padding: 5px 35px 5px 5px;
	border-radius: 5px;
	font-weight: 600;
	font-family: var(--font-body);
	font-size: .85rem;
	text-transform: uppercase;
	transition: all .2s ease;
	border: 1px solid var(--color-dark);
	cursor: pointer;
}
.btn .btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: var(--color-accent);
	color: #fff;
	/* Terč "text na kolečku" - kolečko je vždy plně akcentní barvou, takže
	   bílá tady funguje bez ohledu na to, jak tmavá/světlá je aktuální
	   akcentní barva. */
	font-size: 1rem;
	flex-shrink: 0;
}
.btn-primary { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.btn-primary:hover { background: #fff; color: var(--color-dark); }
.btn-secondary { background: #fff; color: var(--color-dark); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-dark); color: #fff; }
.btn-onlight { background: var(--color-dark); color: #fff; }
.btn-ondark { background: #fff; color: var(--color-dark); border-color: var(--color-border); }
.btn-ondark:hover { background: var(--color-dark); color: #fff; }

.link-more { color: var(--color-accent); font-weight: 600; display: inline-block; margin-top: 8px; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255,255,255,.98);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid #eee;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }
.site-logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 5px;
	background: var(--color-dark); color: var(--color-accent);
	font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
	flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; color: var(--color-dark); }
.logo-sub { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; }
.site-logo img,
.site-header .custom-logo-link img,
.site-header img.custom-logo { max-height: 60px; width: auto; height: auto; }

.main-navigation .nav-menu { display: flex; gap: 30px; }
.main-navigation .nav-menu a { font-weight: 500; font-size: .95rem; color: var(--color-dark); padding: 6px 0; border-bottom: 2px solid transparent; }
.main-navigation .nav-menu a:hover { border-color: var(--color-accent); }

/* ---------- Podnabídky (submenu) ---------- */
.nav-menu li { position: relative; }
/* Všechny položky první úrovně zarovnané stejně (aby "Domů" i položka s
   rozklikávací šipkou byly na stejné výškové úrovni) */
.nav-menu > li { display: flex; align-items: center; }
.submenu-toggle {
	background: none; border: 0; cursor: pointer; padding: 4px 6px; margin-left: 2px;
	color: var(--color-dark); font-size: .65rem; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	transition: transform .2s ease;
}
.nav-menu li.submenu-open > .submenu-toggle { transform: rotate(180deg); }

.nav-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; top: 100%; left: 0; min-width: 230px; z-index: 50;
	background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
	box-shadow: 0 16px 32px rgba(0,0,0,.1);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-menu .sub-menu li { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-menu .sub-menu a { display: block; flex: 1 1 auto; padding: 9px 12px; border-radius: 4px; font-size: .9rem; border-bottom: 0; }
.nav-menu .sub-menu a:hover { background: var(--color-bg-light); border-color: transparent; }
.nav-menu .sub-menu .sub-menu { top: 0; left: 100%; margin-left: 6px; }

@media (min-width: 783px) {
	.nav-menu li:hover > .sub-menu,
	.nav-menu li.submenu-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
	.nav-menu li:hover > .submenu-toggle { transform: rotate(180deg); }
}

.header-actions { display: flex; align-items: center; gap: 18px; }

.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.menu-toggle span { width: 24px; height: 2px; background: var(--color-dark); display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; }
.hero-slider { position: absolute; inset: 0; }
.hero-slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.8s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide--placeholder { background: linear-gradient(135deg, var(--color-dark-soft), var(--color-dark)); }
.hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.6) 38%, rgba(255,255,255,.15) 62%, rgba(255,255,255,0) 78%);
}
/* Pozor: jen padding-top/bottom, NE zkrácený zápis "padding" - ten by přepsal
   vodorovný padding (0 24px) zděděný ze třídy .container a nadpis/text by
   se dotýkal okraje obrazovky (hlavně na mobilu). */
.hero-content { position: relative; z-index: 2; max-width: 900px; padding-top: 24px; padding-bottom: 24px; }
.hero-content h1 { color: #000; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.15; margin-bottom: 20px; }
.hero-content p { max-width: 620px; font-size: 1.1rem; color: #444; margin-bottom: 32px; }
.hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-phone {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 22px 12px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12);
	background: #fff;
	font-weight: 700; font-size: 1rem; color: var(--color-dark);
}
/* .hero-phone není .btn, takže základní pravidlo ".btn .btn-icon" se na ni
   nevztahuje - ikonka proto potřebuje vlastní kompletní styl (jinak není
   svisle vystředěná k textu telefonního čísla vedle sebe). */
.hero-phone .btn-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 5px;
	background: var(--color-accent); color: #fff; font-size: 1rem; flex-shrink: 0;
}
.hero-dots { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.2); }
.hero-dot.is-active { background: var(--color-accent); }

/* ---------- Trust strip ---------- */
.trust-strip { padding: 32px 0; background: #F5F5F5; }
.trust-strip p { text-align: center; color: var(--color-text-2); margin-bottom: 20px; font-size: .92rem; }

/* Statické zarovnání (použije se jen pokud logo-track z nějakého důvodu nerotuje) */
.trust-logos { display: flex; align-items: center; gap: 40px 56px; }
.trust-logo { font-family: var(--font-heading); font-weight: 600; letter-spacing: .04em; color: #999; font-size: 1.05rem; text-transform: uppercase; opacity: .85; white-space: nowrap; flex-shrink: 0; }
.trust-logo-img { height: 32px; width: auto; flex-shrink: 0; opacity: .75; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.trust-logo-img:hover { opacity: 1; filter: grayscale(0); }

/* Plynule rotující pás log klientů (nekonečná smyčka - seznam je v PHP vypsán 2x) */
.trust-logos-viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-logos-track {
	width: max-content;
	flex-wrap: nowrap;
	will-change: transform;
	animation: rpstavTrustScroll 28s linear infinite;
}
.trust-logos-viewport:hover .trust-logos-track { animation-play-state: paused; }
@keyframes rpstavTrustScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.trust-logos-track { animation: none; }
}

/* ---------- Two column ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* ---------- Vize section ---------- */
.vize-media { position: relative; padding-top: 30px; }
.vize-photo { border-radius: var(--radius); overflow: hidden; height: 440px; }
.vize-photo img { width: 100%; height: 100%; object-fit: cover; }
.vize-badge-outer {
	position: absolute; top: -30px; right: 0;
	background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 11px;
	z-index: 3;
}
.vize-badge { background: var(--color-dark); border-radius: 5px; padding: 19px 5px; text-align: center; min-width: 150px; }
.vize-badge .badge-num { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--color-accent); }
.vize-badge .badge-label { display: block; font-size: .82rem; font-weight: 600; margin-top: 4px; color: #F5F5F5; }
.vize-badge-rating { background: var(--color-dark); border-radius: 5px; padding: 24px 5px 12px; text-align: center; }
.vize-badge-rating .stars { color: var(--color-accent); letter-spacing: 3px; margin-bottom: 6px; }
.vize-badge-rating .rating-divider { width: 50%; margin: 4px auto; border-top: 1px solid #525252; }
.vize-badge-rating span.rating-text { display: block; font-size: .82rem; font-weight: 600; color: #F5F5F5; margin-top: 6px; }
.vize-card {
	background: var(--color-dark);
	background-repeat: no-repeat; background-position: top right; background-size: contain;
	border-radius: 10px 0 6px 0; border-top: 10px solid #fff; border-left: 10px solid #fff;
	padding: 40px; margin-top: -30px; position: relative; z-index: 2;
	align-self: flex-end;
}
.vize-card .vize-icon { color: var(--color-accent); font-size: 1.6rem; display: block; margin-bottom: 8px; }
.vize-card p { color: #fff; font-size: 1.15rem; margin-bottom: 0; }
.vize-text .eyebrow { text-align: left; }

/* ---------- Mission ---------- */
.mise-banner {
	position: relative;
	min-height: 524px;
	overflow: hidden;
	margin-top: 40px;
	margin-bottom: 50px;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	/* Rozbití šířky rodičovského .container - obrázek jde přes celou šířku stránky, stejně jako na originále */
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
	/* Karta uvnitř zůstává zarovnaná s obsahem stránky, i když fotka jde přes celou šířku */
	padding: 0 max(24px, calc((100vw - var(--container)) / 2 + 24px));
}
.mise-banner-card {
	max-width: 340px; padding: 40px;
	background-color: var(--color-dark);
	background-repeat: no-repeat; background-position: top right; background-size: contain;
	border-radius: 20px 0 10px 0; border-top: 10px solid #fff; border-left: 10px solid #fff;
}
.mise-banner-card h3 { color: #fff; font-weight: 600; margin: 12px 0 24px; }
.mise-banner-card .eyebrow { padding-left: 0; }
.mise-banner-card .eyebrow::before { display: none; }

.mise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: -10px 0 0; border: 1px solid var(--color-border); border-radius: var(--radius); }
.mise-item { background: #fff; padding: 24px; border-right: 1px solid var(--color-border); }
.mise-item:last-child { border-right: none; }
.mise-item .mise-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 8px; background: var(--color-bg-light);
	margin-bottom: 24px; font-size: 1.5rem;
}
.mise-item h4 { color: var(--color-dark); font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.mise-item p { color: var(--color-text-2); font-size: .95rem; margin-bottom: 0; }

.stats-band { position: relative; background-size: cover; background-position: center; padding: 48px 0; margin-top: 48px; }
.stats-band::after { content: ''; position: absolute; inset: 0; background: url("") no-repeat bottom right; background-size: auto; pointer-events: none; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; position: relative; z-index: 1; }
/* min-width: 0 je nutné - grid položky mají defaultně min-width:auto, takže
   se u nedělitelného textu (např. "PERI") mřížka sama roztáhne přes okraj
   obrazovky, i když má sloupce nastavené na 1fr. */
.stat { min-width: 0; }
.stat-num {
	display: block; font-family: var(--font-heading); font-weight: 600; color: var(--color-accent); line-height: 1;
	font-size: clamp(2.1rem, 8vw, 4.5rem);
	overflow-wrap: break-word;
}
.stat-flag {
	background: #fff; border-top: 2px solid #9a9a9a; margin-top: -1.7rem; padding-top: 22px;
	font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-dark);
}

/* ---------- Services ---------- */
/* Bílé pozadí se šedými dekorativními prvky stavby (jeřáb, mřížka - nezávisí na
   žádném externím obrázku, takže se vždy zobrazí i kdyby se nestáhly obrázky
   z originálního webu). */
.services-section {
	position: relative;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: top left;
	background-size: cover;
}
.services-section::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: .6;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23e3e3e3' stroke-width='2'%3E%3Cpath d='M30 190 L30 60 L120 60'/%3E%3Cpath d='M30 90 L80 90'/%3E%3Ccircle cx='150' cy='150' r='16'/%3E%3Cpath d='M150 134 L150 60'/%3E%3Cpath d='M175 190 L175 110 L135 110'/%3E%3Cpath d='M0 210 L220 210'/%3E%3Cpath d='M0 214 L10 214 M20 214 L30 214 M40 214 L50 214 M60 214 L70 214 M80 214 L90 214 M100 214 L110 214 M120 214 L130 214 M140 214 L150 214 M160 214 L170 214 M180 214 L190 214 M200 214 L210 214'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 220px 220px;
}
.services-section > .container { position: relative; z-index: 1; }
.services-carousel { position: relative; margin-top: 40px; }
.services-viewport { overflow: hidden; }
.services-track {
	display: flex; gap: 10px;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
	will-change: transform;
}
.service-card {
	flex: 0 0 calc(33.333% - 7px);
	background: #fff; padding: 24px; border-radius: var(--radius);
	border: 1px solid var(--color-border);
}
.service-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 76px; height: 76px; border-radius: 6px; background: var(--color-dark); color: var(--color-accent);
	font-size: 2rem; margin-bottom: 20px; padding: 20px 20px 0;
}
.service-card h3 { margin: 0 20px 8px; font-size: 1.5rem; font-weight: 500; }
.service-card > p { margin: 0 20px 25px; color: var(--color-text-2); }
.service-card ul { background: var(--color-bg-light); border-radius: var(--radius); padding: 24px; }
.service-card li { padding-block: 7px; position: relative; color: var(--color-dark); font-size: 1rem; }
.service-card li:not(:last-child) { border-bottom: 1px solid var(--color-border); }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; }
.carousel-arrow {
	width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); background: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem;
	transition: all .2s ease;
}
.carousel-arrow:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); border: 0; padding: 0; cursor: pointer; }
.carousel-dot.is-active { background: var(--color-accent); width: 22px; border-radius: 4px; transition: all .2s ease; }

/* ---------- Gallery / Realizace ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0; }
.filter-btn {
	padding: 9px 20px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff;
	font-weight: 500; cursor: pointer; font-family: var(--font-body); font-size: .9rem;
	transition: all .2s ease; display: inline-block; text-decoration: none; color: var(--color-text);
}
.filter-btn.is-active, .filter-btn:hover { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-grid--single { grid-template-columns: repeat(3, 1fr); }
.gallery-item { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item-caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
	background: linear-gradient(180deg, transparent, rgba(34,39,82,.85));
	color: #fff; font-weight: 600; font-size: .9rem;
}
.gallery-item-caption em { display: block; font-style: normal; font-weight: 400; opacity: .8; font-size: .78rem; }
.gallery-item.is-hidden { display: none; }
.gallery-empty { color: var(--color-text-2); }
.gallery-more { text-align: center; margin-top: 40px; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--color-border); }
.pagination .current { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

/* ---------- Photo strip ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-strip img { width: 100%; height: 260px; object-fit: cover; display: block; }

/* ---------- Contact ---------- */
.kontakt { position: relative; }
.kontakt-inner { background: rgba(255,255,255,.06); border-radius: var(--radius); }
.kontakt-logo { width: 60px; height: auto; margin-bottom: 20px; }
/* Bílá "podložka" pod skutečným logem, aby bylo čitelné na tmavém pozadí kontakt sekce bez ohledu na barvy loga */
.kontakt-logo-chip { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; background: #fff; border-radius: 8px; padding: 10px 16px; }
.kontakt-logo-chip img { max-height: 40px; width: auto; margin: 0; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; color: #ddd; }
.contact-form input, .contact-form textarea {
	padding: 12px 16px; border-radius: 4px; border: 1px solid #3d4270; background: var(--color-dark-soft); color: #fff;
	font-family: var(--font-body); font-size: 1rem; height: 44px;
}
.contact-form textarea { height: auto; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid #fff; }
.contact-form .btn { align-self: stretch; justify-content: center; }
.form-honeypot { position: absolute; left: -9999px; }
.form-notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; font-weight: 600; }
.form-success { background: #1e3f2c; color: #7be29a; }
.form-error { background: #442020; color: #f19a9a; }

/* ---------- Contact Form 7 (přizpůsobení vzhledu vlastnímu formuláři) ---------- */
.contact-form--cf7 .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form--cf7 .wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-form--cf7 label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; color: #ddd; }
.contact-form--cf7 input[type="text"],
.contact-form--cf7 input[type="email"],
.contact-form--cf7 input[type="tel"],
.contact-form--cf7 textarea {
	padding: 12px 16px; border-radius: 4px; border: 1px solid #3d4270; background: var(--color-dark-soft); color: #fff;
	font-family: var(--font-body); font-size: 1rem; width: 100%;
}
.contact-form--cf7 input:focus, .contact-form--cf7 textarea:focus { outline: 2px solid #fff; }
.contact-form--cf7 input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 24px; border-radius: 5px; border: 1px solid var(--color-dark);
	background: var(--color-dark); color: #fff; font-weight: 600; font-family: var(--font-body);
	font-size: .85rem; text-transform: uppercase; cursor: pointer; transition: all .2s ease;
}
.contact-form--cf7 input[type="submit"]:hover { background: #fff; color: var(--color-dark); }
.contact-form--cf7 .wpcf7-not-valid-tip { color: #f19a9a; font-size: .82rem; margin-top: 4px; }
.contact-form--cf7 .wpcf7-response-output { border-radius: 8px; padding: 14px 18px; margin-top: 16px; border: 0 !important; }
.contact-form--cf7 .wpcf7-form.sent .wpcf7-response-output { background: #1e3f2c; color: #7be29a; }
.contact-form--cf7 .wpcf7-form.invalid .wpcf7-response-output,
.contact-form--cf7 .wpcf7-form.spam .wpcf7-response-output,
.contact-form--cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form--cf7 .wpcf7-form.mail-failed .wpcf7-response-output { background: #442020; color: #f19a9a; }

/* ---------- Testimonials ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.testimonial-card { position: relative; background: #fff; border: 1px solid var(--color-border); padding: 32px 28px 28px; border-radius: var(--radius); }
.testimonial-card .quote-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg-light); color: var(--color-dark);
	font-size: 1.2rem; margin-bottom: 18px;
}
.testimonial-card .author-name { display: block; font-weight: 700; color: var(--color-dark); }
.testimonial-card .author-role { display: block; color: var(--color-text-2); font-size: .85rem; margin-bottom: 14px; }
.testimonial-card .stars { color: var(--color-accent); margin-bottom: 10px; letter-spacing: 2px; }

/* Popis + případná fotogalerie vložená přímo do obsahu realizace (detail
   jedné realizace) - na rozdíl od .section-lead NENÍ omezená na úzkou
   šířku, ať se fotky/galerie z bloku editoru zobrazí přes celou šířku. */
.realizace-content { max-width: none; color: var(--color-text-2); font-size: 1rem; }
.realizace-content > p:first-child { max-width: 720px; } /* první odstavec textu ať se čte pohodlně */
.realizace-content .wp-block-gallery { margin-top: 20px; }

/* Fotky vložené přímo do obsahu realizace (automaticky obalené lightbox
   odkazem, viz inc/content-lightbox.php) - dáme jim najevo, že jdou zvětšit. */
.realizace-content a.glightbox { display: inline-block; cursor: zoom-in; }
.realizace-content a.glightbox img { border-radius: var(--radius); transition: opacity .2s ease; }
.realizace-content a.glightbox:hover img { opacity: .88; }

/* ---------- Page hero / generic pages ---------- */
.page-hero { padding: 60px 0 20px; background: var(--color-bg-light); }
.page-content { padding-top: 40px; }
.page-thumb img { border-radius: var(--radius); margin-bottom: 30px; }
.post-meta { color: var(--color-text-2); font-size: .9rem; }
.blog-item { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--color-border); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: #999; padding: 70px 0 0; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* Bílá "podložka" pod logem v patičce, aby bylo čitelné na tmavém pozadí
   bez ohledu na barvy loga (stejný princip jako .kontakt-logo-chip). */
.footer-logo-chip {
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border-radius: 8px; padding: 8px 14px; line-height: 0;
}
.footer-logo-chip .logo-mark { margin: 0; }
.footer-logo img,
.site-footer .custom-logo-link img,
.site-footer img.custom-logo { max-height: 40px; width: auto; height: auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-col h3 { color: #fff; font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; }
.footer-col li, .footer-col p { margin-bottom: 10px; font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.social-links { display: flex; gap: 14px; margin-top: 16px; }
.footer-bottom { border-top: 1px solid #262626; padding: 22px 24px; text-align: center; font-size: .85rem; }
.footer-bottom .credit-link { color: #E63946; transition: opacity .2s ease; }
.footer-bottom .credit-link:hover { opacity: .8; }

/* ---------- Adresa s odkazem "Navigovat" (Google mapy) ---------- */
.address-block { position: relative; }
.address-navigate {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: 8px; color: #fff; font-weight: 600; font-size: .82rem;
	opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: middle;
	transition: opacity .2s ease, max-width .3s ease;
}
.address-block:hover .address-navigate,
.address-block:focus-within .address-navigate { opacity: 1; max-width: 160px; }
/* Na dotykových zařízeních hover nefunguje - odkaz proto zobrazíme rovnou */
@media (hover: none) {
	.address-navigate { opacity: 1; max-width: 160px; }
}

/* =========================================================
   Reveal animace (přesně dle originálu rpstav.webliska.cz)
   ========================================================= */
.reveal-img {
	position: relative;
	overflow: hidden;
	display: inline-block;
}
.reveal-img::after {
	content: "";
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: #ffffff;
	transform: translateX(0%);
	transition: transform 1s ease;
	z-index: 2;
}
.reveal-img.reveal-active::after { transform: translateX(100%); }

.reveal-text .reveal-word { display: inline-block; }
.reveal-text .reveal-letter { display: inline-block; opacity: 0; transform: translateY(12px); }
.reveal-text.reveal-active .reveal-letter {
	animation: revealLetter .25s forwards ease-out;
	animation-delay: var(--delay);
}
@keyframes revealLetter { to { opacity: 1; transform: translateY(0); } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.two-col { grid-template-columns: 1fr; }
	.vize-badge-outer { position: static; margin-bottom: 20px; display: inline-block; }
	.vize-card { margin-top: 0; }
	.mise-grid { grid-template-columns: repeat(2, 1fr); }
	.mise-item { border-right: none; border-bottom: 1px solid var(--color-border); }
	.stats-row { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.service-card { flex: 0 0 calc(50% - 6px); }
	.gallery-grid { grid-template-columns: repeat(3, 1fr); }
	.gallery-grid--single { grid-template-columns: repeat(2, 1fr); }
	.testimonials-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.photo-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 782px) {
	/* Panel menu je "position: absolute" ukotvený k hlavičce (.site-header má
	   position: sticky, což funguje jako kotva i pro absolutně umístěné prvky).
	   Díky "top: 100%" navazuje panel VŽDY přesně pod hlavičkou, ať je hlavička
	   jakkoliv vysoká - není potřeba nic měřit přes JS ani řešit position:fixed
	   (to umí dělat problémy jak na iOS Safari, tak při pořizování celostránkových
	   screenshotů - fixní prvek se pak v nich uřízne/zdvojí). */
	.main-navigation {
		position: absolute; top: 100%; left: 0; right: 0;
		max-height: 80vh; overflow-y: auto;
		background: #fff; padding: 20px 24px;
		transform: translateY(-8px); transition: transform .25s ease, visibility .25s ease, opacity .25s ease;
		box-shadow: 0 12px 20px rgba(0,0,0,.12);
		visibility: hidden; opacity: 0;
		z-index: 150;
	}
	.main-navigation.is-open { transform: translateY(0); visibility: visible; opacity: 1; }
	/* Když je menu otevřené, zamkne se scroll pozadí stránky (nastavuje JS) */
	body.rpstav-nav-open { overflow: hidden; }
	.main-navigation .nav-menu { flex-direction: column; gap: 4px; }
	.header-actions .btn { display: none; } /* na mobilu jen hamburger, ať se hlavička nezalamuje na 2 řádky */
	.menu-toggle { display: flex; }
	.header-inner { padding: 10px 16px; gap: 10px; }
	/* Menší strop pro logo na mobilu - i široké/obdélníkové logo se tak vždy
	   vejde vedle hamburgeru na jeden řádek. */
	.site-logo img,
	.site-header .custom-logo-link img,
	.site-header img.custom-logo { max-height: 38px; max-width: 60vw; width: auto; }
	.nav-menu > li { flex-wrap: wrap; }
	.nav-menu > li.menu-item-has-children { justify-content: space-between; }
	.nav-menu > li > .sub-menu { flex-basis: 100%; }
	.nav-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; background: transparent;
		padding: 0 0 0 16px; margin: 0; width: 100%;
		max-height: 0; overflow: hidden;
		transition: max-height .25s ease;
	}
	.nav-menu li.submenu-open > .sub-menu { max-height: 600px; }
	.nav-menu .sub-menu .sub-menu { position: static; left: auto; margin-left: 0; }
	.mise-grid { grid-template-columns: 1fr; }
	.stats-row { grid-template-columns: 1fr 1fr; }
	.service-card { flex: 0 0 100%; }
	.gallery-grid, .gallery-grid--single { grid-template-columns: repeat(2, 1fr); }
	.section { padding: 56px 0; }
	.footer-grid { grid-template-columns: 1fr; }
	.photo-strip { grid-template-columns: 1fr; }
	.photo-strip img { height: 200px; }
	.trust-logos { gap: 24px 32px; }
}