/* ==========================================================================
   Widget: Zašto Dobojpromet
   ========================================================================== */

.dp-why {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--dp-ink);
	color: var(--dp-color-text-inverse);
}

/* Zelena dijagonala i sjaj u pozadini, kao na objavama */
.dp-why::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 85% 20%, rgba(45, 149, 86, 0.22), transparent 45%),
		linear-gradient(115deg, transparent 62%, rgba(11, 103, 56, 0.35) 62%, rgba(11, 103, 56, 0.35) 63.5%, transparent 63.5%);
}

/* Žuto-crna traka upozorenja */
.dp-why__hazard {
	position: absolute;
	inset: 0 0 auto;
	height: 10px;
	background: repeating-linear-gradient(-45deg, var(--dp-gold-500) 0 18px, var(--dp-ink) 18px 36px);
}

.dp-why__inner {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: var(--dp-space-12) var(--dp-space-16);
	align-items: center;
}

/* Inverzne varijante zajedničkih stilova za tamnu pozadinu */
.dp-kicker--inverse {
	color: var(--dp-green-500);
}

.dp-section-title--inverse {
	color: var(--dp-white);
}

.dp-why__accent {
	color: var(--dp-green-500);
}

.dp-why__lead {
	max-width: 32rem;
	margin: var(--dp-space-6) 0 var(--dp-space-8);
	font-size: var(--dp-fs-lg);
	color: var(--dp-steel-300);
}

/* Prednosti: mreža 2 × 2 */
.dp-why__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dp-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-why__item {
	padding: var(--dp-space-6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--dp-radius);
	background: var(--dp-surface-dark);
	transition: border-color var(--dp-transition), background-color var(--dp-transition);
}

.dp-why__item:hover {
	border-color: rgba(45, 149, 86, 0.5);
	background: var(--dp-surface-dark-hover);
}

.dp-why__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--dp-space-4);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-green-700);
	color: var(--dp-white);
}

.dp-why__item-title {
	margin: 0 0 var(--dp-space-2);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.dp-why__item-text {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--dp-steel-300);
}

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

@media (max-width: 560px) {
	.dp-why__list {
		grid-template-columns: 1fr;
	}

	.dp-why__cta {
		width: 100%;
		justify-content: center;
	}
}