/* ============================================================================
   iPhone Repairs CTA — Artisan Craft (Split Image)
   Story: US-OTH-03 · Section ID: tmpl-artisan-craft--cta--split-image--0

   Split-50-50 band on a max-w-7xl canvas (min-height 50vh). Violet gradient
   background with a decorative grid-lines overlay. Copy column (8xl heading /
   3xl subheading / primary CTA, center-aligned) beside a side image on an
   lg-shadow / sm-radius card. Columns stack on tablet + mobile. Entrance =
   fade-up (600ms, 50ms stagger); image card scale-ups on hover, CTA arrow
   slides. All values reference design tokens. Scoped to .iph-cta-si0 so it can
   never bleed into the Homepage CTA (.ac-cta-si0).
   ============================================================================ */

.iph-cta-si0 {
	position: relative;
	overflow: hidden;
	min-height: 50vh;
	padding: var(--space-section) var(--container-padding);
	background:
		linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-700) 45%, var(--color-primary-600) 100%);
	color: var(--color-text-on-dark);
	isolation: isolate;
}

/* Decorative grid-lines — faint lattice woven across the gradient. */
.iph-cta-si0__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
	mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 85%);
}

.iph-cta-si0__inner {
	display: grid;
	grid-template-columns: 1fr 1fr; /* split-50-50 */
	align-items: center;
	gap: clamp(var(--space-8), 5vw, var(--space-20));
	max-width: 80rem; /* max-w-7xl */
	margin-inline: auto;
}

/* ---- Copy column (center-aligned) ----------------------------------------- */
.iph-cta-si0__copy {
	text-align: center;
}

.iph-cta-si0__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.75rem, 8vw, 6rem); /* 8xl */
	font-weight: var(--weight-bold); /* 700 */
	line-height: var(--leading-tight);
	letter-spacing: var(--letter-normal); /* 0em */
	color: var(--color-text-on-dark);
}

.iph-cta-si0__subheading {
	margin: var(--space-6) auto 0;
	max-width: 48ch;
	font-family: var(--font-body);
	font-size: var(--text-3xl); /* 3xl */
	font-weight: var(--weight-regular);
	line-height: var(--leading-snug);
	color: var(--color-body-on-dark);
}

/* ---- Primary CTA (arrow-slide on hover) ----------------------------------- */
.iph-cta-si0__actions {
	margin-top: var(--space-10);
}

.iph-cta-si0__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: 0.9rem 1.75rem;
	border-radius: var(--radius-md);
	background: var(--color-accent-500);
	box-shadow: var(--shadow-glow-accent);
	color: var(--color-on-accent);
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	line-height: 1;
	text-decoration: none;
	transition:
		transform var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

.iph-cta-si0__cta:hover,
.iph-cta-si0__cta:focus-visible {
	transform: translateY(-2px);
	background: var(--color-accent-400);
	box-shadow: var(--shadow-lg), var(--shadow-glow-accent);
}

.iph-cta-si0__cta:focus-visible {
	outline: 2px solid var(--color-primary-400);
	outline-offset: 3px;
}

.iph-cta-si0__cta-arrow {
	display: inline-block;
	transition: transform var(--duration-normal) var(--ease-out);
}

.iph-cta-si0__cta:hover .iph-cta-si0__cta-arrow,
.iph-cta-si0__cta:focus-visible .iph-cta-si0__cta-arrow {
	transform: translateX(6px);
}

/* ---- Image column (lg shadow, sm radius, scale-up on hover) ---------------- */
.iph-cta-si0__media {
	position: relative;
	margin: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
	will-change: transform;
}

.iph-cta-si0__media:hover {
	transform: scale(1.03);
	box-shadow: var(--shadow-xl);
}

.iph-cta-si0__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---- Entrance animation (fade-up, 50ms stagger) --------------------------- */
[data-iph-cta-si0-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out);
}

[data-iph-cta-si0-animate].is-visible {
	opacity: 1;
	transform: none;
}

.iph-cta-si0__copy [data-iph-cta-si0-animate]:nth-child(1) { transition-delay: 0ms; }
.iph-cta-si0__copy [data-iph-cta-si0-animate]:nth-child(2) { transition-delay: 50ms; }
.iph-cta-si0__copy [data-iph-cta-si0-animate]:nth-child(3) { transition-delay: 100ms; }
.iph-cta-si0__media { transition-delay: 150ms; }

/* ---- Responsive: tablet + mobile stack ------------------------------------ */
@media (max-width: 900px) {
	.iph-cta-si0__inner {
		grid-template-columns: 1fr; /* stack */
	}

	.iph-cta-si0__media {
		order: -1; /* image leads above the copy when stacked */
		max-width: 40rem;
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-iph-cta-si0-animate] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.iph-cta-si0__media:hover,
	.iph-cta-si0__cta:hover {
		transform: none;
	}

	.iph-cta-si0__cta:hover .iph-cta-si0__cta-arrow {
		transform: none;
	}
}