/**
 * Spurwing Tour Prototype — stylesheet
 * All rules are namespaced under .spw-tour. Nothing here redefines bare
 * element selectors (h1, h2, p, button, a, input, body, .container) so it
 * cannot leak into the rest of the staging site.
 *
 * ============================================================
 * TOKENS — READ THIS BEFORE ADJUSTING ANYTHING BELOW
 * ============================================================
 * A WordPress block theme (Twenty Twenty-Five included) auto-generates CSS
 * custom properties from theme.json in the form:
 *   --wp--preset--font-family--{slug}
 *   --wp--preset--color--{slug}
 *   --wp--preset--spacing--{slug}
 *
 * The block below maps this plugin's local --spw-* tokens to the theme's
 * real preset variables. The exact slugs (e.g. "primary", "accent-1",
 * "contrast") depend on the staging site's actual theme.json and cannot
 * be guessed correctly from outside it.
 *
 * BEFORE FIRST USE: open the site's Appearance → Editor → Styles (or the
 * theme.json directly) and confirm the real slugs, then update the
 * var(--wp--preset--..., FALLBACK) lines below so the FIRST argument
 * matches a real preset. The FALLBACK values are only a safety net so the
 * prototype still renders sensibly if a slug is wrong — they resolve to
 * an existing theme colour ("contrast") wherever possible, and only drop
 * to a plain neutral hex as the very last resort. Nothing here invents a
 * new Spurwing brand palette.
 *
 * HEADINGS: deliberately NOT given an explicit font-family below. H1/H2/H3
 * elements are left to inherit the staging theme's own heading typography
 * (which a block theme applies directly to h1–h6, so it takes priority
 * over anything inherited from this wrapper) rather than risk forcing them
 * onto the body font via a guessed "heading" preset slug that may not
 * exist. Only size/weight/line-height/spacing are controlled here.
 */
.spw-tour {
	--spw-font-body: var(--wp--preset--font-family--body, inherit);

	--spw-color-accent: var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, var(--wp--preset--color--contrast, #33301f)));
	--spw-color-text: var(--wp--preset--color--contrast, inherit);
	--spw-color-text-muted: var(--wp--preset--color--contrast-2, var(--wp--preset--color--contrast, inherit));
	--spw-color-bg: var(--wp--preset--color--base, #fff);
	/* Deliberately does NOT fall back to --wp--preset--color--base a second
	   time: if the theme has no distinct "base-2" tint preset, falling
	   back to the same value as --spw-color-bg would make every "tinted"
	   card visually identical to the page background — exactly the "cards
	   floating with no visible delineation" issue from the v0.1.3 QA pass.
	   The neutral off-white below is the safety net instead. */
	--spw-color-bg-alt: var(--wp--preset--color--base-2, #f5f2ea);
	--spw-color-dark: var(--wp--preset--color--contrast, #33301f);
	--spw-color-border: var(--wp--preset--color--contrast, #33301f);

	--spw-container: min(1280px, 100% - 2 * var(--wp--preset--spacing--40, 24px));
	--spw-radius: var(--spw-radius-existing, 10px); /* set --spw-radius-existing to match the site's real card/button radius once known */
	--spw-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
	--spw-border-hairline: 1px solid color-mix(in srgb, var(--spw-color-border) 14%, transparent);
	--spw-hero-height: clamp(570px, 60vh, 650px);

	font-family: var(--spw-font-body);
	color: var(--spw-color-text);
	background: var(--spw-color-bg);
	overflow-x: hidden;
}

.spw-tour * {
	box-sizing: border-box;
}

.spw-tour img {
	max-width: 100%;
	display: block;
}

.spw-tour a {
	color: inherit;
}

/* ---------------------------------------------------------- Shared type/utility */

.spw-tour .spw-eyebrow {
	font-family: var(--spw-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--spw-color-accent);
	margin: 0 0 0.75rem;
}

.spw-tour .spw-eyebrow--on-dark {
	color: var(--spw-color-bg);
	opacity: 0.85;
}

.spw-tour .spw-heading {
	font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 1rem;
	font-weight: 500;
}

.spw-tour .spw-heading--on-dark {
	color: var(--spw-color-bg);
}

.spw-tour .spw-body {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--spw-color-text-muted);
	max-width: 65ch;
	margin: 0 0 1.1rem;
}

.spw-tour .spw-body--on-dark {
	color: var(--spw-color-bg);
	opacity: 0.9;
}

.spw-tour .spw-section {
	max-width: var(--spw-container);
	margin: 0 auto;
	padding: clamp(2rem, 1.25rem + 2.5vw, 3.25rem) 0;
}

.spw-tour .spw-section__header {
	max-width: 640px;
	margin: 0 0 2rem;
}

.spw-tour .spw-link-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.spw-tour .spw-link-cta .spw-icon {
	width: 16px;
	height: 16px;
}

.spw-tour .spw-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------- Buttons */

.spw-tour .spw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--spw-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	padding: 1.05rem 1.75rem;
	border-radius: var(--spw-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.spw-tour .spw-btn:hover {
	opacity: 0.88;
}

.spw-tour .spw-btn--primary {
	background: var(--spw-color-accent);
	color: var(--spw-color-bg);
}

.spw-tour .spw-btn--outline {
	background: transparent;
	border-color: var(--spw-color-accent);
	color: var(--spw-color-accent);
}

.spw-tour .spw-btn--on-dark {
	background: var(--spw-color-bg);
	color: var(--spw-color-dark);
}

.spw-tour .spw-btn--block {
	width: 100%;
}

.spw-tour .spw-btn .spw-icon {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------- Breadcrumb */

.spw-tour .spw-breadcrumb {
	max-width: var(--spw-container);
	margin: 1.5rem auto 1rem;
}

.spw-tour .spw-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-breadcrumb a {
	text-decoration: none;
}

.spw-tour .spw-breadcrumb a:hover {
	text-decoration: underline;
}

.spw-tour .spw-breadcrumb__sep {
	opacity: 0.5;
}

/* ---------------------------------------------------------- Hero */

.spw-tour .spw-hero {
	position: relative;
	max-width: var(--spw-container);
	margin: 0 auto;
	min-height: var(--spw-hero-height);
	border-radius: var(--spw-radius);
	overflow: visible;
}

.spw-tour .spw-hero__media {
	position: absolute;
	inset: 0;
	border-radius: var(--spw-radius);
	overflow: hidden;
}

.spw-tour .spw-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The hero photo's key subjects (the guide and walking group, the
	   Soweto cooling towers) sit center-left of frame; the rightmost
	   ~15% (a mural) is where the floating booking card sits regardless
	   of crop, so this nudges the visible crop window left/up slightly
	   to favour the walking group and skyline over the area the card
	   already covers. Revisit this value once real photography replaces
	   the prototype image, since framing will differ. */
	object-position: 38% 45%;
}

.spw-tour .spw-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 18, 10, 0.62) 0%, rgba(20, 18, 10, 0.28) 45%, rgba(20, 18, 10, 0) 70%);
}

/* No hero image supplied (legacy/incomplete Tour data): a solid dark
   fill keeps the light hero text legible, instead of the gradient
   overlay fading to transparent over nothing. */
.spw-tour .spw-hero--no-image .spw-hero__media {
	background: var(--spw-color-dark);
}

.spw-tour .spw-hero--no-image .spw-hero__overlay {
	background: none;
}

.spw-tour .spw-hero__content {
	position: relative;
	z-index: 1;
	max-width: 690px;
	padding: clamp(2rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--spw-hero-height);
}

.spw-tour .spw-hero__heading {
	font-size: clamp(2.75rem, 2rem + 2.2vw, 3.625rem);
	line-height: 1.05;
	color: #fff;
	margin: 0 0 0.75rem;
	font-weight: 500;
}

.spw-tour .spw-hero__subtitle {
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
	line-height: 1.5;
	max-width: 46ch;
	margin: 0 0 1.75rem;
}

.spw-tour .spw-hero__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}

.spw-tour .spw-hero__meta li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	color: #fff;
	font-size: 1rem;
}

.spw-tour .spw-hero__meta strong {
	display: block;
	font-size: 0.95rem;
}

.spw-tour .spw-hero__meta .spw-icon {
	width: 22px;
	height: 22px;
	color: #fff;
	opacity: 0.9;
}

/* ---------------------------------------------------------- Hero booking card */

.spw-tour .spw-booking-card {
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	z-index: 2;
	width: 380px;
	max-width: calc(100% - 2.5rem);
	background: var(--spw-color-bg);
	border: var(--spw-border-hairline);
	border-radius: var(--spw-radius);
	box-shadow: var(--spw-shadow);
	padding: 1.75rem;
}

.spw-tour .spw-booking-card__from {
	margin: 0;
	font-size: 0.85rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-booking-card__price {
	margin: 0.1rem 0 0;
	font-size: 2.3rem;
	line-height: 1.1;
	color: var(--spw-color-accent);
	font-weight: 500;
}

.spw-tour .spw-booking-card__per {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-field {
	margin-bottom: 0.9rem;
}

.spw-tour .spw-field label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-field__control {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: var(--spw-border-hairline);
	border-radius: calc(var(--spw-radius) * 0.6);
	padding: 0.6rem 0.75rem;
}

.spw-tour .spw-field__control .spw-icon {
	width: 18px;
	height: 18px;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-field__control input[type="date"] {
	border: 0;
	width: 100%;
	font-family: var(--spw-font-body);
	font-size: 0.95rem;
	background: transparent;
	color: var(--spw-color-text);
}

.spw-tour .spw-field__control select {
	border: 0;
	width: 100%;
	font-family: var(--spw-font-body);
	font-size: 0.95rem;
	background: transparent;
	color: var(--spw-color-text);
	cursor: pointer;
}

.spw-tour .spw-booking-card__secondary {
	margin: -0.5rem 0 1.25rem;
	font-size: 0.8rem;
	color: var(--spw-color-text-muted);
}

/* Enquiry / contact states (booking off, or no valid price yet) — no
   date/traveller/total UI to style since none of it renders in these
   states; just the price-on-request copy above the CTA. */
.spw-tour .spw-booking-card__enquiry-copy {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--spw-color-text-muted);
	margin: 0 0 1.25rem;
}

/* v0.11.15: package decision panel — the length line opens the card;
   "Price on request" reads as the price, not as a caption, when there is
   no rate. Day tours are untouched (their card keeps the caption size). */
.spw-tour .spw-booking-card__length {
	margin: 0 0 0.9rem;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-booking-card__origin {
	margin: -0.55rem 0 1rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-booking-card__from--por {
	font-size: 1.35rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--spw-color-accent);
	margin: 0 0 0.5rem;
}

/* v0.11.15: Good to know (packages) — the operational rows on hairlines,
   label column | value column, at reading width. No card. */
.spw-tour .spw-good-to-know__list {
	margin: 0;
	max-width: 52rem;
}

.spw-tour .spw-good-to-know__row {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	column-gap: 1.5rem;
	padding: 0.75rem 0;
	border-top: var(--spw-border-hairline);
	font-size: 0.95rem;
	line-height: 1.55;
}

.spw-tour .spw-good-to-know__row:last-child {
	border-bottom: var(--spw-border-hairline);
}

.spw-tour .spw-good-to-know__row dt {
	margin: 0;
	font-weight: 600;
	color: var(--spw-color-text);
}

.spw-tour .spw-good-to-know__row dd {
	margin: 0;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-summary--enquiry,
.spw-tour .spw-summary--contact {
	text-align: left;
}

.spw-tour .spw-summary--enquiry .spw-body,
.spw-tour .spw-summary--contact .spw-body {
	margin: 0 0 1.25rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-summary__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	margin: 0 0 0.6rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-summary__meta .spw-icon {
	width: 16px;
	height: 16px;
}

.spw-tour .spw-travellers__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--spw-color-text-muted);
	margin: 0 0 0.75rem;
}

.spw-tour .spw-stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-bottom: var(--spw-border-hairline);
	font-size: 0.9rem;
}

.spw-tour .spw-stepper-row:last-child {
	border-bottom: 0;
}

.spw-tour .spw-stepper {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.spw-tour .spw-stepper__btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: var(--spw-border-hairline);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--spw-color-text);
}

.spw-tour .spw-stepper__btn:hover {
	background: var(--spw-color-bg-alt);
}

.spw-tour .spw-stepper__btn .spw-icon {
	width: 14px;
	height: 14px;
}

.spw-tour .spw-stepper__value {
	min-width: 1.2rem;
	text-align: center;
	font-weight: 600;
}

.spw-tour .spw-booking-card__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 1rem 0;
	padding-top: 0.85rem;
	border-top: var(--spw-border-hairline);
	font-size: 1rem;
}

.spw-tour .spw-booking-card__total strong {
	font-size: 1.35rem;
	color: var(--spw-color-accent);
}

.spw-tour .spw-booking-card .spw-btn {
	margin-bottom: 0.6rem;
}

.spw-tour .spw-reassurance {
	list-style: none;
	margin: 1rem 0 0;
	padding-top: 0.85rem;
	border-top: var(--spw-border-hairline);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	font-size: 0.72rem;
	color: var(--spw-color-text-muted);
	text-align: center;
}

.spw-tour .spw-reassurance li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.spw-tour .spw-reassurance .spw-icon {
	width: 18px;
	height: 18px;
	color: var(--spw-color-accent);
}

.spw-tour .spw-reassurance a {
	text-decoration: none;
}

.spw-tour .spw-reassurance a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------- Story */

.spw-tour .spw-story {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	/* Slightly tighter top than the generic section rhythm — this section
	   follows the visually dense hero directly, so it needs less runway
	   than a section following another content chapter. Wins naturally
	   over .spw-section's shorthand padding via source order (equal
	   specificity, declared later), no !important needed. */
	padding-top: clamp(4rem, 3rem + 2vw, 5rem);
}

/* No story image supplied (legacy/incomplete Tour data): collapse to a
   single readable text column instead of leaving an empty media slot. */
.spw-tour .spw-story--text-only {
	grid-template-columns: 1fr;
	max-width: 62ch;
	margin: 0 auto;
}

.spw-tour .spw-story__media img {
	border-radius: calc(var(--spw-radius) * 0.6);
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------------------------------------------------------- Itinerary */

.spw-tour .spw-journey {
	list-style: none;
	margin: 0;
	padding: 2.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
	position: relative;
}

.spw-tour .spw-journey::before {
	content: "";
	position: absolute;
	top: 308px; /* approximate alignment with the number-badge row at the new, taller image height */
	left: 5%;
	right: 5%;
	height: 1px;
	background: var(--spw-color-border);
	opacity: 0.4;
}

.spw-tour .spw-journey__step {
	position: relative;
}

.spw-tour .spw-journey__image {
	position: relative;
	margin-bottom: 1rem;
}

.spw-tour .spw-journey__image img {
	width: 100%;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: var(--spw-radius);
}

.spw-tour .spw-journey__number {
	position: absolute;
	bottom: -14px;
	left: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--spw-color-accent);
	color: var(--spw-color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
}

/* Missing-image case: the badge has no image corner to anchor to, so it
   sits inline instead of absolutely-positioned — see the template's
   "no image" branch, which renders this class instead of
   .spw-journey__image + .spw-journey__number together. */
.spw-tour .spw-journey__number--standalone {
	position: static;
	margin-bottom: 0.75rem;
}

.spw-tour .spw-journey__title {
	font-size: 1.15rem;
	margin: 0.5rem 0 0.4rem;
	font-weight: 600;
}

.spw-tour .spw-journey__desc {
	font-size: 0.925rem;
	line-height: 1.55;
	color: var(--spw-color-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------- Itinerary — Multi-Day Package (a GENUINELY SEPARATE component from
   .spw-journey above, not a shared/conditionally-styled variant of it —
   see the template's itinerary section for why this boundary matters).
   v0.11.13: a vertical day-by-day list. Day tours keep the compact
   horizontal stop grid; packages (4–14+ days) read as one editorial row
   per day — narrow fixed day-marker column, wide copy column, a hairline
   between days and no connector line through the copy. */

.spw-tour .spw-package-journey {
	list-style: none;
	margin: 0;
	padding: 1rem 0 0;
	max-width: 52rem;
}

.spw-tour .spw-package-journey__step {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 1.5rem;
	padding: 1.5rem 0;
	border-top: var(--spw-border-hairline);
}

.spw-tour .spw-package-journey__step:last-child {
	border-bottom: var(--spw-border-hairline);
}

/* The day marker — a day-number badge, not an icon (v0.11.12): "DAY" as a
   small tracked label over a two-digit number, sized so that Day 01
   through Day 14+ share one 46 px circle (a pill for a longer label). */
.spw-tour .spw-package-journey__number {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	justify-self: start; /* keep the circle 46px — never stretched to the marker column */
	box-sizing: border-box;
	min-width: 46px;
	height: 46px;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--spw-color-accent);
	color: var(--spw-color-bg);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	line-height: 1;
	white-space: nowrap;
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.spw-tour .spw-package-journey__day {
	display: block;
	font-size: 0.5rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}

.spw-tour .spw-package-journey__n {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
}

.spw-tour .spw-package-journey__title {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
	font-weight: 600;
}

.spw-tour .spw-package-journey__desc {
	max-width: 64ch;
	font-size: 0.925rem;
	line-height: 1.55;
	color: var(--spw-color-text-muted);
	margin: 0;
}

/* v0.11.14: the day's copy (and photograph) live in one panel — the
   second grid row on every package; on 8+ day journeys the panel is the
   collapsible region (hidden attribute only — the copy stays in the HTML). */
.spw-tour .spw-package-journey__panel {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
}

.spw-tour .spw-package-journey__panel[hidden] {
	display: none;
}

.spw-tour .spw-package-journey__image {
	margin: 1rem 0 0;
	max-width: 28rem;
}

.spw-tour .spw-package-journey__image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--spw-radius);
}

/* ---- 8+ day accordion: the title becomes a full-width button with a
   minimal plus/minus at the far right; open background, hairlines only. */
.spw-tour .spw-package-journey__tools {
	margin: 0.75rem 0 0;
	text-align: right;
	max-width: 52rem;
}

.spw-tour .spw-package-journey__toggle-all {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.25rem 0;
	margin: 0;
	font: inherit;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--spw-color-text-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.spw-tour .spw-package-journey__toggle-all:hover,
.spw-tour .spw-package-journey__toggle-all:focus-visible {
	color: var(--spw-color-text);
}

.spw-tour .spw-package-journey__toggle-all:focus-visible,
.spw-tour .spw-package-journey__trigger:focus-visible {
	outline: 2px solid var(--spw-color-accent);
	outline-offset: 3px;
}

.spw-tour .spw-package-journey--accordion .spw-package-journey__title {
	margin: 0;
}

.spw-tour .spw-package-journey--accordion .spw-package-journey__panel {
	margin-top: 0.4rem;
}

.spw-tour .spw-package-journey__trigger {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.35rem 0;
	margin: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.spw-tour .spw-package-journey__title-text {
	min-width: 0;
}

.spw-tour .spw-package-journey__control {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

.spw-tour .spw-package-journey__control::before,
.spw-tour .spw-package-journey__control::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
	width: 14px;
	height: 1.5px;
}

.spw-tour .spw-package-journey__control::after {
	width: 1.5px;
	height: 14px;
}

.spw-tour .spw-package-journey__trigger[aria-expanded="true"] .spw-package-journey__control::after {
	display: none;
}

/* ---------------------------------------------------------- Itinerary — adaptive variants (Day Tour only, not packages) */

/* ONE ITEM: wide editorial narrative block — never the narrow
   single-column-in-a-5-column-grid result the old markup would produce
   for a single long-form itinerary entry (e.g. imported legacy Tours
   with just one "What to expect" narrative instead of numbered stops). */
.spw-tour .spw-journey-narrative {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.spw-tour .spw-journey-narrative__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: calc(var(--spw-radius) * 0.6);
}

/* No image supplied: the content takes the full width rather than
   leaving an empty column — see the template, which only renders the
   two-column grid-template implicitly via presence of the image block;
   without it this element is simply the sole grid child, and grid
   already collapses a single item to the container's full width when
   there is nothing in the second column position, so no extra CSS is
   needed for that case. */

.spw-tour .spw-journey-narrative__title {
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.625rem);
	font-weight: 600;
	margin: 0 0 0.85rem;
}

.spw-tour .spw-journey-narrative__desc {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--spw-color-text-muted);
	max-width: 62ch;
	margin: 0;
	white-space: pre-line; /* legacy imported narratives are often several paragraphs worth of plain text; preserve intentional line breaks without needing HTML. */
}

/* TWO ITEMS: balanced two-column treatment. */
.spw-tour .spw-journey-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.spw-tour .spw-journey-duo__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: calc(var(--spw-radius) * 0.6);
	margin-bottom: 1rem;
}

.spw-tour .spw-journey-duo__title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.spw-tour .spw-journey-duo__desc {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--spw-color-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------- Trip details */

.spw-tour .spw-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: stretch; /* equal-height cards across the row — grid's own default, made explicit; was "start" which let each card size to its own content */
}

/* Fewer than 3 of Practical Info / Included / Not Included have real
   content: match the column count to what's actually rendered rather
   than leaving empty grid tracks (a blank card-width gap) where a card
   was omitted. */
.spw-tour .spw-details--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.spw-tour .spw-details--cols-1 {
	grid-template-columns: 1fr;
	max-width: 42rem;
	margin: 0 auto;
}

.spw-tour .spw-card {
	background: var(--spw-color-bg-alt);
	border: var(--spw-border-hairline);
	border-radius: var(--spw-radius);
	padding: 2rem;
	display: flex;
	flex-direction: column;
}

.spw-tour .spw-card__title {
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
	font-weight: 600;
}

.spw-tour .spw-detail-list__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0;
	border-bottom: var(--spw-border-hairline);
	font-size: 0.95rem;
}

.spw-tour .spw-detail-list__row:last-child {
	border-bottom: 0;
}

.spw-tour .spw-detail-list__row dt {
	color: var(--spw-color-text-muted);
	font-weight: 500;
}

.spw-tour .spw-detail-list__row dd {
	margin: 0;
	text-align: right;
	font-weight: 500;
}

/* v0.11.11: Included / Not-included are one component — plain text rows
   between hairlines, no icons. Packages and day tours share this structure;
   the day layer (tour-experience.css) only re-tokens colour and rhythm. */
.spw-tour .spw-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
}

.spw-tour .spw-check-list li {
	display: block;
	padding: 0.65rem 0;
	border-top: var(--spw-border-hairline);
	line-height: 1.55;
}

.spw-tour .spw-check-list li:last-child {
	border-bottom: var(--spw-border-hairline);
}

/* ---------------------------------------------------------- Feature spotlight */

.spw-tour .spw-spotlight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--spw-color-dark);
	border-radius: var(--spw-radius);
	overflow: hidden;
	max-width: var(--spw-container);
	margin: 0 auto;
}

/* No feature image supplied: collapse to a single text column rather
   than an empty dark panel half. */
.spw-tour .spw-spotlight--text-only {
	grid-template-columns: 1fr;
}

.spw-tour .spw-spotlight__text {
	padding: clamp(2.5rem, 4vw, 4.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.spw-tour .spw-spotlight__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 360px;
}

.spw-tour .spw-spotlight .spw-btn {
	align-self: flex-start;
}

/* ---------------------------------------------------------- Expanded booking */

.spw-tour .spw-booking-expanded {
	/* Tighter than the generic section rhythm: the booking interface
	   itself is now visually substantial (see .spw-booking-panel below),
	   so this chapter should be tall because the panel is large, not
	   because of oversized empty margins around a small one. */
	padding-top: clamp(2.5rem, 1.75rem + 2vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 1.75rem + 2vw, 3.5rem);
}

.spw-tour .spw-booking-panel {
	background: var(--spw-color-bg);
	border: var(--spw-border-hairline);
	border-radius: var(--spw-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.spw-tour .spw-booking-expanded__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 1.75rem;
	align-items: start;
}

.spw-tour .spw-calendar {
	background: var(--spw-color-bg-alt);
	border-radius: var(--spw-radius);
	padding: 1.5rem;
}

.spw-tour .spw-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	font-weight: 600;
}

.spw-tour .spw-calendar__nav {
	border: 0;
	background: transparent;
	cursor: pointer;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--spw-color-text);
}

.spw-tour .spw-calendar__nav .spw-icon {
	transform: rotate(90deg);
	width: 16px;
	height: 16px;
}

.spw-tour .spw-calendar__nav--next .spw-icon {
	transform: rotate(-90deg);
}

.spw-tour .spw-calendar__weekdays,
.spw-tour .spw-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	text-align: center;
}

.spw-tour .spw-calendar__weekdays span {
	font-size: 0.8rem;
	color: var(--spw-color-text-muted);
	padding-bottom: 0.5rem;
}

.spw-tour .spw-calendar__grid button {
	width: 100%;
	aspect-ratio: 1 / 1;
	border: 0;
	background: transparent;
	border-radius: 50%;
	font-size: 0.95rem;
	cursor: pointer;
	color: var(--spw-color-text);
}

.spw-tour .spw-calendar__grid button:disabled {
	color: var(--spw-color-text-muted);
	opacity: 0.35;
	cursor: not-allowed;
}

.spw-tour .spw-calendar__grid button:not(:disabled):hover {
	background: var(--spw-color-bg);
}

.spw-tour .spw-calendar__grid button[aria-pressed="true"] {
	background: var(--spw-color-accent);
	color: var(--spw-color-bg);
}

.spw-tour .spw-travellers--panel {
	background: var(--spw-color-bg-alt);
	border-radius: var(--spw-radius);
	padding: 1.5rem;
}

.spw-tour .spw-summary__date,
.spw-tour .spw-summary__pax {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	margin: 0 0 0.6rem;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-summary__date .spw-icon,
.spw-tour .spw-summary__pax .spw-icon {
	width: 16px;
	height: 16px;
}

.spw-tour .spw-summary__total {
	margin-top: 1rem;
}

.spw-tour .spw-summary__notice {
	font-size: 0.8rem;
	text-align: center;
	color: var(--spw-color-text-muted);
	background: var(--spw-color-bg-alt);
	border-radius: calc(var(--spw-radius) * 0.6);
	padding: 0.6rem 0.75rem;
	margin: 0.75rem 0 0;
}

.spw-tour .spw-summary__secure {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: var(--spw-color-text-muted);
	margin: 0.75rem 0 0;
}

.spw-tour .spw-summary__secure .spw-icon {
	width: 14px;
	height: 14px;
}

.spw-tour .spw-summary__ask {
	font-size: 0.82rem;
	color: var(--spw-color-text-muted);
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: var(--spw-border-hairline);
}

.spw-tour .spw-summary__ask a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
	margin-left: 0.3rem;
}

/* ---------------------------------------------------------- Room configuration (room_occupancy pricing) */

.spw-tour .spw-room-summary {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.spw-tour .spw-room-summary__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-room-summary__value {
	font-size: 0.9rem;
	font-weight: 500;
}

.spw-tour .spw-room-summary .spw-link-cta {
	font-size: 0.82rem;
	margin-top: 0.15rem;
}

.spw-tour .spw-room-builder {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: var(--spw-border-hairline);
}

.spw-tour .spw-room-builder__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.spw-tour .spw-room-builder__header .spw-link-cta {
	font-size: 0.8rem;
	font-weight: 500;
}

.spw-tour .spw-room-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: var(--spw-border-hairline);
	font-size: 0.9rem;
}

.spw-tour .spw-room-row:last-child {
	border-bottom: 0;
}

.spw-tour .spw-room-row__label {
	color: var(--spw-color-text-muted);
	font-size: 0.85rem;
}

.spw-tour .spw-room-row__additional {
	margin: -0.3rem 0 0.6rem;
	padding-bottom: 0.3rem;
	font-size: 0.78rem;
	color: var(--spw-color-text-muted);
	font-style: italic;
}

.spw-tour .spw-room-row__controls {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.spw-tour .spw-room-row select {
	font-family: var(--spw-font-body);
	font-size: 0.85rem;
	background: transparent;
	border: var(--spw-border-hairline);
	border-radius: calc(var(--spw-radius) * 0.5);
	padding: 0.3rem 0.5rem;
	cursor: pointer;
	color: var(--spw-color-text);
}

.spw-tour .spw-room-row__type-static {
	font-size: 0.85rem;
	font-weight: 500;
}

.spw-tour .spw-room-row__action {
	background: none;
	border: 0;
	padding: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--spw-color-accent);
	cursor: pointer;
	text-decoration: underline;
}

.spw-tour .spw-summary__rooms,
.spw-tour .spw-summary__pricing-breakdown {
	margin-bottom: 0.6rem;
}

.spw-tour .spw-summary__rooms .spw-summary__meta,
.spw-tour .spw-summary__pricing-breakdown .spw-summary__meta {
	margin-bottom: 0.35rem;
	justify-content: space-between;
}

/* ---------------------------------------------------------- Spurwing difference */

.spw-tour .spw-difference {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.spw-tour .spw-value-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}

.spw-tour .spw-value-grid li {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	font-size: 1rem;
	font-weight: 500;
}

.spw-tour .spw-value-grid .spw-icon {
	color: var(--spw-color-accent);
	width: 30px;
	height: 30px;
}

/* ---------------------------------------------------------- FAQ + related */

.spw-tour .spw-faq-related {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

/* Only FAQ or only Related has content: single column, no empty half. */
.spw-tour .spw-faq-related--single {
	grid-template-columns: 1fr;
	max-width: 48rem;
	margin: 0 auto;
}

.spw-tour .spw-accordion__item {
	border-bottom: var(--spw-border-hairline);
}

.spw-tour .spw-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: transparent;
	border: 0;
	padding: 1.35rem 0;
	font-family: var(--spw-font-body);
	font-size: 1.05rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	color: var(--spw-color-text);
}

.spw-tour .spw-accordion__trigger .spw-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.spw-tour .spw-accordion__trigger[aria-expanded="true"] .spw-icon {
	transform: rotate(180deg);
}

.spw-tour .spw-accordion__panel {
	padding: 0 0 1.1rem;
}

.spw-tour .spw-accordion__panel p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--spw-color-text-muted);
}

.spw-tour .spw-related__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.spw-tour .spw-related__card {
	text-decoration: none;
	color: var(--spw-color-text);
	display: block;
}

.spw-tour .spw-related__card img {
	border-radius: var(--spw-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 0.6rem;
}

.spw-tour .spw-related__title {
	display: block;
	font-weight: 600;
	font-size: 1.02rem;
	margin-bottom: 0.25rem;
}

.spw-tour .spw-related__price {
	display: block;
	font-size: 0.9rem;
	color: var(--spw-color-text-muted);
}

/* ---------------------------------------------------------- Focus states (accessibility) */

.spw-tour a:focus-visible,
.spw-tour button:focus-visible,
.spw-tour input:focus-visible {
	outline: 2px solid var(--spw-color-accent);
	outline-offset: 2px;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1024px) {
	.spw-tour .spw-hero {
		min-height: auto;
		border-radius: 0;
	}

	.spw-tour .spw-hero__media {
		position: relative;
		height: 56vw;
		max-height: 480px;
		border-radius: var(--spw-radius);
	}

	.spw-tour .spw-hero__content {
		position: static;
		min-height: auto;
		padding: 2rem 0 0;
		max-width: none;
	}

	.spw-tour .spw-hero__overlay {
		display: none;
	}

	.spw-tour .spw-hero__heading,
	.spw-tour .spw-hero__subtitle,
	.spw-tour .spw-hero__meta li {
		color: var(--spw-color-text);
	}

	.spw-tour .spw-hero__meta .spw-icon {
		color: var(--spw-color-accent);
	}

	.spw-tour .spw-booking-card {
		position: static;
		width: 100%;
		max-width: none;
		margin-top: 1.5rem;
	}

	.spw-tour .spw-story,
	.spw-tour .spw-difference {
		grid-template-columns: 1fr;
	}

	.spw-tour .spw-story__media {
		order: -1;
	}

	.spw-tour .spw-journey {
		grid-template-columns: repeat(3, 1fr);
	}

	.spw-tour .spw-journey::before {
		display: none;
	}

	.spw-tour .spw-journey-narrative {
		grid-template-columns: 1fr;
	}

	.spw-tour .spw-journey-narrative__image {
		order: -1;
	}

	.spw-tour .spw-journey-duo {
		grid-template-columns: 1fr 1fr;
	}

	.spw-tour .spw-details {
		grid-template-columns: 1fr 1fr;
	}

	.spw-tour .spw-spotlight {
		grid-template-columns: 1fr;
	}

	.spw-tour .spw-spotlight__media img {
		min-height: 280px;
	}

	.spw-tour .spw-booking-expanded__grid {
		grid-template-columns: 1fr;
	}

	.spw-tour .spw-faq-related {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
	.spw-tour .spw-hero__meta {
		flex-direction: column;
		gap: 0.9rem;
	}

	.spw-tour .spw-journey {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.spw-tour .spw-journey__number {
		left: 0;
	}

	/* v0.11.13: on phones the day marker sits above its copy — the full
	   width goes to the text, nothing is crushed beside a badge. */
	.spw-tour .spw-package-journey__step {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		padding: 1.25rem 0;
	}

	.spw-tour .spw-package-journey__number {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0.75rem;
	}

	.spw-tour .spw-package-journey__title {
		grid-column: 1;
		grid-row: 2;
	}

	.spw-tour .spw-package-journey__panel {
		grid-column: 1;
		grid-row: 3;
	}

	/* v0.11.14: collapsed accordion rows stay an easy 44px tap target */
	.spw-tour .spw-package-journey__trigger {
		min-height: 2.75rem;
	}

	.spw-tour .spw-package-journey__image {
		max-width: none;
	}

	.spw-tour .spw-journey-narrative {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.spw-tour .spw-journey-duo {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.spw-tour .spw-details {
		grid-template-columns: 1fr;
	}

	.spw-tour .spw-good-to-know__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.15rem;
	}

	.spw-tour .spw-value-grid {
		grid-template-columns: 1fr 1fr;
	}

	.spw-tour .spw-related__list {
		grid-template-columns: 1fr;
	}

	.spw-tour .spw-section {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

/* ============================================================
   PAGE-SCOPED FIXES — ONLY apply when body has .spw-tour-page
   ============================================================
   This class is added (see spw_tour_body_class() in the main plugin
   file) ONLY on the singular page(s) whose content contains
   [spurwing_tour]. Every rule below is scoped under body.spw-tour-page,
   so no other page on the site is affected by any of it.
*/

/* 1) WIDTH BREAKOUT — v0.1.3 correction.
   The previous approach (width: 100vw + calc(50%)/negative-margin
   centring) expanded .spw-tour-host to full viewport WIDTH but did not
   correct its horizontal POSITION, because the theme's own
   constrained-layout math was still shifting its containing block. The
   element ended up 100vw wide while still starting from the old
   constrained-column x-position, pushing the whole tour off-screen to
   the right — masked by overflow-x: hidden rather than actually fixed.

   Correct approach: the shortcode output now carries the "alignfull"
   class on .spw-tour-host (see spw_tour_shortcode() in the main plugin
   file). alignfull is WordPress/Gutenberg's OWN mechanism for marking a
   direct child of a constrained-layout container as full-width — the
   theme's generated CSS (".is-layout-constrained > .alignfull") already
   handles both the width AND the position correctly, because it's the
   theme's own layout math rather than a value this plugin has to guess.
   No custom viewport-unit or negative-margin trick is needed here. */
body.spw-tour-page .spw-tour-host {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Belt-and-braces: also remove the ancestor's own max-width/padding in
   case the theme's content column additionally clips overflow (a plain
   max-width removal here is harmless even though alignfull on the host
   already does the real breakout work). Also zero out top spacing on
   the content-flow ancestor — if the visible gap between the header and
   the tour persists after this, it is coming from something outside
   this plugin's control (e.g. a spacer block or block-gap setting on
   the page itself), not from .wp-block-post-content/.entry-content. */
body.spw-tour-page .wp-block-post-content,
body.spw-tour-page .entry-content {
	max-width: none;
	overflow: visible;
	padding-top: 0;
	margin-top: 0;
}

/* 2) Duplicate title: block themes commonly render the WordPress page
   title via a Post Title block above the page content. The tour
   template already renders its own H1 inside the hero, so the normal
   page title is hidden ONLY on this page. Confirm the actual selector
   the staging theme uses (Twenty Twenty-Five typically outputs
   .wp-block-post-title) and adjust/add to this list if needed — this
   does not touch the site title in the header/navigation. */
body.spw-tour-page .wp-block-post-title,
body.spw-tour-page .entry-title {
	display: none;
}