/* ==========================================================================
   Single ride / tour template
   Mobile first. Breakpoints: 40em (640px) tablet, 64em (1024px) desktop,
   100em (1600px) ultrawide. All values come from tokens.css.
   ========================================================================== */

.sr-ride {
	background: var(--sr-bg);
	color: var(--sr-ink);
	font-family: var(--sr-font-body);
	font-size: var(--sr-step-0);
	line-height: 1.6;
	overflow-x: clip; /* guards against any child leaking sideways */
}
.sr-ride *, .sr-ride *::before, .sr-ride *::after { box-sizing: border-box; }
/* ---------- Theme integration (Lexrider / Opal) ----------
   Break out of the theme's boxed content column so bands run edge to edge,
   hide the theme's own title bar (the hero has the H1), and stop theme
   heading / link colours from leaking in. */
body.single-etn { overflow-x: clip; }
/* Lexrider sets overflow:hidden on .site, which breaks position:sticky (in-page nav, booking card). */
html body.single-etn .opal-wrapper,
html body.single-etn .opal-wrapper > .site { overflow-x: clip !important; overflow-y: visible !important; }
body.single-etn .page-header,
body.single-etn .page-title-bar,
body.single-etn .breadcrumb-wrap { display: none; }
body.single-etn #content { padding-left: 0; padding-right: 0; padding-bottom: 0; } /* top padding kept: it clears the theme's overlay header */
body.single-etn #content main.sr-ride {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 63.99em) { body.single-etn #content main.sr-ride:has(.sr-bar) { padding-bottom: calc(5.5rem + var(--sr-bar-bottom, 0px)); } }
:where(.sr-ride) :is(h1, h2, h3, h4, p, ul, ol, dl, dt, dd, figure, li) { color: inherit; }
.sr-ride .sr-h2, .sr-ride .sr-h3, .sr-ride .sr-pkg__name, .sr-ride .sr-stay__name, .sr-ride .sr-captain__name { color: inherit; letter-spacing: normal; }
.sr-ride a:not(.sr-btn) { color: inherit; }
.sr-ride .sr-link, .sr-ride .sr-bookcard__cal a, .sr-ride .sr-day__stay a { color: var(--sr-green); }
.sr-ride .sr-subnav a { color: var(--sr-ink-2); }
.sr-ride .sr-subnav a:hover, .sr-ride .sr-subnav a[aria-current="true"] { color: var(--sr-ink); }
.sr-ride ul, .sr-ride ol { margin-left: 0; }
.sr-ride .sr-btn { color: var(--_fg); text-decoration: none; }

.sr-ride img { max-width: 100%; height: auto; display: block; }

.sr-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--sr-max);
	margin-inline: auto;
	padding-left: max(var(--sr-gutter), env(safe-area-inset-left, 0px));
	padding-right: max(var(--sr-gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Focus & motion ---------- */
.sr-ride :focus-visible {
	outline: 3px solid var(--sr-focus);
	outline-offset: 2px;
	border-radius: var(--sr-radius-sm);
}
.sr-hero :focus-visible, .sr-cta :focus-visible, .sr-lightbox :focus-visible { outline-color: var(--sr-focus-inverse); }
@media (prefers-reduced-motion: reduce) {
	.sr-ride *, .sr-ride *::before, .sr-ride *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
html:has(.sr-ride) { scroll-behavior: smooth; scroll-padding-top: calc(var(--sr-header-offset) + 3.5rem); }

/* ---------- Type ---------- */
.sr-h2 {
	font-family: var(--sr-font-display);
	font-size: var(--sr-step-3);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}
.sr-h3 {
	font-family: var(--sr-font-label);
	font-size: var(--sr-step-1);
	font-weight: 700;
	line-height: 1.2;
	margin: var(--sr-space-6) 0 var(--sr-space-3);
}
.sr-eyebrow, .sr-day__meta, .sr-stone dt, .sr-captain__role, .sr-pkg__flag {
	font-family: var(--sr-font-label);
	font-size: var(--sr-step--1);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sr-prose { max-width: var(--sr-measure); }
.sr-prose > * { margin-block: 0 var(--sr-space-4); }
.sr-prose > :last-child { margin-bottom: 0; }
.sr-muted { color: var(--sr-ink-2); }
.sr-note { color: var(--sr-ink-2); margin: 0; }
.sr-link {
	color: var(--sr-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	display: inline-flex;
	align-items: center;
	min-height: var(--sr-tap);
}
.sr-link:hover { text-decoration-thickness: 2px; }

.sr-icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Buttons ---------- */
.sr-btn {
	--_bg: var(--sr-surface-2);
	--_fg: var(--sr-ink);
	--_bd: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sr-space-2);
	min-height: 48px;
	min-width: var(--sr-tap);
	padding: var(--sr-space-3) var(--sr-space-5);
	border: 2px solid var(--_bd);
	border-radius: var(--sr-radius);
	background: var(--_bg);
	color: var(--_fg);
	font: 700 var(--sr-step-0)/1 var(--sr-font-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s var(--sr-ease), color 0.15s var(--sr-ease), transform 0.1s var(--sr-ease);
	-webkit-tap-highlight-color: transparent;
}
.sr-btn:active { transform: translateY(1px); }
.sr-btn--lg { min-height: 56px; padding-inline: var(--sr-space-6); font-size: var(--sr-step-1); }
.sr-btn--block { width: 100%; }
.sr-btn--primary { --_bg: var(--sr-green); --_fg: var(--sr-on-dark); }
.sr-btn--primary:hover { --_bg: var(--sr-green-hover); }
.sr-btn--accent { --_bg: var(--sr-yellow); --_fg: var(--sr-ink); }
.sr-btn--accent:hover { --_bg: var(--sr-yellow-hover); }
.sr-btn--ghost { --_bg: transparent; --_fg: currentColor; --_bd: currentColor; }
.sr-btn--ghost:hover { --_bg: rgb(127 127 127 / 0.14); }
.sr-btn--ghost-inverse { --_bg: transparent; --_fg: var(--sr-on-dark); --_bd: var(--sr-on-dark); }
.sr-btn--ghost-inverse:hover { --_bg: rgb(255 255 255 / 0.12); }
.sr-btn[aria-disabled="true"] {
	--_bg: var(--sr-surface-2); --_fg: var(--sr-ink-2); --_bd: transparent;
	pointer-events: none; cursor: not-allowed;
}

/* ---------- Hero ----------
   Text on a solid band, featured image shown whole beside it. Works for photos
   and for text-heavy posters alike, and the text never sits on the image. */
.sr-hero {
	color: var(--sr-on-dark);
	background: var(--sr-green-deep);
}
.sr-hero__inner {
	display: grid;
	gap: var(--sr-space-6);
	align-items: center;
	padding-block: var(--sr-space-6) calc(var(--sr-space-6) + 2.5rem); /* room for the milestones overlap */
}
@media (min-width: 64em) {
	.sr-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sr-space-7); padding-block: var(--sr-space-8) calc(var(--sr-space-8) + 2.5rem); }
}
.sr-hero__text { display: grid; gap: var(--sr-space-4); min-width: 0; }
.sr-hero__media { margin: 0; border-radius: var(--sr-radius-lg); overflow: hidden; box-shadow: 0 12px 40px rgb(0 0 0 / 0.35); background: rgb(255 255 255 / 0.06); }
.sr-hero__media img { width: 100%; height: auto; }
.sr-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sr-space-1) var(--sr-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--sr-step--1); color: var(--sr-on-dark-2); }
.sr-crumbs li + li::before { content: "/"; margin-right: var(--sr-space-2); opacity: 0.7; }
.sr-ride .sr-crumbs a { color: inherit; text-underline-offset: 0.2em; }
.sr-crumbs [aria-current] { color: var(--sr-on-dark); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-ride .sr-eyebrow { margin: 0; color: var(--sr-yellow); }
.sr-ride .sr-hero__title {
	font-family: var(--sr-font-display);
	font-size: var(--sr-step-5);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--sr-on-dark);
	margin: 0;
	max-width: 16ch;
}
.sr-ride .sr-hero__lede { font-size: var(--sr-step-1); line-height: 1.4; max-width: 48ch; margin: 0; color: var(--sr-on-dark); }
.sr-route { display: flex; flex-wrap: wrap; gap: var(--sr-space-1) 0; list-style: none; margin: 0; padding: 0; font: 600 var(--sr-step-0)/1.3 var(--sr-font-label); letter-spacing: 0.02em; }
.sr-route li:not(:last-child)::after { content: "→"; color: var(--sr-yellow); margin-inline: var(--sr-space-2); }
.sr-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sr-space-3); margin-top: var(--sr-space-2); }
.sr-hero .sr-btn--ghost { --_fg: var(--sr-on-dark); --_bd: var(--sr-on-dark); }
@media (max-width: 39.99em) {
	.sr-hero__actions .sr-btn { flex: 1 1 100%; }
}

/* ---------- Key facts: kilometre stones ---------- */
.sr-facts { position: relative; z-index: 1; margin-top: -3.5rem; }
.sr-facts__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sr-space-2);
	margin: 0;
}
@media (min-width: 40em) { .sr-facts__list { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--sr-space-3); } }
.sr-stone {
	display: grid;
	grid-template-rows: auto 1fr;
	text-align: center;
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: 999px 999px var(--sr-radius-sm) var(--sr-radius-sm) / 3.2rem 3.2rem var(--sr-radius-sm) var(--sr-radius-sm);
	box-shadow: var(--sr-shadow);
	overflow: hidden;
	min-width: 0;
}
.sr-stone dt { background: var(--sr-yellow); color: var(--sr-ink); padding: var(--sr-space-4) var(--sr-space-2) var(--sr-space-2); }
.sr-stone dd {
	margin: 0;
	display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.15em;
	padding: var(--sr-space-3) var(--sr-space-2) var(--sr-space-4);
	font: 800 var(--sr-step-3)/1 var(--sr-font-display);
	font-variant-numeric: tabular-nums;
}
.sr-stone dd small { font: 600 var(--sr-step--1)/1 var(--sr-font-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sr-ink-2); }
.sr-stone .sr-stone__text { font: 700 var(--sr-step-0)/1.2 var(--sr-font-label); align-items: center; }
.sr-stone--lead dt { background: var(--sr-green); color: var(--sr-on-dark); }
.sr-level { display: inline-flex; align-items: center; gap: 0.35em; }
.sr-level::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--sr-green); }
.sr-level[data-level="challenging"]::before { background: var(--sr-yellow-hover); box-shadow: inset 0 0 0 1px var(--sr-ink); }
.sr-level[data-level="expert"]::before { background: var(--sr-danger); }

/* ---------- In-page nav ---------- */
.sr-subnav {
	position: sticky;
	top: var(--sr-header-offset);
	z-index: 30;
	transition: top 0.2s var(--sr-ease);
	margin-top: var(--sr-space-6);
	background: color-mix(in srgb, var(--sr-bg) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sr-line);
}
.sr-subnav ul { display: flex; gap: var(--sr-space-1); list-style: none; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.sr-subnav ul::-webkit-scrollbar { display: none; }
.sr-subnav a {
	display: flex; align-items: center; min-height: 48px; padding-inline: var(--sr-space-3);
	color: var(--sr-ink-2); text-decoration: none; white-space: nowrap;
	font: 600 var(--sr-step-0)/1 var(--sr-font-label); letter-spacing: 0.02em;
	border-bottom: 3px solid transparent;
}
.sr-subnav a:hover { color: var(--sr-ink); }
.sr-subnav a[aria-current="true"] { color: var(--sr-ink); border-bottom-color: var(--sr-green); }

/* ---------- Layout ---------- */
.sr-layout { display: grid; gap: 0 var(--sr-space-7); padding-block: var(--sr-space-2) var(--sr-space-section); }
.sr-layout__main { min-width: 0; }
.sr-layout__aside { display: none; }
@media (min-width: 64em) {
	.sr-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
	.sr-layout__aside { display: grid; gap: var(--sr-space-4); align-content: start; position: sticky; top: calc(var(--sr-header-offset) + 4.5rem); align-self: start; padding-top: var(--sr-space-section); }
}
@media (min-width: 100em) { .sr-layout { grid-template-columns: minmax(0, 1fr) 24rem; } }

.sr-section { padding-top: var(--sr-space-section); }
.sr-section > .sr-h2, .sr-section__head { margin-bottom: var(--sr-space-5); }
.sr-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sr-space-2) var(--sr-space-4); }
.sr-section__head .sr-h2 { margin: 0; }

/* ---------- Lists ---------- */
.sr-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-3); }
@media (min-width: 40em) { .sr-section > .sr-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sr-space-3) var(--sr-space-6); } }
.sr-ticks li { display: flex; gap: var(--sr-space-3); align-items: flex-start; }
.sr-ticks .sr-icon { color: var(--sr-green); margin-top: 0.2em; }
.sr-ticks--x .sr-icon { color: var(--sr-ink-2); }
.sr-ticks--compact { gap: var(--sr-space-2); font-size: var(--sr-step--1); }

.sr-tags { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); list-style: none; margin: var(--sr-space-5) 0 0; padding: 0; }
.sr-tag {
	display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--sr-space-3);
	background: var(--sr-surface-2); border-radius: 999px;
	font: 600 var(--sr-step--1)/1 var(--sr-font-label); letter-spacing: 0.03em;
}
.sr-tag[data-terrain="offroad"] { background: #f3e4c7; }
.sr-tag[data-terrain="ferry"], .sr-tag[data-terrain="coastal"] { background: #d6e8f0; }
.sr-tag[data-terrain="ghat"] { background: #d7ead9; }

/* ---------- Itinerary: the road ---------- */
.sr-map { margin: 0 0 var(--sr-space-5); border-radius: var(--sr-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--sr-surface-2); }
.sr-map img { width: 100%; height: 100%; object-fit: cover; }
.sr-days { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--sr-space-3); }
.sr-days::before { /* asphalt with a dashed centre line */
	content: ""; position: absolute; top: 1.25rem; bottom: 1.25rem; left: 1.125rem; width: 0.75rem;
	transform: translateX(-50%);
	background:
		repeating-linear-gradient(180deg, var(--sr-yellow) 0 10px, transparent 10px 22px) center / 2px 100% no-repeat,
		var(--sr-asphalt);
	border-radius: 999px;
}
.sr-day details {
	margin-left: 3rem;
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
}
.sr-day summary {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--sr-space-3);
	min-height: 64px;
	padding: var(--sr-space-3) var(--sr-space-4);
	cursor: pointer;
	list-style: none;
}
.sr-day summary::-webkit-details-marker { display: none; }
.sr-day summary::after { /* chevron */
	content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-25%); transition: transform 0.2s var(--sr-ease);
}
.sr-day details[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.sr-day__num {
	position: absolute; left: calc(-3rem + 1.125rem); top: 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: var(--sr-yellow); color: var(--sr-ink); border: 3px solid var(--sr-bg);
	font: 800 var(--sr-step-0)/1 var(--sr-font-display);
}
.sr-day details[open] .sr-day__num { background: var(--sr-green); color: var(--sr-on-dark); }
.sr-day__head { display: grid; gap: 2px; min-width: 0; }
.sr-day__meta { color: var(--sr-ink-2); letter-spacing: 0.06em; }
.sr-day__title { font: 700 var(--sr-step-1)/1.2 var(--sr-font-label); }
.sr-day__km { font: 500 var(--sr-step--1)/1 var(--sr-font-label); text-align: right; white-space: nowrap; color: var(--sr-ink-2); }
.sr-day__km b { display: block; font: 800 var(--sr-step-2)/1 var(--sr-font-display); color: var(--sr-ink); font-variant-numeric: tabular-nums; }
.sr-day__body { padding: 0 var(--sr-space-4) var(--sr-space-4); display: grid; gap: var(--sr-space-3); }
.sr-day__body .sr-tags { margin: 0; }
.sr-day__leg { display: flex; align-items: center; gap: var(--sr-space-2); margin: 0; font-weight: 600; }
.sr-day__facts { display: flex; flex-wrap: wrap; gap: var(--sr-space-2) var(--sr-space-6); margin: 0; padding-top: var(--sr-space-3); border-top: 1px dashed var(--sr-line); font-size: var(--sr-step--1); }
.sr-day__facts dt { color: var(--sr-ink-2); font-family: var(--sr-font-label); text-transform: uppercase; letter-spacing: 0.06em; }
.sr-day__facts dd { margin: 0; font-weight: 600; }
@media (min-width: 40em) {
	.sr-days::before { left: 1.5rem; }
	.sr-day details { margin-left: 4rem; }
	.sr-day__num { left: calc(-4rem + 1.5rem); width: 2.75rem; height: 2.75rem; }
	.sr-day summary { padding-inline: var(--sr-space-5); }
	.sr-day__body { padding-inline: var(--sr-space-5); }
}

/* ---------- Stays ---------- */
.sr-day__stay a { display: inline-flex; align-items: center; gap: var(--sr-space-2); min-height: var(--sr-tap); color: var(--sr-green); font-weight: 600; text-underline-offset: 0.2em; }
.sr-day__stay img { width: 40px; height: 40px; border-radius: var(--sr-radius-sm); object-fit: cover; }
.sr-stays { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-4); }
.sr-stay {
	display: grid; overflow: hidden;
	background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg);
	scroll-margin-top: calc(var(--sr-header-offset) + 4rem);
}
.sr-stay:target { outline: 3px solid var(--sr-yellow); outline-offset: 2px; }
@media (min-width: 40em) { .sr-stay { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.sr-stay__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sr-surface-2); }
@media (min-width: 40em) { .sr-stay__media { aspect-ratio: auto; min-height: 100%; } }
.sr-stay__media img { width: 100%; height: 100% !important; object-fit: cover; }
.sr-stay__count {
	position: absolute; right: var(--sr-space-2); bottom: var(--sr-space-2);
	padding: var(--sr-space-1) var(--sr-space-2); border-radius: var(--sr-radius-sm);
	background: rgb(10 20 15 / 0.8); color: var(--sr-on-dark);
	font: 600 var(--sr-step--1)/1.2 var(--sr-font-label); letter-spacing: 0.04em;
}
.sr-stay__body { display: grid; gap: var(--sr-space-2); align-content: start; padding: var(--sr-space-4) var(--sr-space-5) var(--sr-space-3); min-width: 0; }
.sr-stay__body p { margin: 0; }
.sr-stay__nights { font: 600 var(--sr-step--1)/1.2 var(--sr-font-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sr-ink-2); }
.sr-stay__name { margin: 0; font: 700 var(--sr-step-2)/1.1 var(--sr-font-label); }
.sr-stay__meta { font-size: var(--sr-step--1); color: var(--sr-ink-2); }
.sr-stay__summary { max-width: var(--sr-measure); }
.sr-amenities { display: flex; flex-wrap: wrap; gap: var(--sr-space-2); list-style: none; margin: var(--sr-space-1) 0 0; padding: 0; }
.sr-amenities li {
	display: inline-flex; align-items: center; gap: var(--sr-space-1); min-height: 2rem; padding: 0 var(--sr-space-3) 0 var(--sr-space-2);
	background: var(--sr-surface-2); border-radius: 999px; font: 600 var(--sr-step--1)/1 var(--sr-font-label); letter-spacing: 0.02em;
}
.sr-amenities .sr-icon { color: var(--sr-green); width: 1em; height: 1em; }
.sr-amenities .is-key { background: var(--sr-green); color: var(--sr-on-dark); }
.sr-amenities .is-key .sr-icon { color: var(--sr-yellow); }

/* ---------- Packages ---------- */
.sr-packages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.sr-pkg {
	display: flex; flex-direction: column; gap: var(--sr-space-3);
	padding: var(--sr-space-5);
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
}
.sr-pkg--featured { border: 2px solid var(--sr-green); box-shadow: var(--sr-shadow); }
.sr-pkg__flag { margin: 0; align-self: flex-start; padding: var(--sr-space-1) var(--sr-space-2); background: var(--sr-yellow); color: var(--sr-ink); border-radius: var(--sr-radius-sm); }
.sr-pkg__name { margin: 0; font: 700 var(--sr-step-1)/1.2 var(--sr-font-label); }
.sr-pkg__price { margin: 0; font: 800 var(--sr-step-3)/1 var(--sr-font-display); font-variant-numeric: tabular-nums; display: grid; gap: var(--sr-space-1); }
.sr-pkg__price small { font: 500 var(--sr-step--1)/1.3 var(--sr-font-body); color: var(--sr-ink-2); }
.sr-pkg .sr-ticks { flex: 1; }
.sr-seats { margin: 0; font: 600 var(--sr-step--1)/1 var(--sr-font-label); color: var(--sr-ink-2); }
.sr-seats--low { color: var(--sr-danger); }
.sr-embed { margin-top: var(--sr-space-5); }
.sr-inex { display: grid; gap: 0 var(--sr-space-6); margin-top: var(--sr-space-2); }
@media (min-width: 40em) { .sr-inex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Requirements ---------- */
.sr-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-2); counter-reset: req; }
@media (min-width: 40em) { .sr-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sr-checklist li {
	display: flex; gap: var(--sr-space-3); align-items: center;
	padding: var(--sr-space-3) var(--sr-space-4); min-height: 56px;
	background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius);
}
.sr-checklist li::before {
	content: ""; flex: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--sr-line-strong); border-radius: var(--sr-radius-sm);
}

/* ---------- Gallery ---------- */
.sr-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sr-space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40em) { .sr-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .sr-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sr-gallery li:first-child { grid-column: span 2; grid-row: span 2; } }
.sr-gallery__link { display: block; height: 100%; border-radius: var(--sr-radius); overflow: hidden; background: var(--sr-surface-2); }
.sr-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s var(--sr-ease); }
.sr-gallery__link:hover img { transform: scale(1.04); }

.sr-lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; background: rgb(8 14 11 / 0.96); color: var(--sr-on-dark); }
.sr-lightbox[open] { display: grid; place-items: center; }
.sr-lightbox::backdrop { background: rgb(8 14 11 / 0.9); }
.sr-lightbox img { max-width: min(92vw, 1600px); max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.sr-lightbox .sr-btn { position: absolute; --_bg: rgb(255 255 255 / 0.12); --_fg: var(--sr-on-dark); }
.sr-lightbox__close { top: max(var(--sr-space-4), env(safe-area-inset-top, 0px)); right: max(var(--sr-space-4), env(safe-area-inset-right, 0px)); }
.sr-lightbox__prev, .sr-lightbox__next { top: 50%; transform: translateY(-50%); font-size: var(--sr-step-3); padding-inline: var(--sr-space-4); }
.sr-lightbox__prev { left: max(var(--sr-space-2), env(safe-area-inset-left, 0px)); }
.sr-lightbox__count { position: absolute; left: 50%; bottom: max(var(--sr-space-4), env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; font: 600 var(--sr-step--1)/1 var(--sr-font-label); letter-spacing: 0.08em; color: var(--sr-on-dark-2); font-variant-numeric: tabular-nums; }
.sr-lightbox__next { right: max(var(--sr-space-2), env(safe-area-inset-right, 0px)); }

/* ---------- Policy & FAQ ---------- */
.sr-callout { padding: var(--sr-space-4) var(--sr-space-5); background: var(--sr-surface); border: 1px solid var(--sr-line); border-left: 4px solid var(--sr-yellow); border-radius: var(--sr-radius); max-width: none; }
.sr-faq { border-top: 1px solid var(--sr-line); }
.sr-faq__item { border-bottom: 1px solid var(--sr-line); }
.sr-faq__item summary {
	display: flex; justify-content: space-between; align-items: center; gap: var(--sr-space-4);
	min-height: 56px; padding-block: var(--sr-space-3); cursor: pointer; list-style: none;
	font: 600 var(--sr-step-1)/1.3 var(--sr-font-label);
}
.sr-faq__item summary::-webkit-details-marker { display: none; }
.sr-faq__item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sr-surface-2); font: 600 1.25rem/1 var(--sr-font-body); transition: transform 0.2s var(--sr-ease); }
.sr-faq__item[open] summary::after { transform: rotate(45deg); }
.sr-faq__item .sr-prose { padding-bottom: var(--sr-space-5); color: var(--sr-ink-2); }

/* ---------- Booking card (desktop) ---------- */
.sr-bookcard { display: grid; gap: var(--sr-space-4); padding: var(--sr-space-5); background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); box-shadow: var(--sr-shadow); }
.sr-bookcard__price { margin: 0; font: 800 var(--sr-step-4)/1 var(--sr-font-display); font-variant-numeric: tabular-nums; }
.sr-bookcard__price small { display: block; font: 600 var(--sr-step--1)/1.4 var(--sr-font-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sr-ink-2); }
.sr-bookcard__facts { margin: 0; display: grid; gap: var(--sr-space-3); }
.sr-bookcard__facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sr-space-2); font-size: var(--sr-step--1); }
.sr-bookcard__facts dt { display: flex; align-items: center; gap: var(--sr-space-2); color: var(--sr-ink-2); }
.sr-bookcard__facts dd { margin: 0; font-weight: 600; }
.sr-bookcard__cal { margin: 0; font-size: var(--sr-step--1); color: var(--sr-ink-2); }
.sr-bookcard__cal a { color: var(--sr-green); font-weight: 600; padding-block: var(--sr-space-2); display: inline-block; }
.sr-captain { display: flex; align-items: center; gap: var(--sr-space-3); padding: var(--sr-space-4); background: var(--sr-surface); border: 1px solid var(--sr-line); border-radius: var(--sr-radius-lg); }
.sr-captain__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.sr-captain p { margin: 0; }
.sr-captain__role { color: var(--sr-ink-2); }
.sr-captain__name { font: 700 var(--sr-step-1)/1.2 var(--sr-font-label); }

/* ---------- Final CTA ---------- */
.sr-cta { background: var(--sr-green-deep); color: var(--sr-on-dark); }
.sr-cta__inner { display: grid; justify-items: start; gap: var(--sr-space-3); padding-block: var(--sr-space-section); }
.sr-cta__inner p { margin: 0; color: var(--sr-on-dark-2); font: 600 var(--sr-step-1)/1.3 var(--sr-font-label); }
.sr-cta .sr-h2 { font-size: var(--sr-step-4); }

/* ---------- Mobile sticky booking bar ---------- */
.sr-bar {
	position: fixed; left: 0; right: 0; bottom: var(--sr-bar-bottom, 0px); z-index: 9990;
	display: flex; align-items: center; justify-content: space-between; gap: var(--sr-space-3);
	padding: var(--sr-space-3) max(var(--sr-space-4), env(safe-area-inset-right, 0px)) max(var(--sr-space-3), env(safe-area-inset-bottom, 0px)) max(var(--sr-space-4), env(safe-area-inset-left, 0px));
	background: var(--sr-surface);
	border-top: 1px solid var(--sr-line);
	box-shadow: 0 -6px 24px rgb(21 32 26 / 0.12);
	transform: translateY(0);
	transition: transform 0.25s var(--sr-ease);
}
.sr-bar[data-state="hidden"] { transform: translateY(110%); }
.sr-bar__info { display: grid; margin: 0; line-height: 1.2; min-width: 0; }
.sr-bar__price { font: 600 var(--sr-step--1)/1.2 var(--sr-font-label); color: var(--sr-ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.sr-bar__price b { font: 800 var(--sr-step-2)/1 var(--sr-font-display); color: var(--sr-ink); text-transform: none; letter-spacing: 0; }
.sr-bar__date { font-size: var(--sr-step--1); color: var(--sr-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-bar .sr-btn { flex: none; padding-inline: var(--sr-space-6); }
@media (min-width: 64em) { .sr-bar { display: none !important; } }

/* ---------- Eventin Buy Ticket form ---------- */
.sr-eventin { margin-top: var(--sr-space-6); padding: var(--sr-space-5); background: var(--sr-surface); border: 2px solid var(--sr-green); border-radius: var(--sr-radius-lg); scroll-margin-top: calc(var(--sr-header-offset) + 4rem); }
.sr-eventin > .sr-h3 { margin-top: 0; }
.sr-eventin button, .sr-eventin input, .sr-eventin select { min-height: var(--sr-tap); }

/* v1.1.1: visually hidden label for the Eventin form */
.sr-ride .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }