/**
 * roarr/feature-card - ported verbatim from design-reference/mocks/css/styles.css
 * (.roarr-feature-card--media base + --story override). See card-grid/style.css
 * for the token-alias caveat.
 */

.roarr-feature-card--media {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: end;
	min-height: calc(var(--space-96) * 3);
	border-radius: var(--radius-sm);
	background: var(--deep-forest);
	color: var(--text-on-dark);
	box-shadow: var(--shadow-soft);
}

.roarr-feature-card--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--deep-forest) 84%, transparent),
			color-mix(in srgb, var(--deep-forest) 56%, transparent) 48%,
			color-mix(in srgb, var(--deep-forest) 14%, transparent)
		),
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--deep-forest) 6%, transparent),
			color-mix(in srgb, var(--deep-forest) 20%, transparent)
		);
	pointer-events: none;
}

.roarr-feature-card--media
	> :is(img, picture, figure:not(.roarr-feature-card__content)) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.roarr-feature-card--media
	> :is(img, picture, figure:not(.roarr-feature-card__content))
	img,
.roarr-feature-card--media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.roarr-feature-card__content {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--space-16);
	width: min(
		100% - calc(var(--space-24) * 2),
		calc(var(--space-120) * 4 + var(--space-80))
	);
	padding: var(--panel-padding-mobile);
}

.roarr-tag {
	justify-self: start;
	padding: var(--space-8) var(--space-16);
	border-radius: var(--radius-xs);
	background: var(--amber);
	color: var(--text-on-dark);
	font-size: var(--text-sm);
	font-weight: var(--weight-heavy);
	line-height: var(--lh-solid);
	text-transform: uppercase;
}

.roarr-feature-card--media h2 {
	color: var(--text-on-dark);
	font-size: var(--h2);
	line-height: var(--lh-tight);
	letter-spacing: 0;
}

.roarr-feature-card--media p {
	max-width: 34ch;
	color: var(--text-on-dark);
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	line-height: var(--lh-relaxed);
}

.roarr-feature-card--media :is(.btn, .wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	gap: var(--space-8);
	min-height: var(--button-min-height);
	max-width: 100%;
	padding-inline: var(--button-padding-inline);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--primary);
	color: var(--deep-forest);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-solid);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.roarr-feature-card--media
	:is(.btn, .wp-block-button__link):is(:hover, :focus-visible) {
	background: var(--primary-hover);
	color: var(--deep-forest);
	transform: translateY(-2px);
}

/* --story override: the feature image remains prominent, while its copy sits
   below it like the rest of the News feed. This keeps long titles readable on
   phones and avoids placing controls over busy artwork. */
.roarr-feature-card--story {
	box-sizing: border-box;
	display: grid;
	align-items: stretch;
	gap: var(--space-24);
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
	background: transparent;
	color: var(--text-primary);
	box-shadow: none;
}

.roarr-feature-card--story::after {
	content: none;
}

.roarr-feature-card--story .roarr-feature-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--deep-forest);
	box-shadow: none;
}

.roarr-feature-card--story .roarr-feature-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.roarr-feature-card--story h2 {
	max-width: 18ch;
	color: var(--text-primary);
	font-size: var(--h3);
}

.roarr-feature-card--story h2 a {
	color: inherit;
	text-decoration: none;
}

.roarr-feature-card--story h2 a:is(:hover, :focus-visible) {
	color: var(--primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.14em;
}

.roarr-feature-card--story .roarr-feature-card__meta {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	line-height: var(--lh-snug);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.roarr-feature-card--story .roarr-feature-card__content {
	gap: var(--space-8);
	width: 100%;
	padding: 0;
}

.roarr-feature-card--story p:not(.roarr-feature-card__meta) {
	max-width: 28ch;
	color: var(--text-secondary);
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

/* On phones the pinned story follows the same card rhythm as the feed below.
   The badge and CTA still identify it as featured, but its image crop and type
   no longer become a second, oversized mobile card pattern. */
@media (max-width: 767px) {
	.roarr-feature-card--story .roarr-feature-card__media {
		aspect-ratio: var(--image-ratio-artwork);
		border-radius: var(--radius-md);
	}

	.roarr-feature-card--story .roarr-feature-card__content {
		gap: var(--space-16);
	}

	.roarr-feature-card--story h2 {
		max-width: none;
		font-family: var(--font-heading);
		font-size: var(--h3);
		font-weight: var(--weight-heavy);
		line-height: var(--lh-tight);
		letter-spacing: 0;
		text-transform: none;
	}

	.roarr-feature-card--story .roarr-feature-card__meta {
		color: var(--primary);
		font-size: var(--text-xs);
		font-weight: var(--weight-heavy);
		text-transform: uppercase;
	}

	.roarr-feature-card--story p:not(.roarr-feature-card__meta) {
		max-width: 74ch;
		line-height: var(--lh-relaxed);
	}
}

@media (min-width: 768px) {
	.roarr-feature-card--story .roarr-feature-card__media {
		aspect-ratio: 16 / 9;
	}

	.roarr-feature-card--story .roarr-feature-card__content {
		gap: var(--space-16);
	}

	.roarr-feature-card--story h2 {
		max-width: 22ch;
		font-size: var(--h2);
	}

	.roarr-feature-card--story p:not(.roarr-feature-card__meta) {
		max-width: 34ch;
		font-size: var(--text-base);
		line-height: var(--lh-relaxed);
	}
}

@media (min-width: 1024px) {
	.roarr-feature-card--story .roarr-feature-card__media {
		/* Match the News feed artwork crop so the featured visual remains at
		   least as substantial as the cards below it on desktop. */
		aspect-ratio: var(--image-ratio-artwork);
	}
}