/* ============================================================
   Label cards (2026-10-24; template-parts/components/label-cards.php):
   the Coaching page's "Which is right for you?" and the Mentoring
   page's "Practical days, workshops and shadowing", measured on their
   v3 designs at 1440 (phones and tablets are not designed).
   The heading left and the cards right from 1024px (the list 646px
   wide at 1440, its top level with the eyebrow); stacked below. Each
   card's label has a column of its own, --label-cards-label-w wide
   (Coaching's 81px; a page sets its own on its section, with one more
   class: this file loads after coaching-page.css and before
   mentoring-page.css).
   The light version (.label-cards--light, the ML Development page's
   "Want a more individual route?", 2026-10-24): a Cream section with
   White cards, Navy text. Linked cards (.label-card--link): the label is
   the link, stretched over the card, and a Light Orange double chevron
   sits at the end (40px, 24px from the edge, as drawn); hover and
   keyboard focus light the card's ring in Light Orange and slide the
   chevron, which turns Dark Orange.
   ============================================================ */

.label-cards {
	--label-cards-label-w: 81px;
}

.label-cards__list {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A Secondary Navy card, 124px tall at least with its text centred
   down it (the one- and two-line cards are drawn the same height):
   the label in a column of its own, the lead-in and text beside it. */
.label-card {
	display: grid;
	grid-template-columns: var(--label-cards-label-w) minmax(0, 1fr);
	column-gap: 32px;
	align-items: center;
	min-height: 127px; /* 124 and the 3px edge */
	padding: 24px 24px 21px 32px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark-alt);
}

.label-card__label {
	font-size: var(--fs-card-title);
	line-height: var(--lh-card-title);
}

.label-card__lead {
	margin: 0;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
}

.label-card__text {
	margin: 1px 0 0;
	font-size: var(--fs-small);
	line-height: 1.6;
}

/* ---------- Light ---------- */

.label-cards--light .label-card {
	background-color: var(--color-surface);
	color: var(--color-text);
}

.label-cards--light .label-card__lead {
	color: var(--color-heading);
}

/* ---------- Linked ---------- */

.label-card--link {
	position: relative;
	grid-template-columns: var(--label-cards-label-w) minmax(0, 1fr) auto;
}

/* The hover ring: a separate layer over the card's edge, faded in, so
   the resting card keeps its drawn bottom edge (as the progression
   cards). */
.label-card--link::before {
	content: "";
	position: absolute;
	inset: 0 0 calc(-1 * var(--border-accent));
	border: var(--border-accent) solid var(--color-accent);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition);
}

.label-card__link {
	color: inherit;
	text-decoration: none;
}

.label-card__link::after {
	bottom: calc(-1 * var(--border-accent));
	border-radius: var(--radius-md);
}

.label-card__link:focus-visible {
	outline: none;
}

.label-card__link:focus-visible::after {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.label-cards--light .label-card__link:focus-visible::after {
	outline-color: var(--color-focus-light);
}

.label-card__chevron {
	width: 40px;
	height: 40px;
	margin-right: -8px;
	color: var(--color-accent);
	transition: transform var(--transition), color var(--transition);
}

.label-card--link:has(.label-card__link:focus-visible)::before {
	opacity: 1;
}

.label-card--link:has(.label-card__link:focus-visible) .label-card__chevron {
	color: var(--color-arrow-hover-on-light);
}

@media (hover: hover) {
	.label-card--link:hover::before {
		opacity: 1;
	}

	.label-card--link:hover .label-card__chevron {
		color: var(--color-arrow-hover-on-light);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.label-card--link:has(.label-card__link:focus-visible) .label-card__chevron {
		transform: translateX(var(--arrow-nudge));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.label-card--link:hover .label-card__chevron {
		transform: translateX(var(--arrow-nudge));
	}
}

/* Narrow phones: the label over its text, so the text keeps its width
   (a linked card keeps its chevron at the end, across both rows). */
@media (max-width: 479px) {
	.label-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
		padding-left: 24px;
	}

	.label-card--link {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.label-card--link .label-card__chevron {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* Windows High Contrast: the hover ring is a border, kept; the White
   card's edge goes, so a transparent outline keeps it. */
@media (forced-colors: active) {
	.label-cards--light .label-card {
		outline: var(--border-hairline) solid transparent;
	}
}

@media (min-width: 1024px) {
	.label-cards__inner {
		display: grid;
		grid-template-columns: minmax(0, 570fr) minmax(0, 646fr);
		column-gap: 64px;
		align-items: start;
	}

	.label-cards__header {
		margin-bottom: 0;
	}
}