/*
 * Sekcije početne (patterns/*.php sa klasom kl-sekcija). Učitava se samo kad je sekcija na
 * stranici (inc/pocetna.php) i u editoru. Hero je u cover.css.
 *
 * Bočna margina (Design.md §5.3): spacing-05 (16px) ispod 66rem, spacing-07 (32px) od 66rem.
 * Važi za celu sekciju, i za naslov i za kartice (referenca category-section.png).
 *
 * Selektori imaju .kl-sekcija / .kl-plocice ispred da pobede WP-ov razmak flow layout-a
 * (:root :where(.is-layout-flow) > *), koji se učitava posle ovog fajla.
 */

/* ---------- Sekcija: razmak gore i dole 48px na mobilnom, 80px na desktopu ---------- */

.wp-block-post-content > .kl-sekcija {
	margin-block: 0;
}

.kl-sekcija {
	/* Bočna margina sekcije; koristi je i traka proizvoda koja izlazi do ivice ekrana (woocommerce.css). */
	--kl-margina: var(--wp--preset--spacing--05);

	padding: var(--wp--preset--spacing--09) var(--kl-margina);
}

@media (min-width: 66rem) {
	.kl-sekcija {
		--kl-margina: var(--wp--preset--spacing--07);

		padding-block: var(--wp--preset--spacing--11);
	}
}

/* Naslov sekcije: 1.75rem na telefonu → 4rem (64px) na desktopu (token naslov-sekcije), u jednom redu. */
.kl-sekcija > .wp-block-heading,
.kl-sekcija__zaglavlje > .wp-block-heading {
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--letter-spacing--display);
	text-wrap: balance;
}

/* Naslov sam ili zaglavlje (naslov levo + dugme desno, referenca izdvojeni-proizvodi.png). */
.kl-sekcija > .wp-block-heading,
.kl-sekcija > .kl-sekcija__zaglavlje {
	margin: 0 0 var(--wp--preset--spacing--06);
}

@media (min-width: 66rem) {
	.kl-sekcija > .wp-block-heading,
	.kl-sekcija > .kl-sekcija__zaglavlje {
		margin-block-end: var(--wp--preset--spacing--09);
	}
}

/* Na telefonu dugme ide ispod naslova, od tableta desno u istom redu. */
.kl-sekcija__zaglavlje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--05) var(--wp--preset--spacing--06);
}

.kl-sekcija .kl-sekcija__zaglavlje > *,
.kl-sekcija > .wp-block-woocommerce-product-collection {
	margin: 0;
}

/* Dugme je posle trake u HTML-u, pa je na telefonu prirodno prikazano ispod slajdera. */
.kl-traka > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--05);
}

/* Već umetnuti patterni imaju dugme u zaglavlju; na telefonu ga slažemo iza trake. */
@media (max-width: 41.999rem) {
	.kl-sekcija.kl-traka {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.kl-sekcija.kl-traka > .kl-sekcija__zaglavlje {
		display: contents;
		margin: 0;
	}

	.kl-sekcija.kl-traka > .kl-sekcija__zaglavlje > .wp-block-heading {
		grid-row: 1;
	}

	.kl-sekcija.kl-traka > .kl-traka__lista {
		grid-row: 2;
		margin-block-start: var(--wp--preset--spacing--06);
	}

	.kl-sekcija.kl-traka > .kl-sekcija__zaglavlje > .wp-block-buttons {
		grid-row: 3;
		margin-block-start: var(--wp--preset--spacing--05);
		justify-content: center;
	}

	.kl-sekcija.kl-traka > .wp-block-buttons {
		justify-content: center;
	}
}

/* Od tableta naslov i dugme su u istom redu, a slajder ispod njih. */
@media (min-width: 42rem) {
	.kl-sekcija.kl-traka {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.kl-sekcija.kl-traka > .kl-sekcija__zaglavlje {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.kl-sekcija.kl-traka > .wp-block-buttons {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		margin-block-start: 0;
	}

	.kl-sekcija.kl-traka > .kl-traka__lista {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-block-start: var(--wp--preset--spacing--06);
	}
}

@media (min-width: 66rem) {
	.kl-sekcija.kl-traka > .kl-traka__lista {
		margin-block-start: var(--wp--preset--spacing--09);
	}
}

/*
 * ---------- Pločice (Kupuj po kategorijama) ----------
 * Po referenci category-section.png (lululemon): spojene kartice 4:5 unutar margine stranice,
 * naziv centriran ispod. Hover: kartica stoji, slika se blago uveća.
 */

/* Telefon: 2 kartice u redu, spojene, razmak između redova kao u mreži proizvoda (Design.md §5.3). */
.kl-plocice__mreza {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--07) 0;
}

/* Tablet: 3 kartice u redu. */
@media (min-width: 42rem) {
	.kl-plocice__mreza {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Desktop: sve kartice u jednom redu, bez razmaka, koliko god ih ima. */
@media (min-width: 66rem) {
	.kl-plocice__mreza {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}
}

.kl-sekcija > .kl-plocice__mreza,
.kl-plocice .kl-plocice__mreza > *,
.kl-plocice .kl-plocica > * {
	margin: 0;
}

.kl-plocica {
	position: relative;
}

.kl-plocica .wp-block-image {
	overflow: hidden;
	background: var(--wp--preset--color--grey-50);
}

.kl-plocica .wp-block-image img {
	width: 100%;
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--easing);
}

/* Hover samo na uređajima sa mišem (na telefonu bi zoom ostao "zaglavljen" posle dodira). */
@media (hover: hover) {
	.kl-plocica:hover .wp-block-image img {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kl-plocica .wp-block-image img {
		transition: none;
	}

	.kl-plocica:hover .wp-block-image img {
		transform: none;
	}
}

.kl-plocica__naziv {
	padding: var(--wp--preset--spacing--05) var(--wp--preset--spacing--03) 0;
	font-size: var(--wp--preset--font-size--product-title);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--product);
	text-align: center;
}

.kl-plocica__naziv a {
	color: inherit;
	text-decoration: none;
}

/* Cela kartica je link (jedan link po kartici, bez dupliranja za čitače ekrana). */
.kl-plocica__naziv a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kl-plocica__naziv a:focus-visible {
	outline: none;
}

.kl-plocica:has(.kl-plocica__naziv a:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--black);
	outline-offset: calc(-1 * var(--wp--custom--focus--width));
}