/* Mreža kategorija na početnoj (samo početna). */

/* Stare Elementor pločice (druga sekcija strane 2888) zamenjene su ovom mrežom. */
body.home .elementor-2888 > .elementor-section.elementor-element-51d346dc {
	display: none !important; /* Elementor ima svoja display pravila iste specifičnosti. */
}

.dm-cats {
	padding: clamp(2.5rem, 6vw, 5rem) 0;
	background-color: var(--dm-bg-light);
	color: var(--dm-text-on-light);
}

/* Ista širina i bočni razmak kao unutrašnjost hero-a. */
.dm-cats__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
	box-sizing: border-box;
}

.dm-cats__head {
	margin-bottom: var(--dm-space-5);
}

.dm-cats__eyebrow {
	margin: 0 0 var(--dm-space-2);
	font-family: var(--dm-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dm-gold-ink); /* zlatna za mali tekst na svetloj pozadini */
}

.dm-cats__title {
	margin: 0;
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1;
	text-transform: uppercase;
	color: var(--dm-text-on-light);
}

.dm-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-cats__item {
	margin: 0;
	padding: 0;
}

/* Deveta pločica na telefonu zauzima oba stupca, da nema praznine. */
.dm-cats__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.dm-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--dm-radius);
	background-color: var(--dm-bg-dark);
	color: var(--dm-text-on-dark);
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--dm-dur-press) var(--dm-ease);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Slika stoji gore na mirnoj svetloj podlozi, a tekst u tamnoj traci ispod.
   Većina slika kategorija su proizvodi na beloj pozadini: preko njih tamni
   preliv daje blatnjavo sivu, pa preliva više nema. */
.dm-cat__media {
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: #E6E2D6;
}

.dm-cats__item:last-child:nth-child(odd) .dm-cat__media {
	aspect-ratio: 16 / 9;
}

/* multiply stapa belu pozadinu slike sa podlogom, pa proizvod izgleda
   kao da je isečen. contain + razmak: proizvod se ne seče po ivicama. */
.dm-cat__img {
	position: absolute;
	inset: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 6%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 400ms var(--dm-ease);
}

/* Fotografije sa terena popunjavaju ceo okvir i ne stapaju se. */
.dm-cat--photo .dm-cat__img {
	padding: 0;
	object-fit: cover;
	mix-blend-mode: normal;
}

.dm-cat__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--dm-space-2);
	padding: var(--dm-space-4);
}

.dm-cat__count {
	font-family: var(--dm-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: rgba(237, 235, 227, .75);
	font-variant-numeric: tabular-nums;
}

.dm-cat__title {
	margin: 0;
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 5vw, 2rem);
	line-height: 1;
	text-transform: uppercase;
	color: var(--dm-text-on-dark);
}

.dm-cat__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-family: var(--dm-font-body);
	font-size: 0.9rem;
	line-height: 1.35;
	/* Uvek mesto za dva reda, da „Pregled" stoji na istoj visini i kad je
	   opis kraći. */
	min-height: calc(1.35em * 2);
	color: var(--dm-text-on-dark);
}

.dm-cat__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--dm-space-2);
	/* auto gura dugme na dno trake, pa je u svim pločicama na istom mestu. */
	margin-top: auto;
	padding-top: var(--dm-space-1);
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.1em;
	color: var(--dm-gold);
}

.dm-cat__arrow {
	display: inline-block;
	transition: transform 200ms var(--dm-ease);
}

/* Odziv na pritisak je trenutan. */
.dm-cat:active {
	transform: scale(0.985);
	transition-duration: 100ms;
}

.dm-cat:focus-visible {
	outline: 3px solid var(--dm-gold);
	outline-offset: 3px;
}

@media (hover: hover) {
	.dm-cat:hover .dm-cat__img {
		transform: scale(1.04);
	}

	.dm-cat:hover .dm-cat__arrow {
		transform: translateX(4px);
	}
}

@media (min-width: 600px) {
	.dm-cats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.dm-cats__item:last-child:nth-child(odd) {
		grid-column: auto;
	}

	.dm-cats__item:last-child:nth-child(odd) .dm-cat__media {
		aspect-ratio: 4 / 3;
	}

	.dm-cat__body {
		padding: var(--dm-space-5);
	}

	.dm-cat__desc {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dm-cat,
	.dm-cat__img,
	.dm-cat__arrow {
		transition: none;
	}

	.dm-cat:active,
	.dm-cat:hover .dm-cat__img,
	.dm-cat:hover .dm-cat__arrow {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	.dm-cat {
		outline: 1px solid var(--dm-text-on-light);
	}
}