/* ============================================================
   The Mentoring page (2026-10-24) - "Mentoring v3", desktop only
   (docs/design-renders/mentoring-desktop-v3; the five steps:
   mentoring-fits-blocks; the answers: mentoring-faqs-v3). Measured at
   1440; phones and tablets are not designed, so their treatments are
   working values.
   Most sections are shared: the inner-page hero with its button
   (page-hero.css), the split card (split-card.css), the levels as the
   homepage progression's cards (progression.css), the numbered steps
   (progression.css, as the Coaching page's), the edge cards
   (edge-cards.css), the label cards (label-cards.css), the course
   page's FAQ section (offering-faqs.css, faq.css) and the guided days'
   enquiry (contact-form.css, guiding-enquiry.css). Section paddings are
   the shared --section-pad-y (the file's bands vary by a few px).
   This file loads after contact-form.css, edge-cards.css, faq.css,
   guiding-enquiry.css and label-cards.css, and before offering-faqs.css,
   page-hero.css, progression.css and split-card.css (alphabetical
   order): an override of one of those carries one more class.
   ============================================================ */

/* ---------- Why mentoring ---------- */

/* The split card with its photo on the right and, as drawn, the Cream
   text panel of the photo-left variant. */
.mentoring-why.split-card--image-right .split-card__card {
	background-color: var(--color-surface-warm);
}

/* ---------- The levels ---------- */

/* Light Orange numbers, edges and hover ring (the homepage colours them
   by level). Below 1024 the homepage's carousel; from 1024 a static row
   of three with the drawn 42px gaps and no chevrons. */
.mentoring-levels .progression-card {
	--progression-level: var(--color-accent);
}

@media (min-width: 1024px) {
	.mentoring-levels.progression {
		--progression-gap: 42px;
	}
}

/* The level's name is the card's heading and "Level 1" ... its small
   label (Emma 2026-10-25, after Sam's handover: the design draws them the
   other way round): the two swap sizes, the label at the cards' title
   size (24px Koulen, so its Light Orange counts as large text) and the
   name at the numbers' 30-32px. */
.mentoring-levels .progression-card__top {
	min-height: var(--fs-card-title-lg);
}

.mentoring-levels .progression-card__number {
	font-size: var(--fs-card-title-lg);
}

.mentoring-levels .progression-card__title {
	margin-top: 12px;
	font-size: var(--fs-step-number);
	line-height: 1.15;
}

/* The label's figure in Poppins SemiBold (levels.php): Koulen's "1" is its
   "I" (QH24), as the itinerary labels' figures. */
.mentoring-level__figures {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

/* The details between the name and the link, which keeps to the card's
   foot with at least 28px above it. */
.mentoring-level__body {
	margin: 0 0 28px;
}

/* The price in Poppins, not the drawn Koulen (QH24: Koulen's "1" reads as
   an "I"), SemiBold with its figures as tall as the drawn ones. */
.mentoring-level__price {
	margin: 18px 0 0;
	color: var(--color-heading-on-dark);
	font-size: var(--fs-step-number);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
}

.mentoring-level__meta {
	margin: 16px 0 0;
	color: var(--color-heading-on-dark);
	font-weight: var(--fw-bold);
}

.mentoring-level__text {
	margin-top: 12px;
}

.mentoring-level__text p + p {
	margin-top: 12px;
}

.mentoring-level__points {
	margin-top: 24px;
}

/* Phones: the homepage cards' 14px text. */
@media (max-width: 767px) {
	.mentoring-level__body {
		font-size: var(--fs-small);
	}

	.mentoring-level__meta {
		margin-top: 12px;
	}
}

/* The drawn 46px under the link (the homepage cards' 29). */
@media (min-width: 768px) {
	.mentoring-levels .progression-card {
		padding-bottom: 46px;
	}

	.mentoring-level__price {
		margin-top: 24px;
	}
}

/* ---------- The intakes ---------- */

.mentoring-intakes__header {
	margin-bottom: 24px;
}

.mentoring-intakes__note {
	margin: 0;
	color: var(--color-heading);
	font-weight: var(--fw-bold);
}

/* A rounded frame round the table (a table's own border does not take
   the radius); the header row and every other row Grey Faint, rules
   between the rows, as drawn. The table fits a 320px phone (breaks after
   the slashes, intakes.php); a longer word typed later scrolls sideways
   instead of being cut off. */
.mentoring-intakes__frame {
	margin-top: 32px;
	overflow-x: auto;
	border: var(--border-hairline) solid var(--dates-rule);
	border-radius: var(--radius-md);
}

.mentoring-intakes__table {
	width: 100%;
	border-collapse: collapse;
	color: var(--color-text);
	text-align: left;
}

.mentoring-intakes__table th,
.mentoring-intakes__table td {
	padding: 14px 12px;
	vertical-align: middle;
}

.mentoring-intakes__table thead th {
	padding-block: 15px;
	background-color: var(--dates-surface-alt);
	color: var(--color-heading);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.1em;
	line-height: var(--lh-body);
	text-transform: uppercase;
}

.mentoring-intakes__table tbody tr {
	border-top: var(--border-hairline) solid var(--dates-rule);
}

.mentoring-intakes__table tbody tr:nth-child(even) {
	background-color: var(--dates-surface-alt);
}

/* The intake's name heads its row: in the text's weight, as drawn. */
.mentoring-intakes__table tbody th {
	font-weight: var(--fw-regular);
}

.mentoring-intakes__actions {
	margin: 32px 0 0;
	text-align: center;
}

/* Phones: narrower cells, the 14px text. */
@media (max-width: 767px) {
	.mentoring-intakes__table {
		font-size: var(--fs-small);
	}

	.mentoring-intakes__table th,
	.mentoring-intakes__table td {
		padding-inline: 10px;
	}
}

/* Tablets and up: the drawn columns (344 : 484 : 441 at 1440), 24px in,
   rows at least 107px tall. */
@media (min-width: 768px) {
	.mentoring-intakes__table th,
	.mentoring-intakes__table td {
		padding: 20px 24px;
	}

	.mentoring-intakes__table thead th {
		padding-block: 15px;
		font-size: var(--fs-small);
	}

	.mentoring-intakes__table thead th:first-child {
		width: 27%;
	}

	.mentoring-intakes__table thead th:nth-child(2) {
		width: 38%;
	}

	.mentoring-intakes__table tbody tr {
		height: 107px;
	}

	.mentoring-intakes__actions {
		margin-top: 32px;
	}
}

/* ---------- Practical delivery ---------- */

/* The labels' column wide enough for "WORKSHOP PLACES" on one line (the
   drawn labels are 128-134px wide; Coaching's are 81), with the drawn
   insets (28px left, 28 to the text, 17 right, the text centred down the
   card), so the texts keep the drawn line counts. */
.label-cards.mentoring-delivery {
	--label-cards-label-w: 136px;
}

/* The label over its text up to 599px (the component does so below 480:
   beside these wider labels the text would keep only about 230px). */
@media (max-width: 599px) {
	.label-cards.mentoring-delivery .label-card {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}
}

@media (min-width: 600px) {
	.label-cards.mentoring-delivery .label-card {
		column-gap: 28px;
		padding: 16px 17px 13px 28px;
	}
}

/* 1024-1199 (not designed): the cards take two thirds of the row, so the
   text beside the wider labels keeps about 360px (the drawn split would
   leave it about 240). From 1200 the drawn split: the cards 655 of 1280
   at 1440 (Coaching's 646). */
@media (min-width: 1024px) {
	.mentoring-delivery .label-cards__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
}

@media (min-width: 1200px) {
	.mentoring-delivery .label-cards__inner {
		grid-template-columns: minmax(0, 561fr) minmax(0, 655fr);
	}
}

/* ---------- FAQs ---------- */

/* The course page's FAQ section on Secondary Navy, as drawn. One group, so
   no tabs under the H2: the first question follows it as drawn (its text
   about 43px under the heading's line box, the question's own padding). */
.mentoring-page .offering-faqs.section--navy {
	background-color: var(--color-surface-dark-alt);
}

.mentoring-page .offering-faqs .offering-faqs__title {
	margin-bottom: 0;
}