/*
 * Featured article (ADR 0063): one article, big. Photo beside: the photo and the text side by side
 * (the photo at the start or the end; one under the other on phones). Text on the photo: the photo
 * fills the article and the text sits on a dark fade at its foot. With the latest articles, a list
 * of small rows beside it. Details reuse the Articles line (posts/style.css).
 */
.sv-post-featured__main {
	display: grid;
	gap: var(--sv-space-md) var(--sv-space-lg);
	align-items: start;
}

@media (min-width: 900px) {
	.sv-post-featured__main--list {
		grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
		align-items: stretch;
	}
}

.sv-post-featured__card {
	position: relative;
	display: grid;
	gap: var(--sv-space-md) var(--sv-space-lg);
	align-items: center;
	margin: 0;
}

.sv-post-featured__media {
	overflow: hidden;
	border-radius: inherit;
	background-color: var(--sv-color-surface);
	aspect-ratio: 4 / 3;
}

.sv-post-featured__card--shape-square .sv-post-featured__media {
	aspect-ratio: 1;
}

.sv-post-featured__card--shape-wide .sv-post-featured__media {
	aspect-ratio: 16 / 9;
}

.sv-post-featured__card--shape-portrait .sv-post-featured__media {
	aspect-ratio: 3 / 4;
}

.sv-post-featured__photo {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
	transition: scale 0.5s ease;
}

.sv-post-featured__card:is(:hover, :focus-within) .sv-post-featured__photo {
	scale: 1.03;
}

.sv-post-featured__body {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	min-inline-size: 0;
}

/* The category as a small tag. */
.sv-post-featured__tag {
	margin: 0;
	padding-block: 0.25rem;
	padding-inline: 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--sv-accent, var(--sv-color-primary)) 12%, transparent);
	/* The tint behind takes some contrast away: the words lean a little to the text color (ADR 0102). */
	color: color-mix(in srgb, var(--sv-accent, var(--sv-color-link)) 78%, var(--sv-color-text));
	font-size: var(--sv-size-small);
	font-weight: 600;
	line-height: 1.4;
}

/* On a main-color or accent-color card the words are the card's own color: a quiet line instead of a tint (ADR 0102). */
:where(.sv-bg-primary, .sv-bg-secondary, .sv-card-primary, .sv-card-secondary) .sv-post-featured__tag {
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	background: none;
}

.sv-post-featured__title {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h2);
	line-height: calc(1.2 * var(--sv-leading, 1));
	overflow-wrap: break-word;
}

.sv-post-featured--title-size-sm .sv-post-featured__title {
	font-size: var(--sv-size-h3);
}

.sv-post-featured--title-size-lg .sv-post-featured__title {
	font-size: var(--sv-size-h1);
	line-height: calc(1.12 * var(--sv-leading, 1));
}

/* The title's link covers the whole article. */
.sv-post-featured__link {
	color: inherit;
	text-decoration: none;
}

.sv-post-featured__link::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	content: "";
}

.sv-post-featured__link:focus-visible {
	outline: none;
}

.sv-post-featured__card:has(.sv-post-featured__link:focus-visible) {
	outline: 2px solid var(--sv-focus, var(--sv-color-text));
	outline-offset: 3px;
}

.sv-post-featured--look-beside .sv-post-featured__card:hover .sv-post-featured__title {
	color: var(--sv-accent, var(--sv-color-link));
}

.sv-post-featured__text {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-body) * 1.05);
}

.sv-post-featured .sv-post-featured__meta {
	margin: 0;
}

.sv-post-featured__action {
	padding-block-start: 0.5rem;
}

/* Photo beside: side by side from tablets up. */
@media (min-width: 768px) {
	.sv-post-featured--look-beside .sv-post-featured__main:not(.sv-post-featured__main--list) .sv-post-featured__card {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	}

	.sv-post-featured--image-side-end .sv-post-featured__main:not(.sv-post-featured__main--list) .sv-post-featured__media {
		order: 2;
	}
}

/* Text on the photo: the photo fills the article, the text on a dark fade at its foot. */
.sv-post-featured--look-photo .sv-post-featured__card {
	overflow: hidden;
	align-content: end;
	min-block-size: 24rem;
	/* Across a whole wide page it stays a calm height (still full width); the photo fills it. */
	inline-size: 100%;
	max-block-size: min(34rem, 80vh);
	isolation: isolate;
	aspect-ratio: 4 / 3;
}

.sv-post-featured--look-photo .sv-post-featured__card--shape-square {
	aspect-ratio: 1;
}

.sv-post-featured--look-photo .sv-post-featured__card--shape-wide {
	aspect-ratio: 16 / 9;
}

.sv-post-featured--look-photo .sv-post-featured__card--shape-portrait {
	aspect-ratio: 3 / 4;
}

/* Beside the list it is as tall as the list. */
.sv-post-featured--look-photo .sv-post-featured__main--list .sv-post-featured__card {
	aspect-ratio: auto;
}

.sv-post-featured--look-photo .sv-post-featured__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 0;
	aspect-ratio: auto;
}

.sv-post-featured--look-photo .sv-post-featured__media::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 45%) 40%, rgb(0 0 0 / 0%) 72%);
	content: "";
}

.sv-post-featured--look-photo .sv-post-featured__body {
	--sv-color-text: #fff;
	--sv-color-muted: rgb(255 255 255 / 85%);
	padding: var(--sv-space-md);
	color: var(--sv-color-text);
}

.sv-post-featured--look-photo .sv-post-featured__tag {
	background: rgb(255 255 255 / 92%);
	color: var(--sv-ink, #1f2937);
}

.sv-post-featured--look-photo .sv-post-featured__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* The latest articles beside it: small rows with a square picture. */
.sv-post-featured__list {
	display: grid;
	gap: var(--sv-space-sm);
	align-content: start;
	min-inline-size: 0;
}

.sv-post-featured__listtitle {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h4);
	line-height: calc(1.3 * var(--sv-leading, 1));
}

.sv-post-featured__rows {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-post-featured__row {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	color: var(--sv-color-text);
	text-decoration: none;
}

.sv-post-featured__thumb {
	overflow: hidden;
	flex: none;
	inline-size: 5.25rem;
	border-radius: var(--sv-radius-sm);
	background-color: var(--sv-color-surface);
	aspect-ratio: 1;
}

.sv-post-featured__thumb img,
.sv-post-featured__thumb .sv-posts__nophoto {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	min-block-size: 0;
	object-fit: cover;
}

.sv-post-featured__rowtext {
	display: grid;
	gap: 0.3rem;
	min-inline-size: 0;
}

.sv-post-featured__rowtitle {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--sv-font-heading);
	font-weight: 600;
	line-height: calc(1.35 * var(--sv-leading, 1));
	transition: color 0.2s ease;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.sv-post-featured__row:is(:hover, :focus-visible) .sv-post-featured__rowtitle {
	color: var(--sv-accent, var(--sv-color-link));
}

.sv-post-featured__row .sv-posts__meta {
	margin: 0;
}

/* Small rows show no category; photo cards do. */
.sv-post-featured--list-look-rows .sv-post-featured__rowtag {
	display: none;
}

/*
 * The list as photo cards: each one a picture with its text on a dark fade, sharing the featured
 * article's height (two stacked: the Magazine grid design) and its corners.
 */
.sv-post-featured--list-look-cards .sv-post-featured__list {
	grid-template-rows: auto minmax(0, 1fr);
}

.sv-post-featured--list-look-cards .sv-post-featured__list:not(:has(.sv-post-featured__listtitle)) {
	grid-template-rows: minmax(0, 1fr);
}

.sv-post-featured--list-look-cards .sv-post-featured__rows {
	grid-auto-rows: minmax(11rem, 1fr);
	gap: var(--sv-space-sm);
}

/* The corners come down from the list (the section's Rounded corners) to each card. */
.sv-post-featured--list-look-cards :is(.sv-post-featured__rows, .sv-post-featured__rows > li) {
	border-radius: inherit;
}

.sv-post-featured--list-look-cards .sv-post-featured__row {
	position: relative;
	display: grid;
	overflow: hidden;
	align-items: end;
	block-size: 100%;
	border-radius: inherit;
	color: #fff;
	isolation: isolate;
}

.sv-post-featured--list-look-cards .sv-post-featured__thumb {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: auto;
	border-radius: 0;
	aspect-ratio: auto;
}

.sv-post-featured--list-look-cards .sv-post-featured__thumb::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 80%) 0%, rgb(0 0 0 / 35%) 50%, rgb(0 0 0 / 0%) 80%);
	content: "";
}

.sv-post-featured--list-look-cards .sv-post-featured__thumb img {
	transition: scale 0.5s ease;
}

.sv-post-featured--list-look-cards .sv-post-featured__row:is(:hover, :focus-visible) .sv-post-featured__thumb img {
	scale: 1.04;
}

.sv-post-featured--list-look-cards .sv-post-featured__rowtext {
	--sv-color-text: #fff;
	--sv-color-muted: rgb(255 255 255 / 85%);
	gap: 0.4rem;
	justify-items: start;
	padding: var(--sv-space-sm);
}

.sv-post-featured--list-look-cards .sv-post-featured__rowtitle {
	font-size: calc(var(--sv-size-body) * 1.15);
}

.sv-post-featured--list-look-cards .sv-post-featured__row:is(:hover, :focus-visible) .sv-post-featured__rowtitle {
	color: inherit;
}

.sv-post-featured__rowtag {
	padding-block: 0.15rem;
	padding-inline: 0.6rem;
	border-radius: 999px;
	background: rgb(255 255 255 / 92%);
	color: var(--sv-ink, #1f2937);
	font-size: calc(var(--sv-size-small) * 0.92);
	font-weight: 600;
}

/*
 * The list as rows with the photo beside (ADR 0167): the featured article and the list share the width; each
 * article in the list has its photo at the start and, beside it, its category, title, two lines of the article
 * and its details. The categories are words in the accent, as on the article cards (Category on top).
 */
@media (min-width: 900px) {
	.sv-post-featured--list-look-beside .sv-post-featured__main--list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--sv-space-md);
		align-items: start;
	}
}

/* Line below it (ADR 0167): a light line under the article (and its list), a Medium room above it. */
.sv-post-featured__main--line {
	padding-block-end: var(--sv-space-md);
	border-block-end: 1px solid var(--sv-color-border);
}

/* With the arrow (ADR 0167), titles take the whole width, so it sits at the end of the line. */
.sv-post-featured__main--arrow :is(.sv-post-featured__title, .sv-post-featured__rowtitle) {
	justify-self: stretch;
}

.sv-post-featured--list-look-beside .sv-post-featured__rows {
	gap: var(--sv-space-md);
}

/* The corners come down from the list (Card corners) to each photo. */
.sv-post-featured--list-look-beside :is(.sv-post-featured__rows, .sv-post-featured__rows > li, .sv-post-featured__row) {
	border-radius: inherit;
}

.sv-post-featured--list-look-beside .sv-post-featured__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sv-space-sm);
	align-items: start;
}

.sv-post-featured--list-look-beside .sv-post-featured__thumb {
	inline-size: auto;
	border-radius: inherit;
	aspect-ratio: 4 / 3;
}

.sv-post-featured--list-look-beside .sv-post-featured__thumb img {
	transition: scale 0.5s ease;
}

.sv-post-featured--list-look-beside .sv-post-featured__row:is(:hover, :focus-visible) .sv-post-featured__thumb img {
	scale: 1.03;
}

.sv-post-featured--list-look-beside .sv-post-featured__rowtext {
	gap: 0.5rem;
	justify-items: start;
}

.sv-post-featured--list-look-beside .sv-post-featured__rowtitle {
	font-weight: var(--sv-font-heading-weight, 600);
	font-size: calc(var(--sv-size-body) * 1.1);
}

.sv-post-featured__rowexcerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.sv-post-featured--list-look-beside .sv-post-featured__main--list :is(.sv-post-featured__tag, .sv-post-featured__rowtag) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sv-accent, var(--sv-color-link));
	font-size: var(--sv-size-small);
	font-weight: 600;
}

/* Phones: a smaller photo and title, so the words keep most of the row; the title, category and details only. */
@media (max-width: 599px) {
	.sv-post-featured--list-look-beside .sv-post-featured__row {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.sv-post-featured--list-look-beside .sv-post-featured__rowtitle {
		font-size: var(--sv-size-body);
		-webkit-line-clamp: 3;
	}

	.sv-post-featured--list-look-beside .sv-post-featured__rowexcerpt {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-post-featured--list-look-cards .sv-post-featured__thumb img,
	.sv-post-featured--list-look-beside .sv-post-featured__thumb img {
		transition: none;
	}

	.sv-post-featured--list-look-beside .sv-post-featured__row:is(:hover, :focus-visible) .sv-post-featured__thumb img {
		scale: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sv-post-featured__photo,
	.sv-post-featured__rowtitle {
		transition: none;
	}

	.sv-post-featured__card:is(:hover, :focus-within) .sv-post-featured__photo {
		scale: none;
	}
}