/*
 * News index.
 *
 * Shared by the posts page, the category archives and search results. Built as
 * rows because the copy is the content here: press releases carry long formal
 * headlines and frequently a placeholder image, neither of which survives being
 * squeezed into a card three to a row.
 *
 * What makes it the brand's rather than any list's is the date block set in
 * display weight, the green rule on the category, and the diagonal wash that
 * lifts a row under the cursor, the same artwork the testimonial band and the
 * pillar cards are laid on.
 */

.news-list {
	--sk-news-rule: color-mix(in srgb, var(--sk-gray) 26%, transparent);

	/* The rows draw their own top rule, so the list only has to close itself. */
	border-block-end: 1px solid var(--sk-news-rule);
}

.news-item {
	/*
	 * How far the lit band reaches past the text. The row itself is not padded
	 * sideways: the date has to line up with the page heading and the category
	 * filter above it, so the band is grown outwards into the container's gutter
	 * instead of the content being pushed inwards away from everything else.
	 * Always smaller than --sk-gutter, so it never reaches the viewport edge.
	 */

	--sk-news-bleed: clamp(0.875rem, 2vw, 1.75rem);

	position: relative;
	display: grid;
	gap: 1.25rem;
	align-items: start;
	border-block-start: 1px solid var(--sk-news-rule);

	/* Contains the hover wash below, which is painted behind the row's own
	   content and would otherwise sit behind the page instead. */

	isolation: isolate;
	padding-block: clamp(1.75rem, 3vw, 2.5rem);

	@media (min-width: 48rem) {
		grid-template-columns: 5rem minmax(0, 1fr) clamp(9rem, 17vw, 14rem);
		gap: clamp(1.5rem, 3vw, 3rem);
	}

	/* The wash. Held at zero opacity rather than swapped in on hover so the
	   image is decoded before the cursor ever arrives. */

	&::before {
		position: absolute;
		z-index: -1;
		inset-block: 0;
		inset-inline: calc(var(--sk-news-bleed) * -1);
		background: var(--sk-gray-light) var(--sk-angle-wash) center center / cover no-repeat;
		opacity: 0;
		transition: opacity var(--sk-transition);
		content: "";
	}

	/* The accent edge the division tiles and capability panels also carry,
	   drawn only while the row is live so the resting list stays quiet. */

	&::after {
		position: absolute;
		z-index: -1;
		inset-block: 0;
		inset-inline-start: calc(var(--sk-news-bleed) * -1);
		inline-size: 4px;
		background: var(--sk-accent);
		content: "";
		transform: scaleY(0);
		transform-origin: top;
		transition: transform var(--sk-transition);
	}

	&:hover,
	&:focus-within {
		&::before {
			opacity: 1;
		}

		&::after {
			transform: scaleY(1);
		}
	}

	&:hover .news-item__more::after,
	&:focus-within .news-item__more::after {
		transform: translateX(0.25rem);
	}
}

.news-item__date {
	margin: 0;
	line-height: 1;
}

.news-item__day {
	display: block;
	color: var(--sk-black);
	font-family: var(--sk-font-display);
	font-size: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
	font-weight: 700;
	line-height: 0.85;
}

.news-item__month {
	display: block;
	margin-block-start: 0.5rem;
	color: var(--sk-gray);
	font-family: var(--sk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.news-item__category {
	margin-block-end: 0.875rem;
}

.news-item__title {
	margin: 0;

	/* Well below the global h2 step: this is one headline in a list of them,
		   not the title of a section. */

	font-size: clamp(1.1875rem, 1rem + 0.85vw, 1.625rem);
	line-height: 1.12;
}

.news-item__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--sk-transition);

	/* Stretches the headline's hit area over the whole row, so the date and
		   the thumbnail are clickable without being part of the link's name. */

	&::after {
		position: absolute;
		inset: 0;
		content: "";
	}

	&:hover,
	&:focus-visible {
		color: var(--sk-accent);
		text-decoration: none;
	}
}

.news-item__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin-block: 0.875rem 0;

	/* stylelint-disable-next-line property-no-vendor-prefix -- no unprefixed
		   equivalent ships anywhere yet; the standard line-clamp below is still
		   drafted against this box model. */

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--sk-gray-copy);
	font-size: 0.9375rem;
	line-height: 1.65;
}

.news-item__more {
	display: inline-flex;
	gap: 0.4375rem;
	align-items: center;
	margin-block: 1.125rem 0;
	color: var(--sk-accent);
	font-family: var(--sk-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	&::after {
		content: "\2192";
		transition: transform var(--sk-transition);
	}
}

.news-item__media {
	border-block-start: 5px solid var(--sk-accent);

	/* Above the headline on a phone, where a picture trailing the standfirst
		   reads as the start of the next row rather than the end of this one. */

	@media (max-width: 47.99rem) {
		order: -1;
		max-inline-size: 20rem;
	}
}

.news-item__image {
	display: block;
	aspect-ratio: 3 / 2;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}