/* Layout: Post slider */

.post-slider__header {
	text-align: center;
}

.post-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

/*
 * Scroll snap rather than a slider library: no JS needed for touch, trackpad
 * or keyboard, and the track stays a plain scrollable list. post-slider.js only
 * drives the arrows.
 */
.post-slider__track {
	display: flex;
	gap: var(--space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.post-slider__track::-webkit-scrollbar {
	display: none;
}

.post-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.post-card {
	display: grid;
	height: 100%;
	background: var(--color-bg);
	overflow: hidden;
}

@media (min-width: 720px) {
	.post-card {
		grid-template-columns: 1fr 1fr;
	}
}

.post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
}

.post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(var(--space-m), 1rem + 3vw, var(--space-xl));
	text-align: center;
}

.post-card__title {
	margin-bottom: var(--space-m);
	font-size: var(--text-xl);
}

.post-card__link {
	color: inherit;
	text-decoration: none;
}

.post-card__link:hover,
.post-card__link:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.post-card__excerpt {
	color: var(--color-text);
}

/* Arrows sit outside the track so they never cover a slide. */
.post-slider__nav {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-full);
	color: var(--color-text);
	cursor: pointer;
	transition: opacity var(--transition), background-color var(--transition);
}

.post-slider__nav:hover:not(:disabled),
.post-slider__nav:focus-visible:not(:disabled) {
	background-color: var(--color-surface);
}

.post-slider__nav:disabled {
	opacity: 0.25;
	cursor: default;
}

/* One slide, or a track that fits: the arrows have nothing to do. */
.post-slider.is-static .post-slider__nav {
	display: none;
}

.post-slider__action {
	margin: var(--space-l) 0 0;
	text-align: center;
}

@media (max-width: 47.9375rem) {
	/* On a phone the arrows eat a third of the width — swipe instead. */
	.post-slider__nav {
		display: none;
	}
}