/* ==========================================================================
   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;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px; /* kvůli sticky hlavičce a kotvám */
}

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; }
.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);
}

/* ---------- 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 { 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 > .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;
	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; }

/* 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; }

.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;
}

.ps-calc-result-label { font-size: 1.15rem; font-weight: 700; color: #fff; }
.ps-calc-result-amount { font-size: 2.9rem; font-weight: 800; color: #fff; line-height: 1.1; }
.ps-calc-result-amount .ps-calc-result-from { font-weight: 300; font-size: 2.4rem; 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; }

/* ---------- 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.25rem 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); }

.ps-section-blog { 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; }
}

/* ---------- 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-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: 1.5rem; }
}

/* ---------- 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;
	}
}