/* ==========================================================================
   Widget: Brendovi (traka s logotipima)
   ========================================================================== */

.dp-brands {
	padding-block: var(--dp-space-8);
	border-bottom: 1px solid var(--dp-color-border);
	background: var(--dp-white);
}

.dp-brands__inner {
	display: flex;
	align-items: center;
	gap: var(--dp-space-8);
}

.dp-brands__title {
	flex: 0 0 13rem;
	margin: 0;
	padding-right: var(--dp-space-8);
	border-right: 1px solid var(--dp-color-border);
	font-size: var(--dp-fs-sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dp-steel-500);
}

/* Prozor trake s blagim nestajanjem na rubovima */
.dp-brands__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dp-brands__track {
	display: flex;
	width: max-content;
	animation: dp-brands-scroll 45s linear infinite;
}

.dp-brands__viewport:hover .dp-brands__track,
.dp-brands__viewport:focus-within .dp-brands__track {
	animation-play-state: paused;
}

.dp-brands__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-brands__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	padding: 0 var(--dp-space-4);
}

/* Svi logotipi su na istom platnu (345 × 120, omjer kao original 460 × 160), pa su prikazani jednako: 172 × 60 px, u boji kao na objavama */
.dp-brands__logo {
	width: 172px;
	height: 60px;
	object-fit: contain;
	transition: transform var(--dp-transition);
}

.dp-brands__item:hover .dp-brands__logo {
	transform: scale(1.06);
}

/* Privremeno: naziv brenda dok logo ne stigne */
.dp-brands__name {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--dp-steel-300);
}

/* --------------------------------------------------------------------------
   Izgled "Mreža" (stranica Brendovi)
   -------------------------------------------------------------------------- */

.dp-brands-grid {
	background: var(--dp-paper);
}

.dp-brands-grid__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dp-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--dp-space-8) var(--dp-space-6);
	border: 1px solid var(--dp-color-border);
	border-radius: var(--dp-radius);
	background: var(--dp-white);
	text-align: center;
	transition: border-color var(--dp-transition), box-shadow var(--dp-transition), transform var(--dp-transition);
}

.dp-brand-card:hover {
	border-color: var(--dp-green-500);
	box-shadow: var(--dp-shadow);
	transform: translateY(-3px);
}

.dp-brand-card__logo {
	display: grid;
	place-items: center;
	height: 72px;
	margin-bottom: var(--dp-space-4);
}

/* Bez naziva: veći logotipi, kartica centrirana po visini */
.dp-brands-grid--logos-only .dp-brand-card {
	justify-content: center;
	min-height: 160px;
}

.dp-brands-grid--logos-only .dp-brand-card__logo {
	height: 96px;
	margin-bottom: 0;
}

.dp-brands-grid--logos-only .dp-brands__logo {
	width: 240px;
	max-width: 100%;
	height: 84px;
}

.dp-brand-card__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dp-ink);
}

.dp-brand-card__text {
	margin: var(--dp-space-2) 0 0;
	font-size: var(--dp-fs-sm);
	color: var(--dp-steel-500);
}

@media (max-width: 1100px) {
	.dp-brands-grid__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.dp-brands-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--dp-space-4);
	}

	.dp-brand-card {
		padding: var(--dp-space-6) var(--dp-space-3);
	}

	.dp-brand-card .dp-brands__logo {
		width: 100%;
		max-width: 172px;
	}
}

@keyframes dp-brands-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* Bez animacije: statična mreža, bez kopije */
@media (prefers-reduced-motion: reduce) {
	.dp-brands__viewport {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dp-brands__track {
		width: auto;
		animation: none;
	}

	.dp-brands__list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.dp-brands__list--clone {
		display: none;
	}
}

@media (max-width: 760px) {
	.dp-brands__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--dp-space-4);
	}

	.dp-brands__title {
		flex-basis: auto;
		padding-right: 0;
		border-right: 0;
		text-align: center;
	}

	.dp-brands__item {
		padding: 0 var(--dp-space-6);
	}
}

/* --------------------------------------------------------------------------
   Izgled "Zid logotipa uz naslov" (npr. Rezervni dijelovi)
   Naslov lijevo, logotipi desno u mreži odvojenoj tankim linijama (bez kartica).
   -------------------------------------------------------------------------- */
.dp-brands-wall {
	background: var(--dp-white);
}

.dp-brands-wall__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: var(--dp-space-12) var(--dp-space-16);
	align-items: center;
}

.dp-brands-wall__lead {
	margin: var(--dp-space-4) 0 0;
	color: var(--dp-steel-500);
}

.dp-brands-wall__link {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	margin-top: var(--dp-space-6);
	font-weight: 700;
	color: var(--dp-green-700);
	text-decoration: none;
}

.dp-brands-wall__link .dp-icon {
	width: 18px;
	height: 18px;
	transition: transform var(--dp-transition);
}

.dp-brands-wall__link:hover .dp-icon {
	transform: translateX(4px);
}

/* Linije između logotipa: razmak od 1px kroz koji se vidi boja pozadine liste */
.dp-brands-wall__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--dp-steel-100);
	border-radius: var(--dp-radius-lg);
	background: var(--dp-steel-100);
	list-style: none;
}

.dp-brands-wall__item {
	display: grid;
	place-items: center;
	min-height: 120px;
	padding: var(--dp-space-6) var(--dp-space-4);
	background: var(--dp-white);
	transition: background-color var(--dp-transition);
}

.dp-brands-wall__item:hover {
	background: var(--dp-paper);
}

.dp-brands-wall__item:hover .dp-brands__logo {
	transform: scale(1.06);
}

.dp-brands-wall .dp-brands__logo {
	max-width: 100%;
}

@media (max-width: 960px) {
	.dp-brands-wall__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.dp-brands-wall__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.dp-brands-wall__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dp-brands-wall__item {
		min-height: 96px;
	}
}