/* ==========================================================================
   Widget: Spotlight (tamna sekcija s fotografijom do ruba ekrana)
   ========================================================================== */

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

/* Blagi zeleni sjaj i šrafura, isti grafički jezik kao zaglavlje stranice */
.dp-spotlight::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(circle at 10% 90%, rgba(45, 149, 86, 0.22), transparent 45%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 22px);
}

/* Fotografija: desna polovina do ruba ekrana, kosi lijevi rub sa zlatnom linijom */
.dp-spotlight__media {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 48%;
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.dp-spotlight__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--dp-gold-500);
	clip-path: polygon(16% 0, calc(16% + 6px) 0, 6px 100%, 0 100%);
}

.dp-spotlight .dp-spotlight__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--dp-spotlight-x, 50%) 50%;
}

.dp-spotlight--left .dp-spotlight__media {
	inset: 0 auto 0 0;
	clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}

.dp-spotlight--left .dp-spotlight__media::before {
	inset: 0 0 0 auto;
	width: 100%;
	clip-path: polygon(calc(100% - 6px) 0, 100% 0, 84% 100%, calc(84% - 6px) 100%);
}

.dp-spotlight__inner {
	display: flex;
	padding-block: var(--dp-section-y);
}

.dp-spotlight--left .dp-spotlight__inner {
	justify-content: flex-end;
}

.dp-spotlight__content {
	width: 50%;
	padding-right: var(--dp-space-8);
}

.dp-spotlight--left .dp-spotlight__content {
	padding-right: 0;
	padding-left: var(--dp-space-8);
}

.dp-spotlight--no-image .dp-spotlight__content {
	width: min(100%, 46rem);
	padding: 0;
}

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

.dp-spotlight__title {
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 800;
	line-height: var(--dp-lh-tight);
	letter-spacing: -0.02em;
	color: var(--dp-white);
	text-wrap: balance;
}

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

.dp-spotlight__text {
	margin-top: var(--dp-space-6);
	font-size: var(--dp-fs-lg);
	color: var(--dp-steel-300);
}

.dp-spotlight__text p {
	margin: 0 0 var(--dp-space-4);
}

/* Istaknute stavke: tri u redu, odvojene tankom linijom (bez kartica) */
.dp-spotlight__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--dp-space-6);
	margin: var(--dp-space-8) 0 var(--dp-space-12);
	padding: 0;
	list-style: none;
}

.dp-spotlight__item {
	padding-top: var(--dp-space-4);
	border-top: 2px solid rgba(255, 255, 255, 0.14);
}

.dp-spotlight__icon {
	display: block;
	margin-bottom: var(--dp-space-3);
	color: var(--dp-gold-500);
}

.dp-spotlight__icon .dp-icon {
	width: 28px;
	height: 28px;
}

.dp-spotlight__item-title {
	margin: 0 0 var(--dp-space-1);
	font-size: var(--dp-fs-base);
	font-weight: 700;
	line-height: 1.3;
	color: var(--dp-white);
}

.dp-spotlight__item-text {
	margin: 0;
	font-size: var(--dp-fs-sm);
	color: var(--dp-steel-300);
}

/* Mobitel i tablet: fotografija iznad teksta, bez kosog ruba */
@media (max-width: 960px) {
	.dp-spotlight__media,
	.dp-spotlight--left .dp-spotlight__media {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 16 / 10;
		clip-path: none;
		border-bottom: 5px solid var(--dp-gold-500);
	}

	.dp-spotlight__media::before {
		content: none;
	}

	.dp-spotlight__content,
	.dp-spotlight--left .dp-spotlight__content {
		width: 100%;
		padding: 0;
	}
}

@media (max-width: 560px) {
	.dp-spotlight__items {
		grid-template-columns: 1fr;
		gap: var(--dp-space-4);
	}

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