/* ============================================================
   Why Lake District Mountaineering - homepage (Page Sections
   layout "features", brief 4.11; notes home-desktop 3.13 and
   home-mobile 3.13; design desktop y 7070-7743, mobile y
   11226-12417). Navy section (.section--navy): eyebrow and H2
   from the shared section header, a bold lead, body text and the
   "About Us" arrow link, then four feature cards - Secondary Navy,
   radius 16, 3px Light Orange bottom edge, a 44px icon tile, an
   H3 in Koulen 20/28 and 14/21 text. The cards are not links.
   - Phones (< 768): copy in the 374px column (never wider than the
     desktop measure, 544px), then a 2 x 2 grid of 177px cards, 20px
     gaps, centred (the file's 14 / 18px side margins normalised,
     brief 12); 12px card insets; one column below a 348px viewport.
   - Tablet (768-1023): the copy at the desktop measure (544px, so
     the heading, lead and body wrap as on desktop), then the 2 x 2
     grid across the whole container (about 365px cards at 834):
     no more one-word lines in the cards.
   - Desktop (>= 1024): copy left, the grid right, in the design's
     544 / 656 split with the page gutter between (80px at 1440:
     copy x 80-624, cards x 704-1360, 318px wide); card tops align
     with the eyebrow; both rows 215px (the file draws 215 and 221,
     normalised to equal heights, brief 12).
   Lead and body are Cream at 16/24: the files draw them White, and
   desktop with a 29px line-height (working value, QH7). The gaps
   below are set so the VISIBLE space between blocks matches the
   design despite the tighter line-height.
   ============================================================ */

/* ---------- Copy: header, lead, body, link ---------- */

/* The desktop measure at every width: the lines break as they do on
   desktop, and wide phones (600-767) never run 88-character lines.
   Phones up to about 570px are narrower than this anyway. */
.features__copy {
	max-width: 544px;
}

/* The shared header supplies the eyebrow-to-H2 spacing; the gap
   after the H2 belongs to the lead below. */
.features__header {
	margin-bottom: 0;
}

/* No one-word last line ("AHEAD" alone at 650-700px). */
.features .section-header__title {
	text-wrap: pretty;
}

/* H2 box to lead: 20px, so the lead's first line sits 34px below
   the heading caps as designed. */
.features__lead {
	margin-top: 20px;
	font-weight: var(--fw-bold);
}

.features__body {
	margin-top: 24px;
}

.features__lead p + p,
.features__body p + p {
	margin-top: 24px;
}

.features__more {
	margin-top: 24px;
}

/* Whatever comes first in the column starts at the top. */
.features__copy > :first-child {
	margin-top: 0;
}

.features__link {
	color: var(--color-link-on-dark);
}

/* Hover and focus: the link turns Light Orange and its arrow slides right
   (main.css arrow-link rule); no underline. */
.features__link:hover,
.features__link:focus-visible {
	color: var(--color-link-hover-on-dark);
}

/* ---------- Feature cards ---------- */

/* Phones: two equal columns while each card gets at least 150px
   (from a 348px viewport), one column below that. The 1px keeps
   rounding from ever dropping the second column. */
.features__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - var(--gap-grid)) / 2 - 1px)), 1fr));
	grid-auto-rows: 1fr; /* every card as tall as the tallest */
	gap: var(--gap-grid);
	margin: 38px 0 0; /* link to grid, as designed */
	padding: 0;
	list-style: none;
}

/* The 3px edge is the card's own bottom border, so it follows the
   corner radius and thins towards the corners as drawn; the stated
   heights include it (box-sizing: border-box from the reset).
   Bottom inset 30px at every width: the files leave 29.5px under
   the tallest card's text on desktop and 21-33px on phones. */
.features__card {
	padding: 12px 12px 30px;
	border-bottom: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark-alt);
}

.features__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background-color: var(--color-icon-tile);
	color: var(--color-accent);
}

/* The four homepage icons are Phosphor glyphs in a 256 viewBox:
   in a 24px box their artwork measures 16-24px, centred in the
   tile (the design's glyphs are 17-22px). */
.features__icon .icon {
	width: 24px;
	height: 24px;
}

/* Koulen 20/28 on both artboards: the caps sit 22px below the
   tile, as designed. White via .section--navy h3. */
.features__title {
	margin-top: 16px;
	font-size: var(--fs-card-title);
	line-height: var(--lh-card-title);
}

.features__text {
	margin-top: 7px;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-wrap: pretty; /* no lone "step." (card 3 at 1000-1023px) */
}

/* A card without an icon or a title keeps sensible spacing. */
.features__card > :first-child {
	margin-top: 0;
}

.features__icon + .features__text {
	margin-top: 16px;
}

/* ============================================================
   Tablet and up
   ============================================================ */

@media (min-width: 768px) {
	/* 22px: the lead sits 42px below the heading caps, as on the
	   desktop file. 32px gaps after the lead and the body give the
	   designed 40-42px of visible space at 16/24. */
	.features__lead {
		margin-top: 22px;
	}

	.features__body,
	.features__more {
		margin-top: 32px;
	}

	/* Always two columns from here (about 337px cards at 768). */
	.features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 40px;
	}

	.features__card {
		padding: 24px 24px 30px;
	}
}

/* ============================================================
   Desktop: copy left, cards right
   ============================================================ */

@media (min-width: 1024px) {
	/* 544fr / 656fr is the 1440 split (1200px after the 80px gap);
	   narrower desktops keep the proportion, and the gap follows
	   the page gutter (54px at 1024). */
	.features__inner {
		display: grid;
		grid-template-columns: minmax(0, 544fr) minmax(0, 656fr);
		column-gap: var(--gutter);
		align-items: start;
	}

	/* Card tops level with the eyebrow; the right-hand column. */
	.features__grid {
		grid-column: 2;
		margin-top: 0;
	}

	/* No copy at all: the cards take the whole width rather than
	   leaving the left half empty. */
	.features__grid:only-child {
		grid-column: 1 / -1;
	}
}