.rt-route {
	position: relative;
	width: 100%; /* without this, a parent page that puts .content (or any
		ancestor) in a flex/grid context can let this shrink to fit its own
		(JS-shrink-wrapped) content instead of stretching full-width -- seen
		live on a production page where the carousel rendered left-aligned
		with a lopsided gap on the right instead of centered. Forcing 100%
		here means the width our JS measures off .rt-route__inner is
		always the page's true available width, not a shrunk one. */
	margin: 0 auto;
	box-sizing: border-box;
	font-family: Georgia, 'Times New Roman', serif;
}
.rt-route *,
.rt-route *::before,
.rt-route *::after {
	box-sizing: inherit;
}
.rt-route__inner {
	position: relative;
}

.rt-swiper {
	/* This element intentionally does NOT carry Swiper's own boilerplate
	   "swiper-container" class (only ours, .rt-swiper) -- confirmed live
	   that generic, un-scoped class collides with an unrelated carousel's
	   CSS/JS on at least one production host page (a !important margin
	   rule, re-applied by that page's own script even after we fought it
	   with an inline !important of our own). Swiper 4's JS only needs an
	   element reference, not that specific class, so dropping it removes
	   the collision at the source. position:relative replaces the one
	   base rule swiper.min.css's .swiper-container selector would have
	   given us (needed as the positioning context for Swiper internals).
	   .swiper-wrapper/.swiper-slide can't be renamed the same way --
	   Swiper's JS looks for those two by literal class name. */
	position: relative;
	overflow: hidden;
}

/* Pre-JS fallback only: route.js's applySlideWidths() computes the
   exact width that divides the container into whole 300-365px cards (no
   partial card at the edge) and overrides this with an inline style right
   after init. This just avoids a flash of unstyled slides before that runs. */
.rt-route .swiper-slide {
	width: 340px;
	flex-shrink: 0;
}

/* ==========================================================================
   Route stop cards -- modeled on the 2022 itinerary page's .t22c card
   (bernadette-usa.lourdes-france.com/ip.php?pg=The+2022+USA+itinerary...),
   reusing the same --color_pd/--color_p/--color_ad/--gray1/--gray2/--white
   variables this page already loads via structure.css/main.css, so the
   look matches without redefining a separate palette.
   ========================================================================== */

/* Fixed height (rather than height:100% + flex-stretch, which Swiper's own
   .swiper-wrapper doesn't reliably apply across slides) is what actually
   keeps every card -- and every "View schedule" button -- lined up despite
   venue names running 1-3 lines. .sc__venue is clamped to 3 lines so a
   longer name can't blow past this and misalign the row again.
   340x190 (the .sc_photo box below) is this widget's photo proportion --
   the admin app's crop tool (app.js) targets that same 340x190 ratio, so
   keep the two in sync if this height ever changes. */
.stop_card {
	box-sizing: border-box;
	height: 400px;
	background: var(--gray1);
	border-bottom: 2px solid var(--gray2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sc_photo {
	position: relative;
	flex: 0 0 auto;
	height: 190px;
	overflow: hidden;
	background: #dde3ed;
}
.sc_photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Subtle gradient so the stop badge stays readable over any photo. */
.sc_photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 45%);
	pointer-events: none;
}

.sc__stop {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 2;
	background: var(--color_p);
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
	height: 40px;
	min-width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
	letter-spacing: .2px;
}

.sc__body {
	box-sizing: border-box;
	height: 210px; /* 400px card - 190px photo */
	padding: 0 0 15px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.sc__date {
	font-size: 14px;
	font-weight: 700;
	background: var(--color_ad);
	color: var(--gray1);
	padding: 4px 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 10px;
	text-align: center;
}
.sc__venue {
	font-size: 18px;
	font-weight: 700;
	color: var(--color_pd);
	line-height: 1.35;
	margin-bottom: 6px;
	padding: 0 10px;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sc__city {
	font-size: 16px;
	color: #888;
	flex: 1;
	margin-bottom: 10px;
	padding: 0 10px;
	text-align: center;
}

/* Local override of the shared .btn/.btn.toggle rules (main.css:2892 and
   main.css:1157) -- those give every .btn width:100% and no type sizing, so
   left alone the CTA renders as a huge full-bleed bar. This shrinks it to
   the same small centered pill the 2022 itinerary reference page uses,
   scoped to .stop_card so nothing outside this widget is touched. */
.stop_card .btn.toggle {
	width: auto;
	max-width: 210px;
	margin: 0 auto;
	padding: 7px 16px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
}

/* rtm_stop_moreinfo = "TBA" renders this as a <span>, not an <a> -- muted
   colors instead of the teal .content .btn.toggle background make that
   inert state visually obvious rather than just an unclickable teal button. */
.stop_card .btn.toggle.is-disabled {
	background: var(--gray2);
	color: #888;
	cursor: not-allowed;
}

/* Prev/Next arrows. Live inside .rt-swiper itself (not .rt-route__inner,
   which also contains the "hover to stop" hint text below the cards) so
   top:50% centers against the actual card row -- the old 45%-on-the-outer-
   container was a magic number tuned for one specific card height, and
   drifted out of true center whenever card height changed. */
.rt-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 1px solid var(--color_p);
	background: rgba(255,255,255,0.8);
	color: var(--color_p);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	transition: all 0.2s linear;
	opacity: 0;
}

.rt-route__inner:hover .rt-nav {
	transition: all 0.2s linear;
	opacity: 1;
}

.rt-nav:hover {
	background: var(--color_p);
	color: #fff;
}
.rt-nav--prev { left: 0; }
.rt-nav--next { right: 0; }

/* Swiper (loop:false) adds this class itself at the first/last slide --
   dimmed and inert instead of the normal hover-to-reveal treatment above. */
.rt-nav.swiper-button-disabled,
.rt-route__inner:hover .rt-nav.swiper-button-disabled {
	opacity: .25;
	cursor: not-allowed;
	pointer-events: none;
}

.rt-route__status {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	color: #6b6b6b;
	text-align: center;
	padding: 2rem 0;
}

@media (max-width: 640px) {
	.rt-route { padding: 2rem 2.75rem; }
	.rt-nav { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
	.rt-route .swiper-slide { width: 100%; max-width: 365px; min-width: 300px; }
}