/*
 * Dlaždica a jej grid — spoločné pre Realizácie, Služby a podkategórie
 * produktov.
 *
 * Vlastný súbor preto, že to isté CSS potrebujú dva rôzne kontexty: sekcie
 * (sekcia.css) aj archív kategórie (category.css). Načítať kvôli dlaždici
 * celý sekcia.css by na kategóriu pritiahlo záhlavie, galériu aj posuvník
 * log, ktoré tam nie sú.
 *
 * Šírku stĺpcov si určuje kontext: sekcie cez .hgl-r-grid, kategórie cez
 * Astrin ul.products.
 */

/* ------------------------------------------------------------- Grid */

.hgl-r-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 600px) {
	.hgl-r-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.hgl-r-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/**
 * Biela plocha karty patrí celej dlaždici, nie len textovej časti.
 *
 * Grid natiahne bunku na výšku najvyššej karty v riadku. Keď bola plocha
 * len na wrapperi, kratší názov nechal pod kartou prázdny pás. Dlaždica
 * preto vypĺňa celú bunku a pozadie aj zaoblenie nesie ona.
 */
.hgl-r-dlazdica {
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 16px;
	background-color: #ffffff;
	color: inherit;
	text-decoration: none !important;
}

/**
 * Náhľad dlaždice.
 *
 * Premenná na orez, lebo obsah sa líši podľa sekcie: realizácie a služby
 * majú fotografie, ktoré orez znesú (cover), podkategórie majú rendery hál,
 * kde by orez ukrojil strechu (contain). Kontext si hodnotu prepíše — pozri
 * výpis WooCommerce nižšie.
 *
 * Plocha pod obrázkom je zámerne bez pozadia — render vpísaný cez contain
 * leží priamo na bielej karte, bez sivého či zeleného rámu okolo.
 */
.hgl-r-dlazdica__obrazok {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16px 16px 0 0;
}

.hgl-r-dlazdica__obrazok img {
	width: 100%;
	height: 100%;
	object-fit: var(--hgl-dlazdica-orez, cover);
	transition: transform 0.3s ease;
}

.hgl-r-dlazdica:hover .hgl-r-dlazdica__obrazok img {
	transform: scale(1.04);
}

/**
 * Druhá fotka podkategórie (ACF „Fotka do gridu B“).
 *
 * Leží presne nad prvou a pri prejdení myšou ju okamžite vystrieda — bez
 * prechodu aj bez zväčšenia z pravidla vyššie, fotky sa majú len prepnúť.
 * Fotka A sa zároveň skryje, inak by cez priehľadné miesta renderu B
 * presvitala. Ostatné dlaždice zväčšenie ponechávajú.
 */
.hgl-r-dlazdica__obrazok img.hgl-r-dlazdica__hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: none;
}

.hgl-r-dlazdica:hover .hgl-r-dlazdica__obrazok:has(.hgl-r-dlazdica__hover) img {
	transform: none;
}

.hgl-r-dlazdica:hover .hgl-r-dlazdica__obrazok img.hgl-r-dlazdica__hover,
.hgl-r-dlazdica:focus-visible .hgl-r-dlazdica__obrazok img.hgl-r-dlazdica__hover {
	opacity: 1;
}

.hgl-r-dlazdica:hover .hgl-r-dlazdica__obrazok:has(.hgl-r-dlazdica__hover) img:not(.hgl-r-dlazdica__hover),
.hgl-r-dlazdica:focus-visible .hgl-r-dlazdica__obrazok:has(.hgl-r-dlazdica__hover) img:not(.hgl-r-dlazdica__hover) {
	opacity: 0;
}

/**
 * Dlaždica, ktorej ešte nikto nenahral náhľad.
 *
 * Šablóna túto triedu nasadzuje odjakživa, ale doteraz mala každá služba
 * fotku, takže sa neprejavila. Pri deviatich podstránkach autodopravy by
 * z gridu spravila pole prázdnych sivých obdĺžnikov — miesto si preto
 * nenárokuje vôbec a karta ostane čistá.
 *
 * Nie je to natrvalo: hneď ako sa náhľad nahrá, trieda zmizne a dlaždica
 * vyzerá rovnako ako ostatné. Preto skrytie, nie náhradná grafika.
 */
.hgl-r-dlazdica__obrazok.is-prazdny {
	display: none;
}

.hgl-r-dlazdica__obrazok.is-prazdny + .hgl-r-dlazdica_wrapper {
	border-radius: 16px;
}

/**
 * Zmiešaný grid — časť dlaždíc fotku má, časť ešte nie.
 *
 * Tu skrytie neprejde: karta bez fotky by bola o polovicu nižšia než
 * susedné a riadok by vyzeral rozbito. Miesto si preto ponechá ako
 * prázdnu bielu plochu karty (náhľad nemá pozadie, pozri vyššie).
 *
 * Zámerne bez výplne: grid sa dopĺňa fotkami postupne a farebný blok by
 * vyzeral ako zámerný prvok dizajnu, nie ako miesto, kam fotka ešte len
 * príde.
 *
 * :has() sa pýta na to, čo v CSS inak zistiť nejde — či má aspoň jedna
 * dlaždica v tomto gride náhľad. Prehliadač bez jeho podpory pravidlo
 * preskočí a ostane pri skrytí, čo je stále použiteľný výsledok.
 */
.hgl-r-grid:has(.hgl-r-dlazdica__obrazok:not(.is-prazdny)) .hgl-r-dlazdica__obrazok.is-prazdny {
	display: block;
}

.hgl-r-grid:has(.hgl-r-dlazdica__obrazok:not(.is-prazdny)) .hgl-r-dlazdica__obrazok.is-prazdny + .hgl-r-dlazdica_wrapper {
	border-radius: 0 0 16px 16px;
}

/* Hodnoty prevzaté z dlaždíc na stránke Produkty, nech to sedí na pixel. */
.hgl-r-dlazdica_wrapper {
	padding: 24px 24px 24px 24px;
	width: 100%;
	border-radius: 0 0 16px 16px;
}
.hgl-r-dlazdica__nazov {
	font-size: 16px;
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	color: #183f22;
}

.hgl-r-dlazdica__pruhy {
	display: block;
	margin-top: 0.6rem;
}

.hgl-r-dlazdica__pruhy img {
	display: block;
	width: 80px;
	height: 10px;
}

/* --------------------------------------------- Doplnkový údaj */

/**
 * Riadok pod pruhmi — dnes ho používa len výpis podkategórií na počet
 * produktov. Je to sprievodná informácia, nie druhý nadpis, preto menšie
 * písmo a tlmená farba: v rebríčku dlaždice musí zostať pod názvom.
 */
.hgl-r-dlazdica__meta {
	display: block;
	margin-top: 0.6rem;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(24, 63, 34, 0.65);
}

/* ------------------------------------------------- CTA v dlaždici */

/**
 * Nenápadný textový prvok, nie tlačidlo — dlaždica je celá klikateľná a
 * výrazné tlačidlo by len súťažilo s jej vlastným odkazom. Podčiarknutie
 * sa pri prejdení myšou stráca, aby bolo vidieť, že reaguje celá dlaždica.
 *
 * Farba a veľkosť sú zladené s .hgl-r-dlazdica__nazov vyššie, aby dlaždica
 * držala jeden typografický rebríček.
 */
.hgl-r-dlazdica__cta {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #183f22;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hgl-r-dlazdica:hover .hgl-r-dlazdica__cta {
	text-decoration: none;
}

/* ============================ Dlaždica vo výpise WooCommerce ============ */

/**
 * Výpis podkategórií (archív kategórie a stránka obchodu) skladá dlaždice
 * do Astrinho ul.products, nie do .hgl-r-grid. Pravidlá nižšie zmierujú
 * dlaždicu s tým prostredím.
 *
 * Mriežku zámerne necháme Astre: berie počet stĺpcov z Customizera, takže
 * výpis podkategórií a výpis produktov v tej istej kategórii držia rovnaký
 * raster. Vlastný grid by ich rozišiel všade, kde sa zobrazujú oba naraz.
 */

.woocommerce ul.products li.product.product-category,
.woocommerce-page ul.products li.product.product-category {
	/**
	 * Náhľady kategórií nie sú fotografie, ale rendery hál v priehľadnom
	 * PNG. Orez by z nich ukrojil strechu, preto contain.
	 */
	--hgl-dlazdica-orez: contain;

	/* Astra štýluje <li> ako produktovú kartu; dlaždica si to rieši sama. */
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: left;
}

/**
 * Rozstup medzi dlaždicami.
 *
 * Astra dáva mriežke iba column-gap: 20px a medzeru medzi riadkami necháva
 * na spodnom okraji <li>, ktorý sme vyššie zrušili spolu so zvyškom jej
 * produktovej karty — riadky sa preto zlepili. Namiesto vracania okraja
 * nastavíme rovno gap: vodorovná aj zvislá medzera tak majú jednu hodnotu,
 * rovnakú ako .hgl-r-grid na rozcestníku služieb.
 *
 * Pýtame sa na prítomnosť dlaždice, a nie na ul.products všeobecne: v čisto
 * produktovom výpise si rozstupy rieši Astra podľa Customizera a nemáme
 * dôvod jej do toho hovoriť.
 *
 * Spodný okraj na <li> vyššie je záloha pre prehliadače bez :has() — tam
 * ostane aspoň zvislá medzera. Kde :has() funguje, okraj sa zruší, inak by
 * sa s gapom sčítal.
 */
.woocommerce ul.products:has(.hgl-r-dlazdica),
.woocommerce-page ul.products:has(.hgl-r-dlazdica) {
	gap: 2rem;
}

.woocommerce ul.products:has(.hgl-r-dlazdica) li.product.product-category,
.woocommerce-page ul.products:has(.hgl-r-dlazdica) li.product.product-category {
	margin: 0;
}

/**
 * Prebitie .woocommerce ul.products li.product a img z woocommerce.css.
 *
 * To pravidlo nastavuje každému obrázku v dlaždici width:100%, height:auto
 * a spodný okraj 1em. Pruhom tým roztiahne 80×10 px grafiku cez celú šírku
 * karty a náhľadu zruší výšku, takže object-fit nemá na čom pracovať a
 * obrázok sa orezáva namiesto zmestenia. Selektory sú preto dlhšie, než by
 * sa inak patrilo — musia mať vyššiu špecificitu než Woo.
 */
.woocommerce ul.products li.product.product-category .hgl-r-dlazdica__obrazok img,
.woocommerce-page ul.products li.product.product-category .hgl-r-dlazdica__obrazok img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

.woocommerce ul.products li.product.product-category .hgl-r-dlazdica__pruhy img,
.woocommerce-page ul.products li.product.product-category .hgl-r-dlazdica__pruhy img {
	width: 80px;
	height: 10px;
	margin: 0;
}

/**
 * Zväčšenie pri prejdení myšou platí pre fotografiu, ktorá plochu vypĺňa.
 * Render v režime contain má okolo seba voľné miesto a pri zväčšení by
 * len poskočil.
 */
.woocommerce ul.products li.product.product-category .hgl-r-dlazdica:hover .hgl-r-dlazdica__obrazok img,
.woocommerce-page ul.products li.product.product-category .hgl-r-dlazdica:hover .hgl-r-dlazdica__obrazok img {
	transform: none;
}

/**
 * Podkategória, ktorej ešte nikto nenahral náhľad, v zmiešanom výpise.
 *
 * To isté pravidlo má .hgl-r-grid vyššie. Tu je znovu pre ul.products,
 * lebo dlaždice podkategórií v našom gride nie sú a pôvodný selektor ich
 * nezachytí. Bez toho by karta bez náhľadu bola o polovicu nižšia než
 * susedné a riadok by vyzeral rozbito.
 */
.woocommerce ul.products:has(.hgl-r-dlazdica__obrazok:not(.is-prazdny)) .hgl-r-dlazdica__obrazok.is-prazdny,
.woocommerce-page ul.products:has(.hgl-r-dlazdica__obrazok:not(.is-prazdny)) .hgl-r-dlazdica__obrazok.is-prazdny {
	display: block;
}

.woocommerce ul.products:has(.hgl-r-dlazdica__obrazok:not(.is-prazdny)) .hgl-r-dlazdica__obrazok.is-prazdny + .hgl-r-dlazdica_wrapper,
.woocommerce-page ul.products:has(.hgl-r-dlazdica__obrazok:not(.is-prazdny)) .hgl-r-dlazdica__obrazok.is-prazdny + .hgl-r-dlazdica_wrapper {
	border-radius: 0 0 16px 16px;
}

/* ------------------------------------------------- Popis v dlaždici */

/**
 * Krátky popis karty v sekcii „Naša ponuka“. Tlmenejší než názov, aby
 * dlaždica držala ten istý rebríček ako v ostatných výpisoch.
 */
.hgl-r-dlazdica__popis {
	display: block;
	margin-top: 0.75rem;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ast-global-color-3, #1c1c1d);
}