/* ============================================================
   Course page: the info cards - Who It's For, Skills Covered,
   Pre-requisites, What to Bring (template-parts/offering/
   info-cards.php). Design: CW v2 desktop y 1365-2397, mobile
   y 2328-4264 (docs/notes/course-page.md 4.6, 5.6; components 13
   and 14).
   A Primary Navy band (.section--navy, so the house section padding:
   the file's 74 / 90 and 70 are normalised as on the homepage) of
   Secondary Navy cards, 16px radius, with a 3px Light Orange left
   edge that follows the corners. Each card: a Cream Koulen H2, then
   a check list (a 24px Light Orange disc with a White tick, the
   theme's tick as in the Why choose band) or the copy's paragraphs,
   all Cream 16/24 (three mobile cards drop to 14px in the file:
   normalised to 16). Copy order on every screen (X79).
   - Phones (< 768): one column, 24px apart; text 24px in from the
     card's outer edges (the file: 20-23).
   - Tablet (768-1023): the desktop's two by two, with the gaps and
     the insets in between (24 across and down at 768).
   - Desktop (>= 1024): two by two, 56 across and 48 down at 1440
     (the file: 55 and 47, the second row 5px out: aligned); text
     32px in (the file: 23-24 on the left-hand cards, 31-32 on the
     right, the left-hand lists 35: one inset for everything).
   Cards in a row share its height, as drawn: the shorter card keeps
   its content at the top and ends level with its neighbour.
   Vertical rhythm, measured: heading caps 37-39px below the card
   top, the first line of text 30px below the caps (the file 30-34),
   items 12 apart (10-13), the last line 30px above the card bottom
   (the file's taller card). The disc's top sits 1px above the cap
   height of the item's first line, as drawn on both files.
   ============================================================ */

.info-cards {
	--info-cards-gap-x: 24px;
	--info-cards-gap-y: 24px;
	--info-card-pad-x: clamp(24px, 20.9px + 0.7707vw, 32px); /* 24 at 402, 32 at 1440 */
}

.info-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--info-cards-gap-y) var(--info-cards-gap-x);
}

/* ---------- Card ---------- */

.info-card {
	min-width: 0;
	padding: 32px var(--info-card-pad-x) 30px calc(var(--info-card-pad-x) - var(--border-accent));
	border-left: var(--border-accent) solid var(--color-accent);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-dark-alt);
	color: var(--color-text-on-dark);
}

/* Cream, as drawn (main.css makes headings on navy White: QH7 keeps
   each component's designed colour). Koulen 30 on phones, 36 at
   1440; caps 5-6px into the line box. */
.info-card .info-card__title {
	color: var(--color-text-on-dark);
	font-size: var(--fs-h3);
	line-height: var(--lh-display);
	overflow-wrap: break-word;
}

/* 22px after the heading's line box = 30px from its caps to the next
   line of text. */
.info-card__intro,
.info-card__list,
.info-card__prose {
	margin-top: 22px;
}

.info-card__intro + .info-card__list,
.info-card__intro + .info-card__prose {
	margin-top: 16px;
}

.info-card__intro p + p,
.info-card__prose p + p {
	margin-top: 16px;
}

.info-card__prose {
	text-wrap: pretty;
}

/* ---------- Check list ---------- */

/* role="list" in the template keeps the semantics. No bottom margin
   (the browser's 1em would add to the card's padding). */
.info-card__list {
	display: grid;
	gap: 12px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

/* The text box 11px after the disc: its first glyph 12px after, as
   drawn. */
.info-card__item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

/* The disc's top 1px above the first line's caps (Poppins caps start
   6.4px into a 24px line box). The transparent ring only shows in
   Windows High Contrast, where the orange fill drops and the tick
   alone would float. */
.info-card__check {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--icon-check);
	height: var(--icon-check);
	margin-top: 5.5px;
	border: var(--border-hairline) solid transparent;
	border-radius: 50%;
	background-color: var(--color-check-disc);
	color: var(--color-check-tick);
}

/* The theme's tick, thickened by a hairline stroke as in the Why
   choose band (why-band.css). */
.info-card__check .icon {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 8px;
	stroke-linejoin: round;
}

.info-card__item-text {
	flex: 1 1 auto;
	min-width: 0;
	text-wrap: pretty;
}

.info-card__lead {
	font-weight: var(--fw-semibold);
}

/* ---------- Requirements link (Pre-requisites, C16) ----------
   The global arrow link (main.css: the arrow slides on hover and
   keyboard focus, the label is never underlined). The label stays
   Cream, as Light Orange text on Secondary Navy is only 4.42:1; the
   arrow turns Light Orange as the colour cue (non-text, 3:1 is
   enough), as on the progression cards. */
.info-card__more {
	margin-top: 16px;
}

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

/* The arrow rides inline after the last word (kept together), 10px
   after it as in the arrow link, so a wrapped label keeps it close. */
.info-card__link-end {
	white-space: nowrap;
}

.info-card__link .icon {
	margin-left: 10px;
}

.info-card__link:hover .icon,
.info-card__link:focus-visible .icon {
	color: var(--color-accent);
}

/* ============================================================
   Tablet: the desktop's two by two, with room in between
   ============================================================ */

@media (min-width: 768px) {
	/* 24 at 768 rising to 56 across and 48 down at 1440. */
	.info-cards {
		--info-cards-gap-x: clamp(24px, 4.762vw - 12.57px, 56px);
		--info-cards-gap-y: clamp(24px, 3.571vw - 3.43px, 48px);
	}

	.info-cards__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd card out (a page without one of the four, e.g. a guided day
	   with no Who It's For yet) takes the whole row instead of leaving a
	   hole beside it. Every course page has all four. */
	.info-cards__grid > .info-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   Windows High Contrast: the card fills drop, so a hairline keeps
   each card's outline (the left edge stays as the accent).
   ============================================================ */

@media (forced-colors: active) {
	.info-card {
		outline: var(--border-hairline) solid transparent;
	}
}

/* ============================================================
   Print (a kit list is worth printing): browsers drop background
   colours by default, which would leave Cream text on white paper.
   Navy text on the page instead, each card outlined and kept whole;
   the discs keep their fill so the White ticks show.
   ============================================================ */

@media print {
	.info-cards,
	.info-card {
		background: none;
		color: var(--color-text);
	}

	.info-card {
		border: var(--border-hairline) solid var(--color-border);
		border-left: var(--border-accent) solid var(--color-accent);
		break-inside: avoid;
	}

	.info-card .info-card__title,
	.info-card__link {
		color: var(--color-heading);
	}

	.info-card__check {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}