/* ============================================================
   Article card (template-parts/components/article-card.php) - one
   Knowledge Hub article: the Hub's grid and featured card, the
   article page's "Related Resources" and the course pages' Knowledge
   Hub section; and the grid of them (article-grid.php). Built on the
   offering card's patterns, measured on Knowledge hub v1 (the three
   desktop files draw the card the same; the phone files' cards are a
   94.4% scaled copy, so the desktop sizes apply at every width):
   - White, 1px Border Warm, radius 16: 391 x 515 at 1440.
   - Photo 389 x 271 inside the border, top corners rounded (the file
     leaves a 1px white line above it: dropped, everything under the
     photo keeps its drawn place in the card). Badge 12px in from the
     photo's top and left; "FEATURED" 7px after it on phones.
   - Text 19px inside the border on both sides (drawn 19 / 21). The
     meta line (Medium 12, 0.025em, Light Orange, uppercase: pathway,
     date, read time) has its caps 23px under the photo, the title
     (Koulen 20/28) its caps 36 under the meta's, the summary (14/21,
     three lines at most) sits 15px under the title, the divider 24px
     under it, the footer row (book icon + resource type, "Read
     Article") 18px under the divider and 20px above the foot: 513
     inside the border with a one-line title.
   - Equal heights: in a grid row the footer is pinned to the bottom;
     long titles push the summary down. Under a 330px card in a row
     (768px up) the meta line keeps room for two lines, so the titles
     start level when one card's line wraps. Under a 308px card the
     "Read Article" goes under the type on every card, so the
     dividers in a row stay level ("Skills & Technique" and "Read
     Article" need about 269px of text).
   - Featured (.article-card--featured, the Hub's first page): from
     768px the photo left of the text (486 : 778 at 1440, 40 : 60 on
     tablets: not designed), "FEATURED" above the meta line, the text
     centred above the footer, 40px padding (32 on tablets; drawn 73
     above the pill and 30 under the row); the photo keeps its drawn
     shape and fills a taller text column. On phones a normal card.
   - Hover / focus (not designed; the house rules, as the offering
     card): the photo zooms in slowly, the title's underline draws in
     from the left, the arrow slides and turns Dark Orange; nothing
     moves under reduced motion or on touch; the focus ring goes round
     the card; Windows High Contrast underlines the title.
   - Grid: one column, two from 768px, three from 1024px; 36px gaps,
     46 from 1024 (drawn 45-46).
   ============================================================ */

.article-card {
	container: article-card / inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	color: var(--color-text);
}

/* ---------- Photo (shown first; last in the source) ---------- */

/* Always the card's full width: main.css's tablet guard on
   [class*="__media"] (640px cap, auto margins) must not shrink it. */
.article-card__media {
	order: -1;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	overflow: hidden;
	aspect-ratio: var(--article-card-photo-ratio);
	border-radius: calc(var(--radius-md) - var(--border-hairline)) calc(var(--radius-md) - var(--border-hairline)) 0 0;
	background-color: var(--color-surface-dark-alt); /* no photo: a quiet navy block */
	isolation: isolate; /* keeps the zoomed photo inside the rounded corners (Safari) */
}

/* Zooms in slowly on hover and keyboard focus (below). The photo's focus
   point (--focus-x / --focus-y, inc/image-focus.php) decides what the
   wider box trims from the 4:3 file. */
.article-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
	transition: transform var(--transition-zoom);
}

/* Tone on tone: a mountain mark in the darker navy surface colour. */
.article-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-surface-dark);
}

.article-card__placeholder .icon {
	width: 56px;
	height: 56px;
}

/* ---------- Badges, over the photo ---------- */

/* z-index keeps them above the photo (an isolated layer that zooms);
   clicks and hovers pass through to the card's stretched link. */
.article-card__tags {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 1;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.article-card__badge {
	display: flex;
	align-items: center;
	height: 25px;
	padding-inline: 10px;
	border-radius: var(--radius-pill);
	color: var(--color-badge-text);
	font-size: var(--fs-badge);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-tag);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.article-card__badge--foundation {
	background-color: var(--color-level-foundation);
}

.article-card__badge--progression {
	background-color: var(--color-level-progression);
}

.article-card__badge--development {
	background-color: var(--color-level-development);
}

.article-card__badge--leadership {
	background-color: var(--color-leadership);
	color: var(--color-badge-text-leadership);
}

.article-card__badge--all {
	background-color: var(--color-badge-all-levels);
	color: var(--color-badge-all-levels-text);
}

.article-card__badge--featured {
	background-color: var(--color-badge-featured);
	color: var(--color-badge-featured-text);
}

/* ---------- Text ---------- */

.article-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px var(--article-card-pad-x) 20px;
}

/* Pathway, date, read time: shown above the title (it follows the
   title in the source). Each item stays whole, a bullet with the item
   after it (article-card.php): a long line wraps before a bullet. */
.article-card__meta {
	order: -1;
	color: var(--color-accent-text-light);
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tag);
	line-height: var(--lh-body);
	text-transform: uppercase;
}

.article-card__meta-item {
	white-space: nowrap;
}

/* Rows of narrow cards (three across up to about a 1220px window, two
   across up to about 775): the longest meta line (Leadership, 28
   September 2025, 12 min read: about 292px, which a 330px card holds on
   one line) can need two lines where a neighbour's needs one, which
   would start that card's title lower than the others in its row. Every
   card of these widths keeps room for two lines, so the titles in a row
   start level. One column on phones: nothing to line up. */
@media (min-width: 768px) {
	@container article-card (width < 330px) {
		.article-card__meta {
			min-height: calc(2em * var(--lh-body));
		}
	}
}

.article-card__title {
	margin-top: 16px;
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: var(--lh-card-title);
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* The hover underline: a line drawn in from the left under every line of
   the title (a background, so it follows a wrapped title line by line and
   can animate; set on hover / focus below). */
.article-card__link {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--color-card-title-underline), var(--color-card-title-underline));
	/* Koulen's line box runs well below its caps: lifted to sit just
	   under the letters. */
	background-position: 0 calc(100% - 0.34em);
	background-repeat: no-repeat;
	background-size: 0 var(--card-title-underline-h);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
	.article-card__link {
		transition: background-size var(--transition-underline);
	}
}

/* Three lines at most, ending "..." as drawn. */
.article-card__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin-top: 15px;
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

/* ---------- Footer: pinned to the card's bottom ---------- */

/* At least 24px under the summary (the drawn gap above the divider). */
.article-card__footer {
	margin-top: auto;
	padding-top: 24px;
}

/* The divider: 1px Grey Light across the text width, the row 18px under it. */
.article-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	padding-top: 18px;
	border-top: var(--border-hairline) solid var(--color-divider);
}

/* The book (its ink about 16.5 x 19.5 in the 24px box) and the type in
   Light Orange: the negative margins line the ink up with the text's left
   edge and keep the row one 21px line tall. */
.article-card__type {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--color-accent-text-light);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

.article-card__type .icon {
	width: 24px;
	height: 24px;
	margin-block: -1.5px;
	margin-inline-start: -4px;
}

/* "Read Article ->": visual only; the title is the card's link. */
.article-card__cta {
	margin-left: auto;
	color: var(--color-link);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	white-space: nowrap;
}

/* A card without a usable link keeps the CTA's space but hides it. */
.article-card__cta--placeholder {
	visibility: hidden;
}

/* Narrow cards: "Read Article" under the type, right-aligned, on every
   card of the width (the dividers in a row stay level). */
@container article-card (width < 308px) {
	.article-card__type {
		flex-basis: 100%;
	}
}

/* ---------- Hover and focus ----------
   Hovering anywhere on the card, or keyboard-focusing its link, turns the
   "Read Article" arrow Dark Orange and slides it right, zooms the photo in
   slowly and draws the title's underline in. The colour is the cue under
   reduced motion, when nothing moves; the hover slide, zoom and underline
   need a pointer that can hover (a tap leaves nothing shifted). Focus is
   :has(... :focus-visible), so a mouse click leaves nothing shifted; it
   sits inside :is() or in its own rule so an engine without :has() still
   keeps the :hover cue. The CTA is an arrow-link span, so main.css
   transitions its arrow. */

.article-card:is(:hover, :has(.article-card__link:focus-visible)) .article-card__cta .icon {
	color: var(--color-arrow-hover-on-light);
}

@media (hover: hover) {
	.article-card:hover .article-card__link {
		background-size: 100% var(--card-title-underline-h);
	}
}

.article-card:has(.article-card__link:focus-visible) .article-card__link {
	background-size: 100% var(--card-title-underline-h);
}

@media (prefers-reduced-motion: no-preference) {
	.article-card:has(.article-card__link:focus-visible) .article-card__cta .icon {
		transform: translateX(var(--arrow-nudge));
	}

	.article-card:has(.article-card__link:focus-visible) .article-card__img {
		transform: scale(var(--image-zoom));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.article-card:hover .article-card__cta .icon {
		transform: translateX(var(--arrow-nudge));
	}

	.article-card:hover .article-card__img {
		transform: scale(var(--image-zoom));
	}
}

/* The ring goes round the card (the link's stretched ::after), not round
   the title text. */
.article-card__link:focus-visible {
	outline: none;
}

.article-card__link:focus-visible::after {
	border-radius: calc(var(--radius-md) - var(--border-hairline));
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

/* Windows High Contrast tells links apart by shape: underline the title;
   the badges' fills go, so an outline keeps their pill shape. */
@media (forced-colors: active) {
	.article-card__link {
		background-image: none;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	.article-card__badge {
		outline: var(--border-hairline) solid transparent;
	}
}

/* ---------- Featured: the Hub's wide card, from 768px ---------- */

@media (min-width: 768px) {
	.article-card--featured {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.article-card--featured .article-card__media {
		position: relative;
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: auto;
		border-radius: calc(var(--radius-md) - var(--border-hairline)) 0 0 calc(var(--radius-md) - var(--border-hairline));
	}

	/* The photo's least height (its drawn shape); a taller text column
	   stretches the row and the photo fills it. */
	.article-card--featured .article-card__media::before {
		content: "";
		display: block;
		aspect-ratio: var(--featured-photo-ratio);
	}

	.article-card--featured .article-card__img,
	.article-card--featured .article-card__placeholder {
		position: absolute;
		inset: 0;
	}

	.article-card--featured .article-card__body {
		grid-column: 2;
		grid-row: 1;
		padding: 32px;
	}

	/* The level badge stays on the photo; "FEATURED" joins the text,
	   above the meta line (its caps 21px under the pill, as drawn). */
	.article-card--featured .article-card__tags {
		display: contents;
	}

	.article-card--featured .article-card__badge:not(.article-card__badge--featured) {
		position: absolute;
		top: 12px;
		left: 12px;
		z-index: 1;
		pointer-events: none;
	}

	/* With the footer's auto margin, the block from the pill to the
	   summary sits centred in the room above the footer. */
	.article-card--featured .article-card__badge--featured {
		order: -2;
		align-self: flex-start;
		margin-top: auto;
		margin-bottom: 16px;
	}
}

@media (min-width: 1024px) {
	.article-card--featured {
		grid-template-columns: minmax(0, 486fr) minmax(0, 778fr);
	}

	.article-card--featured .article-card__body {
		padding: 40px;
	}
}

/* ---------- Grid of cards (article-grid.php) ---------- */

.article-card-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gap-article-cards);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A grid cell, so the card inside stretches to the row height. */
.article-card-grid__item {
	display: grid;
	min-width: 0;
}

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

@media (min-width: 1024px) {
	.article-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--gap-article-cards-wide);
	}
}