/*
 * Highlight Cards: editorial image cards linking to any page, with a
 * hover lift, image zoom and arrow nudge.
 */

.highlight-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover,
.highlight-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.highlight-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.highlight-card:hover img,
.highlight-card:focus-visible img {
	transform: scale(1.06);
}

.highlight-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-md);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.78) 100%);
	transition: background-color 0.3s ease;
}

.highlight-card:hover .highlight-card__overlay,
.highlight-card:focus-visible .highlight-card__overlay {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.85) 100%);
}

.highlight-card__text {
	display: block;
	color: var(--color-white);
	padding-right: var(--space-2xl);
}

.highlight-card__heading {
	margin: 0 0 var(--space-2xs);
	font-size: var(--text-xl);
	line-height: 1.15;
	color: var(--color-white);
}

.highlight-card__description {
	margin: 0;
	max-width: 30ch;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.highlight-card__arrow {
	position: absolute;
	right: var(--space-md);
	bottom: var(--space-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--color-black);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.highlight-card:hover .highlight-card__arrow,
.highlight-card:focus-visible .highlight-card__arrow {
	transform: translate(4px, -4px);
	background-color: var(--color-gold);
}

/*
 * Mobile: swipeable carousel instead of a stacked single column, per
 * PROJECT_PLAN.md Section 1 ("keeps the card's visual impact instead of
 * shrinking it"). Peek-next-card pattern — pure CSS scroll-snap, no JS
 * needed. Reverts to the static 2-col grid at tablet+ (layout.css).
 */
@media (max-width: 599px) {
	.highlight-cards__grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-sm);
		scrollbar-width: none;
	}

	.highlight-cards__grid::-webkit-scrollbar {
		display: none;
	}

	.highlight-cards__grid .highlight-card {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
}