/**
 * Preluence News — slider / carousel (Post Slider widget).
 * Native scroll-snap; slider.js only adds controls and autoplay.
 */

.pn-slider {
	--pn-per-view: 1;
	--pn-slide-gap: var(--pn-gap);
	position: relative;
}

.pn-slider__track {
	display: grid;
	grid-auto-columns: calc((100% - (var(--pn-per-view) - 1) * var(--pn-slide-gap)) / var(--pn-per-view));
	grid-auto-flow: column;
	gap: var(--pn-slide-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--pn-radius);
}

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

.pn-slider__track:focus-visible {
	outline-offset: 4px;
}

.pn-slider__slide {
	min-width: 0;
	scroll-snap-align: start;
}

/* Carousel: tablets 2 across, phones 1 with a peek of the next card. */
@media (max-width: 1023px) {

	.pn-slider--carousel {
		--pn-per-view: 2 !important;
	}
}

@media (max-width: 599px) {

	.pn-slider--carousel .pn-slider__track {
		grid-auto-columns: 82%;
	}
}

/* Hero slider */
.pn-slider--hero {
	--pn-slide-gap: 0;
}

.pn-slider--hero .pn-card--overlay {
	aspect-ratio: 16 / 9;
	height: 100%;
}

@media (max-width: 599px) {

	.pn-slider--hero .pn-card--overlay {
		aspect-ratio: 4 / 5;
	}
}

.pn-slider--hero .pn-card--overlay .pn-card__title {
	font-size: clamp(1.4rem, 3vw, 2.35rem);
}

.pn-slider--carousel .pn-card--overlay {
	aspect-ratio: 4 / 5;
}

/* Controls */
.pn-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 0.85rem;
}

.pn-slider__controls[hidden] {
	display: none;
}

.pn-slider__btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--pn-border);
	border-radius: 50%;
	background: var(--pn-bg);
	color: var(--pn-text);
	cursor: pointer;
	transition: background-color 0.15s var(--pn-ease), color 0.15s var(--pn-ease);
}

.pn-slider__btn:hover {
	border-color: var(--pn-primary);
	background: var(--pn-primary);
	color: var(--pn-on-primary);
}

.pn-slider__prev .pn-icon {
	transform: rotate(90deg);
}

.pn-slider__next .pn-icon {
	transform: rotate(-90deg);
}

[dir="rtl"] .pn-slider__prev .pn-icon {
	transform: rotate(-90deg);
}

[dir="rtl"] .pn-slider__next .pn-icon {
	transform: rotate(90deg);
}

.pn-slider__pause-icon {
	width: 10px;
	height: 12px;
	border-inline: 3px solid currentcolor;
}

.pn-slider__pause[aria-pressed="true"] .pn-slider__pause-icon {
	width: 0;
	height: 0;
	border-block: 7px solid transparent;
	border-inline-start: 11px solid currentcolor;
	border-inline-end: 0;
	margin-inline-start: 3px;
}

.pn-slider__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem;
	margin-inline: 0.5rem;
}

.pn-slider__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.pn-slider__dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: auto;
	border-radius: 999px;
	background: var(--pn-border);
	transition: width 0.2s var(--pn-ease), background-color 0.2s var(--pn-ease);
}

.pn-slider__dot[aria-current="true"]::before {
	width: 22px;
	background: var(--pn-primary);
}