/* Planning CTA (template-parts/sections/planning-cta.php). Loaded only when shown.
   Sketches use the page accent (--c-icon) at low contrast and draw once on reveal. */

.planning-cta__inner {
	--pl: var(--c-icon, var(--c-accent));
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; place-items: center; min-height: 380px; padding: 72px 24px;
	border-radius: var(--radius-lg); text-align: center;
	background: color-mix(in srgb, var(--pl) 7%, var(--c-surface-2));
	border: 1px solid color-mix(in srgb, var(--pl) 18%, transparent);
}
.planning-cta__copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; max-width: 600px; }
.planning-cta__title { font-size: var(--fs-h2); }
.planning-cta__text { font-size: 18px; line-height: 1.55; color: var(--c-muted); max-width: 30em; }
.planning-cta__copy .btn { margin-top: 8px; }

.planning-cta__sketches { position: absolute; inset: 0; z-index: 0; color: var(--pl); pointer-events: none; }
.planning-cta__sketch { position: absolute; width: 200px; height: auto; opacity: 0.3; stroke-width: 1.4; }
.planning-cta__sketch--1 { left: 3%; top: 10%; width: 230px; transform: rotate(-6deg); }
.planning-cta__sketch--2 { right: 22%; bottom: 8%; width: 110px; transform: rotate(8deg); }
.planning-cta__sketch--3 { right: 3%; top: 12%; width: 220px; transform: rotate(5deg); }
.planning-cta__sketch--4 { left: 14%; bottom: 4%; width: 150px; transform: rotate(-4deg); }
.planning-cta__sketch--5 { right: 6%; bottom: 10%; width: 120px; transform: rotate(-8deg); }

/* Draw once when revealed (reveal.js adds .is-in); otherwise shown as is. */
.motion .planning-cta__sketch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .planning-cta__inner.is-in .planning-cta__sketch path {
	animation: pl-draw 1400ms var(--ease-out) forwards;
	animation-delay: calc(300ms + var(--i, 0) * 45ms);
}
.motion .planning-cta__inner.is-in .planning-cta__sketch--3 path { animation-delay: calc(700ms + var(--i, 0) * 45ms); }
.motion .planning-cta__inner.is-in .planning-cta__sketch--2 path,
.motion .planning-cta__inner.is-in .planning-cta__sketch--5 path { animation-delay: calc(1100ms + var(--i, 0) * 60ms); }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 1023px) {
	.planning-cta__sketch--2, .planning-cta__sketch--4 { display: none; }
	.planning-cta__sketch { opacity: 0.22; }
}
@media (max-width: 767px) {
	.planning-cta__inner { min-height: 0; padding: 56px 20px; }
	.planning-cta__sketch--1 { width: 150px; left: -20px; top: 4%; }
	.planning-cta__sketch--3 { width: 140px; right: -24px; top: auto; bottom: 4%; }
	.planning-cta__sketch--5 { display: none; }
	.planning-cta__text { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.planning-cta__sketch path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Soft diamond print (sand) instead of a flat tint. */
.planning-cta__inner { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 4l5 5-5 5-5-5z' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%232a211c' fill-opacity='.12'/%3E%3C/svg%3E"), #f6e3c8; }