/*
 * Sekce z návrhu agentury (quick-wins) — pás důvěry a reference rodin.
 *
 * Needituje se generátorem: `blocks.css` přepisuje `port-css.py` podle originálu,
 * kdežto tohle jsou sekce, které starý web nemá. Proto vlastní soubor.
 *
 * Rozměry vychází z designového systému CELETu, ne z mockupu agentury: ten má
 * vlastní odstíny i rozestupy (jiná zelená, 36px padding, 30px nadpisy), které
 * by se od zbytku webu odrážely. Používají se stejné jednotky jako v přenesených
 * blocích, tedy `rem` — díky tomu se sekce nad 1920 px škálují spolu se zbytkem.
 */

/*
 * Barevné tokeny opsané z mockupu agentury (jeho `:root`), aby odstíny seděly
 * na jeho návrh a nemusely se dohledávat v každém pravidle zvlášť.
 *
 * JEDNOTKY: mockup je celý v px, tady jsou rem (px/16). Do 1920 px je výsledek
 * totožný, nad 1920 px se ale web škáluje s šířkou okna (viz fluidní kořenová
 * velikost písma) – s pevnými px by tyhle sekce jako jediné zůstaly malé.
 */
:root {
	--qw-green: #A3E358;
	--qw-green-2: #93D348;
	--qw-ink: #1A1816;
	--qw-ink-2: #2F2F2F;
	--qw-mute: #898989;
	--qw-line: #E5E7EB;
	--qw-bg-2: #FAFAF8;

	/*
	 * Béžová pro střídání odstínů sekcí na úvodní stránce.
	 *
	 * Schválně JINÝ token než `--qw-bg-2` (#FAFAF8): ten je od bílé odlišitelný
	 * sotva o procento jasu, takže střídání, které má stránku rozčlenit, by
	 * nebylo vidět. Tenhle odstín je pořád nenápadný, ale hranu sekce už udělá.
	 */
	--qw-bg-alt: #F6F3ED;

	/*
	 * Svislé odsazení sekcí úvodní stránky.
	 *
	 * Přenesené sekce mají z originálu `padding: 5rem 10rem`, tedy 80 px nahoře
	 * i dole — mezi dvěma sousedy je pak 160 px a stránka nutí hodně rolovat.
	 * Quick-wins sekce přitom stály na 2,5–3,5rem, takže rytmus byl navíc
	 * nejednotný. Sjednoceno na jednu proměnnou, ať se dá ladit z jednoho místa.
	 */
	--qw-sekce-y: 2.5rem;
}

@media (min-width: 48rem) {
	:root { --qw-sekce-y: 3rem; }
}

@media (min-width: 80rem) {
	:root { --qw-sekce-y: 3.5rem; }
}

/* ------------------------------------------------------------- tlačítka navíc */

/*
 * Sekundární tlačítka z návrhu. Dědí tvar i rozměry z přeneseného
 * `.Button_wrapper`, mění jen výplň a obrys.
 */
.Button_wrapper.Button_ghost-light {
	background-color: transparent;
	color: #fff;
	border-width: 2px;
	border-color: rgba(255, 255, 255, 0.5);
}

.Button_wrapper.Button_ghost-light:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #fff;
}

.Button_wrapper.Button_outline {
	background-color: transparent;
	color: var(--qw-ink);
	border-width: 2px;
	border-color: var(--qw-ink);
}

.Button_wrapper.Button_outline:hover {
	background-color: var(--qw-ink);
	color: #fff;
}

/* ------------------------------------------------------------------ hero (QW) */

.QwHero_wrapper {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 45rem;
	padding: 4rem 1.125rem;
	overflow: hidden;
	background-color: var(--qw-ink);
}

.QwHero_media,
.QwHero_media .QwHero_image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Přechod zleva doprava, ne odspodu: text stojí vlevo a fotka musí zůstat
 * čitelná vpravo. Hodnoty jsou z mockupu (0.78 → 0.45 → 0.05).
 */
.QwHero_wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(26, 24, 22, 0.78) 0%, rgba(26, 24, 22, 0.45) 60%, rgba(26, 24, 22, 0.05) 100%);
}

/*
 * Odznaky úspornosti. Na starém webu je to jedno průhledné PNG přes celý slide
 * (`img.image.Carousel_pinsLayer`, absolute inset 0, object-fit: cover) – odznaky
 * jsou v něm už zapečené na svých místech, nepozicujeme je tedy jednotlivě.
 * Zachovávám to samé chování včetně ořezu, jinak by odznaky seděly jinde než
 * na originále.
 *
 * z-index 2 = nad ztmavovacím přechodem (::after), pod textem (`_inner`, 3).
 * Přechod je naše přidaná vrstva, kterou originál nemá; bez tohoto pořadí by
 * odznaky ztmavly a přestaly být čitelné.
 */
.QwHero_pinsLayer,
.QwHero_pinsLayer .QwHero_pins {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.QwHero_pinsLayer {
	z-index: 2;
	pointer-events: none;
}

.QwHero_inner {
	position: relative;
	z-index: 3;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 70rem;
}

.QwHero_eyebrow {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: 0.375rem 0.875rem;
	border-width: 1px;
	border-color: rgba(163, 227, 88, 0.4);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var(--qw-green);
}

/*
 * Když je pilulka odkazem (na článek o difúzně otevřené konstrukci), musí to
 * být poznat — bez odlišení ji nikdo nezkusí kliknout. Barvu drží selektor
 * s vyšší specificitou, protože Hello Elementor barví `a` globálně.
 */
a.QwHero_eyebrowLink {
	color: var(--qw-green);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

a.QwHero_eyebrowLink:hover,
a.QwHero_eyebrowLink:focus-visible {
	background-color: rgba(163, 227, 88, 0.15);
	border-color: var(--qw-green);
}

/*
 * Váha 700, i když mockup má 800.
 *
 * Poppins načítáme jen ve čtyřech řezech (400/500/600/700) kvůli smluvnímu
 * PageSpeed. Na 800 by prohlížeč sáhl po falešném tučnění – rozmazaný text,
 * stejná past jako u kurzívy v referencích. 700 je nejtěžší skutečný řez.
 */
/*
 * Selektor přes rodiče, ne samotná třída.
 *
 * Elementor kit generuje `.elementor-kit-XXXX h1 { color:#252525 }`, což je
 * (0,1,1) a přebilo by `.QwHero_title` (0,1,0) – první řádek nadpisu pak na
 * tmavé fotce zčernal a byl prakticky neviditelný. `.QwHero_inner .QwHero_title`
 * má (0,2,0) a vyhraje bez `!important`. Stejná past už byla u tlačítek,
 * odkazů v patičce, podtržení a výšky `fill` obrázků.
 */
.QwHero_inner .QwHero_title {
	max-width: 45rem;
	margin-bottom: 1.5rem;
	font-size: 4rem;
	/* Mockup má 800; ten řez se od 26.8. načítá, takže se nefalšuje. */
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: #fff;
}

.QwHero_inner .QwHero_lead {
	color: rgba(255, 255, 255, 0.88);
}

/* Druhá část nadpisu je zelená a na vlastním řádku – v administraci se píše
   mezi hvězdičky, takže se z ní stane <strong>. */
.QwHero_title strong {
	display: block;
	font-weight: 700;
	color: var(--qw-green);
}

/*
 * Tlačítka v hero a u vzorových domů jsou o kus větší než přenesená
 * (mockup: padding 14/26 px, písmo 15 px, obrys 2 px). Selektor přes rodiče
 * má (0,2,0), takže přebije `.Button_wrapper` bez `!important`.
 */
.QwHero_actions .QwHero_button,
.ShowHouse_cta .ShowHouse_button {
	padding: 0.875rem 1.625rem;
	border-radius: 999px;
	border-width: 2px;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

/*
 * Chování při najetí podle mockupu: mírné nadzvednutí u všech variant a
 * u zeleného tlačítka TMAVŠÍ zelená (`--green-2`).
 *
 * Přenesené CSS má u zeleného tlačítka hover naopak SVĚTLEJŠÍ (rgb(182 240 113))
 * a nic se nehýbe – vypadalo to, jako by tlačítko při najetí vybledlo. Selektor
 * přes rodiče má (0,3,0) a přebije `.Button_wrapper.Button_green:hover` (0,2,0).
 */
.QwHero_actions .QwHero_button:hover,
.ShowHouse_cta .ShowHouse_button:hover {
	transform: translateY(-1px);
}

.QwHero_actions .Button_green.QwHero_button:hover,
.ShowHouse_cta .Button_green.ShowHouse_button:hover {
	background-color: var(--qw-green-2);
	border-color: var(--qw-green-2);
}

.QwHero_refLink {
	transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}

.QwHero_refLink:hover {
	transform: translateY(-1px);
}

.QwHero_lead {
	max-width: 40rem;
	margin-bottom: 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
}

.QwHero_lead strong {
	font-weight: 700;
	color: #fff;
}

.QwHero_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.QwHero_refLink {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 2.25rem;
	padding: 0.875rem 1.5rem;
	border-width: 1.5px;
	border-color: rgba(163, 227, 88, 0.5);
	border-radius: 999px;
	background-color: rgba(163, 227, 88, 0.14);
	font-size: 0.9375rem;
	color: #fff;
}

.QwHero_refLink:hover {
	background-color: rgba(163, 227, 88, 0.22);
	border-color: var(--qw-green);
}

.QwHero_refLink strong {
	font-weight: 700;
	color: var(--qw-green);
}

.QwHero_refStars {
	display: flex;
	gap: 0.125rem;
	color: var(--qw-green);
}

.QwHero_refArrow {
	display: block;
	flex: none;
	width: 1.25rem;
	height: 0.5rem;
	color: var(--qw-green);
}

.QwHero_refArrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 47.99rem) {

	.QwHero_wrapper {
		min-height: auto;
		padding: 3.75rem 1.125rem;
	}

	.QwHero_title {
		font-size: 2.5rem;
	}

	.QwHero_refLink {
		align-items: flex-start;
	}
}

@media (min-width: 48rem) {

	.QwHero_wrapper {
		padding: 4rem 2.5rem;
	}
}

@media (min-width: 80rem) {

	.QwHero_wrapper {
		padding: 5rem 10rem;
	}
}

/* -------------------------------------------------------------- vzorové domy */

.ShowHouse_wrapper {
	width: 100%;
	background-color: var(--qw-bg-2);
	padding: 3.5rem 1.125rem;
}

.ShowHouse_inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 70rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

.ShowHouse_eyebrow {
	display: block;
	margin-bottom: 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var(--qw-green-2);
}

.ShowHouse_title {
	margin-bottom: 1.125rem;
	font-size: 2.375rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--qw-ink);
}

/* Zvýrazněná část nadpisu je podtržená zelenou – tak to má mockup. */
.ShowHouse_title strong {
	font-weight: 600;
	color: var(--qw-ink);
	border-bottom-width: 4px;
	border-color: var(--qw-green);
	padding-bottom: 0.125rem;
}

.ShowHouse_lead {
	margin-bottom: 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--qw-ink-2);
}

.ShowHouse_lead strong {
	font-weight: 700;
	color: var(--qw-ink);
}

.ShowHouse_cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ShowHouse_gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 12.5rem 7.5rem 7.5rem;
	gap: 0.625rem;
}

.ShowHouse_cell {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 0.75rem;
	background-color: #eee;
	cursor: zoom-in;
}

.ShowHouse_cell .ShowHouse_image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.ShowHouse_cell:hover .ShowHouse_image {
	transform: scale(1.04);
}

.ShowHouse_cellLarge {
	grid-column: span 2;
}

@media (min-width: 48rem) {

	.ShowHouse_wrapper {
		padding: 5.625rem 2.5rem;
	}

	.ShowHouse_inner {
		grid-template-columns: 1fr 1.15fr;
		gap: 3rem;
	}

	/*
	 * Rozvržení 1:1 podle mockupu: DVA sloupce, velká fotka v levém přes dva
	 * řádky, dvě menší v pravém a poslední dvě přes celý spodní řádek.
	 *
	 * Poměr řádků 1 : 1 : 1,39 je opsaný z vyrenderovaného návrhu (147/147/205 px
	 * při výšce 520). Třetí řádek je tam implicitní a dopočítává se z obsahu –
	 * tady je uvedený výslovně, aby výsledek nezávisel na tom, kdy se stáhnou
	 * obrázky.
	 *
	 * POZOR na měření: než se fotky načtou, mají implicitní řádky nulovou výšku
	 * a vypadá to, že poslední dvě fotky v návrhu chybí. Před měřením je nutné
	 * počkat na `img.decode()`, jinak si člověk nahlásí chybu, která tam není.
	 */
	.ShowHouse_gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1.39fr;
		height: 26.25rem;
	}

	.ShowHouse_cellLarge {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
}

@media (min-width: 80rem) {

	.ShowHouse_wrapper {
		padding: 5.625rem 10rem;
	}

	.ShowHouse_gallery {
		/* Mockup má na širokém displeji 520 px; v rem, ať to škáluje se zbytkem. */
		height: 32.5rem;
	}
}

/* ------------------------------- vzhled quick-wins u přenesených sekcí -------
 *
 * Scopováno pod `.celet-qw-style`, což je třída na CONTAINERU dané sekce
 * (nasazuje ji celet-quickwins.php). Stejné widgety na ostatních stránkách
 * – výpis domů, výpis článků, kategorie – si tak drží přenesený vzhled 1:1.
 */

/*
 * Hlavička sekce podle mockupu (`.sect-head`): na střed, užší sloupec,
 * zvýrazněná část nadpisu ZELENĚ a popisek šedý.
 *
 * Přenesené sekce mají hlavičku vlevo a zvýraznění tmavé, proto se to přepisuje
 * jen pod `.celet-qw-style` – na ostatních stránkách zůstává původní vzhled.
 * Selektory jdou přes dva rodiče (0,3,0), protože Elementor kit sází barvu
 * nadpisů přes `.elementor-kit-XXXX h2` (0,1,1) a přenesené CSS přes vlastní
 * třídy; slabší selektor by prohrál.
 */
/*
 * Vystředění NEJDE dělat přes `align-items` na `_top`.
 *
 * `.CategoryList_top` je flex ŘÁDEK se `space-between` (nadpis je uvnitř
 * `.CategoryList_info` vedle tlačítka „načíst další“), takže `align-items:center`
 * řeší svislou osu a s vodorovným umístěním nedělá nic – nadpis zůstal vlevo.
 * `.InfoList_top` má navíc šířku napevno na šest sloupců mřížky
 * (`width: calc(6*...)`), takže ho `max-width` nezúží ani neposune.
 *
 * Proto se středí až VNITŘNÍ prvky: dostanou plnou šířku, strop 45rem
 * a `margin: auto`. Funguje to bez ohledu na to, jestli je rodič flex, nebo blok.
 */
.celet-qw-style .CategoryList_top,
.celet-qw-style .InfoList_top {
	width: 100%;
	max-width: none;
	padding-bottom: 3.5rem;
	justify-content: center;
	text-align: center;
}

.celet-qw-style .CategoryList_top .CategoryList_info,
.celet-qw-style .InfoList_top .InfoList_title,
.celet-qw-style .InfoList_top .InfoList_description {
	width: 100%;
	max-width: 45rem;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Řez nadpisů: mockup má `h1,h2,h3,h4 { font-weight: 700 }` a prostrkání
 * -0.01em, kdežto Elementor kit sází nadpisy v řezu 400. Vedle sebe to vypadá
 * jako úplně jiné písmo, i když je to pořád Poppins – proto „špatný font“.
 *
 * `!important` je tu VÝJIMEČNĚ na místě: přenesené CSS má
 * `.InfoList_top .InfoList_title { font-size: 2.25rem !important }`, takže
 * normální pravidlo neprojde ani s vyšší specificitou. Jinde v projektu se
 * `!important` nepoužívá – řeší se to selektorem přes rodiče.
 */
/*
 * Hero tu schválně NENÍ – má vlastní řez 800 a stálo by v tomhle pravidle
 * později v souboru, takže by ho 700 přebilo (stejná specificita, rozhoduje
 * pořadí). Prostrkání má hero nastavené u sebe.
 */
.celet-qw-style .CategoryList_top .CategoryList_title,
.celet-qw-style .InfoList_top .InfoList_title,
.Reviews_top .Reviews_title,
.ShowHouse_text .ShowHouse_title {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.celet-qw-style .CategoryList_top .CategoryList_title,
.celet-qw-style .InfoList_top .InfoList_title,
.Reviews_top .Reviews_title {
	font-size: 2.5rem !important;
	line-height: 1.2 !important;
	margin-bottom: 1rem;
	color: var(--qw-ink);
}

/*
 * Nadpis položky „Proč CELET“: mockup 18 px / 700, přenesené CSS ale drží
 * 1.5rem přes `!important` (`.InfoItem_title`), takže bez `!important` se
 * pravidlo neuplatní.
 */
.celet-qw-style .InfoList_item .InfoItem_title {
	font-size: 1.125rem !important;
	line-height: 1.3 !important;
	font-weight: 700;
}

.celet-qw-style .CategoryList_top .CategoryList_title strong,
.celet-qw-style .InfoList_top .InfoList_title strong {
	color: var(--qw-green);
}

.celet-qw-style .CategoryList_top .CategoryList_description,
.celet-qw-style .InfoList_top .InfoList_description {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--qw-mute);
}

/*
 * Reference se NEPODMIŇUJÍ třídou `celet-qw-style`.
 *
 * Je to vlastní blok z návrhu agentury – nikde jinde než v tomhle vzhledu
 * neexistuje, takže by podmínka jen znamenala, že se zapomene nasadit
 * (což se taky stalo: hlavička zůstala vlevo a zvýraznění tmavé).
 */
.Reviews_top {
	max-width: 45rem;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 3.5rem;
	text-align: center;
}

/* Stejný důvod jako výš: prvky si berou plnou šířku a středí je `text-align`,
   ne `align-items` – jinak se ve flexu smrsknou na šířku obsahu a „ujedou“. */
.Reviews_top .Reviews_title,
.Reviews_top .Reviews_description {
	width: 100%;
}

.Reviews_top .Reviews_title {
	margin-bottom: 1rem;
	color: var(--qw-ink);
}

.Reviews_top .Reviews_title strong {
	color: var(--qw-green);
}

.Reviews_top .Reviews_description {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--qw-mute);
}

/* Karty kategorií: poměr 4:5, tmavý přechod odspodu, text přes fotku. */
.celet-qw-style .ItemCard_wrapper {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 1rem;
	overflow: hidden;
	background-color: var(--qw-bg-2);
}

.celet-qw-style .ItemCard_inner,
.celet-qw-style .ItemCard_imageLink {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.celet-qw-style .ItemCard_image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.celet-qw-style .ItemCard_wrapper:hover .ItemCard_image {
	transform: scale(1.04);
}

/*
 * Popiska sedí na fotce, ne pod ní. `inset: auto 0 0` ji přilepí ke spodní
 * hraně; přechod začíná v polovině výšky, aby text držel kontrast i na světlé
 * fotce. Hodnoty jsou z mockupu (transparent 50 % → rgba(0,0,0,.85) 100 %).
 */
/*
 * Čtyři úrovně selektoru schválně.
 *
 * Přenesené CSS posouvá popisku mimo kartu přes
 * `.ItemCard_wrapper:nth-child(3n+1) .ItemCard_inner .ItemCard_info` – pseudotřída
 * se počítá jako třída, takže je to (0,4,0). Se slabším selektorem se pravidlo
 * neuplatnilo a odkaz „Zobrazit“ vyčuhoval 16 px pod spodní hranu karty, kde ho
 * `overflow: hidden` uřízlo. Tenhle selektor má taky (0,4,0) a vyhrává pořadím
 * souborů (quickwins.css se načítá až za blocks.css).
 */
.celet-qw-style .ItemCard_wrapper .ItemCard_inner .ItemCard_info {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1.75rem;
	background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.85) 100%);
	pointer-events: none;
}

/* Nadpis karty je bílý – kit sází `.elementor-kit-XXXX h4` (0,1,1), proto
   selektor přes dva rodiče (0,3,0). */
.celet-qw-style .ItemCard_info .ItemCard_title {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.celet-qw-style .ItemCard_info .ArrowLink_wrapper {
	pointer-events: auto;
	color: var(--qw-green);
}

/* „Proč CELET“: menší ikony a nadpisy podle mockupu (56 px / 18 px / 13 px). */
.celet-qw-style .InfoItem_icon {
	width: 3.5rem;
	height: 3.5rem;
}

.celet-qw-style .InfoItem_icon svg {
	width: 100%;
	height: 100%;
}

.celet-qw-style .InfoList_item .Heading_wrapper {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.celet-qw-style .InfoItem_description {
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* ------------------------------------------------------------ patička (QW) --
 *
 * Platí jen pro `.Footer_qw`, což renderer vypisuje podle přepínače ve widgetu.
 * Přenesená patička si tak drží původní podobu a návrat je jedno kliknutí.
 */

/* Čtyři sloupce: značka + tři seznamy. Přenesená verze má tři. */
.Footer_qw .Footer_menuFloor .Footer_inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

/*
 * Sloupce si musí vzít šířku z mřížky, ne ze staré `calc()`.
 *
 * Přenesené CSS dává `.Footer_bottom .Footer_menuFloor .Footer_inner .Footer_item`
 * pevnou šířku počítanou z mřížkových proměnných (`--grid-columns`, `--grid-gap`).
 * Ve flexovém originále to sedělo, tady se ale `100%` v tom `calc()` vztahuje
 * k šířce gridové stopy (302 px), takže z položek vyšlo 44 px a text se lámal
 * po jednotlivých slovech. Selektor má (0,5,0), aby původní (0,4,0) přebil.
 */
.Footer_qw .Footer_bottom .Footer_menuFloor .Footer_inner .Footer_item {
	width: auto;
}

/* Logo v prvním sloupci – v přenesené verzi mu šířku dával `Footer_logoFloor`,
   ten tu není, takže by zůstalo na vlastní velikosti (66 px). */
.Footer_qw .Footer_brand .Footer_link {
	display: block;
	width: 12.5rem;
	max-width: 100%;
}

.Footer_qw .Footer_brand .Footer_logo {
	display: block;
	width: 100%;
	height: auto;
}

.Footer_qw .Footer_tagline {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.Footer_qw .Footer_brand .Footer_socials {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

/*
 * Odkazy v návrhu podtržené NEJSOU. Přenesené CSS je podtrhuje přes
 * `.Footer_list .FooterLink_link` (0,2,0), takže je potřeba selektor přes
 * další úroveň – `.Footer_qw` navíc dává (0,3,0).
 */
.Footer_qw .Footer_list .FooterLink_link {
	text-decoration-line: none;
}

.Footer_qw .Footer_list .FooterLink_link:hover {
	text-decoration-line: underline;
}

/* Spodní pruh: copyright vlevo, právní odkazy vpravo, nad tím linka. */
.Footer_qw .Footer_infoFloor .Footer_inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.75rem;
	border-top-width: 1px;
	border-color: rgba(255, 255, 255, 0.12);
}

.Footer_qw .Footer_legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* Oddělovač „·“ mezi odkazy – v návrhu je psaný v textu, tady ho dělá CSS,
   aby se nemusel udržovat ručně a nezůstal viset na konci řádku. */
.Footer_qw .Footer_legalLink + .Footer_legalLink::before {
	content: "·";
	margin-right: 0.5rem;
	color: rgba(255, 255, 255, 0.4);
}

.Footer_qw .Footer_legalLink {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.72);
}

.Footer_qw .Footer_legalLink:hover {
	color: #fff;
	text-decoration-line: underline;
}

@media (min-width: 48rem) {

	.Footer_qw .Footer_menuFloor .Footer_inner {
		grid-template-columns: 1.3fr 1fr 1fr 1fr;
		gap: 3rem;
	}
}

/* ------------------------------------------------- nadtitulek a odkaz v hero */

/*
 * Obojí je navíc oproti starému webu a vykresluje se jen na úvodní stránce
 * (na detailech domů zůstávají pole prázdná). Hero je tmavé, proto světlé texty.
 */
.Carousel_eyebrow {
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #A3E358;
}

.Carousel_extraLink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #fff;
	text-decoration-line: underline;
	text-underline-offset: 0.25rem;
}

.Carousel_extraLink:hover {
	text-decoration-line: none;
}

.Carousel_extraStars {
	display: flex;
	gap: 0.125rem;
	color: #A3E358;
}

.Carousel_extraArrow {
	display: block;
	width: 1.25rem;
	height: 0.5rem;
}

.Carousel_extraArrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------- pás důvěry */

.TrustBar_wrapper {
	width: 100%;
	background-color: #FAFAF8;
	padding: 2.5rem 1.125rem;
}

.TrustBar_inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 70rem;
}

.TrustBar_grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.TrustBar_cell {
	text-align: center;
	padding: 0 1rem;
}

.TrustBar_value {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: #252525;
}

/* Zvýrazněná část nadpisu (hvězdičky v administraci) nese zelenou, stejně
   jako u přenesených bloků. */
.TrustBar_value strong {
	font-weight: 600;
	color: #65AB13;
}

.TrustBar_label {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.5;
	color: #898989;
}

@media (min-width: 48rem) {

	.TrustBar_wrapper {
		padding: 3.5rem 2.5rem;
	}

	.TrustBar_grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
	}

	/* Oddělovač jen mezi buňkami, ne po krajích – proto přes `+`. */
	.TrustBar_cell + .TrustBar_cell {
		border-left-width: 1px;
		border-color: #E5E7EB;
	}
}

@media (min-width: 80rem) {

	.TrustBar_wrapper {
		padding: 4rem 10rem;
	}
}

/* ------------------------------------------------------------ reference rodin */

.Reviews_wrapper {
	width: 100%;
	background-color: #fff;
	padding: 2.5rem 1.125rem;
}

.Reviews_inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 70rem;
}

.Reviews_top {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 0.5rem;
	padding-bottom: 2.5rem;
}

.Reviews_description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #898989;
}

.Reviews_list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

/*
 * Karta podle mockupu: bílá, tenký rámeček, fotka 16:9 nahoře, pod ní citace
 * se zelenou uvozovkou a až za čarou hvězdičky s podpisem.
 */
.ReviewCard_wrapper {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #fff;
	border-width: 1px;
	border-color: var(--qw-line);
	border-radius: 1rem;
	transition: border-color 0.2s, transform 0.2s;
}

.ReviewCard_wrapper:hover {
	border-color: var(--qw-green);
	transform: translateY(-2px);
}

.ReviewCard_thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.ReviewCard_thumb .ReviewCard_image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.ReviewCard_wrapper:hover .ReviewCard_image {
	transform: scale(1.05);
}

.ReviewCard_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem 1.75rem 1.5rem;
}

/*
 * Uvozovka je dekorace přes `::before`, ne znak v textu – jinak by ji přečetly
 * čtečky i vyhledávače jako součást citace.
 */
.ReviewCard_text {
	position: relative;
	flex: 1;
	margin: 0 0 1.25rem;
	padding-top: 1.25rem;
	font-size: 0.96875rem;
	line-height: 1.6;
	color: var(--qw-ink-2);
}

.ReviewCard_text::before {
	content: "\201C";
	position: absolute;
	top: -0.875rem;
	left: -0.375rem;
	font-family: Georgia, serif;
	font-size: 3.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--qw-green);
}

/*
 * `font-style: normal` je tu nutnost, ne kosmetika.
 *
 * Hello Elementor sází `figcaption` kurzívou. Poppins ale načítáme jen ve čtyřech
 * řezech bez kurzívy (kvůli smluvnímu PageSpeed), takže ji prohlížeč FALŠUJE –
 * písmo jen nakloní. Vypadá to rozmazaně a od zbytku webu se to odráží.
 */
.ReviewCard_author {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top-width: 1px;
	border-color: var(--qw-line);
	font-style: normal;
}

.ReviewCard_stars {
	display: flex;
	gap: 0.125rem;
	margin-bottom: 0.375rem;
	color: var(--qw-green);
}

.ReviewCard_name {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--qw-ink);
}

.ReviewCard_meta {
	font-size: 0.8125rem;
	color: var(--qw-mute);
}

/* Hvězdičky v kartě si nastavuje `.ReviewCard_stars` výš, tady zbývá odznak. */
.Reviews_badgeStars {
	display: flex;
	gap: 0.125rem;
	color: var(--qw-green);
}

.Reviews_star {
	display: block;
	width: 1rem;
	height: 1rem;
}

.Reviews_star svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Odznak s hodnocením z Googlu. */
.Reviews_badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	color: inherit;
}

.Reviews_badgeValue {
	font-size: 1.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: #252525;
}

.Reviews_badgeLabel {
	font-size: 0.9375rem;
	color: #898989;
}

a.Reviews_badge:hover .Reviews_badgeLabel {
	text-decoration-line: underline;
}

@media (min-width: 48rem) {

	.Reviews_wrapper {
		padding: 3.5rem 2.5rem;
	}

	.Reviews_top {
		padding-bottom: 3.5rem;
	}

	.Reviews_list {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

@media (min-width: 80rem) {

	.Reviews_wrapper {
		padding: 5rem 10rem;
	}

	.Reviews_top {
		padding-bottom: 5rem;
	}
}

/* ------------------------------------------- rytmus úvodní stránky (feedback agentury) */

/*
 * Body 4 a 5 z připomínek agentury: menší odskoky mezi sekcemi a střídání
 * bílá / béžová, aby se jednostránková úvodní stránka lépe četla.
 *
 * Proč se to řeší tady a ne úpravou jednotlivých pravidel výš: odsazení je
 * rozseté do devíti pravidel ve třech breakpointech a u přenesených sekcí
 * (`CategoryList`, `InfoList`) navíc pochází z `blocks.css`, který přepisuje
 * generátor podle originálu — zásah do něj by se při dalším běhu `port-css.py`
 * ztratil. Jedno místo se ladí líp než devět.
 *
 * Přenesené sekce se scopují pod `.celet-qw-style`, tedy (0,2,0) — přebijí
 * (0,1,0) z `blocks.css` bez ohledu na pořadí souborů a hlavně SE NEPROJEVÍ
 * na stejných widgetech na ostatních stránkách, kde platí smluvní 1:1.
 *
 * Mění se jen `padding-block`, ne celý `padding` — vodorovné odsazení
 * (1.125rem / 2.5rem / 10rem) je součást přeneseného rozvržení a musí zůstat.
 */
.TrustBar_wrapper,
.Reviews_wrapper,
.ShowHouse_wrapper,
.celet-qw-style .CategoryList_wrapper,
.celet-qw-style .InfoList_wrapper {
	padding-block: var(--qw-sekce-y);
}

/*
 * Střídání odstínů. Pořadí sekcí na úvodní stránce je
 * Hero (tmavá fotka) → Pás důvěry → Tři cesty → Reference → Vzorové domy → Proč CELET.
 *
 * Odstíny se NEPOČÍTAJÍ přes :nth-child — sekce jsou samostatné Elementor
 * containery a jejich pořadí se dá v editoru přeházet; počítané pravidlo by pak
 * tiše sedělo na jinou sekci. Přiřazení natvrdo je delší, ale je vidět, co kde je.
 */
.TrustBar_wrapper,
.Reviews_wrapper {
	background-color: var(--qw-bg-alt);
}

.ShowHouse_wrapper,
.celet-qw-style .CategoryList_wrapper {
	background-color: #fff;
}

.celet-qw-style .InfoList_wrapper {
	background-color: var(--qw-bg-alt);
}

/*
 * Kotvy pro tlačítka, která místo přechodu na jinou adresu sjedou na sekci
 * (bod 2 připomínek). Plynulé rolování obstará `html{scroll-behavior:smooth}`
 * z blocks.css, tady se řeší jen to, aby cíl neskončil POD lepkavou hlavičkou
 * (`.Navbar_wrapper{position:sticky;top:0}`).
 *
 * Hodnota = výška hlavičky + malý dech. Na mobilu je hlavička 3.625rem pevně,
 * na desktopu roste s obsahem (`height:auto;padding:1rem 2.5rem`).
 */
#pas-duvery,
#nase-domy,
#recenze,
#vzorove-domy {
	scroll-margin-top: 5rem;
}

@media (min-width: 48rem) {

	#pas-duvery,
	#nase-domy,
	#recenze,
	#vzorove-domy {
		scroll-margin-top: 7rem;
	}
}