/*
 * Drobnosti pro hlavičku a patičku.
 *
 * Vzniklo vyjmutím z `homepage.css`: ten stylizoval ručně stavěné sekce
 * úvodní stránky, které po přestavbě podle originálu zanikly. Zůstávala v něm
 * ale i globální pravidla (`body .e-con.e-con-boxed` nulující odsazení všech
 * containerů, přepis tlačítek), a protože se načítal na celém webu, přebíjel
 * přenesené rozměry bloků. Proto se `homepage.css` už nenačítá a přežilo jen
 * to, co skutečně používá patička.
 */




:root {
	--celet-green: #A3E358;
	--celet-green-2: #93D348;
	--celet-ink: #1A1816;
	--celet-mute: #898989;
}

/*
 * --- POJISTKA: kontejner s přeneseným blokem musí zůstat na plnou šířku ---
 *
 * Kontejnery bloků zakládají generátory s `content_width: full` a nulovým
 * odsazením, protože přenesené CSS si odsazení nese samo – jinak se sečte.
 * Jenže Elementor při ručním uložení stránky zahazuje hodnoty shodné s výchozím
 * nastavením, a jeho výchozí `content_width` je „boxed“. Stačí tedy stránku
 * OTEVŘÍT V EDITORU A ULOŽIT (nic neměnit) a kontejner spadne na boxed:
 * přibude vnořený `.e-con-inner` s max-width a odsazením z kitu, sekce se zúží
 * a posune. Stalo se to na stagingu na stránce Blog, aniž by kdokoli něco
 * upravoval; bez téhle pojistky by se to na ostrém webu opakovalo při každé
 * editaci a poznalo by se to jen podle posunuté šířky jedné sekce.
 *
 * Míří se VÝHRADNĚ na `.celet-block`, tedy na kontejnery přenesených bloků.
 * Plošné `body .e-con.e-con-boxed { padding: 0 }` tu už jednou bylo (v
 * `homepage.css`) a rozbilo rozměry celého webu – to se opakovat nesmí.
 *
 * `!important` je tu na místě: Elementor generuje pro každý prvek vlastní
 * pravidlo se specificitou `.elementor-NNNN .elementor-element-XXXXX`,
 * kterou selektorem rozumně nepřebijeme. Jinde v projektu se `!important`
 * nepoužívá.
 */
.e-con.celet-block.e-con-boxed {
	padding: 0 !important;
}

.e-con.celet-block > .e-con-inner {
	max-width: none !important;
	padding: 0 !important;
}

/*
 * --- KARTY VÝPISŮ SE NEROZKRESLUJÍ, DOKUD NEJSOU NA OBRAZOVCE ---
 *
 * Katalog vypisuje 15 domů serverově (kvůli vyhledávačům, originál je dotahoval
 * až JS) a šest jich zobrazuje, zbytek skrývá `display:none`. Jenže těch šest
 * se na mobilu stahuje VŠECH, i když jsou vidět dvě – líné načítání má rezervu
 * a fotky karet mají po ~80 kB. Naměřeno 737 kB obrázků proti 434 kB na úvodní
 * stránce a s tím render delay LCP 1 932 ms místo 132 ms: LCP fotka byla dávno
 * stažená (226 ms) a jen čekala, než se prohlížeč prokouše zbytkem.
 *
 * `content-visibility: auto` nechá prohlížeč přeskočit rozvržení i vykreslení
 * karty, dokud se nepřiblíží k výřezu – a tím pádem nestáhne ani její obrázek.
 * V HTML karta zůstává, takže se pro SEO nic nemění.
 *
 * `contain-intrinsic-size: auto 368px` drží místo, aby se posuvník neskákal:
 * 368 px je naměřená výška karty, `auto` znamená, že jakmile se karta jednou
 * vykreslí, použije se její skutečná velikost. Bez téhle hodnoty by se rozjel
 * CLS, který je na webu teď 0.
 *
 * Míří se jen na položky výpisů, ne plošně – u filtrů se přepínají třídy
 * na týchž prvcích a plošné `contain` by mohlo rozhodit flexové rozvržení.
 */
.HouseList_list > .HouseList_item,
.CategoryHouseList_list > .HouseList_item,
.ArticlesList_list > .ArticlesList_item {
	content-visibility: auto;
	contain-intrinsic-size: auto 368px;
}

/* --- sociální ikony v patičce (originál 40×40, vedle sebe s mezerou 12) --- */
.celet-social {
	display: flex;
	gap: 12px;
}



.celet-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}



.celet-social a:hover {
	background: var(--celet-green);
	color: var(--celet-ink);
}