/**
 * Premium Exam Spoke — supplementary stylesheet (Sprint 5.0)
 *
 * Additions on top of est-page.css for the premium exam components used by the
 * non-EST spokes (Digital SAT today; future ACT). Enqueued only on those spokes,
 * AFTER est-page.css (depends on the novira-est-page handle) so it can reuse the
 * --est-* design tokens. EST does not load this file, and est-page.css is never
 * edited — at the consolidation sprint these rules fold into the shared layer.
 */

/* Longer Latin wordmarks (e.g. "Digital SAT") sized to fit the hero column. */
.est-page.is-sat .est-hero__mark { font-size: clamp(38px, 6vw, 72px); }

/* "What is this exam?" definition section — answers the parent's first
   question. Two columns: authoritative copy + a "what it measures" card. */
.est-page .est-about { padding: clamp(64px, 8vw, 104px) 0; }
.est-page .est-about__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	margin-top: clamp(28px, 4vw, 44px);
}
.est-page .est-about__lead {
	font-family: var(--ff-display, sans-serif);
	font-size: clamp(18px, 1.7vw, 22px);
	line-height: 1.85;
	color: var(--est-ink);
	font-weight: 700;
}
.est-page .est-about__note {
	margin-top: 18px;
	font-size: 15.5px;
	line-height: 1.9;
	color: var(--est-muted);
}
.est-page .est-about__measures {
	background: var(--est-surface);
	border: 1px solid var(--est-line);
	border-radius: var(--est-radius);
	box-shadow: var(--est-shadow-soft);
	padding: clamp(22px, 2.4vw, 30px);
}
.est-page .est-about__measures-title {
	font-family: var(--ff-display, sans-serif);
	font-weight: 800;
	font-size: 16px;
	color: var(--est-purple);
	margin-bottom: 16px;
}
.est-page .est-about__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.est-page .est-about__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--est-ink);
}
.est-page .est-about__list .est-check {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--est-grad);
	border-radius: 50%;
}
.est-page .est-about__list .est-check svg { width: 14px; height: 14px; }

@media (max-width: 860px) {
	.est-page .est-about__grid { grid-template-columns: 1fr; }
}

/* Internal-linking line under the comparison table (connects the spoke to its
   sibling exams and the hub). Reuses the family tokens; links stay on-brand. */
.est-page .est-related-links {
	margin: 18px auto 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.9;
	color: var(--est-muted);
}
.est-page .est-related-links a {
	color: var(--est-purple);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
.est-page .est-related-links a:hover,
.est-page .est-related-links a:focus-visible { border-bottom-color: currentColor; }

/* FAQ accordion — now used by EST too (back-ported from the SAT/ACT spokes).
   Native <details>; token-based to match the family. */
.est-page .est-faq { padding: clamp(64px, 8vw, 104px) 0; background: var(--est-tint); }
.est-page .est-faq__wrap { max-width: 860px; }
.est-page .pex-faq { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 14px; }
.est-page .pex-faq__item { background: #fff; border: 1px solid var(--est-line); border-radius: var(--est-radius-sm); overflow: hidden; box-shadow: var(--est-shadow-soft); }
.est-page .pex-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; padding: 18px 20px; font-family: var(--ff-display, sans-serif); font-weight: 800; font-size: 16px; line-height: 1.5; color: var(--est-ink); }
.est-page .pex-faq__q::-webkit-details-marker { display: none; }
.est-page .pex-faq__q:focus-visible { outline: 3px solid var(--est-blue); outline-offset: 2px; border-radius: 8px; }
.est-page .pex-faq__chev { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--est-grad-soft); }
.est-page .pex-faq__chev::before, .est-page .pex-faq__chev::after { content: ''; position: absolute; background: var(--est-purple); border-radius: 2px; }
.est-page .pex-faq__chev::before { width: 12px; height: 2px; top: 13px; inset-inline-start: 8px; }
.est-page .pex-faq__chev::after { width: 2px; height: 12px; top: 8px; inset-inline-start: 13px; transition: transform .3s ease; }
.est-page .pex-faq__item[open] .pex-faq__chev::after { transform: scaleY(0); }
.est-page .pex-faq__a { padding: 0 20px 18px; }
.est-page .pex-faq__a p { font-size: 14.5px; line-height: 1.8; color: var(--est-muted); }

@media (prefers-reduced-motion: reduce) {
	.est-page .pex-faq__chev::after { transition: none; }
}

/* === "Which course is right?" guidance (shared) — data-driven matcher ====== */
.est-page .est-guide { padding: clamp(64px, 8vw, 104px) 0; }
.est-page .pex-guide {
	list-style: none;
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.est-page .pex-guide__row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--est-surface);
	border: 1px solid var(--est-line);
	border-radius: var(--est-radius-sm);
	box-shadow: var(--est-shadow-soft);
	padding: 16px 20px;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.est-page .pex-guide__row:hover { border-color: rgba(91, 20, 230, 0.28); box-shadow: var(--est-shadow-card); }
.est-page .pex-guide__for { flex: 1 1 auto; font-size: 15px; line-height: 1.7; color: var(--est-ink); }
.est-page .pex-guide__arrow { flex-shrink: 0; width: 20px; height: 20px; color: var(--est-purple); }
.est-page .pex-guide__course {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ff-display, sans-serif);
	font-weight: 800;
	font-size: 14.5px;
	color: var(--est-purple);
	background: var(--est-grad-soft);
	border: 1px solid var(--est-line);
	border-radius: 999px;
	padding: 8px 16px;
	line-height: 1.5;
}
.est-page .pex-guide__level {
	font-size: 11px;
	font-weight: 800;
	color: #fff;
	background: var(--est-grad);
	border-radius: 999px;
	padding: 2px 8px;
}
.est-page .pex-guide__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: clamp(20px, 3vw, 30px) auto 0;
	max-width: 760px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--est-muted);
}
.est-page .pex-guide__note-ico { flex-shrink: 0; color: var(--est-purple); }
.est-page .pex-guide__note-ico svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
	.est-page .pex-guide__row { flex-wrap: wrap; }
	.est-page .pex-guide__arrow { transform: rotate(-90deg); }
	.est-page .pex-guide__course { margin-inline-start: auto; }
}

/* === Contextual inline CTA (shared) — lower-weight mid-page call ============ */
.est-page .est-inline-cta { padding: 0 0 clamp(48px, 6vw, 72px); }
.est-page .est-inline-cta__panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: var(--est-grad-soft);
	border: 1px solid var(--est-line);
	border-radius: var(--est-radius);
	padding: clamp(22px, 3vw, 32px) clamp(24px, 3.5vw, 40px);
}
.est-page .est-inline-cta__title {
	font-family: var(--ff-display, sans-serif);
	font-weight: 800;
	font-size: clamp(17px, 1.6vw, 21px);
	color: var(--est-ink);
	line-height: 1.5;
}
.est-page .est-inline-cta__desc { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: var(--est-muted); }
.est-page .est-inline-cta__btn { flex-shrink: 0; }

@media (max-width: 640px) {
	.est-page .est-inline-cta__panel { flex-direction: column; align-items: flex-start; }
	.est-page .est-inline-cta__btn { width: 100%; justify-content: center; }
}

/* === Learning journey (shared) — educational stages, no timings ============ */
.est-page .est-journey { padding: clamp(64px, 8vw, 104px) 0; background: var(--est-tint); }
.est-page .pex-journey {
	position: relative;
	list-style: none;
	margin: clamp(32px, 5vw, 52px) 0 0;
	padding: 0;
	display: flex;
	gap: 12px;
}
/* Continuous path line behind the markers (stops short of the end markers). */
.est-page .pex-journey::before {
	content: '';
	position: absolute;
	top: 33px;
	inset-inline: 12%;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--est-purple) 0 8px, transparent 8px 16px);
	opacity: .35;
	z-index: 0;
}
.est-page .pex-journey__stage {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.est-page .pex-journey__marker {
	position: relative;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: var(--est-surface);
	border: 2px solid var(--est-line);
	display: grid;
	place-items: center;
	box-shadow: var(--est-shadow-soft);
}
.est-page .pex-journey__icon { color: var(--est-purple); display: inline-flex; }
.est-page .pex-journey__icon svg { width: 28px; height: 28px; }
.est-page .pex-journey__step {
	position: absolute;
	top: -6px;
	inset-inline-end: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--est-grad);
	color: #fff;
	font-family: var(--ff-display, sans-serif);
	font-size: 12px;
	font-weight: 800;
	display: grid;
	place-items: center;
}
.est-page .pex-journey__body { display: flex; flex-direction: column; gap: 5px; }
.est-page .pex-journey__label {
	font-family: var(--ff-display, sans-serif);
	font-weight: 800;
	font-size: 15.5px;
	color: var(--est-ink);
}
.est-page .pex-journey__caption { font-size: 13px; line-height: 1.7; color: var(--est-muted); }

@media (max-width: 760px) {
	.est-page .pex-journey { flex-direction: column; gap: 20px; max-width: 420px; margin-inline: auto; }
	.est-page .pex-journey::before {
		top: 0;
		bottom: 0;
		height: auto;
		width: 2px;
		inset-inline: auto;
		inset-inline-start: 32px;
	}
	.est-page .pex-journey__stage { flex-direction: row; text-align: start; align-items: flex-start; gap: 16px; }
	.est-page .pex-journey__body { align-items: flex-start; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.est-page .pex-guide__row { transition: none; }
}