/* ==========================================================================
   Canoe & Kayak - single tour page (post type tour-item, all 14)
   ==========================================================================
   2026-08-12, Enderon.

   Built from the approved mockup: tours-redesign/mockups/tour-single.html
   (locked variation B, split-screen hero). Markup comes from the template
   override at mkdf-tours/post-types/tours/templates/single/single-item.php.

   ---------------------------------------------------------------------------
   SCOPING - read this before adding anything
   ---------------------------------------------------------------------------
   Same rule as tours-hub.css. The mockup stylesheet declares its tokens on
   :root and restyles bare h1/h2/p/a, which would repaint the whole site if it
   were dropped in as is. Tokens are declared on .ck-tour instead and every
   element selector is a descendant of it.

   Page shell overrides are scoped to body.single-tour-item so they cannot
   reach the archive or the hub.
   ---------------------------------------------------------------------------
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page shell - let the bands run full bleed
   --------------------------------------------------------------------------
   holder.php no longer emits .mkdf-grid, so the tour holder is already edge to
   edge. What is left in the way is the theme's 15px gutter on the content
   holder and WPBakery's matching -15px row margin inside the content we
   re-emit. Both are zeroed. Horizontal rhythm is .ck-container.

   .mkdf-content carries an inline margin-top: -80px so the transparent header
   overlaps the first band. That is wanted here: the hero is the first thing on
   the page now that the theme title area is suppressed.
   -------------------------------------------------------------------------- */

body.single-tour-item .mkdf-content .mkdf-content-inner > .mkdf-grid-row,
body.single-tour-item .mkdf-page-content-holder {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.single-tour-item .ck-tour .vc_row {
	margin-left: 0;
	margin-right: 0;
}

body.single-tour-item .ck-tour .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

/* WPBakery gives every content element a 35px bottom margin. Inside a band
   the .ck-rte rhythm handles spacing, and a trailing 35px would break the
   band's own padding. */
body.single-tour-item .ck-tour .wpb_content_element,
body.single-tour-item .ck-tour .wpb_raw_code,
body.single-tour-item .ck-tour .wpb_text_column {
	margin-bottom: 0;
}

/* The theme adds a bottom pad to the last content section on singles. The
   closing CTA band is the last thing on the page and has its own. */
body.single-tour-item .mkdf-content {
	padding-bottom: 0;
}


/* --------------------------------------------------------------------------
   Tokens + base, scoped
   -------------------------------------------------------------------------- */

.ck-tour {
	/* Brand palette, measured from wanderers-child/style.css */
	--ck-green: #006c32;
	--ck-green-dark: #005025;
	--ck-yellow: #fff200;
	--ck-dark: #303030;
	--ck-ink: #1c1c1c;

	/* Body text replaces the live site's #b4b4b4 (2.07:1). #55585a measures
	   7.17:1 on white and 6.63:1 on --ck-mist. Both pass AA. */
	--ck-body: #55585a;
	--ck-body-mute: #6b6e70;
	--ck-on-dark: #ffffff;
	--ck-on-dark-mute: rgba(255, 255, 255, 0.72);

	--ck-white: #ffffff;
	--ck-mist: #f6f6f6;
	--ck-line: #e2e3e4;
	--ck-line-dark: rgba(255, 255, 255, 0.16);

	--ck-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--ck-radius: 10px;
	--ck-radius-btn: 0px;

	--ck-s1: 8px;
	--ck-s2: 16px;
	--ck-s3: 24px;
	--ck-s4: 32px;
	--ck-s5: 48px;
	--ck-s6: 64px;
	--ck-s7: 80px;
	--ck-s8: 128px;

	/* The theme pulls .mkdf-content up by this much so the header overlaps the
	   first band, and it does that only above 1024px. Measured, not guessed:
	   the header is 80px and its bottom edge landed exactly on the hero panel's
	   content top, so the panel's whole 80px of top padding was hidden under it.
	   Added back below. */
	--ck-header-overlap: 80px;

	--ck-section: 104px;
	--ck-section-sm: 72px;
	--ck-container: 1300px;
	--ck-measure: 780px;

	--ease: cubic-bezier(0.625, 0.05, 0, 1);

	font-family: var(--ck-font);
	font-size: 17px;
	line-height: 1.7;
	color: var(--ck-body);
	background: var(--ck-white);
}

.ck-tour *,
.ck-tour *::before,
.ck-tour *::after {
	box-sizing: border-box;
}

.ck-tour img {
	display: block;
	max-width: 100%;
	height: auto;
}

.ck-tour h1,
.ck-tour h2,
.ck-tour h3,
.ck-tour h4 {
	margin: 0;
	font-family: var(--ck-font);
	color: var(--ck-dark);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
	text-transform: none;
}

.ck-tour h1 { font-size: clamp(30px, 3.2vw, 46px); }
.ck-tour h2 { font-size: clamp(26px, 3.2vw, 40px); }
.ck-tour h3 { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.2; }

.ck-tour p {
	margin: 0 0 1.15em;
	font-family: var(--ck-font);
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.ck-tour p:last-child { margin-bottom: 0; }

.ck-tour a {
	color: var(--ck-green);
	text-decoration: none;
}

.ck-tour strong,
.ck-tour b {
	color: var(--ck-dark);
	font-weight: 700;
}


/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

/* width: 100% is not redundant. Between 769px and 1024px the hero band, which
   is the only band that is display: grid, was sizing to its content instead of
   stretching: 734px inside a 1024px parent, with no author rule setting a width
   and no margin. Measured with every stylesheet disabled in turn, and switching
   the band to display: block restored 1024px, so it is the theme's responsive
   sheet interacting with the grid container rather than anything in this file.
   The bands are always exactly viewport wide by design, so stating that is both
   the fix and the correct declaration. */
.ck-tour .ck-tour-band {
	position: relative;
	width: 100%;
}

.ck-tour .ck-container {
	width: 100%;
	max-width: var(--ck-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.ck-tour .ck-section { padding-block: var(--ck-section); }
.ck-tour .ck-section--sm { padding-block: var(--ck-s7); }

.ck-tour .ck-measure { max-width: var(--ck-measure); }
.ck-tour .ck-measure--center {
	margin-inline: auto;
	text-align: center;
}

.ck-tour .ck-dark {
	background: var(--ck-ink);
	color: var(--ck-on-dark-mute);
}
.ck-tour .ck-dark h1,
.ck-tour .ck-dark h2,
.ck-tour .ck-dark h3 { color: var(--ck-on-dark); }
.ck-tour .ck-dark strong { color: var(--ck-on-dark); }

.ck-tour .ck-green-bg {
	background: var(--ck-green);
	color: rgba(255, 255, 255, 0.85);
}
.ck-tour .ck-green-bg h2,
.ck-tour .ck-green-bg h3 { color: var(--ck-on-dark); }
.ck-tour .ck-green-bg strong { color: var(--ck-on-dark); }

.ck-tour .ck-mist-bg { background: var(--ck-mist); }

/* Inline links on dark and green bands. Brand green measures about 1.7:1 on
   the ink band, the same failure the live site has on body copy. Yellow
   measures 11.28:1 on --ck-dark and 5.63:1 on --ck-green. */
.ck-tour .ck-dark a:not(.ck-btn),
.ck-tour .ck-green-bg a:not(.ck-btn),
.ck-tour .ck-hero a:not(.ck-btn) {
	color: var(--ck-yellow);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ck-tour .ck-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ck-s7);
}
.ck-tour .ck-split--57 { grid-template-columns: 5fr 7fr; }
.ck-tour .ck-split--mid { align-items: center; }
.ck-tour .ck-split--top { align-items: start; }

.ck-tour .ck-sticky {
	position: sticky;
	top: 110px;
}

.ck-tour .ck-media {
	overflow: hidden;
	border-radius: var(--ck-radius);
}
.ck-tour .ck-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}
.ck-tour .ck-media:hover img { transform: scale(1.05); }


/* --------------------------------------------------------------------------
   Buttons - 0px radius, as measured on the live site
   -------------------------------------------------------------------------- */

.ck-tour .ck-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 28px;
	border: 2px solid transparent;
	border-radius: var(--ck-radius-btn);
	font-family: var(--ck-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	/* nowrap: without it the phone CTA broke across two lines at 390 */
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
		border-color 0.28s var(--ease);
}

.ck-tour .ck-btn--primary {
	background: var(--ck-green);
	color: #fff;
	border-color: var(--ck-green);
}
.ck-tour .ck-btn--primary:hover {
	background: var(--ck-yellow);
	color: var(--ck-dark);
	border-color: var(--ck-yellow);
}

.ck-tour .ck-btn--on-dark {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}
.ck-tour .ck-btn--on-dark:hover {
	background: #fff;
	color: var(--ck-dark);
	border-color: #fff;
}

.ck-tour .ck-btn--ghost {
	background: transparent;
	color: var(--ck-green);
	border-color: var(--ck-green);
}
.ck-tour .ck-btn--ghost:hover {
	background: var(--ck-green);
	color: #fff;
}

.ck-tour .ck-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.ck-tour .ck-actions--end { justify-content: flex-end; }


/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */

.ck-tour .ck-eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ck-green);
	margin-bottom: var(--ck-s2);
}
.ck-tour .ck-dark .ck-eyebrow,
.ck-tour .ck-green-bg .ck-eyebrow { color: var(--ck-yellow); }


/* --------------------------------------------------------------------------
   1. Hero - split screen
   -------------------------------------------------------------------------- */

.ck-tour .ck-hero--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 640px;
	color: #fff;
}

.ck-tour .ck-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--ck-ink);
}
.ck-tour .ck-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ck-tour .ck-hero__panel {
	background: var(--ck-ink);
	display: flex;
	align-items: center;
	/* Top padding carries the header overlap on top of the normal rhythm, so
	   the eyebrow clears the header instead of butting against it. Reset in the
	   1024 query, where the theme removes the negative margin and there is no
	   overlap to compensate for. */
	padding: calc(var(--ck-s7) + var(--ck-header-overlap)) clamp(24px, 5vw, 72px) var(--ck-s7);
}
.ck-tour .ck-hero__panel-inner { width: 100%; }

/* The panel sits against the container edge on the right so the split reads as
   a true half, but its text still lines up with .ck-container on wide screens. */
@media only screen and (min-width: 1600px) {
	.ck-tour .ck-hero__panel { padding-right: calc((100vw - var(--ck-container)) / 2 + 24px); }
}

.ck-tour .ck-hero__cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ck-yellow);
	margin-bottom: var(--ck-s3);
}
.ck-tour .ck-hero__cat a { color: inherit; text-decoration: none; }
.ck-tour .ck-hero__cat a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ck-tour .ck-hero__title { color: #fff; }

.ck-tour .ck-hero__lede {
	color: var(--ck-on-dark-mute);
	margin-top: var(--ck-s3);
	max-width: 52ch;
}


/* --------------------------------------------------------------------------
   Price + fact chips
   -------------------------------------------------------------------------- */

.ck-tour .ck-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: var(--ck-s4) 0 var(--ck-s1);
}
.ck-tour .ck-price__value {
	font-size: 44px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.ck-tour .ck-price__unit {
	font-size: 14px;
	color: var(--ck-on-dark-mute);
}

.ck-tour .ck-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 20px 0 var(--ck-s4);
	padding: 0;
}
.ck-tour .ck-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}
.ck-tour .ck-chip svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--ck-yellow);
}


/* --------------------------------------------------------------------------
   Hero proof - accreditations, closing the hero panel
   --------------------------------------------------------------------------
   Was a full width mist band between the hero and the overview. One or two
   small badges plus a sentence never filled it, so at desktop widths it read
   as a near empty strip. Now it closes the hero panel, separated by a hairline
   rather than a background change.
   -------------------------------------------------------------------------- */

.ck-tour .ck-hero__proof {
	display: flex;
	align-items: center;
	gap: var(--ck-s3);
	flex-wrap: wrap;
	margin-top: var(--ck-s5);
	padding-top: var(--ck-s4);
	border-top: 1px solid var(--ck-line-dark);
}

.ck-tour .ck-hero__marks {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

/* Height capped, width auto: the badges are different shapes per tour. The
   OutdoorsMark file is 101x163 portrait, the Pest-Free warrant 150x150.

   The white plate is deliberate. These files are a mix of transparent PNGs and
   JPGs with baked white backgrounds, so on the ink panel the JPGs would read as
   stray white rectangles. Giving all of them the same plate makes it look
   intended rather than accidental. */
.ck-tour .ck-hero__marks img {
	height: 48px;
	width: auto;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
	padding: 5px;
}

.ck-tour .ck-hero__proof-line {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ck-on-dark-mute);
}


/* --------------------------------------------------------------------------
   3. Overview + step flow
   -------------------------------------------------------------------------- */

.ck-tour .ck-measure--center h2 { margin-bottom: var(--ck-s3); }

.ck-tour .ck-preamble { margin-top: var(--ck-s5); }

/* A story section short enough to be absorbed into the overview. Sits under
   the intro as a note rather than getting a band of its own. */
.ck-tour .ck-intro-note {
	margin-top: var(--ck-s5);
	margin-inline: auto;
}
.ck-tour .ck-intro-note h3 { margin-bottom: var(--ck-s2); }

.ck-tour .ck-steps {
	display: grid;
	gap: var(--ck-s5);
	margin-top: var(--ck-s6);
}
.ck-tour .ck-steps--row { grid-template-columns: repeat(3, 1fr); }

.ck-tour .ck-step {
	padding-top: var(--ck-s4);
	border-top: 3px solid var(--ck-green);
}
.ck-tour .ck-step__n {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ck-green);
	margin-bottom: var(--ck-s2);
}
.ck-tour .ck-step h3 { margin-bottom: 12px; }


/* --------------------------------------------------------------------------
   4. Story split
   -------------------------------------------------------------------------- */

/* 3:2 with a 600px cap. Every bio-tour-* gallery file is 600x400 and goes
   visibly soft above roughly 600px displayed width. See PLAN.md s6b. */
.ck-tour .ck-story__media .ck-media {
	aspect-ratio: 3 / 2;
	max-width: 600px;
}

.ck-tour .ck-story__section + .ck-story__section { margin-top: var(--ck-s6); }
.ck-tour .ck-story__section h2 { margin-bottom: var(--ck-s3); }


/* --------------------------------------------------------------------------
   Rich text - the client's own copy, restyled
   --------------------------------------------------------------------------
   This is the block that fixes PLAN.md s3.1 item 4. The live pages set body
   copy to #b4b4b4, which is 2.07:1 on white and 1.92:1 on the grey panels.
   Inheriting --ck-body instead puts every paragraph at 7.17:1 / 6.63:1.
   -------------------------------------------------------------------------- */

.ck-tour .ck-rte { color: inherit; }
.ck-tour .ck-rte--lead { font-size: 19px; }

.ck-tour .ck-rte p,
.ck-tour .ck-rte li,
.ck-tour .ck-rte span,
.ck-tour .ck-rte div {
	color: inherit;
}

.ck-tour .ck-rte h1,
.ck-tour .ck-rte h2,
.ck-tour .ck-rte h3,
.ck-tour .ck-rte h4,
.ck-tour .ck-rte h5,
.ck-tour .ck-rte h6 {
	margin: var(--ck-s5) 0 var(--ck-s2);
	font-size: clamp(19px, 1.6vw, 22px);
}
.ck-tour .ck-rte > *:first-child { margin-top: 0; }

.ck-tour .ck-rte ul,
.ck-tour .ck-rte ol {
	margin: 0 0 1.15em;
	padding-left: 1.3em;
}
.ck-tour .ck-rte li { margin-bottom: 0.5em; }
.ck-tour .ck-rte li::marker { color: var(--ck-green); }

.ck-tour .ck-rte a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ck-tour .ck-rte img {
	border-radius: var(--ck-radius);
	margin-block: var(--ck-s3);
}

.ck-tour .ck-rte iframe,
.ck-tour .ck-rte video {
	max-width: 100%;
	border-radius: var(--ck-radius);
}

/* Empty paragraphs are common in this content, WPBakery leaves them behind
   when a block is cleared. They render as stray 27px gaps. */
.ck-tour .ck-rte p:empty { display: none; }


/* --------------------------------------------------------------------------
   5. Promise band
   -------------------------------------------------------------------------- */

.ck-tour .ck-quote {
	margin: 0;
	border-left: 4px solid var(--ck-yellow);
	padding-left: var(--ck-s4);
	font-size: clamp(21px, 2.4vw, 30px);
	line-height: 1.35;
	font-weight: 300;
	color: #fff;
	letter-spacing: -0.01em;
}


/* --------------------------------------------------------------------------
   6. Gallery - bento
   --------------------------------------------------------------------------
   4 columns at desktop, 2 at phone. The template picks which cells span two
   columns so (count + wide cells) is always a multiple of 4, which means the
   last row is always full. See ck_tour_bento_plan().

   grid-auto-flow: dense is what makes that hold at 2 columns as well. The unit
   total being even is not enough there: a single cell followed by a double
   cannot share a row, so the double drops to the next row and leaves a hole.
   Measured on the Rock Carvings gallery at 390, which is 5 cells with 3 doubles.
   Dense backfills the hole with a later single.
   -------------------------------------------------------------------------- */

/* The gutter is a transparent border on each cell, not grid gap, and this is
   the reason why.

   With gap, a cell spanning two columns is (2 x col + gap) wide, not 2 x col.
   At aspect-ratio 2/1 that makes it exactly half a gap TALLER than its square
   neighbours: 309px against 301px at 1440. Every row with a wide cell in it sat
   8px out of line.

   Setting the aspect ratio to 2.053 would only be right at one viewport, since
   gap/col changes with width. Removing the gap entirely makes a two column span
   exactly 2 x col, so 2/1 and 1/1 resolve to the same height at every width.
   The visible 16px gutter comes from an 8px transparent border on each cell,
   and the negative margin cancels the outer half gutter so the grid still lines
   up with the bands above and below.

   overflow clips to the padding box, so the image is still clipped and the
   hover scale still contained. The radius is offset by the border width so the
   visible corner stays at --ck-radius. */
.ck-tour .ck-gal-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	gap: 0;
	margin: calc(var(--ck-s1) * -1);
}
.ck-tour .ck-gal-bento__cell {
	overflow: hidden;
	border: var(--ck-s1) solid transparent;
	border-radius: calc(var(--ck-radius) + var(--ck-s1));
	background-clip: padding-box;
	aspect-ratio: 1 / 1;
}
.ck-tour .ck-gal-bento__cell--wide {
	grid-column: span 2;
	aspect-ratio: 2 / 1;
}
.ck-tour .ck-gal-bento img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease);
}
.ck-tour .ck-gal-bento__cell:hover img { transform: scale(1.04); }


/* --------------------------------------------------------------------------
   7. Accordion
   -------------------------------------------------------------------------- */

.ck-tour .ck-acc__heading { margin-bottom: var(--ck-s4); }

.ck-tour .ck-acc { border-top: 1px solid var(--ck-line); }
.ck-tour .ck-acc__item { border-bottom: 1px solid var(--ck-line); }

/* The heading is an h3 for document outline, the button inside it is the
   control. Zeroing the h3's own type so the button governs. */
.ck-tour .ck-acc__h {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.ck-tour .ck-acc__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ck-s3);
	padding: var(--ck-s3) 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--ck-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--ck-dark);
	text-align: left;
	transition: color 0.25s var(--ease);
}
.ck-tour .ck-acc__btn:hover { color: var(--ck-green); }
.ck-tour .ck-acc__btn:focus-visible {
	outline: 2px solid var(--ck-green);
	outline-offset: 4px;
}

.ck-tour .ck-acc__icon {
	flex: none;
	width: 20px;
	height: 20px;
	position: relative;
}
.ck-tour .ck-acc__icon::before,
.ck-tour .ck-acc__icon::after {
	content: '';
	position: absolute;
	background: var(--ck-green);
	transition: transform 0.35s var(--ease);
}
.ck-tour .ck-acc__icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.ck-tour .ck-acc__icon::after { left: 9px; top: 0; width: 2px; height: 20px; }
.ck-tour .ck-acc__item.is-open .ck-acc__icon::after { transform: scaleY(0); }

.ck-tour .ck-acc__panel {
	overflow: hidden;
	height: 0;
}

/* The row spans the container so it aligns with the bands above and below, but
   the answer copy is still capped at a readable measure. A 1300px line of body
   text is unreadable. */
.ck-tour .ck-acc__inner {
	padding-bottom: var(--ck-s4);
	max-width: var(--ck-measure);
}
.ck-tour .ck-acc__img { margin-top: var(--ck-s3); }

/* No JS: every panel is open rather than permanently shut. */
.ck-tour .no-js .ck-acc__panel { height: auto; }


/* --------------------------------------------------------------------------
   8. Closing CTA
   -------------------------------------------------------------------------- */

.ck-tour #ck-closing-cta h2 { max-width: 18ch; }
.ck-tour .ck-closing__note {
	margin-top: 20px;
	max-width: 48ch;
	margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Scroll revealed booking bar - all breakpoints
   --------------------------------------------------------------------------
   Hidden until the hero booking block scrolls out of view, and hidden again
   over the closing CTA band so it never covers a live button.
   -------------------------------------------------------------------------- */

.ck-tour .ck-bookbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	padding: 12px 0;
	background: var(--ck-white);
	border-top: 1px solid var(--ck-line);
	box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.1);
	transform: translateY(101%);
	visibility: hidden;
	transition: transform 0.5s var(--ease), visibility 0.5s var(--ease);
}
.ck-tour .ck-bookbar.is-visible {
	transform: none;
	visibility: visible;
}

.ck-tour .ck-bookbar__inner {
	width: 100%;
	max-width: var(--ck-container);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	align-items: center;
	gap: var(--ck-s3);
}
.ck-tour .ck-bookbar__tour {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ck-dark);
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ck-tour .ck-bookbar__meta {
	flex: none;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.ck-tour .ck-bookbar__price {
	font-size: 24px;
	font-weight: 700;
	color: var(--ck-dark);
	line-height: 1.1;
}
.ck-tour .ck-bookbar__unit {
	font-size: 12px;
	color: var(--ck-body-mute);
}
.ck-tour .ck-bookbar__actions {
	flex: none;
	display: flex;
	gap: 10px;
}

/* The theme's fixed email tab on the right edge sits at the same corner as the
   bar. Lifting it clear while the bar is up. Pre-existing furniture, logged in
   HANDOFF.md. */
body.single-tour-item.ck-bookbar-open .mystickyelements-fixed {
	bottom: 88px;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {
	.ck-tour .ck-hero--split {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.ck-tour .ck-hero__media { min-height: 320px; }
	/* Resets the desktop header-overlap padding: below 1025 the theme drops its
	   negative margin, so there is no overlap to compensate for. Tighter on top
	   than the bottom because the panel sits directly under the hero image here
	   rather than beside it, and 64px read as a gap between the two. */
	.ck-tour .ck-hero__panel { padding-block: var(--ck-s4) var(--ck-s6); }

	.ck-tour .ck-split,
	.ck-tour .ck-split--57 {
		grid-template-columns: 1fr;
		gap: var(--ck-s5);
	}

	/* The split stacks, so a sticky image would pin above its own copy. */
	.ck-tour .ck-sticky { position: static; }
	.ck-tour .ck-story__media .ck-media { max-width: none; }

	.ck-tour .ck-steps--row { grid-template-columns: 1fr; gap: var(--ck-s4); }

	/* Right aligned buttons read as a stray indent once stacked. */
	.ck-tour .ck-actions--end { justify-content: flex-start; }

	.ck-tour .ck-section { padding-block: var(--ck-s7); }
}

@media only screen and (max-width: 767px) {
	.ck-tour { font-size: 16px; }
	.ck-tour .ck-container { padding-inline: 20px; }
	.ck-tour .ck-section,
	.ck-tour .ck-section--sm { padding-block: var(--ck-section-sm); }

	.ck-tour .ck-price__value { font-size: 36px; }

	.ck-tour .ck-hero__marks img { height: 42px; }
	.ck-tour .ck-hero__proof { margin-top: var(--ck-s4); padding-top: var(--ck-s3); }

	.ck-tour .ck-gal-bento { grid-template-columns: repeat(2, 1fr); }

	.ck-tour .ck-rte--lead { font-size: 17px; }

	.ck-tour .ck-btn { padding: 0 20px; }

	/* Book bar at phone: the tour name and the secondary button drop out,
	   leaving price and Book Now. Locked behaviour, PLAN.md s6c. */
	.ck-tour .ck-bookbar__inner {
		padding-inline: 16px;
		gap: var(--ck-s2);
	}
	.ck-tour .ck-bookbar__tour { display: none; }
	.ck-tour .ck-bookbar__meta { flex-direction: column; gap: 0; }
	.ck-tour .ck-bookbar__price { font-size: 20px; }
	.ck-tour .ck-bookbar__unit { font-size: 11px; }
	.ck-tour .ck-bookbar__actions { flex: 1 1 auto; }
	.ck-tour .ck-bookbar__actions .ck-btn { flex: 1 1 auto; padding-inline: 16px; }
	.ck-tour .ck-bookbar__actions .ck-btn--ghost { display: none; }
}

@media only screen and (max-width: 480px) {
	.ck-tour .ck-actions .ck-btn { width: 100%; }
	.ck-tour .ck-bookbar__actions .ck-btn { width: auto; }

}

@media (prefers-reduced-motion: reduce) {
	.ck-tour *,
	.ck-tour *::before,
	.ck-tour *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}