/* ==========================================================================
   CTA block — dark with photo: title | gold line | text, contacts, button.
   ========================================================================== */
.cta { --spot-x: 28%; --spot-y: 45%; --shade-dir: 270deg; --shade-c: 0.8; } /* text side is on the right */
.cta__inner { display: grid; gap: var(--s-4); }
.cta__title { max-width: 12ch; font-size: var(--fs-h2); }
.cta__body {
	display: grid;
	gap: var(--s-4);
	align-content: start;
	padding-inline-start: var(--s-3);
	border-inline-start: 1px solid var(--c-gold);
}
.cta__text { max-width: 48ch; color: var(--c-mist); font-size: var(--fs-lead); line-height: 1.55; }
.cta__contacts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
}
.cta__contacts li { display: grid; gap: 0.125rem; }
.cta__label { color: var(--c-mist); font-size: var(--fs-xs); }
.cta__contacts a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--c-white);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 1.2;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.cta__contacts a:hover { color: var(--c-gold-light); }

@media (min-width: 1024px) {
	.cta__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: 0;
		align-items: stretch;
	}
	.cta__title { padding-inline-end: clamp(2rem, 4vw, 5rem); align-self: center; }
	.cta__body { padding-inline-start: clamp(2rem, 4vw, 5rem); padding-block: var(--s-1); }
}