/* ==========================================================================
   Widget: CTA traka "Pozovite nas"
   ========================================================================== */

.dp-cta {
	--dp-cta-skew: -12deg;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
	background: var(--dp-green-800);
	color: var(--dp-white);
}

/* Svjetlija dijagonala u pozadini, kao na objavama */
.dp-cta::before {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 45%;
	background: var(--dp-green-700);
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.dp-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--dp-space-8) var(--dp-space-12);
	align-items: center;
}

.dp-cta__eyebrow {
	margin: 0 0 var(--dp-space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dp-gold-500);
}

.dp-cta__title {
	margin: 0 0 var(--dp-space-3);
	font-size: var(--dp-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dp-cta__text {
	max-width: 34rem;
	margin: 0;
	font-size: var(--dp-fs-lg);
	color: rgba(255, 255, 255, 0.85);
}

.dp-cta__actions {
	display: grid;
	justify-items: end;
	gap: var(--dp-space-4);
}

/* Kose kutije: žuta oznaka i crne kutije s brojevima */
.dp-cta__phones {
	display: flex;
	gap: var(--dp-space-2);
}

.dp-cta__label,
.dp-cta__phone {
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding: 0 var(--dp-space-6);
	transform: skewX(var(--dp-cta-skew));
	font-weight: 700;
	white-space: nowrap;
}

/* Tekst unutar kutije se "ispravlja" da ne bude kos */
.dp-cta__label > span,
.dp-cta__phone > span {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	transform: skewX(calc(var(--dp-cta-skew) * -1));
}

.dp-cta__label {
	background: var(--dp-gold-500);
	color: var(--dp-ink);
	font-size: 1.0625rem;
}

.dp-cta__phone {
	background: var(--dp-ink);
	color: var(--dp-white);
	font-size: 1.125rem;
	text-decoration: none;
	transition: background-color var(--dp-transition), color var(--dp-transition);
}

.dp-cta__phone .dp-icon {
	width: 18px;
	height: 18px;
	color: var(--dp-gold-500);
}

.dp-cta__phone:hover {
	background: var(--dp-white);
	color: var(--dp-ink);
}

.dp-cta__link {
	display: inline-flex;
	align-items: center;
	gap: var(--dp-space-2);
	font-weight: 600;
	color: var(--dp-white);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: 5px;
}

.dp-cta__link:hover {
	color: var(--dp-gold-500);
	text-decoration-color: currentColor;
}

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

.dp-cta__link:hover .dp-icon {
	transform: translateX(3px);
}

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

	.dp-cta__actions {
		justify-items: start;
	}

	.dp-cta::before {
		width: 30%;
	}
}

@media (max-width: 640px) {
	.dp-cta__phones {
		flex-direction: column;
		width: 100%;
	}

	/* Na mobitelu bez kosine, kutije preko cijele širine */
	.dp-cta {
		--dp-cta-skew: 0deg;
	}

	.dp-cta__phone {
		justify-content: center;
		border-radius: var(--dp-radius-sm);
	}

	/* Na mobitelu oznaka nije kutija, da ne liči na dugme koje se ne može kliknuti */
	.dp-cta__label {
		min-height: 0;
		padding: 0 0 var(--dp-space-1);
		background: none;
		color: var(--dp-gold-500);
		font-size: 0.875rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.dp-cta__actions {
		justify-items: stretch;
	}

	.dp-cta__link {
		justify-content: center;
	}
}