/*
 * Latest Docs rail (blocks/docs-rail/docs-rail.php + js/docs-rail.js).
 * Cards come from css/docs.css (grid card styles); this file lays them out in a row that
 * starts at the page content edge and bleeds off the right of the screen.
 * Plain CSS, no build step.
 */

.docs-rail {
	/* Same column as page content: theme.json contentSize with the 1rem side padding. */
	--rail-gutter: max(1rem, calc((100% - var(--wp--style--global--content-size, 1180px)) / 2 + 1rem));
	padding: 1rem 0 0;
}

.docs-rail__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	max-width: var(--wp--style--global--content-size, 1180px);
	margin: 0 auto 2rem;
	padding: 0 1rem;
}

.docs-rail__title {
	margin: 0;
	color: var(--docs-text);
	font-family: "GillSansNova-Medium", sans-serif; /* as the other home page section headings */
	font-weight: normal; /* Medium is its own family; the h2 weight would be synthesised */
	font-size: var(--wp--preset--font-size--x-large, 2.5rem); /* 40px, as "What our members say" */
	text-wrap: balance;
}

.docs-rail__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.docs-rail__all {
	margin-bottom: 0;
}

/* Previous/next buttons, under the cards, aligned to the right edge of the content. */
.docs-rail__footer {
	max-width: var(--wp--style--global--content-size, 1180px);
	margin: 0.5rem auto 0;
	padding: 0 1rem;
}

.docs-rail__nav {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.docs-rail__nav[hidden] {
	display: none;
}

.docs-rail__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--docs-purple);
	border-radius: 50%;
	background: transparent;
	color: var(--docs-purple);
	font-size: 1.375rem;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.docs-rail__button:hover:not(:disabled),
.docs-rail__button:focus-visible {
	background: var(--docs-purple);
	color: #fff;
}

.docs-rail__button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* The scrolling row. Native scroll + snap points: touch, trackpad and Shift+wheel all work,
   and the region is focusable for keyboard arrows. */
.docs-rail__scroller {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--rail-gutter);
	/* No visible scrollbar: the peeking card, prev/next buttons (desktop/tablet), swipe
	   (phones) and arrow/Home/End keys all scroll it. Scrolling itself is unchanged. */
	scrollbar-width: none;
}

.docs-rail__scroller::-webkit-scrollbar {
	display: none;
}

.docs-rail__scroller:focus-visible {
	outline: 2px solid var(--docs-purple);
	outline-offset: -2px;
}

/* (0,2,0) to override the grid layout .docs-items--grid sets in docs.css. */
.docs-rail .docs-rail__track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
	margin: 0;
	padding: 0.5rem var(--rail-gutter) 1rem; /* room for the hover lift */
}

.docs-rail .docs-rail__track > .doc {
	flex: 0 0 17rem; /* ~4.5 cards on a 1440px screen, so the row clearly scrolls */
	scroll-snap-align: start;
}

@media (max-width: 767.98px) {
	.docs-rail__nav {
		display: none; /* phones swipe */
	}

	.docs-rail .docs-rail__track {
		gap: 1rem;
	}

	/* ~1.6 cards on screen, so the next one is clearly peeking in. */
	.docs-rail .docs-rail__track > .doc {
		flex-basis: 60vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.docs-rail__scroller {
		scroll-behavior: auto;
	}
}