/*
 * Sekcia „Naše produkty“ na úvodnej stránke — slider kategórií z Ultimate
 * Addons (widget „Woo – Categories“) v podobe schválenej dlaždice.
 *
 * Návrh: prezentace.tridvajedna.cz/show/hagroland-v1/set/9/1 — biela karta
 * so zaoblenými rohmi, celý render produktu na bielej ploche, pod ním tučný
 * tmavozelený názov vľavo a žlté pruhy. Rozmery, farby a pruhy sú prevzaté
 * z našej dlaždice (.hgl-r-dlazdica v dlazdica.css).
 *
 * Všetko visí na triede .homepage_nase_produkty, ktorú má v Elementore
 * nastavený rodičovský kontajner sekcie (Rozšírené → CSS triedy). Iné
 * slidery kategórií na webe sa tak nemenia.
 *
 * Elementor si štýly widgetu generuje so selektorom typu
 * „.elementor-1306 .elementor-element.elementor-element-660a776 …“ (6 tried).
 * Prefix nižšie má preto štyri triedy, aby sme ho prebili bez !important
 * a bez väzby na konkrétne ID stránky či prvku.
 */

/* ------------------------------------------------------- Šírka sekcie */

/**
 * Návrh počíta s obsahom širokým 1400px, globálne nastavenie Elementora
 * (Site Settings → Layout) dáva kontajnerom 1200px. Meníme ho len pre túto
 * sekciu a len na desktope — tablet a mobil si nechávajú svoje hodnoty.
 */
@media (min-width: 1025px) {
	.elementor .e-con.homepage_nase_produkty {
		--container-max-width: 1400px;
	}
}

/* ------------------------------------------------- Rovnaká výška kariet */

/**
 * UAEL slidy vertikálne centruje a odkaz okolo obsahu nemá plnú výšku, takže
 * kratšie karty „plávali“ v strede. Natiahneme ich na výšku najvyššej.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .slick-slide {
	align-items: stretch;
}

/* ------------------------------------------------------------- Karta */

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	background-color: #ffffff;
	text-decoration: none;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	/* Rámik okolo karty návrh nemá — kartu ohraničuje len biela plocha na žltom. */
	border: 0 !important;
}

/**
 * Náhľady sú rendery produktov na bielom/priehľadnom pozadí s rôznym pomerom
 * strán. Orez by z nich ukrojil strechu či kolesá, preto contain na
 * jednotnej štvorcovej ploche — všetky názvy tak začínajú v rovnakej výške.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner img {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 8px 8px 0;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover img {
	transform: scale(1.04);
}

/**
 * Fotka do gridu B (viď slider_obrazok_kategorie() v inc/kategorie-slider.php).
 *
 * Leží presne nad fotkou A — obe majú rovnaký štvorec a odsadenie z pravidla
 * vyššie a A je prvá v .uael-product-cat-inner, takže stačí top/left 0.
 * Pri prejdení myšou ju okamžite vystrieda, bez prechodu aj bez zväčšenia,
 * rovnako ako v dlaždiciach podkategórií (dlazdica.css). Fotka A sa
 * zároveň skryje, aby cez priehľadné miesta B nepresvitala.
 *
 * Bez myši (telefón, tablet) sa B neukáže nikdy — display:none, aby ju
 * prehliadač vďaka loading="lazy" nesťahoval (viď dlazdica.css).
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner img.hgl-r-dlazdica__hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: none;
}

@media (hover: none) {
	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-product-cat-inner img.hgl-r-dlazdica__hover {
		display: none;
	}
}

@media (hover: hover) {
	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover .uael-product-cat-inner:has(.hgl-r-dlazdica__hover) img {
		transform: none;
	}

	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover img.hgl-r-dlazdica__hover,
	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:focus-visible img.hgl-r-dlazdica__hover {
		opacity: 1;
	}

	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:hover .uael-product-cat-inner:has(.hgl-r-dlazdica__hover) img:not(.hgl-r-dlazdica__hover),
	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element li.product-category > a:focus-visible .uael-product-cat-inner:has(.hgl-r-dlazdica__hover) img:not(.hgl-r-dlazdica__hover) {
		opacity: 0;
	}
}

/* ------------------------------------------------------ Názov a pruhy */

/**
 * Biela plocha patrí celej karte, nie len textu — UAEL tu má polopriehľadné
 * biele pozadie a verzálky, oboje návrh nemá. Blok vyplní zvyšok karty,
 * takže dvojriadkový názov kartu nepredĺži voči susedom.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product .uael-category__title-wrap,
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product > a:hover .uael-category__title-wrap {
	flex: 1 1 auto;
	padding: 16px 0 28px;
	background-color: transparent;
	text-align: left;
	text-transform: none;
}

/**
 * Názov je <h2>, takže mu Astra dáva písmo nadpisov (Michroma — široké,
 * technické). Návrh má v dlaždici obyčajný tučný bezpätkový rez, teda
 * písmo tela stránky (Figtree).
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product .woocommerce-loop-category__title,
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product > a:hover .woocommerce-loop-category__title {
	margin: 0;
	padding: 0 24px;
	text-align: left;
	font-family: "Figtree", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	color: #183f22;
	text-transform: none;
}

/*
 * Rovnaké pruhy ako v .hgl-r-dlazdica__pruhy — tam sú <img>, tu do šablóny
 * UAEL nevidíme. Visia na názve, nie na obale, aby lícovali s jeho odsadením.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element .uael-woo-categories li.product .woocommerce-loop-category__title::after {
	content: "";
	display: block;
	width: 80px;
	height: 10px;
	margin-top: 0.6rem;
	background: url("strips-yellow.png") no-repeat 0 0 / 80px 10px;
}

/* ------------------------------------------------------------- Šípky */

/* Tmavozelené krúžky s bielou šípkou podľa návrhu. */
.e-con.homepage_nase_produkty .uael-woo-category-slider.uael-woo-cat-arrow-circle.elementor-element .slick-slider .slick-arrow {
	width: 36px;
	height: 36px;
	font-size: 18px;
	line-height: 36px;
	/* Téma (custom.scss) farbí šípku na žlto s !important; návrh ju má bielu. */
	color: #ffffff !important;
	background-color: #183f22;
	transition: background-color 0.2s ease;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.uael-woo-cat-arrow-circle.elementor-element .slick-slider .slick-arrow:hover,
.e-con.homepage_nase_produkty .uael-woo-category-slider.uael-woo-cat-arrow-circle.elementor-element .slick-slider .slick-arrow:focus-visible {
	background-color: #255a33;
}

/* ------------------------------------------- Pred spustením slidera */

/**
 * Kým sa nenačíta skript slidera (slick), UAEL vypíše všetky kategórie ako
 * mriežku pod sebou — na mobile ~2000 px. Po spustení sa zbalí na jeden
 * riadok a všetko pod ním vyskočí nahor (CLS 0,15–0,22 na úvode). Riadok
 * s rovnakým počtom kariet ako slider (4 / 3 / 1 podľa data-cat_slider)
 * drží výšku od začiatku. Paddingy a spodný okraj sú tie, ktoré dáva
 * kartám slick.
 */
.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element ul.products:not(.slick-initialized) {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	/* Spustený slider je o padding kariet širší než sekcia (10 px z každej strany). */
	margin: 0 -10px;
}

.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element ul.products:not(.slick-initialized) > li.product-category {
	flex: 0 0 25%;
	max-width: 25%;
	box-sizing: border-box;
	margin: 0 0 35px;
	padding: 0 10px;
}

@media (max-width: 1024px) {
	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element ul.products:not(.slick-initialized) > li.product-category {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
	}
}

@media (max-width: 767px) {
	.e-con.homepage_nase_produkty .uael-woo-category-slider.elementor-element ul.products:not(.slick-initialized) > li.product-category {
		flex-basis: 100%;
		max-width: 100%;
	}
}