/* ==========================================================================
   VANE News Grid
   380x380 cards at desktop. Heading and arrows share a flex row above the
   track; arrows swap between active/idle artwork rather than fading, so
   there's no flash on first state change. Mobile drops the arrows for a
   native swipe with a "Swipe" affordance.
   ========================================================================== */

.vane-news {
	position: relative;
	--vane-news-card: 380px;
	--vane-news-gap: 24px;
}

/* Head ------------------------------------------------------------------- */

.vane-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.vane-news__heading {
	margin: 0;
	color: var(--vane-blue, #00385E);
	font-variant-numeric: lining-nums tabular-nums;
	font-family: Cormorant, "Cormorant Garamond", serif;
	font-size: 44px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
}

/* Track ------------------------------------------------------------------ */

.vane-news__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.vane-news__viewport::-webkit-scrollbar {
	display: none;
}

.vane-news--carousel .vane-news__viewport {
	scroll-snap-type: x mandatory;
}

.vane-news__track {
	display: flex;
	gap: var(--vane-news-gap);
	align-items: stretch;
}

/* Under the threshold there's nothing to scroll, so let cards wrap. */
.vane-news:not(.vane-news--carousel) .vane-news__track {
	flex-wrap: wrap;
}

.vane-news__card {
	flex: 0 0 var(--vane-news-card);
	max-width: var(--vane-news-card);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

/* Media ------------------------------------------------------------------ */

.vane-news__media {
	position: relative;
	display: block;
	width: 380px;
	height: 380px;
	max-width: 100%;
	overflow: hidden;
	background: var(--vane-panel, #f4f4f2);
	margin-bottom: 20px;
}

.vane-news__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.vane-news__card:hover .vane-news__media img {
	transform: scale(1.03);
}

/* Posts with no featured image — keeps the grid rhythm intact. */
.vane-news__media--empty {
	background: var(--vane-panel, #f4f4f2);
}

/* Kept for the member dashboard, where members="1" is passed. */
.vane-news__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--vane-mint, #ABE2C7);
	color: var(--vane-navy, #00385E);
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
}

/* Title ------------------------------------------------------------------ */

.vane-news__title {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}

.vane-news__title a {
	color: var(--vane-blue, #000F3B);
	text-decoration: none;
}

.vane-news__title a:hover {
	text-decoration: underline;
}

/* READ / LISTEN ---------------------------------------------------------- */

/* margin-top:auto pins every CTA to the same baseline regardless of how
   many lines the title wraps to. */
.vane-news__cta {
	margin-top: auto;
	display: inline-flex;
	width: fit-content;
	max-width: 300px;
	padding: 14px 0;
	align-items: center;
	gap: 4px;
	border-bottom: 2px solid var(--vane-navy, #00385E);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vane-navy, #00385E);
	text-decoration: none;
}

.vane-news__cta-arrow {
	width: 8px;
	height: auto;
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.vane-news__card:hover .vane-news__cta-arrow {
	transform: translateX(3px);
}

/* Carousel arrows -------------------------------------------------------- */

.vane-news__nav {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.vane-news__arrow {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.vane-news__arrow-img {
	width: 100%;
	height: 100%;
	display: block;
	transition: opacity .2s ease;
}

/* Both states render; idle stacks over active so neither reflows. */
.vane-news__arrow-img--idle {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.vane-news__arrow:disabled {
	cursor: default;
}

.vane-news__arrow:disabled .vane-news__arrow-img--idle {
	opacity: 1;
}

.vane-news__arrow:disabled .vane-news__arrow-img--active {
	opacity: 0;
}

/* Swipe affordance — mobile only */
.vane-news__swipe {
	display: none;
	align-items: center;
	gap: 6px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--vane-navy, #00385E);
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vane-navy, #00385E);
}

.vane-news__swipe img {
	width: 8px;
	height: auto;
	display: block;
}

/* Accessibility ---------------------------------------------------------- */

.vane-news__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1024px) {
	.vane-news {
		--vane-news-card: 300px;
	}

	.vane-news__media {
		width: 300px;
		height: 300px;
	}

	.vane-news__heading {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.vane-news {
		--vane-news-card: 78vw;
	}

	.vane-news__media {
		width: 78vw;
		height: 78vw;
	}

	.vane-news__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.vane-news__heading {
		font-size: 30px;
	}

	.vane-news__arrow {
		display: none;
	}

	.vane-news__swipe {
		display: inline-flex;
	}
}