/*
 * Tarot Arabi — P08 Tarot spreads
 *
 * The spread hub and the spread detail pages.
 *
 * This is a composition layer, not a new design language: tokens, buttons,
 * breadcrumbs and icons all come from the global layers, and the hub hero
 * mirrors the approved Page-family hero geometry so the spread section is
 * unmistakably part of the same site. What is its own is the spread object — a
 * landscape media stage for a diagram whose proportions cannot be assumed, and a
 * semantic ordered position list that carries the meaning whether or not a
 * diagram exists.
 *
 * Loaded only on spread surfaces: the homepage, the Learn family and the card
 * library each keep their own system, and none of them receives these rules.
 */

/* ============================================================== Foundation */

.ta-spreads {
	/* The hub hero mirrors the approved Page-family hero geometry. */
	--ta-spreads-hero-top: clamp(28px, 3.4vw, 48px);
	--ta-spreads-hero-copy: 540px;
	--ta-spreads-hero-arc: clamp(380px, 30vw, 440px);
	--ta-spreads-hero-arc-bite: 105px;

	--ta-spreads-line: 1px solid var(--color-border);
	--ta-spreads-shadow: 0 4px 18px rgba(23, 79, 58, 0.06);
	--ta-spreads-shadow-hover: 0 12px 30px rgba(23, 79, 58, 0.1);
	--ta-spreads-reading: 780px;

	background-color: var(--color-bg);
	color: var(--color-text);
	overflow-x: clip; /* the hero field may bleed; the page never scrolls sideways */
}

/*
 * The family's own content wrapper. The shared `.ta-ec-wrap` primitive lives in
 * the Learn layer, which this family does not load, so the complete definition
 * lives here: without the auto margins and the gutter the content would sit
 * flush against the physical right edge of the viewport.
 */
.ta-spreads-wrap {
	inline-size: 100%;
	max-inline-size: 1264px; /* ~1200px of content at 1440 */
	margin-inline: auto;
	padding-inline: clamp(20px, 2.2vw, 32px);
}

/*
 * The approved eyebrow treatment, stated locally.
 *
 * `.ta-eyebrow`'s typography base lives in the homepage and Learn layers, so a
 * family that loads neither must restate it or inherit the body's 400 weight and
 * loose leading. This is the same treatment the approved eyebrow uses: brass,
 * 14–16px, 700, no pill, no tracking.
 */
.ta-spreads .ta-eyebrow {
	margin: 0;
	color: var(--color-gold-action);
	font-size: clamp(14px, 1.05vw, 16px);
	font-weight: var(--weight-bold);
	line-height: 1.45;
}

/*
 * ONE canonical major-section gap, owned by the section below it, so a boundary
 * is the token and nothing else. Spacing inside a section is internal.
 */
.ta-spreads > article > * {
	padding-block: 0;
}

.ta-spreads > article > .ta-spreads-hero,
.ta-spreads > article > .ta-spreads-detail-hero {
	padding-block-start: var(--ta-spreads-hero-top);
}

.ta-spreads > article > .ta-spreads-section {
	padding-block-start: var(--ta-section-gap);
}

.ta-spreads > article > :last-child {
	padding-block-end: var(--ta-section-gap);
}

/* ------------------------------------------------------------ Section head */

.ta-spreads-head {
	max-inline-size: 760px;
	margin-block-end: clamp(36px, 3.4vw, 44px);
}

.ta-spreads-head .ta-eyebrow {
	margin: 0 0 10px;
}

.ta-spreads-h2 {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(32px, 3.2vw, 48px);
	font-weight: var(--weight-bold);
	line-height: 1.18;
	text-wrap: balance;
}

.ta-spreads-head__intro {
	margin-block-start: var(--space-4);
}

.ta-spreads-note {
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

/* ---------------------------------------------------------- Hub hero */

.ta-spreads-hero {
	position: relative;
	min-block-size: clamp(400px, 30vw, 440px);
}

.ta-spreads-hero__wrap {
	position: relative;
	z-index: 2;
}

.ta-spreads-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	max-inline-size: var(--ta-spreads-hero-copy);
	margin-inline-end: auto; /* RTL: the copy keeps the page grid's right edge */
}

.ta-spreads-hero__eyebrow {
	margin: clamp(20px, 1.6vw, 22px) 0 0;
}

.ta-spreads-hero__title {
	margin: clamp(14px, 1.1vw, 16px) 0 0;
	max-inline-size: 520px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(46px, 4.3vw, 62px);
	font-weight: var(--weight-bold);
	line-height: 1.14;
	text-wrap: balance;
}

.ta-spreads-hero__lead {
	margin: clamp(16px, 1.3vw, 18px) 0 0;
	max-inline-size: 520px;
	color: var(--color-text-muted);
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.8;
}

/* The photographic field: out of flow, so it can reach the physical left
   viewport edge while the copy keeps the centred grid. */
.ta-spreads-hero__media {
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-end: 0; /* RTL: the physical left edge */
	inline-size: min(
		55.5vw,
		calc(100% - var(--ta-spreads-hero-copy) - clamp(20px, 2.2vw, 32px) - 16px)
	);
}

.ta-spreads-hero__frame {
	position: relative;
	display: block;
	block-size: 100%;
	overflow: hidden;
	border-radius: 18px 0 0 18px; /* physical left corners only */
	background-color: var(--color-surface);
}

html[dir="ltr"] .ta-spreads-hero__frame {
	border-radius: 0 18px 18px 0;
}

.ta-spreads-hero__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * The transition: one oversized Ivory disc whose centre sits well inside the
 * photograph, so only a shallow arc brushes into it. Pure layout geometry.
 */
.ta-spreads-hero__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: 54%;
	inset-inline-start: calc(var(--ta-spreads-hero-arc-bite) - var(--ta-spreads-hero-arc));
	inline-size: var(--ta-spreads-hero-arc);
	block-size: var(--ta-spreads-hero-arc);
	border-radius: 50%;
	background-color: var(--color-bg);
	transform: translateY(-50%);
	pointer-events: none;
}

/* ------------------------------------------------------ Media + surfaces */

.ta-spreads-media__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* The family's factual badge: quiet, and only ever rendered from real data. */
.ta-spreads-fact {
	display: inline-flex;
	align-items: center;
	min-block-size: 30px;
	padding-inline: 12px;
	border: var(--ta-spreads-line);
	border-radius: 9px;
	background-color: var(--color-surface);
	color: var(--color-green-900);
	font-size: 13.5px;
	font-weight: var(--weight-bold);
	line-height: 1;
}

.ta-spreads-fact--sage {
	border-color: transparent;
	background-color: var(--color-sage-100);
}

/* ------------------------------------------------------------ Hub grid */

.ta-spreads-hub__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2vw, 26px);
}

/*
 * One card language for the whole family: the spread's own image, its title,
 * any stored metadata, and one action. The whole card is one anchor, so there is
 * a single tab stop and never a nested control.
 */
.ta-spreads-card {
	min-inline-size: 0;
}

.ta-spreads-card__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	overflow: hidden;
	border: var(--ta-spreads-line);
	border-radius: 22px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-spreads-shadow);
	color: inherit;
	text-decoration: none;
	transition:
		transform 200ms var(--ease-interaction),
		box-shadow 200ms var(--ease-interaction),
		border-color 200ms var(--ease-interaction);
}

.ta-spreads-card__link:hover {
	transform: translateY(-3px);
	border-color: rgba(23, 79, 58, 0.18);
	box-shadow: var(--ta-spreads-shadow-hover);
}

.ta-spreads-card__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 3px;
}

.ta-spreads-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-sage-100);
}

.ta-spreads-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex: 1 1 auto;
	padding: clamp(22px, 2vw, 26px);
}

.ta-spreads-card__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(24px, 1.8vw, 27px);
	font-weight: var(--weight-bold);
	line-height: 1.25;
}

.ta-spreads-card__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.7;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ta-spreads-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ta-spreads-card__cases {
	color: var(--color-text-muted);
	font-size: 13px;
	line-height: 1.6;
}

.ta-spreads-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-block-start: auto;
	padding-block-start: 12px;
	color: var(--color-green-900);
	font-size: 15px;
	font-weight: var(--weight-bold);
	white-space: nowrap;
}

.ta-spreads-card__cta .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-spreads-card__link:hover .ta-spreads-card__cta .ta-icon--directional,
.ta-spreads-card__link:focus-visible .ta-spreads-card__cta .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-spreads-card__link:hover .ta-spreads-card__cta .ta-icon--directional,
[dir="ltr"] .ta-spreads-card__link:focus-visible .ta-spreads-card__cta .ta-icon--directional {
	transform: translateX(4px);
}

/* ================================================== Spread detail page */

/*
 * A spread is not a Tarot card: its media is a diagram or an illustration whose
 * proportions cannot be assumed, so the hero is contained in the page grid and
 * its stage takes a deliberate landscape proportion rather than a portrait crop.
 */
.ta-spreads-detail-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px); /* copy, stage */
	align-items: center;
	gap: clamp(40px, 4.6vw, 72px);
	margin-block-start: clamp(20px, 2.4vw, 36px);
}

.ta-spreads-detail-hero__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-inline-size: 0;
}

.ta-spreads-detail-hero__eyebrow {
	margin: clamp(26px, 2vw, 28px) 0 0;
}

.ta-spreads-detail-hero__title {
	margin: clamp(12px, 1vw, 14px) 0 0;
	max-inline-size: 580px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(40px, 4.2vw, 60px);
	font-weight: var(--weight-bold);
	line-height: 1.15;
	text-wrap: balance;
}

.ta-spreads-detail-hero__lead {
	margin: clamp(18px, 1.5vw, 22px) 0 0;
	max-inline-size: 580px;
	color: var(--color-text-muted);
	font-size: 18px;
	line-height: 1.85;
}

.ta-spreads-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: clamp(24px, 2vw, 28px) 0 0;
	padding: 0;
	list-style: none;
}

/* The stage: a Sage panel at a deliberate landscape proportion. */
.ta-spreads-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	padding: clamp(16px, 1.6vw, 22px);
	border: var(--ta-spreads-line);
	border-radius: 28px;
	background-color: var(--color-sage-100);
}

.ta-spreads-stage__frame {
	position: relative;
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--color-ivory);
}

/*
 * Diagrams must never be cropped into nonsense, so the default fit preserves the
 * whole image inside its frame. Standard editorial photography is not harmed by
 * this: a 4:3 source fills a 4:3 frame exactly.
 */
.ta-spreads-stage__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* ------------------------------------------------------------ Reading */

.ta-spreads-prose {
	max-inline-size: var(--ta-spreads-reading);
	margin-inline-end: auto; /* RTL: the reading (physical right) edge */
	font-size: 18px;
	line-height: 1.95;
}

.ta-spreads-prose > * + * {
	margin-block-start: 1.3em;
}

.ta-spreads-prose p {
	margin: 0 0 1.45em;
}

.ta-spreads-prose p:last-child {
	margin-block-end: 0;
}

.ta-spreads-prose h2,
.ta-spreads-prose h3,
.ta-spreads-prose h4 {
	margin: clamp(48px, 4.4vw, 64px) 0 0.5em;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	line-height: 1.25;
	text-wrap: balance;
	scroll-margin-block-start: 120px;
}

.ta-spreads-prose h2 {
	font-size: clamp(30px, 2.6vw, 40px);
}

.ta-spreads-prose h3 {
	margin-block-start: clamp(32px, 3vw, 44px);
	font-size: clamp(24px, 1.9vw, 30px);
}

.ta-spreads-prose h4 {
	font-size: clamp(19px, 1.5vw, 22px);
}

.ta-spreads-prose ul,
.ta-spreads-prose ol {
	margin: 0 0 1.45em;
	padding-inline-start: 1.5em;
}

.ta-spreads-prose li {
	margin-block-end: 0.5em;
}

.ta-spreads-prose li > ul,
.ta-spreads-prose li > ol {
	margin-block: 0.5em 0;
}

.ta-spreads-prose li::marker {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

.ta-spreads-prose a {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ta-spreads-prose strong {
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

.ta-spreads-prose blockquote {
	margin: 0 0 1.45em;
	padding: clamp(24px, 2.2vw, 28px);
	border: var(--ta-spreads-line);
	border-inline-start: 3px solid var(--color-gold-action);
	border-radius: 16px;
	background-color: var(--color-sage-100);
	font-size: clamp(18px, 1.3vw, 20px);
	line-height: 1.85;
}

.ta-spreads-prose blockquote p:last-child {
	margin-block-end: 0;
}

.ta-spreads-prose figure {
	margin: 40px 0 48px;
}

.ta-spreads-prose img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 20px;
}

.ta-spreads-prose figcaption {
	margin-block-start: 10px;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: start;
}

.ta-spreads-prose hr {
	margin-block: clamp(48px, 4vw, 64px);
	border: 0;
	border-block-start: var(--ta-spreads-line);
}

.ta-spreads-prose table {
	inline-size: 100%;
	margin: 0 0 1.45em;
	border: var(--ta-spreads-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background-color: var(--color-surface);
	font-size: 16px;
	line-height: 1.7;
}

.ta-spreads-prose th,
.ta-spreads-prose td {
	padding: 15px 18px;
	border-block-end: var(--ta-spreads-line);
	text-align: start;
	vertical-align: top;
}

.ta-spreads-prose tr:last-child td {
	border-block-end: 0;
}

.ta-spreads-prose thead th {
	background-color: var(--color-sage-100);
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

/* A narrow viewport scrolls the table rather than shrinking the type. */
.ta-spreads-prose > table {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------ Positions */

/*
 * The defining module of a spread page, and a semantic ordered list: the number
 * stays visible and the meaning is written out, so the spread is understandable
 * with the diagram missing, with CSS off, and to a screen reader.
 */
.ta-spreads-positions__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-spreads-position {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(28px, 2.4vw, 32px);
	border: var(--ta-spreads-line);
	border-radius: 22px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-spreads-shadow);
}

.ta-spreads-position__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ta-spreads-position__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: clamp(42px, 3.4vw, 46px);
	block-size: clamp(42px, 3.4vw, 46px);
	border-radius: 50%;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.5vw, 21px);
	font-weight: var(--weight-bold);
	line-height: 1;
}

.ta-spreads-position__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(24px, 1.9vw, 27px);
	font-weight: var(--weight-bold);
	line-height: 1.25;
}

.ta-spreads-position__meaning {
	font-size: 17px;
	line-height: 1.8;
}

.ta-spreads-position__meaning p {
	margin: 0 0 1em;
}

.ta-spreads-position__meaning p:last-child {
	margin-block-end: 0;
}

.ta-spreads-position__meaning a {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The instruction is an inset inside the same card, never a second module. */
.ta-spreads-position__instruction {
	inline-size: 100%;
	padding: clamp(16px, 1.5vw, 20px);
	border-radius: 16px;
	background-color: var(--color-sage-100);
}

.ta-spreads-position__instruction-label {
	margin: 0 0 6px;
	color: var(--color-green-900);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: 1.5;
}

.ta-spreads-position__instruction-body {
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.8;
}

.ta-spreads-position__instruction-body p {
	margin: 0 0 0.8em;
}

.ta-spreads-position__instruction-body p:last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------- Prerequisites */

.ta-spreads-prereq__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.5vw, 20px);
}

.ta-spreads-prereq__link {
	display: grid;
	grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
	align-items: stretch;
	block-size: 100%;
	min-block-size: clamp(120px, 9vw, 140px);
	overflow: hidden;
	border: var(--ta-spreads-line);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-spreads-shadow);
	color: inherit;
	text-decoration: none;
	transition:
		transform var(--duration-standard) var(--ease-interaction),
		box-shadow var(--duration-standard) var(--ease-interaction);
}

.ta-spreads-prereq__link:hover {
	transform: translateY(-3px);
	box-shadow: var(--ta-spreads-shadow-hover);
}

.ta-spreads-prereq__link:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 3px;
}

.ta-spreads-prereq__media {
	display: block;
	overflow: hidden;
	background-color: var(--color-sage-100);
}

.ta-spreads-prereq__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	padding: clamp(14px, 1.3vw, 18px);
}

.ta-spreads-prereq__type {
	padding: 3px 10px;
	border-radius: 8px;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-size: 12px;
	font-weight: var(--weight-bold);
	line-height: 1.5;
}

.ta-spreads-prereq__title {
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(17px, 1.4vw, 20px);
	font-weight: var(--weight-bold);
	line-height: 1.3;
}

.ta-spreads-prereq__body .ta-spreads-card__cta {
	padding-block-start: 8px;
	font-size: 14px;
}

/* ------------------------------------------------------------ Related */

.ta-spreads-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 26px);
}

/* ------------------------------------------------------- Course panel */

.ta-spreads-course__panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 36%); /* copy, media */
	align-items: stretch;
	gap: clamp(24px, 2.6vw, 40px);
	min-block-size: clamp(220px, 18vw, 260px);
	padding: clamp(26px, 2.4vw, 36px);
	overflow: hidden;
	border-radius: 30px;
	background-color: var(--color-green-900);
	background-image: linear-gradient(150deg, var(--color-green-950) 0%, var(--color-green-900) 72%);
	color: var(--color-white);
}

/*
 * No artwork: the copy area simply expands across the panel.
 *
 * The doubled class is deliberate: a single-class modifier has the same
 * specificity as the base rule, so the responsive steps below would otherwise
 * re-open an empty second column on a panel that has nothing to put in it.
 */
.ta-spreads-course__panel.ta-spreads-course__panel--text-only {
	grid-template-columns: minmax(0, 1fr);
}

.ta-spreads-course__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-inline-size: 0;
}

.ta-spreads-course__panel .ta-eyebrow {
	color: var(--color-gold);
}

.ta-spreads-course__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(26px, 2.5vw, 38px);
	font-weight: var(--weight-bold);
	line-height: 1.22;
	text-wrap: balance;
}

.ta-spreads-course__text {
	margin: var(--space-3) 0 0;
	max-inline-size: 62ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.8;
}

/* The action belongs directly beneath the copy it acts on. */
.ta-spreads-course__action {
	margin-block-start: clamp(24px, 2vw, 28px);
	min-block-size: clamp(48px, 3.6vw, 52px);
	padding-inline: clamp(22px, 2vw, 28px);
	border-color: var(--color-ivory);
	background-color: var(--color-ivory);
	color: var(--color-green-900);
}

.ta-spreads-course__action:hover {
	border-color: var(--color-white);
	background-color: var(--color-white);
	color: var(--color-green-950);
}

.ta-spreads-course__action:focus-visible {
	outline-color: var(--color-white);
}

.ta-spreads-course__media {
	display: block;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--color-green-950);
}

.ta-spreads-course__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------- Preview state */

.ta-spreads-preview-state {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 1.6vw, 20px);
	max-inline-size: var(--ta-spreads-reading);
	margin-inline-end: auto;
	min-block-size: 132px;
	padding: clamp(24px, 2.4vw, 30px);
	border: var(--ta-spreads-line);
	border-radius: 20px;
	background-color: var(--color-surface);
	box-shadow: var(--ta-spreads-shadow);
}

.ta-spreads-preview-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
}

.ta-spreads-preview-state__title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(17px, 1.4vw, 19px);
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-spreads-preview-state__text {
	margin: 4px 0 0;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

.ta-spreads-preview-state__action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background-color: var(--color-ivory);
	color: var(--color-green-900);
	font-size: 14px;
	font-weight: var(--weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.ta-spreads-preview-state__action:hover {
	border-color: rgba(23, 79, 58, 0.35);
	background-color: var(--color-sage-100);
	color: var(--color-action-hover);
}

.ta-spreads-preview-state__action:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-green-900);
	outline-offset: 2px;
}

.ta-spreads-preview-state__action .ta-icon--directional {
	transition: transform var(--duration-interaction) var(--ease-interaction);
}

.ta-spreads-preview-state__action:hover .ta-icon--directional,
.ta-spreads-preview-state__action:focus-visible .ta-icon--directional {
	transform: translateX(-4px);
}

[dir="ltr"] .ta-spreads-preview-state__action:hover .ta-icon--directional,
[dir="ltr"] .ta-spreads-preview-state__action:focus-visible .ta-icon--directional {
	transform: translateX(4px);
}

/* ============================================================== Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.ta-spreads-card__link,
	.ta-spreads-prereq__link,
	.ta-icon--directional {
		transition: none;
	}

	.ta-spreads-card__link:hover,
	.ta-spreads-prereq__link:hover {
		transform: none;
	}

	.ta-spreads-card__link:hover .ta-spreads-card__cta .ta-icon--directional,
	.ta-spreads-card__link:focus-visible .ta-spreads-card__cta .ta-icon--directional,
	.ta-spreads-prereq__link:hover .ta-spreads-card__cta .ta-icon--directional,
	.ta-spreads-prereq__link:focus-visible .ta-spreads-card__cta .ta-icon--directional,
	.ta-spreads-preview-state__action:hover .ta-icon--directional,
	.ta-spreads-preview-state__action:focus-visible .ta-icon--directional {
		transform: none !important;
	}
}

/* ============================================================== Responsive */

/* The hub hero stacks at the approved Page-family breakpoint. */
@media (max-width: 1119px) {
	.ta-spreads-hero {
		min-block-size: 0;
	}

	.ta-spreads-hero__body {
		max-inline-size: none;
		margin-inline-end: 0;
	}

	.ta-spreads-hero__media {
		position: static;
		inline-size: auto;
		margin-inline: clamp(20px, 2.2vw, 32px);
		margin-block-start: 32px;
	}

	.ta-spreads-hero__media::after {
		content: none;
	}

	.ta-spreads-hero__frame {
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 10;
		max-block-size: 420px;
		border-radius: 20px;
	}

	html[dir="ltr"] .ta-spreads-hero__frame {
		border-radius: 20px;
	}

	/* The detail hero stacks: copy first, then the diagram stage. */
	.ta-spreads-detail-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 3.4vw, 44px);
	}

	.ta-spreads-detail-hero__body {
		max-inline-size: none;
	}

	.ta-spreads-stage {
		max-inline-size: 520px;
		margin-inline: auto;
	}
}

/*
 * Three columns stop holding a ~320px card before the tablet breakpoint, so the
 * rows step down a column at a time on the card's own measure rather than on a
 * device label.
 */
/*
 * Desktop three-column layout only: a final row that holds exactly one card is
 * centred in the middle column instead of sitting alone against the reading edge.
 *
 * The test is the card's own position, not a count: an item that starts a new
 * row (`3n + 1`) and is also the last one is by definition alone on its row. It
 * works for any inventory size, and because it lives inside the three-column
 * width it cannot leak into the two- or one-column layouts.
 */
@media (min-width: 1100px) {
	.ta-spreads-hub__grid > .ta-spreads-card:last-child:nth-child(3n + 1) {
		grid-column: 2;
	}
}

@media (max-width: 1099px) {
	.ta-spreads-hub__grid,
	.ta-spreads-related__grid,
	.ta-spreads-prereq__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.ta-spreads-wrap {
		max-inline-size: 1180px;
	}

	.ta-spreads-positions__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-spreads-course__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
	}
}

@media (max-width: 767px) {
	.ta-spreads-wrap {
		padding-inline: clamp(18px, 4.4vw, 20px);
	}

	.ta-spreads-hero__media {
		margin-inline: clamp(18px, 4.4vw, 20px);
	}

	.ta-spreads-hero__title,
	.ta-spreads-detail-hero__title {
		font-size: clamp(38px, 10.4vw, 44px);
	}

	.ta-spreads-h2 {
		font-size: clamp(30px, 7.6vw, 34px);
	}

	.ta-spreads-card__title,
	.ta-spreads-position__title {
		font-size: clamp(22px, 6.2vw, 26px);
	}

	.ta-spreads-prose {
		font-size: 17px;
	}

	.ta-spreads-prose h2 {
		font-size: clamp(30px, 7.8vw, 34px);
	}

	.ta-spreads-prose h3 {
		font-size: clamp(24px, 6vw, 27px);
	}

	.ta-spreads-course__panel {
		grid-template-columns: minmax(0, 1fr);
		min-block-size: 0;
	}

	.ta-spreads-course__media {
		order: 1;
		aspect-ratio: 16 / 10;
	}

	.ta-spreads-course__action {
		inline-size: 100%;
		justify-content: center;
	}

	.ta-spreads-preview-state {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 22px 20px;
	}

	.ta-spreads-preview-state__action {
		justify-self: start;
	}
}

/* Two columns only while a card still holds a readable title. */
@media (max-width: 699px) {
	.ta-spreads-hub__grid,
	.ta-spreads-related__grid,
	.ta-spreads-prereq__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 519px) {
	.ta-spreads-wrap {
		padding-inline: 18px;
	}

	.ta-spreads-position {
		padding: 22px;
	}

	.ta-spreads-position__no {
		inline-size: 40px;
		block-size: 40px;
		font-size: 18px;
	}

	.ta-spreads-stage {
		padding: 14px;
		border-radius: 24px;
	}
}