/* ============================================================
   The Coaching page (2026-10-24) - "Coaching v3", desktop only
   (docs/design-renders/coaching-desktop-v3; the four steps:
   coaching-how-blocks). Measured at 1440; phones and tablets are not
   designed, so their treatments below are working values.
   The hero is the inner-page hero (page-hero.css) with its button;
   three sections are shared with the Mentoring page: "Which is right
   for you?" (label-cards.css), "How coaching works" (progression.css,
   its numbered steps) and the coach and who coaching suits
   (edge-cards.css); the enquiry is the guided days' (contact-form.css,
   guiding-enquiry.css). Section paddings are the shared
   --section-pad-y (the file's bands vary by a few px), except the
   mentoring band's 56 (--coaching-band-pad-y).
   This file loads before the shared components' files (alphabetical
   order), so an override of one carries one more class.
   ============================================================ */

/* ---------- The programmes and prices ---------- */

/* A Secondary Navy section (the house navy sections are Primary Navy). */
.coaching-packages.section--navy {
	background-color: var(--color-surface-dark-alt);
}

.coaching-packages__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Primary Navy cards, equal in height across a row. The text runs to 20px
   from the right edge, as drawn ("3-DAY DEVELOPMENT" keeps its line).
   Where the browser has subgrid, a row's titles, prices and "Best for"
   lines start level across its cards, as drawn (a one-line title's
   prices sit where a two-line title's do); elsewhere each card stacks
   its own. */
.coaching-package {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
	padding: 30px 20px 36px 35px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark);
}

/* Light Orange, over the navy section's White headings. */
.coaching-packages .coaching-package__title {
	color: var(--color-accent);
	font-size: var(--fs-step-number);
	line-height: 1.344; /* 32/43, the two-line titles' pitch */
}

/* The prices (Sam 2026-11-03: summer and winter, total booking prices; not
   designed): a small table, "SUMMER" / "WINTER" over a hairline, a row for
   1:1 and for 1:2, the amounts in Bold as the drawn price lines. A cell
   over both rows ("Bespoke quote") is regular text, centred down them. */
.coaching-package__prices {
	width: 100%;
	margin: 24px 0 0;
	border-collapse: collapse;
	color: var(--color-heading-on-dark);
	table-layout: fixed; /* the same columns in every card of a row */
	text-align: left;
}

.coaching-package__season {
	padding: 0 8px 8px 0;
	border-bottom: 1px solid var(--coaching-price-rule);
	color: var(--coaching-price-season);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
}

.coaching-package__prices thead td {
	width: 2.5em;
	padding: 0;
	border-bottom: 1px solid var(--coaching-price-rule);
}

.coaching-package__ratio {
	padding: 10px 8px 0 0;
	color: var(--coaching-price-season);
	font-weight: var(--fw-semibold);
	vertical-align: baseline;
	white-space: nowrap;
}

.coaching-package__amount {
	padding: 8px 8px 0 0;
	font-size: var(--fs-card-title);
	font-weight: var(--fw-bold);
	line-height: 1.4;
	vertical-align: baseline;
	white-space: nowrap;
}

.coaching-package__amount--both {
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	vertical-align: middle;
	white-space: normal;
}

@media (forced-colors: active) {
	.coaching-package__season,
	.coaching-package__prices thead td {
		border-bottom-color: CanvasText;
	}
}

/* The text stops about 45px from the card's right edge, as drawn (the
   title runs to 20px). */
.coaching-package__best {
	margin: 28px 0 0;
	padding-right: 25px;
}

.coaching-package__best-label {
	color: var(--color-heading-on-dark);
	font-weight: var(--fw-bold);
}

/* What the prices cover, centred under the cards. */
.coaching-packages__note {
	max-width: 52rem;
	margin: 48px auto 0;
	color: var(--color-text-on-dark);
	text-align: center;
}

.coaching-packages__note p {
	margin: 0;
}

.coaching-packages__note p + p {
	margin-top: 12px;
}

.coaching-packages__actions {
	margin: 64px 0 0;
	text-align: center;
}

.coaching-packages__note + .coaching-packages__actions {
	margin-top: 40px;
}

/* Two to a row from 768px, four from 1200 (at 1024 four would leave the
   cards under 200px wide). */
@media (min-width: 768px) {
	.coaching-packages__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.coaching-packages__actions {
		margin-top: 74px;
	}
}

@media (min-width: 1200px) {
	.coaching-packages__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 42px;
	}
}

/* Four cards on a window under 1440px leave each price column about 70px:
   the amounts a size down so "£1,000" and "£1,150" keep their gap. */
@media (min-width: 1200px) and (max-width: 1439px) {
	.coaching-package__amount {
		font-size: var(--fs-ui-lg);
	}
}

/* ---------- Coaching areas ---------- */

.coaching-areas__list {
	display: grid;
	gap: 32px;
}

/* A Secondary Navy card with a Light Orange bottom edge: the photo on
   top on phones (4 : 3), on the left from 768px at the card's height
   (5 : 7 on tablets, 542 : 722 from 1024 with the text centred down a
   card at least 600px tall at 1440, as drawn). */
.coaching-area {
	display: grid;
	overflow: hidden;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark-alt);
}

/* main.css's tablet guard caps a __media box and centres it with auto
   margins: this one fills its part of the card. */
.coaching-area__media {
	position: relative;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* Cover, sized by height, so the browser's lazy sizes="auto" picks a file
   for the width actually drawn; a photo's focus point positions it
   (inc/image-focus.php), as on the split cards. */
.coaching-area__img {
	position: absolute;
	top: 0;
	left: var(--focus-x, 50%);
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
	transform: translateX(calc(-1 * var(--focus-x, 50%)));
}

.coaching-area__body {
	padding: 32px 24px 36px;
}

/* Light Orange, over the navy section's White headings. */
.coaching-areas .coaching-area__title {
	color: var(--color-accent);
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.coaching-area__label {
	margin: 18px 0 0;
	color: var(--color-heading-on-dark);
	font-weight: var(--fw-bold);
}

.coaching-area__items {
	display: grid;
	gap: 19px;
	margin: 19px 0 0;
	padding: 0 0 0 17px;
	list-style: none;
}

.coaching-area__name {
	color: var(--color-heading-on-dark);
	font-size: var(--fs-card-title-lg);
	line-height: var(--lh-card-title);
}

.coaching-area__text {
	margin: 0;
}

/* On Secondary Navy the label stays as it is on hover and focus (Light
   Orange text there is only 4.42:1); the arrow turns Light Orange and
   slides (main.css arrow-link rule). */
.coaching-area__link {
	display: flex;
	width: fit-content;
	margin-top: 28px;
	color: var(--color-link-on-dark);
	font-size: var(--fs-small);
}

.coaching-area__link:hover .icon,
.coaching-area__link:focus-visible .icon {
	color: var(--color-link-hover-on-dark);
}

@media (min-width: 768px) {
	.coaching-area {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.coaching-area__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.coaching-area__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 36px 32px 40px 28px;
	}
}

@media (min-width: 1024px) {
	.coaching-areas__list {
		gap: 50px;
	}

	.coaching-area {
		grid-template-columns: minmax(0, 542fr) minmax(0, 722fr);
		min-height: min(600px, 41.67vw);
	}

	/* The text 23px from the photo, as drawn; the items 17px further in. */
	.coaching-area__body {
		padding: 40px 36px 40px 23px;
	}
}

/* No photo (removed, or the importer ran before the photos were in the
   library): the text takes the whole card at every width, its own
   height, with the same space on both sides. After the rules above, and
   one class more, so it wins at every width. */
.coaching-area.coaching-area--no-media {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

@media (min-width: 768px) {
	.coaching-area--no-media .coaching-area__body {
		padding-left: 32px;
	}
}

@media (min-width: 1024px) {
	.coaching-area--no-media .coaching-area__body {
		padding-left: 36px;
	}
}

/* ---------- Where coaching fits ---------- */

.coaching-fits__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 27px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* White cards with a Light Orange bottom edge, equal in height across a
   row and at least 155px tall (the one- and two-line cards are drawn the
   same height, the text from the top). */
.coaching-fits__card {
	min-height: 155px;
	padding: 28px 32px 28px 35px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
}

.coaching-fits__title {
	color: var(--color-accent);
	font-size: var(--fs-step-number);
	line-height: 1.344;
}

.coaching-fits__text {
	margin: 17px 0 0;
}

@media (min-width: 768px) {
	.coaching-fits__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- When coaching becomes mentoring ---------- */

.coaching-mentoring.section--navy {
	padding-block: var(--coaching-band-pad-y);
	background-color: var(--color-surface-dark-alt);
	text-align: center;
}

.coaching-mentoring__header {
	margin-bottom: 0;
}

.coaching-mentoring__header .eyebrow {
	justify-content: center;
}

.coaching-mentoring__header .section-header__title {
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.coaching-mentoring__header .section-header__intro {
	max-width: 70rem;
	margin-inline: auto;
}

/* As the "Enquire" links: the label stays, the arrow turns Light Orange. */
.coaching-mentoring__link {
	display: inline-flex;
	margin-top: 24px;
	color: var(--color-link-on-dark);
}

.coaching-mentoring__link:hover .icon,
.coaching-mentoring__link:focus-visible .icon {
	color: var(--color-link-hover-on-dark);
}

.coaching-mentoring__link:focus-visible,
.coaching-area__link:focus-visible {
	outline-color: var(--color-focus);
}

/* ---------- The enquiry ---------- */

/* The fields, grid, selects and button are the guided days' enquiry
   (contact-form.css, guiding-enquiry.css); its three text boxes are drawn
   120px tall (the Contact form's 150). */
.coaching-enquiry .contact-form__input--area {
	height: 120px;
}