/*!
 * Aura Archives and Posts — Carousel. A swipeable row with the next card peeking in.
 * Native scroll-snap (touch, trackpad, keyboard); the script only adds arrows.
 */

.aura-ap--carousel .aura-ap__items {
	display: grid;
	grid-auto-flow: column;
	/* N whole cards plus a quarter of the next one, so it's obvious there is more. */
	grid-auto-columns: calc((100% - var(--aap-gap) * var(--aap-cols, 3)) / (var(--aap-cols, 3) + .25));
	gap: var(--aap-gap);
	padding-bottom: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.aura-ap--carousel .aura-ap__items::-webkit-scrollbar {
	display: none;
}

.aura-ap--carousel .aura-ap__items:focus-visible {
	outline: 2px solid var(--aap-accent);
	outline-offset: 4px;
}

.aura-ap--carousel .aura-ap-card {
	--aap-title: 7;
	scroll-snap-align: start;
}

.aura-ap--carousel .aura-ap-card__media {
	aspect-ratio: var(--aap-ratio, 3 / 2);
}

.aura-ap--carousel .aura-ap-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Arrows (added by the script). */
.aura-ap .aura-ap__carousel-nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin: 0 0 1rem;
}

.aura-ap .aura-ap__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 50%;
	color: inherit;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.aura-ap .aura-ap__arrow:hover:not(:disabled) {
	background: var(--aap-accent);
	border-color: var(--aap-accent);
	color: var(--aap-on-accent);
}

.aura-ap .aura-ap__arrow:focus-visible {
	outline: 2px solid var(--aap-accent);
	outline-offset: 3px;
}

/* Auto-rotate pause / play: two bars, or a triangle when paused. */
.aura-ap--carousel .aura-ap__toggle::before {
	content: "";
	width: 10px;
	height: 12px;
	border-inline: 3px solid currentColor;
}

.aura-ap--carousel .aura-ap__toggle.is-paused::before {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-block: 7px solid transparent;
	border-inline: 11px solid currentColor;
	border-inline-end: 0;
}

.aura-ap .aura-ap__arrow:disabled {
	opacity: .3;
	cursor: default;
}

@container aura-ap (max-width: 900px) {
	.aura-ap.aura-ap--carousel.aura-ap--cols-3 .aura-ap__items,
	.aura-ap.aura-ap--carousel.aura-ap--cols-4 .aura-ap__items {
		grid-auto-columns: calc((100% - var(--aap-gap) * 2) / 2.25);
	}
}

@container aura-ap (max-width: 560px) {
	.aura-ap.aura-ap--carousel[class] .aura-ap__items {
		grid-auto-columns: 84%;
	}
}