/* Card scroller
 *
 * Builder utility class for a Divi row: add `cna-card-scroller` to the row's CSS Class and
 * on phones (Divi's ≤767px breakpoint) its columns become a horizontal, swipeable strip of
 * cards with scroll snapping and the next card peeking in. Tablet and desktop are untouched.
 *
 * No library and no controls: it is a native scroll region. assets/js/card-scroller.js
 * makes it focusable and labels it from the section heading so keyboard and screen-reader
 * users get the same content. Each card is capped below 320px and reads vertically, which
 * is what WCAG 1.4.10 Reflow asks of a carousel inside a reflowing page.
 *
 * The row is widened to the full section and the gutter becomes padding, so cards line up
 * with the surrounding text but the strip can run to the screen edge.
 */

@media (max-width: 767px) {
	.et_pb_section .et_pb_row.cna-card-scroller {
		--cna-scroller-gutter: 7.5%;
		--cna-scroller-gap: 16px;

		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--cna-scroller-gap);
		/* !important: Divi's generated CSS sets the row's phone width (85%) with !important. */
		inline-size: 100% !important;
		max-inline-size: none;
		padding-inline: var(--cna-scroller-gutter);
		/* Room between the tallest card and the scrollbar, which draws inside the row's box. */
		padding-block-end: 20px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--cna-scroller-gutter);
		scrollbar-width: thin;
		scrollbar-color: var(--gcid-primary-color, #007cad) transparent;

		> .et_pb_column {
			flex: 0 0 min(80%, 300px);
			inline-size: auto;
			margin: 0;
			scroll-snap-align: start;
		}

		&:focus-visible {
			outline: 3px solid var(--gcid-primary-color, #007cad);
			outline-offset: -3px;
		}

		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}
}