/**
 * LATEST NEWS — section 05
 *
 * Dark band. Left-aligned head, then three cards across the 1164 column.
 *
 * Measured from the 1440 frame (band 1440x957): 100 top padding, head stack at
 * 16px gaps, 56 to the row, cards 366.7 wide with 32 between, 100 bottom.
 * Inside a card: image 280, meta 46, headline 52, excerpt 63, read more 57.
 */

@layer components {

	/*
	 * data-theme="dark" remaps the tokens; `color` still has to be re-declared
	 * because it inherits as a computed value. See .big-cta for the long note.
	 */
	.latest-news {
		/*
		 * --clr-bg-deep, not --clr-bg: this band sits directly under the CTA,
		 * whose overlay ends at true black. The theme's --black-900 is a shade
		 * lighter and showed as a hard line where the two met.
		 */
		background-color: var(--clr-bg-deep);
		color: var(--clr-text);
		/* Measured 100px, tighter than the 129 the light bands use. */
		padding-block: clamp(var(--space-2xl), 6.95vw, 6.25rem);
	}

	/* ---- Head ---------------------------------------------------------- */

	.latest-news__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-s);                  /* 16px, measured at every step */
		margin-block-end: clamp(var(--space-xl), 3.9vw, 3.5rem);   /* → 56px */
	}

	.latest-news__title {
		margin: 0;
		font-size: var(--fs-display-3);
		line-height: var(--lh-display-3);
		letter-spacing: var(--track-display-3);
		font-weight: var(--weight-regular);
		text-wrap: initial;                   /* one line in the design */
	}

	.latest-news__intro {
		margin: 0;
		max-inline-size: 45rem;               /* 720px, measured */
		font-size: var(--fs-body);
		line-height: 1.5;
		color: var(--clr-text-inverse-soft);
	}

	/* ---- Row ----------------------------------------------------------- */

	.latest-news__row {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 48rem) {
		.latest-news__row {
			/* Three equal columns, 32px apart: 366.7 x 3 + 32 x 2 = 1164. */
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: var(--space-l);          /* → 32px; --space-xl maxes at 48 */
		}
	}

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

	.news-card {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.news-card__media {
		position: relative;
		inline-size: 100%;
		aspect-ratio: 367 / 280;
		overflow: hidden;
		border-radius: 0.75rem;               /* 12px, measured */
	}

	.news-card__image {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: transform var(--transition-slow);
	}

	/*
	 * The design darkens each photograph by 25%. It stops a bright frame from
	 * competing with the white headline directly under it.
	 */
	.news-card__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgb(0 0 0 / 0.25);
		pointer-events: none;
	}

	.news-card__meta {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);                /* 8px */
		margin: 0;
		padding-block: 1.25rem 0.75rem;       /* 20 / 12, measured */
		font-size: 0.6875rem;                 /* 11px */
		line-height: 1.2;
		text-transform: uppercase;
	}

	.news-card__category {
		color: var(--clr-accent);
		font-weight: var(--weight-semibold);
	}

	.news-card__dot,
	.news-card__date {
		color: var(--clr-text-subtle);
	}
	.news-card__date { font-weight: var(--weight-medium); }

	.news-card__title {
		margin: 0;
		font-family: var(--font-text);        /* not the display face — 20px Geist */
		font-size: 1.25rem;                   /* 20px */
		line-height: 1.3;
		font-weight: var(--weight-medium);
		letter-spacing: 0;
		text-transform: none;
	}

	.news-card__link {
		color: inherit;
		text-decoration: none;
	}

	/*
	 * Stretches the headline link over the whole card, so the image and the
	 * "Read more" are clickable without adding more links to the tab order.
	 */
	.news-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	/* Sits straight under the headline — the design leaves no gap between them. */
	.news-card__excerpt {
		margin: 0;
		font-size: 0.875rem;                  /* 14px */
		line-height: 1.5;
		color: var(--clr-text-subtle);
	}

	.news-card__more {
		display: flex;
		align-items: center;
		gap: 0.375rem;                        /* 6px */
		margin: 0;
		padding-block: 1.25rem;               /* 20px top and bottom, measured */
		font-size: 0.8125rem;                 /* 13px */
		font-weight: var(--weight-semibold);
		line-height: 1.2;
		text-transform: uppercase;
	}

	.news-card__arrow {
		inline-size: 0.75rem;                 /* 12px */
		block-size: 0.75rem;
		flex: none;
		transition: transform var(--transition-fast);
	}

	/* ---- Hover --------------------------------------------------------- */

	.news-card:hover .news-card__image,
	.news-card:focus-within .news-card__image {
		transform: scale(1.04);
	}

	.news-card:hover .news-card__more,
	.news-card:focus-within .news-card__more {
		color: var(--clr-accent);
	}

	.news-card:hover .news-card__arrow,
	.news-card:focus-within .news-card__arrow {
		transform: translate(2px, -2px);
	}

	/* The stretched link has no box of its own, so ring the card instead. */
	.news-card:focus-within {
		outline: 2px solid var(--clr-accent);
		outline-offset: 0.75rem;
		border-radius: 0.25rem;
	}
	.news-card__link:focus-visible { outline: none; }
}