/*
 * Tarot Arabi — P09 Tarot Arabi Academy courses
 *
 * The course catalogue, the Tarot courses hub and the single course product.
 *
 * This is a composition layer, not a new design language: tokens, buttons,
 * badges, breadcrumbs and icons all come from the global layers, and both Page
 * heroes mirror the approved Page-family hero geometry so the course section is
 * unmistakably part of the same site. What is its own is the course object — a
 * landscape product plate rather than portrait artwork, a filter grammar built
 * from the real taxonomy, and a curriculum that reads as a chapter list.
 *
 * Loaded only on course surfaces: the homepage, the Learn family, the card
 * library and the spread family each keep their own system, and none of them
 * receives these rules.
 */

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

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

	--ta-courses-line: 1px solid var(--color-border);
	--ta-courses-shadow: 0 4px 18px rgba(23, 79, 58, 0.06);
	--ta-courses-shadow-hover: 0 12px 30px rgba(23, 79, 58, 0.1);
	--ta-courses-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-courses-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-courses .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;
}

/*
 * The badge list primitive also lives in the homepage layer, so the family
 * restates the list itself and then unifies the badge surface.
 *
 * Every factual course attribute (level, تلغرام, وصول, شهادة, صيغة, مواد) is
 * metadata: none of them is a button, a promotion or a pricing marker, so none of
 * them may wear an action-like brass outline. Two quiet surfaces only — a neutral
 * plate and one sage emphasis plate — and no badge has a hover state of its own.
 */
.ta-courses .ta-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-courses .ta-badge {
	min-block-size: 28px;
	padding-block: 0;
	padding-inline: 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xs);
	background-color: var(--color-surface);
	color: var(--color-green-900);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: 1;
}

.ta-courses .ta-badge--level,
.ta-courses .ta-badge--bundle,
.ta-courses .ta-badge--physical {
	background-color: var(--color-sage-100);
	border-color: transparent;
	color: var(--color-green-900);
}

/*
 * 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-courses > article > * {
	padding-block: 0;
}

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

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

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

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

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

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

.ta-courses-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;
}

/* ------------------------------------------------------ Neutral media plate */

.ta-courses-plate {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	min-block-size: 100%;
	background-color: var(--color-sage-100);
	background-image: linear-gradient(158deg, var(--color-sage-100) 0%, var(--color-ivory) 52%, var(--color-surface-warm) 100%);
}

.ta-courses-plate__label {
	position: absolute;
	inset-block-end: 12%;
	inset-inline: 12%;
	color: rgba(23, 79, 58, 0.42);
	font-family: var(--font-heading);
	font-size: clamp(13px, 1vw, 15px);
	font-weight: var(--weight-bold);
	line-height: 1.4;
	text-align: center;
	text-wrap: balance;
}

/* ============================================================== Page hero */

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

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

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

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

.ta-courses-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-courses-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-courses-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-courses-hero-copy) - clamp(20px, 2.2vw, 32px) - 16px)
	);
}

.ta-courses-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-courses-hero__frame {
	border-radius: 0 18px 18px 0;
}

.ta-courses-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-courses-hero__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-block-start: 54%;
	inset-inline-start: calc(var(--ta-courses-hero-arc-bite) - var(--ta-courses-hero-arc));
	inline-size: var(--ta-courses-hero-arc);
	block-size: var(--ta-courses-hero-arc);
	border-radius: 50%;
	background-color: var(--color-bg);
	transform: translateY(-50%);
	pointer-events: none;
}

/* ========================================================== Catalogue grid */

.ta-courses-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 28px);
	align-items: stretch;
}

/* ============================================================= Course card */

.ta-courses-card {
	display: flex;
	min-inline-size: 0;
}

/*
 * One interactive root per card. The link fills the cell and is never
 * transformed, so the pointer can never fall out of the card mid-move; the card
 * itself is what lifts.
 */
.ta-courses-card__link {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	overflow: hidden;
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--ta-courses-shadow);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ta-courses-card__link:focus-visible {
	outline: 2px solid var(--color-gold-action);
	outline-offset: 3px;
}

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

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

/*
 * The body fills whatever height the card has, so a card with fewer confirmed
 * facts does not end early: the CTA's `margin-block-start: auto` then lands every
 * CTA in a row on the same baseline.
 */
.ta-courses-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	min-inline-size: 0;
	padding: clamp(18px, 1.6vw, 22px);
}

/*
 * The card body reads top to bottom the way a course is judged: area, name,
 * level, what it includes, how it is delivered, what makes it different, action.
 * Every row is conditional, so a card with fewer confirmed facts is shorter
 * rather than padded with placeholders.
 */
.ta-courses-card__area {
	color: var(--color-gold-action);
	font-size: clamp(13px, 1vw, 14px);
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-courses-card__title {
	margin-block-start: 9px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(23px, 1.75vw, 26px);
	font-weight: var(--weight-bold);
	line-height: 1.35;
	text-wrap: balance;
	/* Two lines are reserved so a short title cannot collapse the card and pull
	   its CTA out of line with the cards beside it. */
	min-block-size: 2.7em;
}

.ta-courses-card__level,
.ta-courses-card__facts {
	margin-block-start: 10px;
}

.ta-courses-card__delivery,
.ta-courses-card__highlight {
	margin-block-start: 10px;
	font-size: 14px;
	line-height: 1.6;
}

.ta-courses-card__delivery-label {
	color: var(--color-text-muted);
}

.ta-courses-card__delivery-value {
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

/* The one line that separates two neighbouring courses. */
.ta-courses-card__highlight {
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
}

.ta-courses-card__price {
	margin-block-start: 12px;
	color: var(--color-heading);
	font-size: 17px;
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-courses-card__price del {
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: var(--weight-regular);
}

.ta-courses-card__price ins {
	text-decoration: none;
}

/*
 * The one CTA. It sits at the bottom of every card so the row of CTAs lines up,
 * and its arrow is the only thing that moves on hover.
 */
.ta-courses-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: auto;
	padding-block-start: 16px;
	color: var(--color-gold-action);
	font-size: 15px;
	font-weight: var(--weight-bold);
}

.ta-courses-card__link:hover .ta-icon--directional {
	transform: translateX(-4px);
}

.ta-courses-card__link:hover .ta-courses-card__cta {
	color: var(--color-gold-action-hover);
}

/* ================================================================ Filters */

.ta-courses-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.ta-courses-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-block-size: 44px;
	padding-inline: 16px;
	border: var(--ta-courses-line);
	border-radius: var(--radius-pill);
	background-color: var(--color-surface);
	color: var(--color-green-900);
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--weight-bold);
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.ta-courses-filter:hover {
	border-color: var(--color-gold-action);
}

.ta-courses-filter:focus-visible {
	outline: 2px solid var(--color-gold-action);
	outline-offset: 2px;
}

.ta-courses-filter.is-active {
	background-color: var(--color-green-900);
	border-color: var(--color-green-900);
	color: var(--color-white);
}

.ta-courses-filter__count {
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: var(--weight-bold);
}

.ta-courses-filter.is-active .ta-courses-filter__count {
	color: var(--color-on-deep-muted);
}

.ta-courses-filters__status {
	margin: var(--space-5) 0 0;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

/*
 * The filtered-out state. It is applied only by the script, so with JavaScript
 * unavailable every course stays in the document and on screen.
 */
.ta-courses-js .ta-courses-card.is-filtered-out {
	display: none;
}

.ta-courses-js .ta-courses-card.is-filtering {
	opacity: 0;
	transform: translateY(6px);
}

.ta-courses-card {
	transition: opacity 180ms ease, transform 180ms ease;
}

/* ============================================================= Comparison */

.ta-courses-compare__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(20px, 2vw, 28px);
	align-items: start;
}

.ta-courses-compare__col {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
	box-shadow: var(--ta-courses-shadow);
}

.ta-courses-compare__head {
	padding: clamp(20px, 1.8vw, 24px);
}

.ta-courses-compare__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius-md);
	background-color: var(--color-sage-100);
}

.ta-courses-compare__title {
	margin: 16px 0 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.5vw, 22px);
	font-weight: var(--weight-bold);
	line-height: 1.26;
}

.ta-courses-compare__link {
	color: inherit;
	text-decoration: none;
}

.ta-courses-compare__link:hover {
	text-decoration: underline;
}

.ta-courses-compare__link:focus-visible {
	outline: 2px solid var(--color-gold-action);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

.ta-courses-compare__price {
	margin: 10px 0 0;
	color: var(--color-heading);
	font-size: 16px;
	font-weight: var(--weight-bold);
}

/*
 * The shared label set, rendered as a two-column grid so the same label starts
 * at the same height in every column. The row floor is what keeps the columns
 * aligned without a single value being printed as a dash.
 */
.ta-courses-compare__rows {
	display: grid;
	grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
	gap: 0 14px;
	grid-auto-rows: minmax(2.6em, auto);
	margin: 0;
	padding: clamp(16px, 1.6vw, 20px) clamp(20px, 1.8vw, 24px) clamp(20px, 1.8vw, 24px);
	border-block-start: var(--ta-courses-line);
	background-color: var(--color-bg);
}

.ta-courses-compare__label {
	align-self: center;
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: var(--weight-bold);
}

.ta-courses-compare__value {
	align-self: center;
	margin: 0;
	color: var(--color-text);
	font-size: 15px;
}

/* ================================================== Editor-only dev states */

.ta-courses-preview-state,
.ta-courses-admin-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	max-inline-size: var(--ta-courses-reading);
	padding: clamp(18px, 1.6vw, 22px);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
}

.ta-courses-preview-state__icon {
	display: inline-flex;
	color: var(--color-gold-action);
}

.ta-courses-preview-state__body {
	flex: 1 1 260px;
}

.ta-courses-preview-state__title,
.ta-courses-admin-note__title {
	margin: 0;
	color: var(--color-heading);
	font-size: 15px;
	font-weight: var(--weight-bold);
}

.ta-courses-preview-state__text,
.ta-courses-admin-note__text {
	margin: 6px 0 0;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.7;
}

.ta-courses-preview-state__action,
.ta-courses-admin-note__action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-gold-action);
	font-size: 14px;
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.ta-courses-preview-state__action:hover .ta-icon--directional,
.ta-courses-admin-note__action:hover .ta-icon--directional {
	transform: translateX(-4px);
}

/* ========================================================== Product hero */

.ta-courses-product-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 440px);
	gap: clamp(48px, 4.6vw, 68px);
	align-items: center;
}

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

.ta-courses-product-hero__eyebrow {
	margin: clamp(18px, 1.5vw, 20px) 0 0;
}

.ta-courses-product-hero__title {
	margin: clamp(12px, 1vw, 16px) 0 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(38px, 3.6vw, 54px);
	font-weight: var(--weight-bold);
	line-height: 1.14;
	text-wrap: balance;
}

.ta-courses-product-hero__lead {
	margin: clamp(14px, 1.2vw, 18px) 0 0;
	max-inline-size: 62ch;
	color: var(--color-text-muted);
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.8;
}

.ta-courses-product-hero__facts {
	margin-block-start: clamp(18px, 1.6vw, 22px);
}

/*
 * The plate: a landscape stage with a soft sage backing and a small offset
 * depth, because course imagery is never a tall portrait poster.
 */
.ta-courses-product-hero__stage {
	position: relative;
	min-inline-size: 0;
}

.ta-courses-product-hero__stage::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 14px -14px -14px 14px;
	border-radius: var(--radius-2xl);
	background-color: var(--color-sage-100);
}

html[dir="ltr"] .ta-courses-product-hero__stage::before {
	inset: 14px 14px -14px -14px;
}

.ta-courses-product-hero__plate {
	position: relative;
	z-index: 1;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: var(--ta-courses-line);
	border-radius: var(--radius-2xl);
	background-color: var(--color-surface);
}

/* ========================================================== Detail facts */

/*
 * ONE contained facts component, not a row of dashboard tiles: a single surface
 * with a 1px divider, split into compact cells by internal rules. The label is
 * small and muted, the value larger and Deep Green, so the module reads as one
 * information block rather than several competing cards.
 *
 * The internal tracks are twelve wide and the REAL number of confirmed facts
 * decides how many tracks each cell takes, so the final row is always filled.
 * A course with seven facts therefore ends on three even cells instead of
 * leaving an eighth track empty — the divider colour showing through an empty
 * track would read as a missing fact, and an absent fact must simply be absent.
 */
.ta-courses-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* The internal rules are the 1px gaps showing the border colour through, so
	   they stay correct at every column count with no per-child rules at all. */
	gap: 1px;
	margin: 0;
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-border);
	overflow: hidden;
}

.ta-courses-facts__cell {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-inline-size: 0;
	padding: clamp(15px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px);
	background-color: var(--color-surface);
}

/* The confirmed count leads and is the one cell with an emphasis surface. */
.ta-courses-facts__cell--count {
	background-color: var(--color-sage-100);
}

.ta-courses-facts__label {
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: var(--weight-bold);
	line-height: 1.4;
}

.ta-courses-facts__value {
	margin: 0;
	color: var(--color-heading);
	font-size: clamp(16px, 1.25vw, 18px);
	font-weight: var(--weight-bold);
	line-height: 1.45;
}

/*
 * The layout is driven by the real fact count, not by a fixed matrix: the tracks
 * a cell takes are the only thing that changes, so an eight-fact course keeps the
 * familiar four-per-row composition while a seven-fact course ends on three even
 * cells. Each rule only ever fills the final row with the facts that exist.
 */

/* Tablet: two per row, and a leftover fact takes the whole row. */
@media (min-width: 700px) and (max-width: 1099px) {
	.ta-courses-facts {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.ta-courses-facts__cell {
		grid-column: span 6;
	}

	.ta-courses-facts--count-1 > .ta-courses-facts__cell,
	.ta-courses-facts--count-3 > .ta-courses-facts__cell:nth-child(n + 3),
	.ta-courses-facts--count-5 > .ta-courses-facts__cell:nth-child(n + 5),
	.ta-courses-facts--count-7 > .ta-courses-facts__cell:nth-child(n + 7) {
		grid-column: span 12;
	}
}

/* Desktop: four per row, and a leftover row shares the width evenly. */
@media (min-width: 1100px) {
	.ta-courses-facts {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.ta-courses-facts__cell {
		grid-column: span 3;
	}

	.ta-courses-facts--count-1 > .ta-courses-facts__cell {
		grid-column: span 12;
	}

	.ta-courses-facts--count-2 > .ta-courses-facts__cell {
		grid-column: span 6;
	}

	.ta-courses-facts--count-3 > .ta-courses-facts__cell {
		grid-column: span 4;
	}

	.ta-courses-facts--count-5 > .ta-courses-facts__cell:nth-child(n + 5) {
		grid-column: span 12;
	}

	.ta-courses-facts--count-6 > .ta-courses-facts__cell:nth-child(n + 5) {
		grid-column: span 6;
	}

	.ta-courses-facts--count-7 > .ta-courses-facts__cell:nth-child(n + 5) {
		grid-column: span 4;
	}
}

/* ============================================================ Closing CTA */

/*
 * The catalogue's closing module: one contained sage panel, the copy on the
 * reading side and the action opposite it, so the page ends on a composed note
 * instead of a heading and a small floating button in empty space.
 */
.ta-courses-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 3vw, 48px);
	padding: clamp(28px, 2.6vw, 40px) clamp(26px, 2.6vw, 44px);
	border-radius: 24px;
	background-color: var(--color-sage-100);
}

.ta-courses-cta__body {
	flex: 1 1 380px;
	min-inline-size: 0;
}

.ta-courses-cta__title {
	margin-block-start: 10px;
	font-size: clamp(28px, 2.6vw, 38px);
}

.ta-courses-cta__text {
	margin: clamp(12px, 1.2vw, 16px) 0 0;
	max-inline-size: 56ch;
	color: var(--color-green-800);
	font-size: 17px;
	line-height: 1.8;
}

.ta-courses-cta__action {
	flex: 0 0 auto;
}

/* ======================================================== Article language */

.ta-courses-prose {
	max-inline-size: 72ch;
	color: var(--color-text);
	font-size: 18px;
	line-height: 1.92;
}

.ta-courses-prose > * + * {
	margin-block-start: 1.1em;
}

.ta-courses-prose h2 {
	margin-block-start: 1.5em;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(32px, 2.8vw, 40px);
	font-weight: var(--weight-bold);
	line-height: 1.2;
}

.ta-courses-prose h3 {
	margin-block-start: 1.4em;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(24px, 2vw, 29px);
	font-weight: var(--weight-bold);
	line-height: 1.24;
}

.ta-courses-prose ul,
.ta-courses-prose ol {
	padding-inline-start: 1.4em;
}

.ta-courses-prose li + li {
	margin-block-start: 0.5em;
}

.ta-courses-prose a {
	color: var(--color-gold-action);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ta-courses-prose blockquote {
	margin: 1.5em 0;
	padding-inline-start: 20px;
	border-inline-start: 3px solid var(--color-accent);
	color: var(--color-text-muted);
}

.ta-courses-prose figure {
	margin: 1.6em 0;
}

.ta-courses-prose img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--radius-lg);
}

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

.ta-courses-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.ta-courses-prose th,
.ta-courses-prose td {
	padding: 10px 12px;
	border-block-end: var(--ta-courses-line);
	text-align: start;
}

/* =============================================================== Outcomes */

.ta-courses-outcomes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-courses-outcomes__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: clamp(18px, 1.6vw, 22px);
	border: var(--ta-courses-line);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
}

.ta-courses-outcomes__icon {
	display: inline-flex;
	flex: 0 0 auto;
	margin-block-start: 2px;
	color: var(--color-gold-action);
}

.ta-courses-outcomes__text {
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.7;
}

/* =============================================================== Audience */

.ta-courses-audience__list {
	max-inline-size: var(--ta-courses-reading);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-courses-audience__item {
	position: relative;
	padding-inline-start: 26px;
	color: var(--color-text);
	font-size: 17px;
	line-height: 1.8;
}

.ta-courses-audience__item + .ta-courses-audience__item {
	margin-block-start: 12px;
}

.ta-courses-audience__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.72em;
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: var(--color-accent);
}

/* =========================================================== Prerequisite */

.ta-courses-prereq__panel {
	max-inline-size: var(--ta-courses-reading);
	padding: clamp(22px, 2vw, 28px);
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface-warm);
}

.ta-courses-prereq__title {
	margin-block-start: 10px;
	font-size: clamp(24px, 2.2vw, 30px);
}

.ta-courses-prereq__body {
	margin-block-start: 14px;
	font-size: 17px;
}

/* ============================================================= Curriculum */

.ta-courses-curriculum__list,
.ta-courses-faq__list {
	max-inline-size: 900px;
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
	overflow: hidden;
}

.ta-courses-curriculum__item + .ta-courses-curriculum__item,
.ta-courses-faq__item + .ta-courses-faq__item {
	border-block-start: var(--ta-courses-line);
}

.ta-courses-curriculum__summary,
.ta-courses-faq__summary {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: clamp(16px, 1.5vw, 20px) clamp(18px, 1.7vw, 24px);
	cursor: pointer;
	list-style: none;
}

.ta-courses-curriculum__summary::-webkit-details-marker,
.ta-courses-faq__summary::-webkit-details-marker {
	display: none;
}

.ta-courses-curriculum__summary:focus-visible,
.ta-courses-faq__summary:focus-visible {
	outline: 2px solid var(--color-gold-action);
	outline-offset: -3px;
}

.ta-courses-curriculum__no {
	flex: 0 0 auto;
	color: var(--color-gold-action);
	font-size: 14px;
	font-weight: var(--weight-bold);
}

.ta-courses-curriculum__title,
.ta-courses-faq__question {
	flex: 1 1 auto;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(18px, 1.5vw, 21px);
	font-weight: var(--weight-bold);
	line-height: 1.35;
}

.ta-courses-curriculum__marker,
.ta-courses-faq__marker {
	flex: 0 0 auto;
	color: var(--color-text-muted);
	transition: transform 200ms ease;
}

.ta-courses-curriculum__item[open] .ta-courses-curriculum__marker,
.ta-courses-faq__item[open] .ta-courses-faq__marker {
	transform: rotate(180deg);
}

.ta-courses-curriculum__body,
.ta-courses-faq__body {
	padding: 0 clamp(18px, 1.7vw, 24px) clamp(18px, 1.7vw, 22px);
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.8;
}

.ta-courses-curriculum__body > * + *,
.ta-courses-faq__body > * + * {
	margin-block-start: 0.8em;
}

/* ============================================================== Materials */

/*
 * A compact contained set: each confirmed resource is its own small surface, and
 * the column count follows how many resources the course really has, so a course
 * with a single PDF gets one modest item rather than a stretched banner.
 */
.ta-courses-materials__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.4vw, 18px);
	max-inline-size: 980px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-courses-materials__list--1 {
	grid-template-columns: minmax(0, 420px);
}

.ta-courses-materials__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ta-courses-materials__item {
	display: flex;
	align-items: center;
	min-block-size: 72px;
	padding: clamp(16px, 1.5vw, 20px) clamp(18px, 1.7vw, 22px);
	border: var(--ta-courses-line);
	border-radius: 17px;
	background-color: var(--color-surface);
	color: var(--color-heading);
	font-size: 16px;
	font-weight: var(--weight-bold);
	line-height: 1.55;
}

/* ============================================================ Instructor */

.ta-courses-instructor__panel {
	display: flex;
	align-items: center;
	gap: clamp(24px, 2.4vw, 40px);
	max-inline-size: 900px;
	padding: clamp(22px, 2vw, 30px);
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
}

.ta-courses-instructor__media {
	flex: 0 0 auto;
	inline-size: clamp(96px, 12vw, 160px);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--color-sage-100);
}

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

.ta-courses-instructor__body {
	min-inline-size: 0;
}

.ta-courses-instructor__title {
	margin-block-start: 10px;
	font-size: clamp(24px, 2.2vw, 32px);
}

.ta-courses-instructor__text {
	margin: 14px 0 0;
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.85;
}

.ta-courses-instructor__body .ta-button {
	margin-block-start: 20px;
}

/* ========================================================== Testimonials */

.ta-courses-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.6vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-courses-testimonials__item {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 1.8vw, 24px);
	border: var(--ta-courses-line);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
}

.ta-courses-testimonials__icon {
	display: inline-flex;
	color: var(--color-accent);
}

.ta-courses-testimonials__quote {
	margin: 0;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.8;
}

.ta-courses-testimonials__name {
	margin: auto 0 0;
	color: var(--color-heading);
	font-size: 15px;
	font-weight: var(--weight-bold);
}

.ta-courses-testimonials__country {
	display: block;
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: var(--weight-regular);
}

/* ============================================================== Purchase */

.ta-courses-purchase__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 2vw, 32px);
	padding: clamp(24px, 2.2vw, 32px);
	border: var(--ta-courses-line);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
	box-shadow: var(--ta-courses-shadow);
}

.ta-courses-purchase__title {
	margin-block-start: 10px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: var(--weight-bold);
	line-height: 1.2;
}

.ta-courses-purchase__price {
	margin: 12px 0 0;
	color: var(--color-heading);
	font-size: 20px;
	font-weight: var(--weight-bold);
}

.ta-courses-purchase__price del {
	color: var(--color-text-muted);
	font-size: 16px;
	font-weight: var(--weight-regular);
}

.ta-courses-purchase__price ins {
	text-decoration: none;
}

.ta-courses-purchase__action .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

/* The hero placement sits inside the hero, so it owns its own leading space. */
.ta-courses-purchase--hero {
	padding-block-start: clamp(28px, 3vw, 40px);
}

.ta-courses-purchase--pending {
	padding-block-start: clamp(24px, 2.6vw, 36px);
}

/* ========================================================= Related + next */

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

.ta-courses-next__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ta-courses-related__item {
	display: flex;
}

.ta-courses-related__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	inline-size: 100%;
	gap: 0;
	padding: clamp(20px, 1.8vw, 24px);
	border: var(--ta-courses-line);
	border-radius: var(--radius-lg);
	background-color: var(--color-surface);
	color: inherit;
	text-decoration: none;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ta-courses-related__link:focus-visible {
	outline: 2px solid var(--color-gold-action);
	outline-offset: 3px;
}

.ta-courses-related__type {
	color: var(--color-gold-action);
	font-size: 13px;
	font-weight: var(--weight-bold);
}

.ta-courses-related__title {
	margin-block-start: 10px;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.6vw, 22px);
	font-weight: var(--weight-bold);
	line-height: 1.28;
}

.ta-courses-related__excerpt {
	margin-block-start: 10px;
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.75;
}

.ta-courses-related__link .ta-courses-card__cta {
	padding-block-start: 18px;
}

.ta-courses-related__link:hover .ta-icon--directional {
	transform: translateX(-4px);
}

/* ================================================================= Motion */

/*
 * The same grammar as the rest of the site, scoped to a class the course script
 * adds itself: with JavaScript unavailable nothing is ever hidden, and if the
 * observer never reports, the fallback timer reveals everything.
 *
 * A catalogue of thirty cards never cascades: the stagger is capped at three
 * steps so the grid settles as a group.
 */
.ta-courses-js .ta-courses [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms),
		transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms);
}

.ta-courses-js .ta-courses [data-reveal="media"] {
	transform: translateY(14px) scale(0.985);
	transition:
		opacity 640ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms),
		transform 640ms cubic-bezier(0.22, 1, 0.36, 1) var(--ta-reveal-delay, 0ms);
}

.ta-courses-js .ta-courses [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

.ta-courses-js .ta-courses [data-reveal-group] > [data-reveal]:nth-child(2) {
	--ta-reveal-delay: 70ms;
}

.ta-courses-js .ta-courses [data-reveal-group] > [data-reveal]:nth-child(3) {
	--ta-reveal-delay: 140ms;
}

.ta-courses-js .ta-courses [data-reveal-group] > [data-reveal]:nth-child(n + 4) {
	--ta-reveal-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
	.ta-courses-js .ta-courses [data-reveal],
	.ta-courses-js .ta-courses [data-reveal="media"],
	.ta-courses-js .ta-courses [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ta-courses-card,
	.ta-courses-card__link,
	.ta-courses-related__link,
	.ta-courses-filter,
	.ta-courses-curriculum__marker,
	.ta-courses-faq__marker {
		transition: none;
	}

	.ta-courses-card__link:hover,
	.ta-courses-related__link:hover {
		transform: none;
	}

	.ta-courses-card__link:hover .ta-icon--directional,
	.ta-courses-related__link:hover .ta-icon--directional {
		transform: none;
	}
}

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

/*
 * In the three-column catalogue the card is about 381px wide, where a true 16:10
 * plate would be 237px tall — enough to push the body past the intended card
 * height. The plate keeps its 16:10 ratio everywhere and is simply capped here,
 * so the image never dominates the product information it sits above.
 */
@media (min-width: 1100px) {
	.ta-courses-card__media {
		max-block-size: 215px;
	}

	/*
	 * The hub's academy areas rarely divide by three, and an incomplete final row
	 * otherwise reads as an accident. Its groups therefore place their cards on a
	 * six-track grid — every card still spans exactly one third, so no card changes
	 * width — which leaves a half-track free on each side for a centred pair and a
	 * whole track on each side for a centred single card.
	 */
	.ta-courses-hub__area .ta-courses-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ta-courses-hub__area .ta-courses-card {
		grid-column: span 2;
	}

	/* Two cards left over: the pair is centred as a unit. */
	.ta-courses-hub__area .ta-courses-card:nth-last-child(2):nth-child(3n + 1) {
		grid-column: 2 / span 2;
	}

	.ta-courses-hub__area .ta-courses-card:last-child:nth-child(3n + 2) {
		grid-column: 4 / span 2;
	}

	/* One card left over: it is centred in the middle. */
	.ta-courses-hub__area .ta-courses-card:last-child:nth-child(3n + 1) {
		grid-column: 3 / span 2;
	}
}

@media (max-width: 1119px) {
	.ta-courses-hero__media {
		inline-size: 46vw;
	}
}

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

	/* The facts module's own breakpoints live with the component. */
	.ta-courses-materials__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-courses-materials__list--1 {
		grid-template-columns: minmax(0, 420px);
	}

	.ta-courses-product-hero__grid {
		grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 360px);
		gap: clamp(32px, 4vw, 48px);
	}
}

@media (max-width: 1023px) {
	.ta-courses-hero {
		display: flex;
		flex-direction: column;
		min-block-size: 0;
	}

	.ta-courses-hero__media {
		position: relative;
		order: 2;
		inline-size: 100%;
		margin-block-start: clamp(28px, 4vw, 40px);
		block-size: clamp(220px, 34vw, 300px);
	}

	.ta-courses-hero__media::after {
		display: none;
	}

	.ta-courses-hero__frame {
		border-radius: 0;
	}

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

	.ta-courses-hero__wrap {
		order: 1;
	}

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

@media (max-width: 899px) {
	/* Below this width the split hero stops being comfortable, so the copy leads
	   and the media follows it. */
	.ta-courses-product-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(28px, 4vw, 40px);
	}

	.ta-courses-product-hero__stage {
		order: 2;
		max-inline-size: 520px;
	}

	.ta-courses-instructor__panel {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	.ta-courses-compare__grid,
	.ta-courses-next__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-courses-purchase__panel {
		flex-direction: column;
		align-items: stretch;
	}

	.ta-courses-purchase__action .cart {
		justify-content: stretch;
	}

	.ta-courses-purchase__action .button {
		inline-size: 100%;
	}
}

@media (max-width: 699px) {
	.ta-courses-grid,
	.ta-courses-related__grid,
	.ta-courses-outcomes__grid,
	.ta-courses-testimonials__grid,
	.ta-courses-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The closing panel stacks, and its action takes the full width. */
	.ta-courses-cta {
		align-items: stretch;
	}

	.ta-courses-cta__body {
		flex-basis: 100%;
	}

	.ta-courses-cta__action {
		flex: 1 1 100%;
	}

	.ta-courses-cta__action .ta-button {
		inline-size: 100%;
		justify-content: center;
	}
}

@media (max-width: 519px) {
	.ta-courses-hero__title {
		font-size: clamp(34px, 9vw, 40px);
	}

	.ta-courses-product-hero__title {
		font-size: clamp(32px, 10.5vw, 42px);
	}

	.ta-courses-compare__rows {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 0;
	}

	.ta-courses-compare__label {
		margin-block-start: 12px;
	}

	.ta-courses-compare__value {
		margin-block-start: 2px;
	}
}

/* ======================= UI-POLISH-02: framed media, hierarchy, purchase ==== */

/*
 * Framed media must FILL its frame. `block-size: 100%` on a child cannot resolve
 * against a parent whose height comes from `aspect-ratio`, so the photograph kept
 * its own intrinsic ratio and left letterbox bands inside the plate and the card
 * media. Positioning it to the frame's box is what makes cover actually cover.
 * Tarot artwork and book covers keep their own contain-based components.
 */
.ta-courses-card__media,
.ta-courses-compare__media,
.ta-courses-product-hero__plate {
	position: relative;
}

.ta-courses-card__media > img,
.ta-courses-compare__media > img,
.ta-courses-product-hero__plate > img {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ------------------------------------------------- Course card hierarchy */

/*
 * Four or five filled pills in a row read as decoration, not information. The
 * confirmed facts become one quiet metadata line; only the level keeps a badge.
 */
.ta-courses-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}

.ta-courses-card__facts .ta-badge {
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	font-size: 13px;
	font-weight: var(--weight-regular);
}

.ta-courses-card__facts .ta-badge + .ta-badge::before {
	content: "·";
	padding-inline: 8px;
	color: var(--color-text-muted);
}

/* The differentiator is a panel, not another line of bold text. */
.ta-courses-card__highlight {
	margin-block-start: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	background-color: var(--color-sage-100);
	color: var(--color-green-900);
	font-size: 14px;
	font-weight: var(--weight-bold);
	line-height: 1.5;
}

.ta-courses-card__price {
	margin-block-start: 14px;
	color: var(--color-green-900);
	font-size: 24px;
	font-weight: var(--weight-bold);
	line-height: 1.2;
}

.ta-courses-card__price del {
	font-size: 14px;
}

/* ------------------------------------------------------ Comparison cards */

.ta-courses-compare__col {
	border-radius: 20px;
}

.ta-courses-compare__head {
	display: flex;
	flex-direction: column;
}

.ta-courses-compare__title {
	font-size: clamp(20px, 1.5vw, 24px);
}

.ta-courses-compare__price {
	margin-block-start: 8px;
	color: var(--color-green-900);
	font-size: 22px;
	line-height: 1.2;
}

.ta-courses-compare__price del {
	color: var(--color-text-muted);
	font-size: 14px;
	font-weight: var(--weight-regular);
}

.ta-courses-compare__price ins {
	text-decoration: none;
}

/*
 * A specification table, not a stack of boxes: one hairline per row, muted
 * label, stronger value, and the same label column in every course column.
 */
.ta-courses-compare__rows {
	grid-template-columns: minmax(90px, 0.8fr) 1fr;
	grid-auto-rows: auto;
	gap: 0 14px;
	padding: 0 clamp(20px, 1.8vw, 24px) 8px;
	background-color: var(--color-surface);
}

.ta-courses-compare__label,
.ta-courses-compare__value {
	padding-block: 13px;
	border-block-start: var(--ta-courses-line);
}

.ta-courses-compare__label {
	color: var(--color-text-muted);
	font-weight: var(--weight-regular);
}

.ta-courses-compare__value {
	color: var(--color-heading);
	font-weight: var(--weight-bold);
}

/* --------------------------------------------------------- Purchase panel */

.ta-courses-purchase__panel {
	background-color: var(--color-sage-100);
}

.ta-courses-purchase__price {
	color: var(--color-green-900);
	font-size: clamp(30px, 2.6vw, 36px);
	line-height: 1.1;
}

.ta-courses-purchase__price del {
	font-size: 16px;
}

/* WooCommerce ships a purple primary button; this panel never shows it. */
.ta-courses-purchase .quantity .qty,
.ta-courses-purchase input.qty {
	inline-size: 70px;
	min-block-size: 50px;
	padding: 0 8px;
	border: 1px solid rgba(23, 79, 58, 0.28);
	border-radius: 10px;
	background-color: var(--color-surface);
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: 16px;
	text-align: center;
}

.ta-courses-purchase .single_add_to_cart_button,
.ta-courses-purchase button.button.alt,
.ta-courses-purchase a.button.alt {
	min-block-size: 52px;
	padding-block: 0;
	padding-inline: 26px;
	border: 1px solid var(--color-green-900);
	border-radius: 11px;
	background-color: var(--color-green-900);
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--weight-bold);
	line-height: 52px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(23, 79, 58, 0.16);
	transition: background-color var(--duration-interaction) var(--ease-interaction);
}

.ta-courses-purchase .single_add_to_cart_button:hover,
.ta-courses-purchase button.button.alt:hover,
.ta-courses-purchase a.button.alt:hover {
	border-color: var(--color-green-950);
	background-color: var(--color-green-950);
	color: var(--color-white);
}

.ta-courses-purchase .single_add_to_cart_button:focus-visible,
.ta-courses-purchase button.button.alt:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

.ta-courses-purchase .single_add_to_cart_button:disabled,
.ta-courses-purchase button.button.alt:disabled {
	border-color: rgba(23, 79, 58, 0.35);
	background-color: rgba(23, 79, 58, 0.35);
	color: var(--color-white);
}

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

.ta-courses-related__link {
	padding: clamp(20px, 2vw, 26px);
	border-radius: 18px;
}

.ta-courses-related__title {
	font-size: clamp(20px, 1.6vw, 24px);
}

.ta-courses-related__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* ------------------------------------------------------- Phones (390) */

@media (max-width: 639px) {
	.ta-courses-card__body {
		padding: 20px 18px 22px;
	}

	.ta-courses-card__title {
		font-size: 23px;
	}

	.ta-courses-card__price {
		font-size: 26px;
	}

	.ta-courses-card__cta {
		inline-size: 100%;
		margin-block-start: 16px;
	}

	.ta-courses-compare__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ta-courses-purchase__panel {
		padding: 22px 18px;
	}

	.ta-courses-purchase .single_add_to_cart_button,
	.ta-courses-purchase button.button.alt {
		inline-size: 100%;
	}

	.ta-courses-purchase__action .cart {
		flex-direction: column;
		align-items: stretch;
	}

	.ta-courses-related__link {
		padding: 18px 18px 20px;
	}

	.ta-courses-related__grid,
	.ta-courses-next__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}