/* ==========================================================================
   AAA Starter – globální / opakující se styly
   Doplňuje Tailwind CDN. Paletu drž v souladu s functions.php (aaa_tailwind_config)
   a tailwind.config.js v rootu projektu. Toto jsou znovupoužitelné komponenty
   (tlačítka, karty, timeline, carousel, kontakt, WPForms…) – uprav/odstraň dle designu.
   ========================================================================== */

:root {
	--c-primary: #8a2be2;
	--c-accent: #4cafcd;
	--c-dark: #111111;
	--c-darker: #333333;
	--c-olive: #366ecd;
	--ps-gradient: linear-gradient(-84.74deg, #4cafcd 3.82%, #4599cd 15.37%, #3e83cd 26.91%, #366ecd 38.45%, #3e5dd0 49.99%, #464dd2 61.54%, #5d42d7 73.08%, #7336dd 84.62%, #8a2be2 96.17%);
}

html,
body {
	max-width: 100%;
	overflow-x: hidden;
	/* clip ořízne stejně jako hidden, ale z body neudělá posuvný kontejner.
	   S hidden se sticky hlavička (header.php) nelepila a jela se stránkou.
	   Prohlížeče bez podpory clip zůstanou u hidden o řádek výš. */
	overflow-x: clip;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Kotvy nesmí skončit pod sticky hlavičkou: její výška + 10 px (mobil 80 px,
   od 768 px 106 px, od 1024 px i s řádkem menu 164 px) a u přihlášených ještě
   lišta WordPressu. :root kvůli specificitě – admin-bar.css nastavuje
   html { scroll-padding-top } jen na výšku lišty. */
:root { scroll-padding-top: calc(90px + var(--wp-admin--admin-bar--height, 0px)); }
@media (min-width: 768px) {
	:root { scroll-padding-top: calc(116px + var(--wp-admin--admin-bar--height, 0px)); }
}
@media (min-width: 1024px) {
	:root { scroll-padding-top: calc(174px + var(--wp-admin--admin-bar--height, 0px)); }
}

body {
	font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
	color: var(--c-darker);
}

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

/* ---------- Kritické barvy nezávislé na Tailwind CDN (header/footer) ---------- */
.site-header { background: #fff; }

/* Přihlášeným se sticky hlavička lepí pod lištu WordPressu. Do 600 px lišta
   odjede se stránkou (position: absolute), tam zůstává top: 0. */
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

/* Otevřené mobilní menu je součástí sticky hlavičky – musí se vejít do okna,
   jinak by na telefonu otočeném na šířku spodní položky nešly zobrazit. */
.site-nav-mobile { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
@media (min-width: 768px) {
	.site-nav-mobile { max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); }
}
.site-footer { background: var(--c-dark); color: #fff; }
.site-nav-mobile { background: #fff; }
.cards-section,
.timeline-section { background: rgba(0, 0, 0, 0.04); }

/* ---------- Typografie / sekce ---------- */
.section-title {
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--c-darker);
}

/* ---------- Stránka 404 ---------- */
.ps-error-page {
	position: relative;
	display: grid;
	min-height: clamp(520px, 68vh, 760px);
	place-items: center;
	overflow: hidden;
	padding: 3rem 1.25rem;
	background: linear-gradient(145deg, #f6fbfd 0%, #fff 48%, #f7f3fd 100%);
}
@media (min-width: 768px) { .ps-error-page { padding: 5rem 1.25rem; } }

.ps-error-page__inner {
	position: relative;
	z-index: 1;
	width: min(100%, 720px);
	text-align: center;
}

.ps-error-page__inner .ps-divider { margin: 0 auto 1.5rem; }

.ps-error-page__code {
	margin: 0 0 1.5rem;
	background: var(--ps-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: clamp(7rem, 19vw, 13rem);
	font-weight: 800;
	letter-spacing: -.08em;
	line-height: .78;
}

.ps-error-page__title {
	margin: 0;
	color: var(--c-darker);
	font-size: clamp(2rem, 5vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.08;
}

.ps-error-page__text {
	max-width: 590px;
	margin: 1.5rem auto 2rem;
	color: #666;
	font-size: clamp(1rem, 2vw, 1.2rem);
	line-height: 1.65;
}

.ps-error-page__button { min-width: 240px; }

.ps-error-page__glow {
	position: absolute;
	width: min(48vw, 560px);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(2px);
	opacity: .11;
}

.ps-error-page__glow--left {
	left: min(-20vw, -140px);
	top: 18%;
	background: #4cafcd;
}

.ps-error-page__glow--right {
	right: min(-20vw, -140px);
	bottom: 6%;
	background: #8a2be2;
}

/* ---------- Tlačítka (opakující se prvek) ---------- */
.btn-primary,
.btn-dark {
	display: inline-block;
	padding: 15px 28px;
	font-size: 1.0625rem;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	border: 0;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.btn-primary { background: var(--c-primary); color: var(--c-darker); }
.btn-dark { background: var(--c-dark); color: #fff; }

.btn-primary:hover,
.btn-dark:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
}

/* ---------- Hlavička / menu ---------- */
.site-header .primary-menu {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.site-header .primary-menu a {
	color: #333;
	font-size: 1.15rem;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .15s ease;
}

#menu-toggle { color: #333; }

.site-header .primary-menu a:hover { color: var(--c-primary); }

/* aktivní položka – žluté podtržení */
.site-header .primary-menu .current-menu-item > a,
.site-header .primary-menu .current_page_item > a {
	border-bottom: 3px solid var(--c-primary);
	padding-bottom: 4px;
}

.primary-menu--mobile {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding-top: 0.5rem;
}

/* ---------- Hero ---------- */
.hero-img {
	aspect-ratio: 16 / 11;
	max-height: 460px;
}

/* ---------- Info karty ---------- */
.info-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 380px;
	padding: 3rem 2.75rem;
	font-size: 1.0625rem;
	line-height: 1.65;
}

.info-card.text-center { align-items: center; }

.info-card-title {
	font-size: 1.85rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
}

.info-card--yellow {
	background: var(--c-primary);
	color: var(--c-darker);
}

/* karta s fotkou + barevný překryv */
.info-card--cover {
	overflow: hidden;
	color: #fff;
}

.info-card--cover .info-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.info-card--cover .info-card-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-olive);
	opacity: 0.85;
}

.info-card--cover .info-card-inner { position: relative; z-index: 1; }
.info-card--cover .info-card-title { color: #fff; }

/* ---------- Carousel (Swiper, CPT "slide" / shortcode [carousel]) ---------- */
.carousel-swiper {
	width: 100%;
	position: relative;
	padding-bottom: 2.75rem;
	--swiper-theme-color: var(--c-darker);
	--swiper-navigation-size: 22px;
}

.carousel-swiper .swiper-slide { height: auto; }
.carousel-slide-title { font-weight: 600; margin-bottom: 1rem; text-align: center; }
.carousel-slide-body { font-size: 0.97rem; line-height: 1.55; }

.carousel-swiper .swiper-pagination { bottom: 0; }
.carousel-swiper .swiper-pagination-bullet { background: var(--c-darker); opacity: 0.35; }
.carousel-swiper .swiper-pagination-bullet-active { opacity: 1; }

/* navigační šipky dolů, ať nepřekrývají obsah slidu */
.carousel-swiper .swiper-button-prev,
.carousel-swiper .swiper-button-next {
	top: auto;
	bottom: -4px;
	width: 28px;
	height: 28px;
	margin-top: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.carousel-swiper .swiper-button-prev { left: 0; right: auto; }
.carousel-swiper .swiper-button-next { left: 2.25rem; right: auto; }
.carousel-swiper .swiper-button-prev::after,
.carousel-swiper .swiper-button-next::after { font-size: 18px; font-weight: 800; }

/* ---------- Časová osa (timeline) ---------- */
.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* centrální linka */
.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--c-primary);
}

.timeline-item {
	position: relative;
	width: 50%;
	padding: 0 2.5rem 2.5rem;
	box-sizing: border-box;
}

.timeline-item--left { left: 0; text-align: right; }
.timeline-item--right { left: 50%; text-align: left; }

/* trojúhelníková šipka na lince, míří k textu */
.timeline-marker {
	position: absolute;
	top: 0.4rem;
	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

.timeline-item--left .timeline-marker { right: 0; border-right: 14px solid var(--c-primary); }
.timeline-item--right .timeline-marker { left: 0; border-left: 14px solid var(--c-primary); }

.timeline-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--c-darker);
	margin-bottom: 0.5rem;
}

.timeline-text {
	font-size: 1.0625rem;
	color: rgba(0, 0, 0, 0.75);
	line-height: 1.6;
}

/* ---------- Galerie fallback mřížka ---------- */
.gallery-grid .gallery-item {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.375rem;
	margin: 0;
}

.gallery-grid .gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.gallery-grid .gallery-item:hover img { transform: scale(1.04); }

/* ---------- Kontakt ---------- */
.contact-map-img { aspect-ratio: 3 / 2; display: block; }
.contact-icon { flex: 0 0 auto; color: #111; }

.contact-link {
	color: var(--c-darker);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--c-primary);
}

.contact-link:hover { color: var(--c-olive); }

/* ---------- Příspěvky / karty výpisu ---------- */
.post-card {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.5rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, transform .2s ease;
}

.post-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

.post-card-thumb img { width: 100%; height: 200px; object-fit: cover; }

.post-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.post-card-date {
	font-size: 0.85rem;
	color: var(--c-olive);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.post-card-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.75rem;
}

.post-card-title a { color: var(--c-darker); text-decoration: none; }
.post-card-title a:hover { color: var(--c-olive); }

.post-card-excerpt {
	color: rgba(0, 0, 0, 0.7);
	font-size: 0.98rem;
	line-height: 1.55;
}

.post-card .btn-primary { margin-top: auto; align-self: flex-start; }

/* ---------- Stránky / obsah ---------- */
.entry-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.82);
}

.entry-content h2 { font-size: 1.6rem; font-weight: 700; margin: 1.5em 0 .5em; }
.entry-content h3 { font-size: 1.3rem; font-weight: 700; margin: 1.3em 0 .4em; }
.entry-content p { margin: 0 0 1em; }
.entry-content a { color: var(--c-olive); text-decoration: underline; }
.entry-content ul, .entry-content ol { margin: 0 0 1em 1.5em; }

/* ---------- Paginace ---------- */
.pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.5rem;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--c-darker);
	text-decoration: none;
	font-weight: 600;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--c-primary);
	border-color: var(--c-primary);
}

/* ---------- Patička ---------- */
.footer-widget-title {
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.25rem;
}

.footer-col,
.footer-widget {
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.footer-col a,
.footer-widget a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.footer-col a:hover,
.footer-widget a:hover { color: var(--c-primary); }

.footer-widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget ul li { margin-bottom: 0.4rem; }

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.footer-menu a:hover { color: var(--c-primary); }

/* jednoduchá geometrická logo-značka (placeholder než nasadíš custom logo) */
.footer-logo-mark {
	display: inline-block;
	width: 34px;
	height: 40px;
	background:
		linear-gradient(135deg, #f3f3f3 0 50%, transparent 50%),
		var(--c-primary);
	clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%);
}

/* ---------- WPForms – sjednocení vzhledu s designem ---------- */
.wpforms-container .wpforms-field-label { font-weight: 600; color: var(--c-darker); }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
	width: 100%;
	border: 1px solid #dcdce3;
	border-radius: 0.65rem;
	padding: 0.9rem 1.15rem;
	font-size: 1.05rem;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.18);
}

/* tlačítko sjednocené s .btn-gradient (pilulka s gradientem, bílý text) */
.wpforms-container .wpforms-submit {
	background: var(--ps-gradient) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 15px 30px !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.wpforms-container .wpforms-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ==========================================================================
   Gutenberg bloky – obsah stránek se skládá z nativních bloků (viz agentic.md).
   Tyto fixy nech, řeší kolizi WP wrapperů s Tailwind grid/flex.
   ========================================================================== */

/* core/group inner-container fix – aby flex/grid uvnitř group nešel vniveč */
.wp-block-group:where(.flex, .grid, .inline-flex, .inline-grid, .absolute,
		[class*=":flex"], [class*=":grid"]) > .wp-block-group__inner-container { display: contents; }
.wp-block-group:where(.flex, .grid, .inline-flex, .inline-grid, .absolute,
		[class*=":flex"], [class*=":grid"]) > .wp-block-group__inner-container > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
.info-card > .wp-block-group__inner-container,
.timeline > .wp-block-group__inner-container,
.timeline-item > .wp-block-group__inner-container,
/* komponenty podstránek Řidič/Provozovatel – grid/flex je v CSS třídě, ne
   v Tailwind utilitě, takže je :where() výše nezachytí */
.ps-features > .wp-block-group__inner-container,
.ps-howto > .wp-block-group__inner-container,
.ps-howto-card > .wp-block-group__inner-container,
.ps-tags > .wp-block-group__inner-container { display: contents; }

/* sekce z bloků zabírají plnou šířku <main> – kontejner řeší vnitřní group */
.site-content > .wp-block-group { width: 100%; }

/* tlačítka jako block-styles core/button (register_block_style v functions.php) */
.wp-block-button.is-style-btn-primary .wp-block-button__link,
.wp-block-button.is-style-btn-dark .wp-block-button__link {
	border-radius: 0;
	padding: 15px 28px;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	transition: filter .15s ease;
}
.wp-block-button.is-style-btn-primary .wp-block-button__link { background: var(--c-primary); color: var(--c-darker); }
.wp-block-button.is-style-btn-dark .wp-block-button__link { background: var(--c-dark); color: #fff; }
.wp-block-button.is-style-btn-primary .wp-block-button__link:hover,
.wp-block-button.is-style-btn-dark .wp-block-button__link:hover { filter: brightness(0.94); }

/* hero obrázek (core/image s className "hero-image") */
.wp-block-image.hero-image { margin: 0; }
.wp-block-image.hero-image img { width: 100%; aspect-ratio: 16 / 11; max-height: 460px; object-fit: cover; }

/* core/cover je flex kontejner (WP core CSS, display:flex + justify-content:center) – na mobilu
   to způsobovalo horizontální přetečení dlouhého textu v inner-containeru (flex item s width:100%
   ale bez spolehlivého zúžení obsahu). Vertikální zarovnání řešíme vlastním paddingem (py-*), takže
   flex centrování coveru nepotřebujeme – přepneme na blokové rozložení, které texty spolehlivě zalomí. */
.wp-block-cover,
.wp-block-cover-image { display: block; }
.wp-block-cover__inner-container { width: 100%; min-width: 0; }

/* Výjimka: cover, kde má být obsah svisle vycentrovaný (karta „Chytré parkování").
   min-width:0 na inner-containeru výše drží ochranu proti přetečení textu na mobilu. */
.wp-block-cover.ps-cover-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Hero foto má dole auto + panorama a nahoře velkou prázdnou oblohu – posadit ohnisko níž,
   ať je na širokém heru vidět auto/město místo prázdné oblohy nahoře. */
.ps-section-hero .wp-block-cover__image-background { object-position: 50% 80%; }

/* core/cover – obrázek pozadí musí vyplnit celou plochu (přebíjí globální img{height:auto}) */
.wp-block-cover.info-card--cover-block { min-height: 380px; padding: 3rem 2.75rem; }
.wp-block-cover.info-card--cover-block .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* dorovnání výšky karet ve sloupcích (core/columns) */
.cards-columns { align-items: stretch; }
.cards-columns .wp-block-column { display: flex; }
.cards-columns .wp-block-column > .ps-photo-card { width: 100%; }
.cards-columns .wp-block-column > .info-card,
.cards-columns .wp-block-column > .wp-block-cover { width: 100%; }

/* ==========================================================================
   ParkShare – homepage specifické komponenty
   ========================================================================== */

/* a11y: viditelný focus stav na všech interaktivních prvcích */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

/* logo značka „PS" – dvě překryté oblé plochy (širší než vyšší), text přes ně */
.ps-logo-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 62px;
	flex-shrink: 0;
}

.ps-logo-mark::before,
.ps-logo-mark::after {
	content: "";
	position: absolute;
	top: 0;
	width: 62px;
	height: 62px;
	border-radius: 50%;
}

/* levý lalok – fialový konec palety, pravý – azurový */
.ps-logo-mark::before { left: 0;  background: linear-gradient(135deg, #8a2be2 0%, #5d42d7 100%); }
.ps-logo-mark::after  { right: 0; background: linear-gradient(135deg, #3e83cd 0%, #4cafcd 100%); }

.ps-logo-mark span {
	position: relative;
	z-index: 1;
	color: #fff;
	font-weight: 800;
	font-size: 2.15rem;
	letter-spacing: -0.06em;
	line-height: 1;
}

/* Logo v hlavičce (the_custom_logo) – SVG 339×63, velikost řídíme výškou.
   SVG se bez explicitní velikosti roztáhne na svoje width/height atributy. */
.custom-logo-link { display: inline-block; }
.custom-logo { height: 52px; width: auto; display: block; }
@media (max-width: 767px) {
	.custom-logo { height: 42px; }
	.footer-logo { height: 38px; }
}

/* v patičce je značka o něco menší */
.site-footer .ps-logo-mark { width: 80px; height: 52px; }
.site-footer .ps-logo-mark::before,
.site-footer .ps-logo-mark::after { width: 52px; height: 52px; }
.site-footer .ps-logo-mark span { font-size: 1.8rem; }

/* malý gradientový pruh pod nadpisy */
.ps-divider {
	width: 100px;
	height: 5px;
	border-radius: 2.5px;
	background: var(--ps-gradient);
}

/* varianta na gradientovém/tmavém pozadí – plná bílá */
.ps-divider--white { background: #fff; }

/* ---------- Tlačítka ----------
   Tyto třídy se používají dvěma způsoby:
   1) přímo na <a>/<button> v PHP šablonách (header, patička, shortcody),
   2) jako className Gutenberg bloku core/button – tam ale WP dává vlastní
      třídu na WRAPPER (.wp-block-button), ne na odkaz uvnitř. Kdyby se
      zapsala rovnou na <a>, editor blok označí za neplatný („Tento blok
      obsahuje neočekávaný nebo neplatný obsah"), protože si HTML přegeneruje
      z atributů a nesedělo by mu. Proto každou variantu stylujeme i ve tvaru
      `.wp-block-button.<varianta> > .wp-block-button__link`. */
.btn-gradient:not(.wp-block-button),
.btn-outline-dark:not(.wp-block-button),
.btn-outline-white:not(.wp-block-button),
.btn-outline-gradient:not(.wp-block-button),
.wp-block-button:is(.btn-gradient, .btn-outline-dark, .btn-outline-white, .btn-outline-gradient) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease, background-color .15s ease;
	border: 1px solid transparent;
}

/* Gradient musí pokrýt i 1px průhledný rámeček ze společného pravidla výše.
   Bez background-origin: border-box se gradient pozicuje podle padding-boxu a v tom
   1px pruhu se kvůli výchozímu background-repeat: repeat vykreslí konec sousední
   dlaždice – na levé hraně pak prosvítá azurový konec palety. */
.btn-gradient:not(.wp-block-button),
.wp-block-button.btn-gradient > .wp-block-button__link {
	background: var(--ps-gradient);
	background-origin: border-box;
	background-repeat: no-repeat;
	color: #fff;
}
.btn-gradient:not(.wp-block-button):hover,
.wp-block-button.btn-gradient > .wp-block-button__link:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-outline-dark:not(.wp-block-button),
.wp-block-button.btn-outline-dark > .wp-block-button__link { background: #fff; color: #333; border-color: #e2e2e2; }
.btn-outline-dark:not(.wp-block-button):hover,
.wp-block-button.btn-outline-dark > .wp-block-button__link:hover { background: #f6f6f6; }

.btn-outline-white:not(.wp-block-button),
.wp-block-button.btn-outline-white > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-white:not(.wp-block-button):hover,
.wp-block-button.btn-outline-white > .wp-block-button__link:hover { background: rgba(255,255,255,.12); }

/* gradientový obrys – sekundární tlačítko na bílém/světlém pozadí (header, karty) */
.btn-outline-gradient:not(.wp-block-button),
.wp-block-button.btn-outline-gradient > .wp-block-button__link {
	background: linear-gradient(#fff, #fff) padding-box, var(--ps-gradient) border-box;
	color: #333;
	border: 2px solid transparent;
}
.btn-outline-gradient:not(.wp-block-button):hover,
.wp-block-button.btn-outline-gradient > .wp-block-button__link:hover { background: linear-gradient(#f7f7f7, #f7f7f7) padding-box, var(--ps-gradient) border-box; }

button.btn-gradient,
button.btn-outline-dark,
button.btn-outline-white,
button.btn-outline-gradient { border-style: solid; }

/* ---------- Checklist (checkmark + titulek + popis) ---------- */
.ps-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }

.ps-checklist-item { display: flex; align-items: flex-start; gap: 1rem; }

.ps-checklist-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--ps-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	margin-top: 0.15rem;
}

.ps-checklist-title { font-weight: 700; font-size: 25px; line-height: 1.3; color: #222; margin: 0 0 .3rem; }
.ps-checklist-text { font-size: 20px; color: rgba(0,0,0,.65); line-height: 1.5; margin: 0; }

/* variant on dark/gradient backgrounds */
.ps-checklist--on-dark .ps-checklist-title { color: #fff; }
.ps-checklist--on-dark .ps-checklist-text { color: rgba(255,255,255,.8); }
.ps-checklist--on-dark .ps-checklist-icon { background: rgba(255,255,255,.18); }

/* zvýrazněná první položka („Garantované místo") – ozdobný „seal" tvar místo kruhu */
.ps-checklist-icon--seal {
	clip-path: polygon(50% 0%, 61% 10%, 75% 6%, 80% 19%, 93% 24%, 90% 38%, 100% 50%, 90% 62%, 93% 76%, 80% 81%, 75% 94%, 61% 90%, 50% 100%, 39% 90%, 25% 94%, 20% 81%, 7% 76%, 10% 62%, 0% 50%, 10% 38%, 7% 24%, 20% 19%, 25% 6%, 39% 10%);
}

/* Gradientové pozadí sekce „Jak to funguje".
   Dřív bylo zapsané jako inline style="…" přímo v HTML bloku, jenže to
   Gutenberg nemá v atributech bloku – při přegenerování by ho zahodil a blok
   hlásil „neočekávaný nebo neplatný obsah". Patří proto sem do CSS. */
.ps-section-howitworks { background: var(--ps-gradient); }

/* Obecná gradientová sekce (Řidič / Provozovatel / O nás). Stejný důvod jako
   výše – gradient patří do CSS, ne do inline style="…" v bloku. */
.ps-section-gradient { background: var(--ps-gradient); }

/* ---------- Karty s fotkou (Jsem řidič / Jsem provozovatel) ---------- */
/* foto nahoře (zaoblené jen horní rohy) + bílé tělo, badge (ikona+titulek) obkročmo přes předěl */
.ps-photo-card {
	position: relative;
	border-radius: 1.25rem;
	overflow: visible;
	background: #fff;
	box-shadow: 0 12px 30px rgba(20, 10, 40, .08);
}

.ps-photo-card-media {
	position: relative;
	height: 165px;
	border-radius: 1.25rem 1.25rem 0 0;
	overflow: hidden;
}

/* Media i body jsou core/group bloky (dřív to byly surové <div>, které
   Gutenberg při přegenerování zahazoval -> neplatný blok). Group přidává
   mezivrstvu .wp-block-group__inner-container; `display: contents` ji z
   layoutu vyřadí, takže výška 165 px u media a procentní výška obrázku
   uvnitř fungují dál jako předtím. */
.ps-photo-card-media > .wp-block-group__inner-container,
.ps-photo-card-body > .wp-block-group__inner-container { display: contents; }

.ps-photo-card-media .wp-block-image,
.ps-photo-card-media figure { margin: 0; height: 100%; }
.ps-photo-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ztmavení fotky, aby byl bílý titulek odznaku čitelný (dle návrhu) */
.ps-photo-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 10, 25, .5);
}

/* odznak (ikona + titulek) je vycentrovaný uprostřed fotky.
   Je sourozencem .ps-photo-card-media, proto ho ukotvíme na horních 165 px karty
   (= výška fotky), ne přes celou kartu. */
.ps-photo-card-badge {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 165px;
	padding-right: 15px;
	padding-left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	z-index: 2;
}

.ps-photo-card-badge .ps-icon-circle {
	width: 66px;
	height: 66px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.ps-photo-card-badge .ps-icon-circle svg {
	width: 38px;
	height: 38px;
}

.ps-photo-card-badge-title {
	color: #fff;
	font-weight: 700;
	font-size: 1.75rem;
}

.ps-photo-card-body { padding: 2.25rem 2.5rem 2.5rem; text-align: center; }
.ps-photo-card-title { font-size: 1.15rem; line-height: 1.6; margin: 0 0 1.75rem; color: #333; }
.ps-photo-card-title strong { color: #222; }

/* ---------- „Jak to funguje" – kroky ---------- */
.ps-step-card {
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 1rem;
	padding: 2.75rem 2.25rem;
	text-align: center;
	color: #fff;
	backdrop-filter: blur(2px);
}

/* Plný bílý kotouč. Gradientový prstenec je součástí SVG a leží UVNITŘ kotouče
   (v návrhu je odsazený od okraje), proto tu není žádný border. */
.ps-step-icon {
	width: 96px;
	height: 96px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

/* Kruh s ikonou uprostřed fotky (sekce „Chytré parkování pro řidiče").
   Na rozdíl od .ps-step-icon je plně bílý, bez gradientového prstence. */
.ps-media-badge-icon {
	width: 74px;
	height: 74px;
	border-radius: 999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	flex: 0 0 auto;
}

.ps-step-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 .85rem; }
.ps-step-text { font-size: 1.15rem; color: rgba(255,255,255,.88); line-height: 1.55; margin: 0; }

/* Karty leží ve sloupcích wp-block-columns. Sloupce mají v řadě stejnou výšku,
   karta uvnitř ale jen podle obsahu – v užším okně, kde se nadpisy a texty
   zalomí různě, pak měla každá jinou výšku. Karta sloupec vyplní a volné
   místo zůstane pod textem (stejný vzor jako .cards-columns výše). */
.wp-block-column:has(> .ps-step-card) { display: flex; }
.wp-block-column > .ps-step-card { width: 100%; }

/* vstupy kalkulačky nezabírají celý levý sloupec (dle návrhu) */
.ps-calc-inputs { max-width: 700px; }

/* ---------- Kalkulačka výdělku ---------- */
.ps-calc {
	background: var(--ps-gradient);
	border-radius: 1.5rem;
	padding: 3rem 3.25rem;
	color: #fff;
}

.ps-input-label { display: block; font-size: 1rem; font-weight: 400; margin-bottom: .5rem; color: rgba(255,255,255,.92); }

.ps-input {
	width: 100%;
	border: 0;
	border-radius: .6rem;
	padding: .95rem 1.35rem;
	font-size: 1.05rem;
	background: #fff;
	color: #222;
}
.ps-input::placeholder { font-style: italic; color: rgba(0,0,0,.45); }

.ps-input-pill { border-radius: 999px; }

/* Pole kalkulačky mají stejný pilulkový tvar jako hlavní CTA tlačítka.
   Vyšší specificita drží tvar i při pozdějším načtení stylů formulářů. */
.ps-calc .ps-input-pill { border-radius: 999px; }

/* Počet míst i lokalita na střed pole. Šipky číselného pole zabírají vpravo
   místo (v Chrome i když jsou neviditelné – ukáže je až najetí myší), proto
   na zařízeních s myší přidáváme vlevo okraj stejné šířky a číslo stojí na
   středu celého pole. Dotyková zařízení šipky nemají. */
.ps-calc [data-ps-calc-spots],
.ps-calc [data-ps-calc-location] { text-align: center; text-align-last: center; }
@media (hover: hover) and (pointer: fine) {
	.ps-calc [data-ps-calc-spots] { padding-left: calc(1.15rem + 15px); }
}

.ps-calc-result {
	background: rgba(255,255,255,.2);
	border: 1px solid rgba(255,255,255,.28);
	backdrop-filter: blur(6px);
	color: #fff;
	border-radius: 1.25rem;
	padding: 2.5rem 2rem;
	text-align: center;
	/* Částku na jednom řádku nesmí box roztáhnout (v mřížce s 1fr by na
	   mobilu přetekl ven) – místo toho se zmenší písmo, viz níže. */
	min-width: 0;
}

.ps-calc-result-label { font-size: 1.15rem; font-weight: 700; color: #fff; }
/* Částka je vždy celá na jednom řádku („Kč“ se dřív zalamovalo pod číslo).
   Když se ani tak do boxu nevejde (úzký sloupec, hodně číslic), zmenší ji
   ps-calculator.js (fitAmount) – 2.9rem je největší velikost. „od“ je proto
   v em, aby se zmenšovalo spolu s částkou (2.4rem / 2.9rem). */
.ps-calc-result-amount { font-size: 2.9rem; font-weight: 800; color: #fff; line-height: 1.1; white-space: nowrap; }
.ps-calc-result-amount .ps-calc-result-from { font-weight: 300; font-size: calc(2.4em / 2.9); margin-right: .4rem; }
.ps-calc-result-yearly { font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.85); margin: 0; }
.ps-calc-result-disclaimer { font-size: .85rem; color: rgba(255,255,255,.65); line-height: 1.4; margin: 0; }
/* Roční částka („Ročně přibližně …“) se zalomí nejvýš před číslem, nikdy uvnitř. */
.ps-calc-result-nowrap { white-space: nowrap; }

/* ---------- Lokality ---------- */
.ps-location-card { border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 0 28px rgba(20,10,40,.14); height: 100%; }
.ps-location-card-media { position: relative; aspect-ratio: 25/10; overflow: hidden; }
/* Media i body jsou core/group bloky (dřív surové <div> -> neplatný blok v editoru).
   `display: contents` vyřadí mezivrstvu .wp-block-group__inner-container z layoutu,
   takže poměr stran u fotky i flex sloupec v těle karty (margin-top:auto u meta
   řádku) fungují dál jako s původními divy. */
.ps-location-card-media > .wp-block-group__inner-container,
.ps-location-card-body > .wp-block-group__inner-container { display: contents; }
/* core/image obalí <img> do <figure> – musí protáhnout na plnou výšku, jinak se poměr stran neuplatní */
.ps-location-card-media .wp-block-image,
.ps-location-card-media figure { margin: 0; height: 100%; }
.ps-location-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-location-card.is-muted .ps-location-card-media img { filter: grayscale(1); }

/* štítek stavu sedí v pravém dolním rohu fotky, zaoblený vlevo (dle návrhu) */
.ps-location-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .6rem 1.35rem;
	border-radius: .75rem 0 0 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
	background: var(--ps-gradient);
}

.ps-location-card.is-muted .ps-location-badge { background: #3f3f46; }

/* karta je flex sloupec přes celou výšku řádku grid (viz .ps-location-card výše) –
   tělo karty se natáhne na zbylou výšku a řádek s ikonou (+ čára nad ním) se
   přes margin-top:auto vždy přilepí dolů, i když je popisek kratší než u sousedních karet */
.ps-location-card > .wp-block-group__inner-container { display: flex; flex-direction: column; height: 100%; }
.ps-location-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.75rem 1.9rem 1.9rem; }
.ps-location-card-title { font-size: 1.95rem; font-weight: 700; margin: 0 0 .7rem; color: #222; }
.ps-location-card-title a { color: inherit; text-decoration: none; }
.ps-location-card-title a:hover { color: #5b5fd6; }
.ps-location-card-text { font-size: 1.2rem; color: rgba(0,0,0,.68); margin: 0 0 15px; line-height: 1.45; }
.ps-location-card-meta { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; font-weight: 400; color: rgba(0,0,0,.7); margin-top: auto; padding-top: 1.25rem; border-top: 1px solid #000; }
.ps-location-card-media a { display: block; height: 100%; }

/* Single stránka lokality (single-lokalita.php) */
.ps-lokalita-hero { position: relative; border-radius: 1.25rem; overflow: hidden; aspect-ratio: 16/7; }
.ps-lokalita-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-lokalita-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 1.5rem 0 2rem; }
.ps-lokalita-meta-row .ps-location-badge { position: static; border-radius: .75rem; }
.ps-lokalita-location { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; color: rgba(0,0,0,.7); }

/* karuselové šipky – ovládají .ps-locations-swiper (Swiper navigation přes custom elementy).
   Barva NENÍ podle strany, ale podle stavu: použitelná = gradient, na konci/začátku = šedá
   (Swiper si sám přidává/odebírá .swiper-button-disabled). */
.ps-carousel-arrow {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	background: var(--ps-gradient);
	color: #fff;
	transition: background .2s ease, color .2s ease;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}
.ps-carousel-arrow.swiper-button-disabled {
	background: #e4e4e9;
	color: #555;
	cursor: not-allowed;
	pointer-events: none;
}

/* Šipky jen od lg+ (pod tím se ovládá tečkami). Odsazení musí vyjít do paddingu
   kontejneru (`px-10` = 40px), jinak při užším okně vylezou mimo viewport a
   uříznou se: -30px = šipka končí 10px před kartou (slide má 20px padding),
   takže nepřekrývá obsah a zároveň se vždy vejde. Až od ~1660px je vedle
   kontejneru (max-w 1580px) dost místa na plné odsazení dle návrhu. */
@media (min-width: 1024px) {
	.ps-carousel-arrow { display: inline-flex; }
	.ps-carousel-arrow--prev { left: -30px; }
	.ps-carousel-arrow--next { right: -30px; }
}
@media (min-width: 1660px) {
	.ps-carousel-arrow--prev { left: -64px; }
	.ps-carousel-arrow--next { right: -64px; }
}

/* ---------- Slider lokalit (Swiper, [ps_lokality]) ---------- */
/* Stín karet vs. `overflow:hidden`, které si Swiper dává na `.swiper`:
   Nefunkční cesty (vyzkoušeno): padding na `.swiper` / `.swiper-wrapper` rozhodí
   Swiperu výpočet šířky slidů (utínalo 3. kartu), a `overflow:visible` + padding
   na obalu zase nechá prokouknout STÍN sousedního slidu za hranou.
   Funkční řešení = prostor pro stín dát DOVNITŘ slidu:
   `padding` na `.swiper-slide` (= dosah stínu) + `spaceBetween: 0` v JS.
   Geometrie pak vychází přesně: karta je od hrany slidu odsazená o dosah stínu,
   takže stín krajní karty se celý vejde do viditelné oblasti, a stín následující
   (skryté) karty končí právě na hranici swiperu → nic neprokoukne.
   Mezera mezi kartami = 2× padding slidu. Padding musí být >= skutečnému dosahu
   stínu VEN z karty, což je u `box-shadow: 0 0 Xpx` cca X/2 (blur se rozprostírá
   půl na půl přes hranu) – u blur 20px tedy 10px. Když se změní blur, přepočítej. */
.ps-locations-swiper .swiper-slide { height: auto; padding: 20px; }
.ps-locations-swiper .swiper-slide > .ps-location-card { height: 100%; }

/* Menší okno = poloviční mezery mezi kartami (40px -> 20px), ať slider nevypadá
   rozvolněně, když jsou karty úzké. 10px padding = přesně dosah stínu (blur/2),
   takže stín zůstává celý vidět a soused stále neprokoukne. */
@media (max-width: 1023px) {
	.ps-locations-swiper .swiper-slide { padding: 10px; }
}

/* Tečky (jen mobil/tablet – na lg+ se ovládá šipkami).
   POZOR na specificitu: swiper-bundle.min.css se enqueue POZDĚJI než global.css,
   takže při stejné specificitě (0,1,0) vyhrává Swiper. Jeho `.swiper-pagination`
   má `position:absolute; bottom:8px`, což tečky nacpalo dovnitř slideru přes
   kartu. Proto zdvojená třída `.ps-locations-pagination.swiper-pagination`
   (0,2,0) – vyhraje bez ohledu na pořadí načtení. Tečky patří POD slider. */
.ps-locations-pagination.swiper-pagination {
	position: static;
	display: flex;
	justify-content: center;
	gap: .6rem;
	/* Odstup od karty dělá už spodní padding slidu (20px, prostor pro stín),
	   proto žádný další margin – dohromady ~20px pod kartou. */
	margin-top: 0;
	width: auto;
}
.ps-locations-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0;
	background: #c9c9d4;
	opacity: 1;
}
.ps-locations-pagination .swiper-pagination-bullet-active { background: var(--ps-gradient); }
@media (min-width: 1024px) {
	.ps-locations-pagination.swiper-pagination { display: none; }
}

/* ---------- Blog karty (homepage výřez) ---------- */
/* celá blogová sekce má jemný přechod dle návrhu (fialová → azurová) */
/* ---------- Sekce s kontaktním formulářem (HP, nad blogem) ----------
   Formulář se renderuje shortcodem [ps_form_operator] a nese si vlastní
   max-width (.ps-form-wrap--b = 720px) i titulek – tady ho jen vycentrujeme,
   aby na HP sedl do rytmu ostatních sekcí (ty mají obsah na střed). */
.ps-section-contact .ps-form-wrap { margin-inline: auto; }
.ps-section-contact .ps-form-title { text-align: center; }

/* DOČASNÉ – jen pro test, odstranit až se rozhodne, jestli sekce zůstává.
   Skrytí je čistě vizuální (display:none v JS), nic se neukládá – po
   obnovení stránky se sekce objeví zpátky. */
.ps-section-contact { position: relative; }
.ps-hide-contact-test {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	z-index: 5;
	background: none;
	border: 0;
	padding: .4rem .6rem;
	font-size: .95rem;
	font-weight: 600;
	color: rgba(0, 0, 0, .45);
	text-decoration: underline;
	cursor: pointer;
}
.ps-hide-contact-test:hover { color: rgba(0, 0, 0, .8); }

/* Blog je připravený pro pozdější spuštění, na homepage je zatím skrytý. */
.ps-section-blog {
	display: none !important;
	background: linear-gradient(100deg, #f5eefd 0%, #eff1fb 50%, #f1f8fb 100%);
}

.ps-blog-promo {
	border-radius: 1rem;
	background: #fff;
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	min-height: 280px;
	height: 100%;
	box-shadow: 0 10px 28px rgba(20,10,40,.08);
}

/* Vodoznak = logo ParkShare zaříznuté do levého dolního rohu karty (dle návrhu).
   Rozměry v % karty, aby to drželo poměr na všech šířkách; přesah za hranu
   ořízne `overflow:hidden` na .ps-blog-promo.
   POZOR: vodoznak musí být přímým potomkem .ps-blog-promo, ne uvnitř
   `.wp-block-group__inner-container` – ten totiž dostává `position:relative`
   (viz pravidlo pod), takže by se absolutní pozice počítala od NĚJ (= od bloku
   s textem uprostřed karty) a logo skončilo doprostřed, ne v rohu. Proto se
   tato sekce vykresluje shortcodem [ps_blog_latest], ne Gutenberg bloky. */
.ps-blog-promo-mark {
	position: absolute;
	left: -12%;
	bottom: -4.5%;
	width: 68%;
	height: auto;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

/* obsah karty musí zůstat nad vodoznakem – blok je obalen inner-containerem,
   proto cílíme i dovnitř něj */
.ps-blog-promo > *:not(.ps-blog-promo-mark),
.ps-blog-promo .wp-block-group__inner-container > *:not(.ps-blog-promo-mark) {
	position: relative;
	z-index: 1;
}

.ps-blog-card { border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(20,10,40,.08); display: flex; flex-direction: column; }
.ps-blog-card-media { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.ps-blog-card-media .wp-block-image,
.ps-blog-card-media figure { margin: 0; height: 100%; }
.ps-blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-blog-card-media a { display: block; height: 100%; }
.ps-blog-card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ps-gradient); z-index: 1; }
.ps-blog-card-title a { color: inherit; text-decoration: none; }
.ps-blog-card-title a:hover { color: #4361ee; }
.ps-blog-card-more a { color: inherit; text-decoration: none; }
.ps-blog-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; }
.ps-blog-card-meta { font-size: .95rem; font-style: italic; color: rgba(0,0,0,.55); margin: 0 0 1.25rem; display: flex; align-items: center; gap: .4rem; }
.ps-blog-card-title { font-size: 1.65rem; font-weight: 700; line-height: 1.25; margin: 0 0 .6rem; color: #222; }
.ps-blog-card-excerpt { font-size: 1.05rem; color: rgba(0,0,0,.68); line-height: 1.55; margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0,0,0,.12); }
.ps-blog-card-more { margin-top: auto; font-weight: 600; font-size: 1rem; color: #4361ee; text-decoration: none; text-align: right; }
.ps-blog-card-more:hover { text-decoration: underline; }

/* Formulář ve výzvě „Zajistěte si své místo" (tmavé pozadí, obsah na střed).
   Sekce má text-align:center, ale pole formuláře musí zůstat zarovnaná vlevo,
   jinak popisky i chybové hlášky poskakují. */
.ps-cta-form { max-width: 620px; }
.ps-cta-form .ps-form-wrap { max-width: none; text-align: left; }
.ps-cta-form .ps-form-lede { text-align: center; }
.ps-cta-form .ps-submit { width: 100%; }

/* ---------- Vyskakovací formuláře (nativní <dialog>) ---------- */
.ps-modal {
	border: 0;
	padding: 0;
	border-radius: 1.25rem;
	background: #fff;
	width: min(720px, calc(100vw - 2rem));
	max-height: calc(100vh - 3rem);
	box-shadow: 0 24px 60px rgba(20, 10, 40, .28);
	overflow: visible;
}

/* dialog je defaultně display:none dokud není otevřený */
.ps-modal[open] { display: block; }

.ps-modal::backdrop {
	background: rgba(15, 8, 30, .6);
	backdrop-filter: blur(3px);
}

.ps-modal-inner {
	position: relative;
	padding: 2.5rem 2.25rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	border-radius: 1.25rem;
}

/* Formulář si nese vlastní max-width (720px) – v modalu ať využije celou šířku */
.ps-modal .ps-form-wrap { max-width: none; }

.ps-modal-close {
	position: absolute;
	top: .75rem;
	right: 1rem;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(0, 0, 0, .5);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ps-modal-close:hover { background: rgba(0, 0, 0, .06); color: #111; }

@media (max-width: 640px) {
	.ps-modal-inner { padding: 2.75rem 1.25rem 1.75rem; }
}

/* Detail výpočtu kalkulačky – viditelný odkaz pod disclaimerem. */
.ps-calc-breakdown-trigger {
	display: inline-block;
	margin: .35rem 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .85em;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.ps-calc-breakdown-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}
.ps-calc-breakdown-title { margin: 0 3rem .5rem 0; }
.ps-calc-breakdown-lede { margin: 0 0 1.5rem; color: #5f5968; }
.ps-calc-breakdown-values { margin: 0; }
.ps-calc-breakdown-values > div {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .65rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.ps-calc-breakdown-values dt { color: #5f5968; }
.ps-calc-breakdown-values dd { margin: 0; font-weight: 700; text-align: right; }
.ps-calc-breakdown-result {
	display: grid;
	gap: .2rem;
	margin-top: 1.5rem;
	padding: 1.25rem;
	border-radius: 1rem;
	background: #f3edff;
}
.ps-calc-breakdown-result strong { font-size: clamp(1.35rem, 4vw, 2rem); color: var(--c-primary, #8a2be2); }
.ps-calc-breakdown-result small { color: #5f5968; }
.ps-calc-breakdown-note { margin: 1.25rem 0 0; color: #77717e; font-size: .875rem; line-height: 1.55; }

@media (max-width: 480px) {
	.ps-calc-breakdown-values > div { gap: .75rem; }
	.ps-calc-breakdown-values dt { max-width: 65%; }
}

/* ---------- Patička – doplňky ---------- */
/* Ikony patičky jsou SVG z médií a gradientový kruh mají v sobě – obal proto
   NEMÁ vlastní `background`, jinak by prosvítal zpod kruhu ikony. */
.footer-social-icon {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: filter .15s ease, transform .15s ease;
}

.footer-social-icon:hover { filter: brightness(1.1); transform: translateY(-1px); }
.footer-social-icon img { width: 100%; height: 100%; display: block; }

.footer-social-list {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: .65rem;
}

.footer-social-list .footer-social-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.footer-social-list .footer-social-icon {
	background: rgba(255, 255, 255, .12);
}

.footer-store-icon {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex: 0 0 auto;
}

.footer-store-icon img { width: 100%; height: 100%; display: block; }

/* Logo v patičce – bílá varianta SVG, velikost řídí výška (SVG má poměr 270:50) */
.footer-logo-link { display: inline-block; }
.footer-logo { height: 44px; width: auto; display: block; }

.footer-store-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-store-list a { display: inline-flex; align-items: center; gap: .6rem; }

.footer-credit a { color: rgba(255,255,255,.55); text-decoration: underline; }
.footer-credit a:hover { color: #fff; }

/* ---------- Responsivita ---------- */
@media (max-width: 767px) {
	.ps-calc { padding: 1.75rem; }
	.ps-photo-card { min-height: 300px; padding: 0; }

	/* CTA pod checklistem „Proč parkovat s námi?“ */
	.ps-checklist + .wp-block-buttons:has(> .ps-modal-open--waitlist + .ps-modal-open--operator) {
		justify-content: center;
	}

	.wp-block-group.alignfull:has(.ps-checklist + .wp-block-buttons > .ps-modal-open--waitlist + .ps-modal-open--operator) {
		padding-bottom: 2rem !important;
	}
}

/* ---------- Responsivita: timeline -> jednostranná na mobilu ---------- */
@media (max-width: 768px) {
	.timeline::before { left: 8px; }

	.timeline-item,
	.timeline-item--left,
	.timeline-item--right {
		width: 100%;
		left: 0;
		text-align: left;
		padding: 0 0 2rem 2.25rem;
	}

	.timeline-item--left .timeline-marker,
	.timeline-item--right .timeline-marker {
		left: 9px;
		right: auto;
		border-left: 14px solid var(--c-primary);
		border-right: 0;
	}
}

/* ============================================================================
   PODSTRANKY Ridic / Provozovatel (design HP_NOVA 4 a 5)
   Navrhove platno 1920 px, kontejner 1500 px (= max-w-[1580px] + px-10).
   Mobile-first: zaklad je mobil, desktopove hodnoty az v @media (min-width:768px).
   ========================================================================== */

/* ---------- Hero podstranky ---------- */
.ps-hero-sub { min-height: 480px; }
.ps-hero-sub .wp-block-cover__image-background { object-position: 50% 50%; }
/* vyrez fotky dle navrhu (Ridic ukazuje vic horni casti zaberu) */
.ps-hero-sub--center .wp-block-cover__image-background { object-position: 50% 9%; }
.ps-hero-sub .wp-block-cover__inner-container { width: 100%; position: relative; z-index: 2; }
/* Ztmavení pod textem. V návrhu není plošné – u Provozovatele je to gradient
   zleva, u Řidiče jemný přechod shora i zdola. Proto vlastní vrstva místo
   dimRatio (to umí jen rovnoměrné krytí). Na mobilu je krytí vyšší kvůli
   čitelnosti, protože text jde přes celou šířku fotky. */
.ps-hero-sub::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ps-hero-sub--left::before {
	background: linear-gradient(180deg, rgba(8,3,20,.80) 0%, rgba(8,3,20,.68) 100%);
}
.ps-hero-sub--center::before {
	background: linear-gradient(180deg, rgba(8,3,20,.72) 0%, rgba(8,3,20,.55) 45%, rgba(8,3,20,.72) 100%);
}
@media (min-width: 768px) {
	.ps-hero-sub--left::before {
		background: linear-gradient(90deg, rgba(8,3,20,.95) 0%, rgba(8,3,20,.86) 22%, rgba(8,3,20,.42) 44%, rgba(8,3,20,.10) 62%, rgba(8,3,20,0) 78%);
	}
	.ps-hero-sub--center::before {
		background: linear-gradient(180deg, rgba(8,3,20,.42) 0%, rgba(8,3,20,.22) 40%, rgba(8,3,20,.50) 100%);
	}
}
.ps-hero-sub-title {
	font-size: 2.1rem;
	line-height: 1.15;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}
.ps-hero-sub-title .ps-hero-sub-title-light { display: block; font-weight: 300; text-transform: none; }
.ps-hero-sub-lead { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.92); font-weight: 300; }

@media (min-width: 768px) {
	.ps-hero-sub { min-height: 709px; }
	.ps-hero-sub-title { font-size: 50px; line-height: 1.12; }
	.ps-hero-sub-lead { font-size: 20px; }
}

/* Tlacitka v hero (Provozovatel) se na mobilu vedle sebe nevejdou a zalomi
   se pod sebe - kazde pak melo sirku podle sveho textu. Grid s jedinym
   sloupcem `max-content` spocita sirku podle nejsirsiho tlacitka a
   `justify-items: stretch` (vychozi u gridu) na ni natahne obe. Selektor
   scopovany pres `.ps-hero-sub` (dve tridy), aby spolehlive prebil Tailwind
   utilitu `.flex` ze stejneho bloku bez ohledu na poradi v hlavicce. */
@media (max-width: 767px) {
	.ps-hero-sub .wp-block-buttons {
		display: grid;
		grid-template-columns: max-content;
		justify-content: center;
	}
	.ps-hero-sub .wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* ---------- Blok tri vyhod (ikona + titulek + text) ---------- */
.ps-features { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
.ps-feature { text-align: center; }
.ps-feature-icon { display: block; width: 76px; height: 76px; margin: 0 auto 1.5rem; }
.ps-feature-icon svg { display: block; width: 100%; height: 100%; }
.ps-feature-title { font-size: 1.45rem; font-weight: 700; color: #222; margin: 0 0 .75rem; }
.ps-feature-text { font-size: 1rem; line-height: 1.55; color: #333; margin: 0; }

@media (min-width: 768px) {
	.ps-features { grid-template-columns: repeat(3, 1fr); gap: 30px; }
	.ps-feature-icon { width: 95px; height: 95px; margin-bottom: 2.4rem; }
	.ps-feature-title { font-size: 30px; margin-bottom: 1.1rem; }
	.ps-feature-text { font-size: 20px; }
}

/* ---------- Jak to funguje - karta s ilustraci a gradientovou patickou ----------
   Vlastni komponenta vedle .ps-step-card (ta zustava homepage). Spodek karty je
   poloprusvitne bily, takze jim prosvita gradient sekce - stejne jako v navrhu,
   kde ma kazda ze tri karet jiny odstin podle pozice v rade. */
.ps-howto { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
/* Pozor: karta NEsmí mít overflow:hidden – šipka mezi kartami (::after) leží
   mimo její plochu. Rohy proto zaobluje zvlášť médium a zvlášť tělo karty. */
.ps-howto-card {
	position: relative;
	border-radius: 30px;
	background: rgba(255,255,255,.16);
	border: 1px solid rgba(255,255,255,.20);
	display: flex;
	flex-direction: column;
}
.ps-howto-card .ps-howto-media {
	margin: 0;
	background: #fff;
	line-height: 0;
	border-radius: 29px 29px 0 0;
	overflow: hidden;
	/* Blok obrázku má z WordPressu třídu `size-full` a Tailwind ji bere jako svou
	   utilitu (height: 100 %). V kartě natažené na výšku řady pak bílá plocha
	   zabrala všechno místo, které nezabral text – v každé kartě jinak velké.
	   Obrázek proto drží vlastní poměr stran a volné místo zůstává pod textem. */
	height: auto;
	flex: none;
}
.ps-howto-card .ps-howto-media img { width: 100%; height: auto; display: block; }
.ps-howto-body { padding: 1.6rem 1.5rem 1.9rem; text-align: center; color: #fff; }
.ps-howto-title { font-size: 1.45rem; font-weight: 700; margin: 0 0 .7rem; }
.ps-howto-text { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0; }

@media (min-width: 768px) {
	/* minmax(0, 1fr): sloupce vždy přesně stejně široké. S 1fr se na tabletu sloupec
	   s nejdelším slovem nadpisu („Zaparkujte“) roztáhl na úkor ostatních a obrázky
	   pak v kartách neměly stejnou výšku. */
	.ps-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
	.ps-howto-body { padding: 2.4rem 1.75rem 2.6rem; }
	.ps-howto-title { font-size: 30px; margin-bottom: .9rem; }
	.ps-howto-text { font-size: 20px; }
	/* sipka mezi kartami (v navrhu vzdy mezi dvema sousedy) */
	.ps-howto .ps-howto-card:not(:last-child)::after {
		content: "";
		position: absolute;
		/* svisle na stred ilustrace (jako v navrhu), ne cele karty. Ilustrace ma
		   pomer 478 : 208, jeji stred tedy lezi ve 21,76 % sirky karty. Procentni
		   margin se pocita ze sirky (top by bral vysku), proto top 0 + margin-top.
		   Pri plne sirce kontejneru vychazi puvodnich 104 px. */
		top: 0;
		margin-top: 21.76%;
		right: -22px;
		width: 14px;
		height: 26px;
		transform: translateY(-50%);
		background: rgba(255,255,255,.85);
		clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
	}
}

/* ---------- Stitky (drive .ps-chip) ----------
   Prejmenovano na .ps-tag: `.ps-chip` uz v tematu patri chipum v leadovych
   formularich (assets/ps-forms.css) a ten soubor se enqueuuje az za
   global.css, takze pri shode nazvu prebijel vypln na #fff a pridaval
   ramecek. Dve nesouvisejici komponenty proto nesmi sdilet nazev. */
.ps-tags { display: flex; flex-wrap: wrap; gap: .75rem; }
.ps-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 50px;
	padding: 0 1.35rem;
	border-radius: 999px;
	background: #f2f2f2;
	color: #333;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25;
}
/* Na mobilu se stitky nevejdou do jedne rady a zalomi se - kazdy pak mel
   sirku podle sveho textu (Auditni protokol / Fiskalni reporting vedle sebe
   uzsi, Viceuzivatelsky pristup samo sirsi). Stejny grid trik jako u tlacitek
   v hero: jediny sloupec `max-content` da vsem sirku podle nejsirsiho. */
@media (max-width: 767px) {
	.ps-tags { display: grid; grid-template-columns: max-content; justify-content: center; }
	.ps-tags > .ps-tag { width: 100%; }
}
@media (min-width: 768px) {
	/* Podle navrhu je rada uzsi nez sloupec (844 z 1500 px kontejneru = 85 %
	   sirky sloupce), aby mezi ni a kartou vpravo zbyla mezera. Procento, ne
	   pevne px - pri uzsim okne se kontejner zmensi a pevna hodnota by se do
	   sloupce vesla cela a mezera by zmizela. Pilulky jsou v navrhu zaroven
	   sirsi, nez by odpovidalo delce textu - resi to flex-grow, ktery zbyle
	   misto rozdeli mezi ne, misto natvrdo zadanych sirek z Figmy. */
	.ps-tags { gap: 25px; max-width: 85%; }
	.ps-tag { flex: 1 1 auto; font-size: 17px; padding: 0 2rem; }
	/* odsazeni od odstavce nad radou dle navrhu (50 px k horni hrane pilulek);
	   `.entry-content p { margin: 0 0 1em }` prebiji Tailwind utilitu na bloku */
	.entry-content p:has(+ .ps-tags) { margin-bottom: 32px; }
}

/* ---------- Bila info karta s kruhovou ikonou ---------- */
.ps-info-tile {
	background: #fff;
	border-radius: 30px;
	padding: 2.25rem 1.75rem 2.5rem;
	text-align: center;
	/* stin postupne ztmaven z puvodnich .08 (nejdriv .1, pak .14) */
	box-shadow: 0 12px 30px rgba(20,10,40,.14);
}
.ps-info-tile-icon { display: block; width: 76px; height: 76px; margin: 0 auto 1.35rem; }
.ps-info-tile-icon svg { display: block; width: 100%; height: 100%; }
.ps-info-tile-title { font-size: 1.45rem; font-weight: 700; color: #222; margin: 0 0 .8rem; }
.ps-info-tile-text { font-size: 1rem; line-height: 1.55; color: #333; margin: 0; }
@media (min-width: 768px) {
	.ps-info-tile { padding: 2.5rem 2rem 2.75rem; }
	.ps-info-tile-icon { width: 95px; height: 95px; }
	.ps-info-tile-title { font-size: 30px; }
	.ps-info-tile-text { font-size: 20px; }
}

/* ---------- Referencni karta lokality (foto + odznak + statistika) ---------- */
.ps-ref-card {
	position: relative;
	background: #fff;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(20,10,40,.08);
}
.ps-ref-card .ps-ref-media { position: relative; margin: 0; line-height: 0; }
.ps-ref-card .ps-ref-media img { width: 100%; height: 180px; object-fit: cover; display: block; }
/* Odznak je celý v SVG (tvar + gradient + ikona), CSS ho jen umístí.
   `translateY(50%)` odsune odznak o polovinu jeho výšky dolů, takže jeho
   střed sedí přesně na švu mezi fotkou a bílým tělem karty (vědomá odchylka
   od návrhu, kde je odznak celý ještě nad švem). Zbytek karty (.ps-ref-body)
   ho nijak neořezává, protože se ani jedna z komponent netvoří vlastní
   stacking context - vykreslí se tedy nad ním, ne pod nim. */
.ps-ref-badge { position: absolute; right: 0; bottom: 0; transform: translateY(50%); line-height: 0; }
.ps-ref-badge svg { display: block; width: 59px; height: 50px; }
.ps-ref-body { padding: 1.1rem 1.25rem 1.3rem; }
.ps-ref-title { font-size: 1.2rem; font-weight: 700; color: #222; margin: 0 0 .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ref-sep { height: 1px; background: #333; opacity: .35; margin: 0 0 1.1rem; }
.ps-ref-stat { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ps-ref-stat-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	height: 50px;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--ps-gradient);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 600;
}
.ps-ref-stat-label { font-size: 1rem; color: #333; margin: 0; }
@media (min-width: 768px) {
	.ps-ref-body { padding: 1.3rem 1.5rem 1.6rem; }
	.ps-ref-title { font-size: 24px; }
	.ps-ref-stat-label { font-size: 20px; }
}

/* ---------- FAQ (nativni <details>/<summary>) ---------- */
.ps-section-faq { background: #f2f2f2; }
.ps-faq { display: flex; flex-direction: column; gap: 31px; }
.ps-faq-item {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 8px 24px rgba(20,10,40,.06);
}
.ps-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	/* -25 % oproti puvodnimu odsazeni z navrhu (bylo 1.5rem / 2rem na desktopu) */
	padding: 1.125rem;
	cursor: pointer;
	list-style: none;
	font-size: 1.05rem;
	font-weight: 700;
	color: #222;
}
.ps-faq-item > summary::-webkit-details-marker { display: none; }
.ps-faq-chevron {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--ps-gradient);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}
.ps-faq-chevron svg { width: 14px; height: 9px; }
.ps-faq-item[open] .ps-faq-chevron { transform: rotate(180deg); }
.ps-faq-answer { padding: 0 1.125rem 1.2rem; }
.ps-faq-answer hr { border: 0; border-top: 1px solid #d4d4d4; margin: 0 0 1.25rem; }
.ps-faq-answer p { font-size: 1rem; line-height: 1.6; color: #333; margin: 0; }
@media (min-width: 768px) {
	.ps-faq-item > summary { padding: 1.5rem 1.6rem; font-size: 20px; }
	.ps-faq-chevron { width: 42px; height: 42px; }
	.ps-faq-answer { padding: 0 1.6rem 1.65rem; }
	.ps-faq-answer p { font-size: 20px; }
}

/* ---------- Vyhledavaci pole v hero (Ridic) ---------- */
.ps-search {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	max-width: 712px;
	margin: 0 auto;
	padding: 6px 6px 6px 1.1rem;
	border-radius: 50px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(10,5,30,.25);
	flex-wrap: wrap;
}
.ps-search-pin { flex: 0 0 auto; width: 20px; height: 24px; color: #8a2be2; }
.ps-search-pin svg { display: block; width: 100%; height: 100%; }
.ps-search input[type="search"],
.ps-search input[type="text"] {
	flex: 1 1 140px;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 1rem;
	font-style: italic;
	color: #333;
	padding: .75rem .25rem;
}
.ps-search input::placeholder { color: #8a8a8a; font-style: italic; }
.ps-search input:focus { outline: none; }
.ps-search .ps-search-submit {
	flex: 0 0 auto;
	min-height: 50px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--ps-gradient);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.ps-search .ps-search-submit:hover { filter: brightness(1.08); }
@media (min-width: 768px) { .ps-search { flex-wrap: nowrap; padding-left: 1.4rem; } }

/* Vizualne skryty popisek. Trida `sr-only` je Tailwind utilita a ta chodi
   z CDN - kdyz se nenacte, popisek "Kam jedete?" se zobrazi jako dalsi polozka
   flexu a rozhodi radek vyhledavani. Definujeme si ji proto i v tematu. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Na uzkych displejich se tlacitko vedle pole nevejde (pole by zbylo ~100 px).
   Zalomime ho pod pole pres celou sirku a zmensime zaobleni - z pilulky se
   stava dvouradkovy blok, na kterem 50px radius vypada rozbite. */
@media (max-width: 479px) {
	.ps-search {
		border-radius: 20px;
		/* symetricky ze vsech stran - tlacitko pres celou sirku jinak sedi
		   vic vlevo nez vpravo (desktopovy padding-left je kvuli spendliku) */
		padding: 12px;
		row-gap: 10px;
	}
	.ps-search .ps-search-submit {
		flex: 1 0 100%;
		width: 100%;
		padding: 0 1rem;
	}
}

/* ---------- Odznaky obchodu s aplikacemi ---------- */
.ps-store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ps-store-badges .wp-block-image { margin: 0; }
.ps-store-badges img { height: 56px; width: auto; display: block; }
.ps-store-badges a { display: inline-block; border-radius: 10px; }
.ps-store-badges a:hover { filter: brightness(1.15); }
@media (min-width: 768px) { .ps-store-badges img { height: 68px; } }
/* Mezera mezi odstavcem a odznaky obchodu. Trida `md:mb-11` na odstavci
   neplati - `.entry-content p { margin: 0 0 1em }` ma vyssi specificitu nez
   Tailwind utilita, takze tam bez tohohle pravidla zbyde 1em (20 px). */
@media (min-width: 768px) {
	.entry-content p:has(+ .ps-store-badges) { margin-bottom: 32px; }
}

/* ---------- Sekce se zarizenim (stahnout aplikaci) ---------- */
.ps-appshot { margin: 0; position: relative; z-index: 2; }
.ps-appshot img { width: 100%; max-width: 566px; height: auto; display: block; margin: 0 auto; }
/* Telefon v navrhu presahuje sekci nahoru i dolu (pres FAQ). Vyska sloupce je
   proto pevna dle navrhu a obrazek je z ni vytazeny absolutne - zaporny margin
   by v gridu vysku radku spolehlive nezmensil. */
.ps-appshot-wrap { position: relative; }
.ps-appshot-wrap > .wp-block-group__inner-container { display: contents; }
@media (min-width: 768px) {
	.ps-appshot-wrap { height: 318px; }
	.ps-appshot-wrap .ps-appshot { width: 566px; margin: -118px auto 0; }
}
/* Telefon je vyssi nez sekce a v navrhu ho zarezava jeji spodni okraj. Bez
   orezu pretece pres cele FAQ pod sekci (vcetne nadpisu), proto sekci
   s mockupem orezavame. */
.wp-block-group.alignfull:has(.ps-appshot-wrap) { overflow: hidden; }

/* ---------- CTA karta s kalkulackou (Provozovatel) ---------- */
.ps-cta-card {
	background: var(--ps-gradient);
	border-radius: 30px;
	padding: 2.5rem 1.5rem 3rem;
	text-align: center;
	color: #fff;
}
@media (min-width: 768px) { .ps-cta-card { padding: 3.1rem 2.5rem 3.4rem; } }
.ps-cta-card .ps-calc { background: rgba(255,255,255,.16); }
/* `.entry-content p { margin: 0 0 1em }` prebiji i `mx-auto` z Tailwindu, takze
   odstavec s `max-w-*` zustane vlevo misto na stredu karty. */
.entry-content .ps-cta-card .mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- Typografie uvnitr komponent podstranek ----------
   .entry-content p { margin: 0 0 1em } ma vyssi specificitu nez tridy komponent
   vyse, takze by rozbila vertikalni rytmus prevzaty z navrhu. Proto explicitni
   prepis se stejnou vahou. */
.entry-content .ps-feature-title { margin: 0 0 .25rem; }
.entry-content .ps-feature-text { margin: 0; line-height: 1.4; }
.entry-content .ps-howto-title { margin: 0 0 .35rem; }
.entry-content .ps-howto-text { margin: 0; line-height: 1.4; }
.entry-content .ps-info-tile-title { margin: 0 0 .35rem; }
.entry-content .ps-info-tile-text { margin: 0; line-height: 1.4; }
.entry-content .ps-ref-title { margin: 0 0 .9rem; }
.entry-content .ps-ref-stat-label { margin: 0; line-height: 1.35; }
.entry-content .ps-faq-answer p { margin: 0; line-height: 1.5; }
.entry-content .ps-hero-sub-lead { line-height: 1.67; }
.entry-content .ps-hero-sub-lead.mx-auto { margin-left: auto; margin-right: auto; }
.ps-feature-icon { margin-bottom: .7rem; }
@media (min-width: 768px) {
	.ps-feature-icon { margin-bottom: .7rem; }
	.ps-info-tile-icon { margin-bottom: .7rem; }
}

/* ---------- Nadpis sekce na podstrankach ----------
   .entry-content h2 { font-size: 1.6rem; margin: 1.5em 0 .5em } ma vyssi
   specificitu nez Tailwind utilita, takze velikost z navrhu (35 px) drzime
   vlastni tridou scopovanou pod .entry-content. */
.entry-content .ps-section-title {
	font-size: 1.55rem;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}
@media (min-width: 768px) {
	.entry-content .ps-section-title { font-size: 35px; }
}
.entry-content .ps-hero-sub-title { margin: 0; }
/* Nadpis "Prověřeno v nejlepších lokalitách" má natvrdo tři <br /> (desktop
   sloupec je úzký, potřebuje je), ale na mobilu ze tří krátkých čar působí
   zbytečně rozsekaně. Na mobilu proto zlomy skryjeme a necháme text plynout
   přirozeně - v obsahu je před každým <br> mezera, která se pri skrytí <br>
   stane normálním oddělovačem slov (na desktopu je to mezera na konci řádku
   před zalomením, tu prohlížeč beztak nezobrazí). */
@media (max-width: 767px) {
	.ps-title-break { display: none; }
}

/* ---------- Kalkulacka uvnitr CTA karty (Provozovatel) ----------
   Navrh ma tri sloupce oddelene tenkou linkou: titulek / vstupy / vysledek.
   Vysledek tu nema vlastni kartu (na rozdil od homepage). */
.ps-calc-cols > .wp-block-group__inner-container { display: contents; }
.ps-calc-cols { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
.ps-calc-title { font-size: 1.35rem; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.25; }
.entry-content .ps-calc-title { margin: 0; }
.ps-cta-card .ps-calc { padding: 1.75rem 1.25rem; }
/* Vysledek tu nema vlastni kartu jako na homepage - krome pozadi a ramecku je
   potreba vynulovat i zaobleni, jinak ho kopiruje delici linka (border-left)
   a ta se v rozich ohyba. */
.ps-cta-card .ps-calc-result { background: transparent; border: 0; border-radius: 0; backdrop-filter: none; padding: 0; }
.ps-cta-card .ps-calc-inputs { max-width: 318px; }
@media (min-width: 768px) {
	.ps-cta-card .ps-calc { padding: 2.4rem 2.5rem; }
	.ps-calc-cols { grid-template-columns: 424px 511px 1fr; gap: 0; }
	/* Pozor: `.ps-calc-cols > *` sloupce NEtrefi - jedinym DOM potomkem je
	   `.wp-block-group__inner-container` a `display: contents` na nem meni jen
	   layout, ne strom (viz past c. 2 v CLAUDE.md). Miri se proto primo na
	   tridy sloupcu. `align-self: stretch` srovna obe delici linky na stejnou
	   vysku, jak je to v navrhu - `align-items: center` vyse by je jinak
	   zkratil na vysku obsahu kazdeho sloupce zvlast. */
	.ps-calc-cols .ps-calc-inputs,
	.ps-calc-cols .ps-calc-result {
		align-self: stretch;
		/* Dle navrhu: sirka ~3px a kryti ~0.8. Zmereno z exportu (polovicni
		   meritko): linka pokryva ~1.4 px a jeji vrchol ma jas 226 na podkladu
		   116, z cehoz vychazi alfa 0.79 - puvodnich .4 delalo z linky vlasek. */
		border-left: 3px solid rgba(255,255,255,.8);
	}
	.ps-calc-cols .ps-calc-inputs { padding-left: 98px; }
	.ps-calc-cols .ps-calc-result {
		padding-left: 50px;
		/* box je natazeny na celou vysku radku, obsah drzime na stredu */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.ps-calc-title { font-size: 25px; }
}

/* jemna linka mezi sekcemi (v navrhu deli "Sprava aktiv" a "Provereno") */
.ps-section-hairline { height: 1px; background: #d4d4d4; }


/* ------------------------------------------------------------------
   Cookie lišta (Complianz) – tlačítka sjednocená se styly webu
   Přijmout = .btn-gradient, Odmítnout = .btn-outline-gradient,
   Předvolby = .btn-outline-dark
   ------------------------------------------------------------------ */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn {
	padding: 12px 22px;
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-style: solid;
	transition: filter .15s ease, transform .15s ease, background-color .15s ease;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--ps-gradient);
	background-origin: border-box;
	background-repeat: no-repeat;
	color: #fff;
	border-color: transparent;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: linear-gradient(#fff, #fff) padding-box, var(--ps-gradient) border-box;
	color: #333;
	border: 2px solid transparent;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background: linear-gradient(#f7f7f7, #f7f7f7) padding-box, var(--ps-gradient) border-box;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options {
	background: #fff;
	color: #333;
	border-color: #e2e2e2;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options:hover {
	background: #f6f6f6;
}


/* ------------------------------------------------------------------
   Sidebar u článku – formuláře
   Oba formuláře (řidič i provozovatel) jsou v kartě vyšší než běžné okno
   (~1100–1300 px), takže přilepený (sticky) sidebar schoval tlačítko
   Odeslat pod okraj obrazovky až do konce článku. Proto ho nelepíme.
   Dvojice polí skládáme pod sebe (v 340px kartě by měla jen 138 px).
   ------------------------------------------------------------------ */
aside.ps-post-sidebar {
	position: static;
}
.ps-post-sidebar-card .ps-field-pair {
	grid-template-columns: 1fr;
}


/* ------------------------------------------------------------------
   Štítky přes celou šířku (O nás – „Proč právě s námi?")
   Na desktopu jeden řádek, všechny štítky stejně široké.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.ps-tags.ps-tags--full {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		max-width: none;
	}
}
/* .mx-auto na nadpisu sekce: `.entry-content .ps-section-title { margin: 0 }`
   má vyšší specifičnost a utilitu by jinak přebilo. */
.entry-content .ps-section-title.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Štítky na mobilu: sloupec `max-content` měl šířku nejdelšího štítku (~400 px)
   a na 375px displeji přetékal. Takhle se sloupec zúží na šířku obrazovky
   a text se zalomí; když se štítky vejdou, zůstanou jako dřív. */
@media (max-width: 767px) {
	.ps-tags {
		grid-template-columns: minmax(0, max-content);
	}
}

/* Šipky mezi kartami „ps-howto": základní pravidlo míří na střed obrázku karty
   (Řidič, Provozovatel). U karet bez obrázku (O nás) je dáme na svislý střed. */
@media (min-width: 768px) {
	.ps-howto .ps-howto-card:not(:has(.ps-howto-media)):not(:last-child)::after {
		top: 50%;
		margin-top: 0;
	}
}

/* ------------------------------------------------------------------
   O nás – responzivita
   ------------------------------------------------------------------ */

/* Nadpisy karet dědily řádkování 1,7 → na víc řádcích byly moc od sebe.
   1,25 odpovídá ostatním nadpisům na webu (1,12–1,2). */
.ps-howto .ps-howto-title {
	line-height: 1.25;
}

/* Karty bez obrázku (O nás) mají dlouhé nadpisy a do tří sloupců se
   na tabletu nevejdou (třetí karta vyjížděla z obrazovky). Do 1023 px je
   skládáme pod sebe jako na mobilu – bez šipek, které patří k řádku.
   Karty s obrázkem (Řidič, Provozovatel) se do tří sloupců vejdou, ty nechává. */
@media (min-width: 768px) and (max-width: 1023px) {
	.ps-howto:not(:has(.ps-howto-media)) {
		grid-template-columns: 1fr;
	}
	.ps-howto:not(:has(.ps-howto-media)) .ps-howto-card:not(:last-child)::after {
		display: none;
	}
}

/* Názvy lokalit se zkracovaly trojtečkou („Pankrác – kancelář…").
   Název je obsah karty, takže ho radši zalomíme. */
.ps-ref-title {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

/* Názvy lokalit: stejně jako nadpisy karet nedědit řádkování textu 1,7 z .entry-content. */
.ps-ref-title {
	line-height: 1.3;
}

/* Sekce lokalit na tabletu: text + 2 karty ve 3 sloupcích dávaly kartám jen
   ~209 px a názvy se lámaly do 3–4 řádků. Text dáme nahoru přes celou šířku,
   karty pod něj vedle sebe. (Obal .wp-block-group__inner-container má
   display: contents, takže jeho děti jsou přímo položky mřížky.) */
@media (min-width: 768px) and (max-width: 1023px) {
	.wp-block-group.grid:has(.ps-ref-title) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wp-block-group.grid:has(.ps-ref-title) > .wp-block-group__inner-container > :first-child {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------
   Kalkulačka výnosu (Provozovatel) – responzivita
   Původní sloupce 424px / 511px / 1fr jsou pixely z návrhu pro široký
   monitor a přetékaly už na 1180px oknech.
   ------------------------------------------------------------------ */

/* Tablet a menší desktop: nadpis přes celou šířku, pod ním pole | výsledek. */
@media (min-width: 768px) and (max-width: 1279px) {
	.ps-calc-cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 1.75rem;
	}
	.ps-calc-cols .ps-calc-title {
		grid-column: 1 / -1;
	}
	.ps-calc-cols .ps-calc-inputs {
		border-left: 0;
		padding-left: 0;
		padding-right: 2rem;
	}
	.ps-calc-cols .ps-calc-result {
		padding-left: 2rem;
	}
}

/* Široký desktop: sloupce se smějí zúžit pod 424/511 px, když není místo,
   jinak zůstávají přesně podle návrhu. */
@media (min-width: 1280px) {
	.ps-calc-cols {
		grid-template-columns: minmax(0, 424px) minmax(0, 511px) minmax(260px, 1fr);
	}
}

/* Mockup aplikace (Řidič – Stáhnout aplikaci): 566 px jen tam, kde se vejde. */
.ps-appshot-wrap .ps-appshot {
	width: min(566px, 100%);
}

/* Dlaždice s ikonou („Doporučené ceny"): nadpis nedědí řádkování textu 1,7
   a na tabletu se zmenší, aby se dlouhé slovo vešlo do úzké dlaždice. */
.ps-info-tile-title {
	line-height: 1.25;
}
@media (min-width: 768px) and (max-width: 1023px) {
	.ps-info-tile-title {
		font-size: 22px;
	}
}

/* Kalkulačka na homepage: na tabletu dostával výsledek jen 1/3 šířky (~168 px)
   a částka i popisek přetékaly. Do 1023 px ji skládáme pod sebe jako na mobilu. */
@media (min-width: 768px) and (max-width: 1023px) {
	.ps-calc .grid:has(.ps-calc-result) {
		grid-template-columns: minmax(0, 1fr);
	}
	.ps-calc .grid:has(.ps-calc-result) .md\:col-span-2 {
		grid-column: auto;
	}
}

/* Textové stránky (page.php bez sekcí přes celou šířku): sloupec textu stejně
   široký jako hlavní sloupec článku na blogu, ať se dlouhý text dobře čte. */
.ps-text-page {
	max-width: 812px;
}

/* ---------- Mezery podstránek (sjednoceno 2026-10-01) ----------
   Mezi sekcemi 48 / 80 px (py-12 md:py-20), uvnitř nadpisového bloku 24 px
   (nadpis, oddělovač, perex), nadpis/perex -> obsah a mezi bloky obsahu 32 px.
   Poslední prvek textového obsahu nepřidává svůj okraj k odsazení sekce. */
.ps-text-page .entry-content > :last-child,
.single-article .entry-content > :last-child,
.single-lokalita .entry-content > :last-child { margin-bottom: 0; }