/* ============================================================
   Private & Bespoke services - homepage brief 4.8; notes
   home-desktop 3.10 and home-mobile 3.10. Page Sections layout
   "services": a Navy section with the shared section header
   (eyebrow, H2, two Cream paragraphs) and the service rows -
   Secondary Navy, radius 16, a 3px Light Orange bottom edge inside
   the stated heights. Each row is one link: the title is the real
   link, stretched over the row; the double chevron is decorative.
   - Phones (< 768): the header, then stacked cards 25 apart, 374
     wide at the 14px gutter (201 tall, as drawn): title Koulen 20 at
     a 28px inset with the chevron (16.5 x 19.5 drawn) on its line 32
     from the right, the text 7 below on a 23px pitch, running to the
     28px inset. The design's Mentoring title sits 6px high:
     normalised (brief 12).
   - Tablet and small desktops (768-1199): the header full width, its
     two paragraphs side by side (about 50 characters a line rather
     than 90 at full width, and a shorter section), then the rows full
     width in the desktop row layout. Two columns before 1200 would
     squeeze the rows (a 273px text column at 1024); the course cards
     also go four-up at 1200.
   - Desktop (>= 1200): two columns, the header on the left (525 of
     1280 at 1440: the width that keeps the drawn line breaks) and
     the rows on the right (656 of 1280), both from the section's top
     padding (the design's 83 / 92 normalised to 112, brief 12).
   Rows from 768: equal heights (127 at 1440 with the edge), 20 apart;
   title column 112 wide from a 30px inset (wider when a title needs
   it, the same in every row); text from x+142 (441 wide at 1440);
   chevron (22 x 26 drawn) 17 from the right; all vertically centred.
   Hover and focus: the chevron turns Cream and slides right (arrows on
   hover targets, Miles 2026-10-05; not under reduced motion); the
   border lights all round in Light Orange (a ring, as on the
   progression cards, Miles 2026-10-11); the title is not underlined;
   the focus ring outlines the whole row.
   ============================================================ */

/* ---------- Rows ---------- */

.services__list {
	display: grid;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones: title and chevron on one line, the text below. */
.services__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"title chevron"
		"text  text";
	align-items: center;
	row-gap: 7px;
	padding: 27px 28px 21px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark-alt);
}

/* The hover border (Miles 2026-10-11, like the progression cards): a
   Light Orange ring over the row's whole edge, faded in on hover and
   keyboard focus. A separate layer, so the resting row keeps its drawn
   bottom edge (which tapers into the rounded corners) and nothing moves;
   absolutely positioned, so it is not a grid item. */
.services__row::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);
}

/* overflow-wrap: a safety net for a single word too long for the card. */
.services__title {
	grid-area: title;
	font-size: var(--fs-card-title);
	line-height: var(--lh-card-title);
	overflow-wrap: anywhere;
}

.services__link {
	color: inherit;
	text-decoration: none;
}

/* The stretched link also covers the 3px edge, so the whole row is the
   target and the focus ring clears the edge. */
.services__link::after {
	bottom: calc(-1 * var(--border-accent));
	border-radius: var(--radius-md);
}

.services__text {
	grid-area: text;
	font-size: var(--fs-small);
	line-height: 23px; /* the designed pitch (card text elsewhere is 14/21) */
}

.services__best-for-label {
	font-weight: var(--fw-bold);
}

/* The icon's ink fills 13 x 15.5 of its 24 units: the negative margins
   trim the box to the ink (16.3 x 19.4 here, the designed 16.5 x 19.5)
   and set the ink 32px in from the card edge, while the text runs to the
   28px inset as drawn. max-width: none stops main.css's svg rule
   squeezing it to the column, which is sized by the trimmed box. */
.services__chevron {
	grid-area: chevron;
	width: 30px;
	max-width: none;
	height: 30px;
	margin: -5.3px -2.9px -5.3px -6.9px;
	color: var(--color-accent);
	transition: transform var(--transition), color var(--transition);
}

/* ---------- Hover and focus (rows with a link) ---------- */

/* Focus is keyed on :focus-visible, so a mouse click (Ctrl+click to a new
   tab) leaves the chevron neither Cream nor shifted; the :has() sits
   inside :is() or in its own rule, so an engine without :has() still
   keeps the :hover cue. The hover slide needs a pointer that can hover. */
.services__row--link:is(:hover, :has(.services__link:focus-visible)) .services__chevron {
	color: var(--color-text-on-dark);
}

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

.services__row--link:has(.services__link:focus-visible)::before {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.services__row--link:has(.services__link:focus-visible) .services__chevron {
		transform: translateX(var(--arrow-nudge));
	}
}

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

/* Windows High Contrast tells links apart by shape: underline the title. */
@media (forced-colors: active) {
	.services__link {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}
}

/* Light Orange ring around the whole row (6.05:1 on Primary Navy). */
.services__link:focus-visible {
	outline: none;
}

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

/* ============================================================
   Tablet and up: the desktop row layout, equal heights
   ============================================================ */

@media (min-width: 768px) {
	/* The column tracks live on the list and every row is a subgrid of
	   them, so the title column is as wide as the longest title and
	   stays aligned across the rows, always 20px (the column gap, which
	   the rows inherit) before the text. A subgrid adds its padding to
	   the items at its edges, so the outer tracks include the row's
	   side padding: the text starts at 30 + 92 + 20 = 142 as drawn, and
	   ends 20 + 52 = 72 from the row's edge (the chevron's 55 + 17). */
	.services__list {
		grid-template-columns: minmax(122px, max-content) minmax(0, 1fr) 52px;
		grid-auto-rows: 1fr;
		gap: 20px;
	}

	/* The first value is the fallback where subgrid is unsupported (the
	   112px title column then stays fixed). */
	.services__row {
		grid-column: 1 / -1;
		grid-template-columns: 112px minmax(0, 1fr) 55px;
		grid-template-columns: subgrid;
		grid-template-areas: none;
		padding: 16px 17px 16px 30px;
	}

	/* Titles longer than 200px wrap rather than squeeze the text. */
	.services__title {
		grid-area: 1 / 1;
		max-width: 200px;
	}

	.services__text {
		grid-area: 1 / 2;
	}

	/* 21.7 x 25.8 of ink at 40px (the design's 22 x 26), 17px in from
	   the row's right edge. */
	.services__chevron {
		grid-area: 1 / 3;
		justify-self: end;
		width: 40px;
		height: 40px;
		margin: -7px -9.1px -7px -9.2px;
	}
}

/* Tablet and small desktops: the intro paragraphs side by side under
   the heading. */
@media (min-width: 768px) and (max-width: 1199px) {
	.services__header .section-header__intro {
		display: grid;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: 40px;
	}

	.services__header .section-header__intro p + p {
		margin-top: 0;
	}
}

/* ============================================================
   Desktop: header left, rows right
   ============================================================ */

@media (min-width: 1200px) {
	/* 525 / 99 / 656 at 1440; the gap narrows to 65 at 1200. */
	.services__inner {
		display: grid;
		grid-template-columns: minmax(0, 525fr) minmax(0, 656fr);
		align-items: start;
		column-gap: clamp(40px, -105.23px + 14.183vw, 99px);
	}

	.services__header {
		margin-bottom: 0;
	}
}