/*
 * trbc/card-rail — image-led cards in a row that becomes a swipeable rail.
 *
 * One track at every width (see CardRailData.php). Only the card width
 * changes:
 *
 *   desktop  1/columns of the row — a set that fits sits still
 *   tablet   a little under half, so a third card is always peeking
 *   phone    84%, with the rail bleeding to the screen edge so the next card
 *            is visibly cut off — the cue that there is more to swipe
 *
 * The controls row is server-rendered with `hidden`; card-rail.js reveals it
 * only when the track actually overflows. Every state selector below matches
 * the initial markup so WP Rocket's Remove Unused CSS keeps it.
 */

.trbc-rail {
	--trbc-rail-cols: 3;
	--trbc-rail-gap: var(--trbc-space-6);
	--trbc-rail-ratio: 4 / 5;
	/* Room for a focus ring inside the scroll container, which clips. */
	--trbc-rail-ring: 6px;
	--trbc-rail-bleed: var(--trbc-rail-ring);

	width: 100%;
	font-family: var(--trbc-face);
	color: var(--trbc-ink);
}

.trbc-rail--cols-2 { --trbc-rail-cols: 2; --trbc-rail-gap: var(--trbc-space-8); }
.trbc-rail--cols-4 { --trbc-rail-cols: 4; --trbc-rail-gap: var(--trbc-space-5); }

.trbc-rail--square    { --trbc-rail-ratio: 1 / 1; }
.trbc-rail--landscape { --trbc-rail-ratio: 3 / 2; }

/* The phone bleed sizes the track from `100vw`, which on a desktop with an
   always-visible scrollbar (macOS with a mouse, Windows) is ~15px wider than
   the page, and the overshoot made the whole page scroll sideways at narrow
   window widths. `clip` hides it without creating a scroll container, so
   sticky descendants keep working. Sections are full width, so nothing
   visible is lost. */
.et_pb_section:has(.trbc-rail) {
	overflow-x: clip;
}

/* ---------- track ---------- */
.trbc-rail__track {
	position: relative; /* the offsetParent card-rail.js measures against */
	display: flex;
	gap: var(--trbc-rail-gap);
	margin: calc(-1 * var(--trbc-rail-ring)) calc(-1 * var(--trbc-rail-bleed));
	padding: var(--trbc-rail-ring) var(--trbc-rail-bleed);
	scroll-padding-inline: var(--trbc-rail-bleed);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.trbc-rail__track::-webkit-scrollbar {
	display: none;
}

.trbc-rail__track:focus-visible {
	outline: 3px solid var(--trbc-focus);
	outline-offset: -3px;
	border-radius: var(--trbc-radius-lg);
}

/* Each child module is a Divi wrapper. Tripled classes outrank Divi's column
   rhythm (`.et_pb_column .et_pb_module:not(:last-child)`, 0-3-0 and emitted
   after theme CSS), which would otherwise add a bottom margin to every card
   but the last. */
.trbc-rail.trbc-rail.trbc-rail .trbc-rail__track > * {
	flex: 0 0 calc((100% - (var(--trbc-rail-cols) - 1) * var(--trbc-rail-gap)) / var(--trbc-rail-cols));
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

@media (max-width: 980px) {
	.trbc-rail {
		--trbc-rail-gap: var(--trbc-space-5);
	}

	/* Bleed to the viewport edge; the first card still aligns with the
	   content column because the same amount is given back as padding.
	   `cqw` rather than `%`: a percentage in scroll-padding resolves against
	   the scrollport, not the rail, so it came out as zero and snapping pulled
	   the first card off the column. Container units give margin, padding and
	   scroll-padding one absolute length. */
	@supports (width: 1cqw) {
		.trbc-rail {
			container-type: inline-size;
		}

		.trbc-rail__track {
			--trbc-rail-bleed: max(var(--trbc-rail-ring), calc(50vw - 50cqw));
		}
	}

	.trbc-rail.trbc-rail.trbc-rail .trbc-rail__track > * {
		flex-basis: 44%;
	}
}

@media (max-width: 767px) {
	.trbc-rail {
		--trbc-rail-gap: var(--trbc-space-4);
	}

	.trbc-rail.trbc-rail.trbc-rail .trbc-rail__track > * {
		flex-basis: 84%;
	}
}

/* ---------- card ---------- */
.trbc-rail-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--trbc-space-4);
	height: 100%;
}

.trbc-rail-card__media {
	aspect-ratio: var(--trbc-rail-ratio);
	border-radius: var(--trbc-radius-media);
	background-color: var(--trbc-surface-sunk);
	overflow: hidden;
}

.trbc-rail-card--no-media .trbc-rail-card__media {
	display: none;
}

.trbc-rail-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--trbc-ease-slow);
}

.trbc-rail-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--trbc-space-2);
}

/* Title type is restated in component-reset.css, where the host heading
   rules are outranked. */
.trbc-rail-card__text {
	margin: 0;
	padding: 0;
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-base);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft);
}

/* ---------- linked card ----------
   The title anchor stretches over the whole card, so the picture and text are
   one target without making the paragraph part of the link's name. */
.trbc-rail-card__link {
	color: inherit;
	text-decoration: none;
}

.trbc-rail-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--trbc-radius-media);
}

.trbc-rail-card__link:focus-visible {
	outline: none;
}

.trbc-rail-card__link:focus-visible::after {
	outline: 3px solid var(--trbc-focus);
	outline-offset: 3px;
}

.trbc-rail-card--linked:hover .trbc-rail-card__link {
	color: var(--trbc-brand-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.trbc-rail-card--linked:hover .trbc-rail-card__image {
	transform: scale(1.03);
}

.trbc-rail-card__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--trbc-space-1);
	margin-top: var(--trbc-space-1);
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-base);
	font-weight: var(--trbc-weight-semibold);
	color: var(--trbc-brand-deep);
}

.trbc-rail-card__arrow {
	transition: transform var(--trbc-ease-quick);
}

.trbc-rail-card--linked:hover .trbc-rail-card__arrow {
	transform: translateX(3px);
}

/* ---------- button ----------
   Wayfinder's outlined alternative, never the filled primary: a rail repeats
   it on every card, and a section carries at most one filled button. Pushed
   to the bottom of the card so a row of buttons lines up even when the copy
   above them runs to different lengths. */
.trbc-rail-card__button.trbc-btn {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 0;
	padding-bottom: 0;
	white-space: normal; /* a long label wraps rather than overflowing a narrow card */
	line-height: var(--trbc-leading-tight);
	text-align: center;
}

.trbc-rail-card--button .trbc-rail-card__text {
	margin-bottom: var(--trbc-space-2);
}

@media (max-width: 767px) {
	.trbc-rail-card__button.trbc-btn {
		align-self: stretch;
	}
}

/* ---------- controls ---------- */
.trbc-rail__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--trbc-space-3);
	margin-top: var(--trbc-space-5);
}

/* Author display rules would otherwise beat the UA's [hidden]. This one
   selector covers the controls row and any surplus dots the script hides. */
.trbc-rail [hidden] {
	display: none !important;
}

.trbc-rail__dots {
	display: flex;
	align-items: center;
}

.trbc-rail__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;  /* WCAG 2.5.8 minimum target; the visible dot is drawn inside */
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.trbc-rail__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--trbc-radius-pill);
	background-color: var(--trbc-line-strong);
	transition: width var(--trbc-ease-quick), background-color var(--trbc-ease-quick);
}

.trbc-rail__dot[aria-current="true"]::before {
	width: 20px;
	background-color: var(--trbc-ink);
}

.trbc-rail__dot:hover::before {
	background-color: var(--trbc-ink-soft);
}

.trbc-rail__dot[aria-current="true"]:hover::before {
	background-color: var(--trbc-ink);
}

.trbc-rail__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--trbc-tap);
	height: var(--trbc-tap);
	margin: 0;
	padding: 0;
	border: 1px solid var(--trbc-line-strong);
	border-radius: var(--trbc-radius-pill);
	background-color: var(--trbc-surface);
	color: var(--trbc-ink);
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-lg);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--trbc-ease-quick), background-color var(--trbc-ease-quick);
}

.trbc-rail__nav:hover {
	border-color: var(--trbc-brand-border);
	background-color: var(--trbc-brand-tint);
}

.trbc-rail__nav:disabled {
	opacity: 0.4;
	cursor: default;
	border-color: var(--trbc-line-strong);
	background-color: var(--trbc-surface);
}

.trbc-rail__dot:focus-visible,
.trbc-rail__nav:focus-visible {
	outline: 3px solid var(--trbc-focus);
	outline-offset: 2px;
	border-radius: var(--trbc-radius-pill);
}

/* Phones swipe; arrows would only crowd the dots. */
@media (max-width: 767px) {
	.trbc-rail__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trbc-rail-card--linked:hover .trbc-rail-card__image,
	.trbc-rail-card--linked:hover .trbc-rail-card__arrow {
		transform: none;
	}
}