/* -----------------------------------------------------------------------------
 * The pathway template.
 *
 * Loaded only on page-templates/template-pathway.php. There is one stylesheet
 * for all four pathways: everything that differs is expressed through the
 * --uz-pathway-accent custom property, set by a single modifier class fed from
 * the shared configuration in inc/pathways.php.
 *
 * The card family, chips, grids, buttons, section furniture and the 5000
 * Practice step component all come from components.css. Nothing is re-declared
 * here that already exists there.
 * -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * Accent
 *
 * Four accents, one rule set. Accent is never the only signal: each pathway
 * also carries its number, its name, its own motif and its own copy, so the
 * page remains fully distinguishable without colour perception.
 * ------------------------------------------------------------------------- */
.uz-pathway-page {
	--uz-pathway-accent: var(--uz-electric-cyan);
	--uz-pathway-accent-text: var(--uz-electric-cyan);
}
.uz-pathway-page.uz-pathway--cyan   { --uz-pathway-accent: var(--uz-electric-cyan); --uz-pathway-accent-text: var(--uz-electric-cyan); }
.uz-pathway-page.uz-pathway--violet { --uz-pathway-accent: var(--uz-subtle-violet); --uz-pathway-accent-text: var(--uz-subtle-violet-text); }
.uz-pathway-page.uz-pathway--amber  { --uz-pathway-accent: var(--uz-human-amber);   --uz-pathway-accent-text: var(--uz-human-amber); }
.uz-pathway-page.uz-pathway--blue   { --uz-pathway-accent: var(--uz-orbit-blue);    --uz-pathway-accent-text: var(--uz-orbit-blue); }

/* ============================== Hero ===================================== */
.uz-pathway-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(3.5rem, 2rem + 7vw, 8rem);
	border-bottom: 1px solid var(--uz-border);
}

/*
 * The approved CSS/SVG motif, enlarged and set behind the copy as atmosphere.
 * It is the same drawing the pathway cards use — no second asset, nothing
 * uploaded, and no tiled background.
 */
.uz-pathway-hero__motif {
	position: absolute;
	inset: -20% -10% auto;
	z-index: 0;
	display: block;
	height: 150%;
	color: var(--uz-pathway-accent);
	opacity: 0.5;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 0%, rgba(0, 0, 0, 0) 78%);
	        mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 0%, rgba(0, 0, 0, 0) 78%);
}
.uz-pathway-hero__motif .uz-pathway__motif { width: 100%; height: 100%; }

/* A contained glow, never a full-page background image. */
.uz-pathway-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(ellipse 60% 55% at 50% 40%, color-mix(in srgb, var(--uz-pathway-accent) 12%, transparent) 0%, rgba(3, 7, 13, 0) 70%);
	pointer-events: none;
}

/* Keeps the copy legible over the motif without hiding it. */
.uz-pathway-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	text-align: center;
}
.uz-pathway-hero__eyebrow { color: var(--uz-pathway-accent-text); }

.uz-pathway-hero__title {
	font-family: var(--uz-font-bee);
	font-weight: 600;
	font-size: clamp(3rem, 1.8rem + 6vw, 7rem);
	line-height: 0.9;
	letter-spacing: 0.008em;
	margin-bottom: var(--uz-space-lg);
	text-wrap: balance;
}

.uz-pathway-hero__intro {
	color: var(--uz-text);
	font-size: var(--uz-text-lg);
	line-height: 1.6;
	max-width: 40ch;
	margin-inline: auto;
}

.uz-pathway-hero__count {
	color: var(--uz-muted-text);
	font-family: var(--uz-font-heading);
	font-size: var(--uz-text-xs);
	letter-spacing: var(--uz-tracking-caps);
	text-transform: uppercase;
	margin-bottom: var(--uz-space-xl);
}

.uz-pathway-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--uz-space-md);
	justify-content: center;
}

/* The hero's primary action takes the pathway's own accent. */
.uz-pathway-page .uz-pathway-hero__actions .uz-button--primary {
	background: var(--uz-pathway-accent);
	border-color: var(--uz-pathway-accent);
	color: var(--uz-void-black);
}
.uz-pathway-page .uz-pathway-hero__actions .uz-button--primary:hover {
	box-shadow: 0 0 18px color-mix(in srgb, var(--uz-pathway-accent) 40%, transparent);
}
.uz-pathway-page .uz-pathway-hero__actions .uz-button--outline {
	color: var(--uz-pathway-accent-text);
}
.uz-pathway-page .uz-pathway-hero__actions .uz-button--outline:hover {
	background: color-mix(in srgb, var(--uz-pathway-accent) 10%, transparent);
	border-color: var(--uz-pathway-accent);
}

/* ============================ Philosophy ================================= */
.uz-pathway-philosophy__inner { max-width: 46rem; margin-inline: auto; text-align: center; }

.uz-pathway-philosophy__title {
	font-size: calc(var(--uz-text-2xl) * 1.3);
	line-height: 1.15;
	margin-bottom: var(--uz-space-lg);
	text-wrap: balance;
}
.uz-pathway-philosophy__body {
	color: var(--uz-muted-text);
	font-size: var(--uz-text-lg);
	line-height: 1.7;
	margin-bottom: var(--uz-space-xl);
}
.uz-pathway-philosophy .uz-topics__list { justify-content: center; }

/* Chips on a pathway page carry the pathway's accent on hover. */
.uz-pathway-page .uz-chip:hover {
	border-color: color-mix(in srgb, var(--uz-pathway-accent) 60%, transparent);
	color: var(--uz-text);
}

/* ========================== Starting point =============================== */
.uz-pathway-featured { border-top: 1px solid var(--uz-border); }
.uz-pathway-page .uz-card__flag { color: var(--uz-pathway-accent-text); }
.uz-pathway-page .uz-card__link:hover {
	border-color: color-mix(in srgb, var(--uz-pathway-accent) 50%, transparent);
	box-shadow: 0 0 44px color-mix(in srgb, var(--uz-pathway-accent) 16%, transparent);
}

/* ============================== Ideas ==================================== */
.uz-pathway-ideas { border-top: 1px solid var(--uz-border); }
.uz-pathway-ideas__more { margin-top: var(--uz-space-2xl); }
.uz-pathway-ideas__note {
	margin-top: var(--uz-space-md);
	color: var(--uz-muted-text);
	font-size: var(--uz-text-sm);
}
.uz-pathway-ideas .uz-empty__topics { justify-content: center; margin-top: var(--uz-space-md); }

/* ============================ Reflection ================================= */
.uz-pathway-reflection {
	border-top: 1px solid var(--uz-border);
	background:
		radial-gradient(ellipse 55% 90% at 50% 50%, color-mix(in srgb, var(--uz-pathway-accent) 9%, transparent) 0%, rgba(3, 7, 13, 0) 72%),
		var(--uz-bg);
	text-align: center;
}
.uz-pathway-reflection__quote {
	max-width: 34ch;
	margin-inline: auto;
	margin-bottom: 0;
	font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2.15rem);
	line-height: 1.35;
	color: var(--uz-warm-white);
	text-wrap: balance;
}

/* ======================== Explore other pathways ========================= */
.uz-pathway-others { border-top: 1px solid var(--uz-border); background: var(--uz-bg-raised); }
@media (min-width: 640px) {
	.uz-pathways__grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.uz-pathways__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* These cards are secondary to the page's own pathway, so they sit shorter. */
.uz-pathway-others .uz-pathway { min-height: 19rem; }
.uz-pathway-others .uz-pathway__visual { height: 9.5rem; }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	a.uz-pathway:hover { transform: none; }
}