/*
 * Multisite Feed Aggregator — Feed Widget.
 *
 * Layout: the first entry is emphasised (full-width image above the title) unless it
 * is a minor entry, which keeps the row layout with a larger thumbnail. Other entries
 * are compact rows whose thumbnails are hidden on narrow screens.
 *
 * Per-label styling hook: .mfa-label--{label-slug} (on both the item and the label).
 * Colours inherit from the theme; override the custom properties below if needed.
 */

.mfa-feed {
	--mfa-gap: 2rem;
	--mfa-thumb-height: 4em;
	--mfa-thumb-height-minor-first: 7em;
	--mfa-radius: 6px;
	--mfa-image-ratio: 16 / 9;
	--mfa-meta-color: color-mix(in srgb, currentColor 60%, transparent);
	--mfa-focus-color: currentColor;
}

.mfa-feed__list {
	display: flex;
	flex-direction: column;
	gap: var(--mfa-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mfa-feed__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.mfa-feed__image-link {
	position: relative;
	display: block;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--mfa-radius);
}

.mfa-feed__image {
	display: block;
	width: calc(var(--mfa-thumb-height) * var(--mfa-image-ratio));
	max-width: none;
	height: var(--mfa-thumb-height);
	border-radius: var(--mfa-radius);
	/* External images are often screenshots of arbitrary shape: crop to a consistent frame. */
	object-fit: cover;
	object-position: top center;
	transition: scale 0.3s ease-out;
}

.mfa-feed__image-link:hover .mfa-feed__image {
	scale: 1.05;
}

.mfa-feed__image-link:active .mfa-feed__image {
	scale: 0.95;
}

.mfa-feed__body {
	min-width: 0;
}

.mfa-feed__title {
	display: block;
	margin-bottom: 0.25em;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.mfa-feed__title:hover {
	text-decoration: underline;
}

.mfa-feed a:focus-visible {
	outline: 2px solid var(--mfa-focus-color);
	outline-offset: 2px;
}

.mfa-feed__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75em;
	color: var(--mfa-meta-color);
	font-size: 0.8em;
}

/* Secondary entries: thumbnails only on wider screens. */
.mfa-feed__item:not(.mfa-feed__item--first) .mfa-feed__image-link {
	display: none;
}

@media (min-width: 600px) {
	.mfa-feed__item:not(.mfa-feed__item--first) .mfa-feed__image-link {
		display: block;
	}
}

/*
 * Minor entries keep their image's natural aspect ratio (no cropping). The ratio is set
 * explicitly because lazy images with sizes="auto" get size containment, which makes
 * browsers ignore the image's own ratio.
 */
.mfa-feed__item--minor .mfa-feed__image {
	width: auto;
	aspect-ratio: var(--mfa-natural-ratio, auto);
	object-fit: fill;
}

/* First entry, minor: row layout with a larger thumbnail. */
.mfa-feed__item--first.mfa-feed__item--minor .mfa-feed__image {
	height: var(--mfa-thumb-height-minor-first);
}

/* First entry, major: stacked layout with a full-width image. */
.mfa-feed__item--first:not(.mfa-feed__item--minor) {
	flex-direction: column;
	align-items: stretch;
	gap: 0.5em;
}

.mfa-feed__item--first:not(.mfa-feed__item--minor) .mfa-feed__image-link {
	width: 100%;
}

.mfa-feed__item--first:not(.mfa-feed__item--minor) .mfa-feed__image {
	width: 100%;
	height: auto;
	aspect-ratio: var(--mfa-image-ratio);
}

.mfa-feed__item--first:not(.mfa-feed__item--minor) .mfa-feed__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 3em;
	width: 100%;
}

.mfa-feed__item--first:not(.mfa-feed__item--minor) .mfa-feed__title {
	margin: 0;
}

.mfa-feed__notice {
	padding: 0.5em 0.75em;
	border-left: 4px solid #d63638;
	font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
	.mfa-feed__image {
		transition: none;
	}

	.mfa-feed__image-link:hover .mfa-feed__image,
	.mfa-feed__image-link:active .mfa-feed__image {
		scale: none;
	}
}