/**
 * Page-specific styles: Our Process
 * Loaded only on /our-process/ via a <link> tag in page-our-process.php
 * so this file is safe to edit in isolation.
 */

:root {
	--op-teal:        #2FADC1;
	--op-teal-deep:   #1F8A9B;
	--op-teal-soft:   rgba(47, 173, 193, 0.14);
	--op-purple:      #7E72AF;
	--op-purple-deep: #5E5290;
	--op-purple-soft: rgba(126, 114, 175, 0.16);
	--op-gold:        #C4883A;
	--op-gold-soft:   rgba(196, 136, 58, 0.18);
	--op-ink:         #1E2D3D;
}

/* ============================================================
   0. Why This Matters — left-align body copy (match other pages)
   ============================================================ */

.process-narrative__lead {
	text-align: left;
}

/* ============================================================
   1. What Guides Us — richer, more atmospheric card treatment
   ============================================================ */

.section--dark .guide-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-top: 3.25rem;
	position: relative;
}

.section--dark .guide-card {
	position: relative;
	background:
		radial-gradient(
			ellipse 180% 120% at 50% -20%,
			rgba(196, 136, 58, 0.10) 0%,
			rgba(196, 136, 58, 0) 55%
		),
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.06) 0%,
			rgba(255, 255, 255, 0.02) 100%
		);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 18px;
	padding: 3rem 1.75rem 2.25rem;
	text-align: center;
	overflow: hidden;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 20px 40px -24px rgba(0, 0, 0, 0.6);
	transition:
		transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.4s ease,
		box-shadow 0.45s ease;
	z-index: 1;
}

/* Hairline accent line at the very top of each card — amber */
.section--dark .guide-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--op-gold) 50%,
		transparent 100%
	);
	opacity: 0.85;
}

/* Soft grain / texture behind content to break up flatness */
.section--dark .guide-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(
			circle at 20% 90%,
			rgba(196, 136, 58, 0.08) 0%,
			transparent 40%
		),
		radial-gradient(
			circle at 85% 10%,
			rgba(85, 122, 148, 0.10) 0%,
			transparent 45%
		);
	pointer-events: none;
	z-index: -1;
	opacity: 0.9;
}

.section--dark .guide-card:hover {
	transform: translateY(-6px);
	border-color: rgba(196, 136, 58, 0.35);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 30px 55px -28px rgba(0, 0, 0, 0.75),
		0 0 0 1px rgba(196, 136, 58, 0.10);
}

/* Icon — ringed amber disc with glow */
.section--dark .guide-card__icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--op-gold);
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(196, 136, 58, 0.22) 0%,
			rgba(196, 136, 58, 0.08) 60%,
			rgba(196, 136, 58, 0) 100%
		);
	position: relative;
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.section--dark .guide-card__icon::before,
.section--dark .guide-card__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(196, 136, 58, 0.35);
}

.section--dark .guide-card__icon::after {
	inset: -10px;
	border-color: rgba(196, 136, 58, 0.15);
	border-style: dashed;
	animation: op-ring-spin 30s linear infinite;
}

@keyframes op-ring-spin {
	to { transform: rotate(360deg); }
}

.section--dark .guide-card:hover .guide-card__icon {
	transform: scale(1.06);
}

.section--dark .guide-card__icon svg {
	width: 30px;
	height: 30px;
	stroke-width: 1.4;
}

/* Heading — serif, with a tiny amber underline */
.section--dark .guide-card h3 {
	font-family: "Source Serif 4", Georgia, serif;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	letter-spacing: 0.01em;
	position: relative;
	padding-bottom: 1rem;
}

.section--dark .guide-card h3::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 28px;
	height: 2px;
	background: var(--op-gold);
	border-radius: 2px;
}

.section--dark .guide-card p {
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	line-height: 1.7;
	margin: 0;
	max-width: 32ch;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 900px) {
	.section--dark .guide-cards {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ============================================================
   2. At a Glance — replace "vs" divider with arrow exchange
   ============================================================ */

.process-glance__divider {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0 0.5rem;
	position: relative;
}

/* Hide the legacy vertical lines cleanly */
.process-glance__divider .process-glance__divider-line { display: none; }

/* Hide the old "vs" text — we replace with arrow markup injected
   via CSS content on a wrapper the template now renders. */
.process-glance__divider > span:not(.op-exchange__label) { display: none; }

.op-exchange {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	background:
		radial-gradient(
			circle at 50% 50%,
			rgba(47, 173, 193, 0.14) 0%,
			rgba(126, 114, 175, 0.14) 100%
		);
	border: 1px solid rgba(30, 45, 61, 0.10);
	box-shadow: 0 6px 20px -12px rgba(30, 45, 61, 0.3);
}

.op-exchange::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px dashed rgba(30, 45, 61, 0.12);
}

.op-exchange__arrow {
	display: block;
	color: var(--op-ink);
}

.op-exchange__arrow--top {
	color: var(--op-teal-deep);
	transform: translateY(-2px);
}
.op-exchange__arrow--bottom {
	color: var(--op-purple-deep);
	transform: translateY(2px);
}

.op-exchange__label {
	font-family: "Source Serif 4", Georgia, serif;
	font-style: italic;
	font-size: 0.9rem;
	color: var(--op-ink);
	letter-spacing: 0.02em;
	opacity: 0.75;
	margin-top: 0.35rem;
}

/* Horizontal tracer lines that extend from the exchange disc
   to each card — makes the bi-directional flow explicit. */
.op-exchange-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.op-exchange-wrap::before,
.op-exchange-wrap::after {
	content: "";
	position: absolute;
	top: 34px;
	width: 22px;
	height: 1px;
}
.op-exchange-wrap::before {
	right: 100%;
	background: linear-gradient(90deg, transparent, var(--op-teal));
}
.op-exchange-wrap::after {
	left: 100%;
	background: linear-gradient(90deg, var(--op-purple), transparent);
}

@media (max-width: 992px) {
	.op-exchange-wrap::before,
	.op-exchange-wrap::after { display: none; }
	.op-exchange { transform: rotate(90deg); }
	.op-exchange__label { transform: rotate(-90deg); margin-top: 0; }
}

/* ============================================================
   3. How It Works — per-track milestone accent colors
      Church Planting = teal, Sabbatical = purple (override gold)
   ============================================================ */

/* --- Church Plant: Teal milestones --- */
.process-track[data-color="church-plant"] .process-step--milestone .process-step__card {
	border-left-color: var(--op-teal);
	box-shadow: 0 2px 14px rgba(47, 173, 193, 0.14);
}

.process-track[data-color="church-plant"] .process-step--milestone .process-step__icon {
	background: var(--op-teal-soft);
	color: var(--op-teal-deep);
}

.process-track[data-color="church-plant"] .process-step--milestone .process-step__badge {
	background: var(--op-teal-soft);
	color: var(--op-teal-deep);
}

/* --- Sabbatical: Purple milestones --- */
.process-track[data-color="sabbatical"] .process-step--milestone .process-step__card {
	border-left-color: var(--op-purple);
	box-shadow: 0 2px 14px rgba(126, 114, 175, 0.16);
}

.process-track[data-color="sabbatical"] .process-step--milestone .process-step__icon {
	background: var(--op-purple-soft);
	color: var(--op-purple-deep);
}

.process-track[data-color="sabbatical"] .process-step--milestone .process-step__badge {
	background: var(--op-purple-soft);
	color: var(--op-purple-deep);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.section--dark .guide-card__icon::after { animation: none; }
}