/* ==========================================================================
   Canoe & Kayak - /tours/ hub (page ID 2420)
   ==========================================================================
   2026-08-12, Enderon.

   Built from the approved mockup: tours-redesign/mockups/tours-hub.html
   (locked option A, destination split).

   ---------------------------------------------------------------------------
   SCOPING - read this before adding anything
   ---------------------------------------------------------------------------
   Every rule below is scoped to .ck-hub or .page-id-2420. 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. The tokens are
   therefore declared on .ck-hub instead, and every element selector is a
   descendant of it.

   Each WPBakery raw HTML block on the page opens with <div class="ck-hub">.
   Add a new section the same way or the tokens will not resolve.
   ---------------------------------------------------------------------------
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page shell - let the sections run full bleed
   --------------------------------------------------------------------------
   The page uses full-width.php, so .mkdf-full-width-inner is already edge to
   edge. What is left in the way is the theme's 15px gutter on .mkdf-grid-row /
   .mkdf-page-content-holder and WPBakery's matching -15px row margin. Both are
   zeroed here so a section background reaches the viewport edge. Horizontal
   rhythm is handled by .ck-container instead.
   -------------------------------------------------------------------------- */

.page-id-2420 .mkdf-grid-row,
.page-id-2420 .mkdf-page-content-holder {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.page-id-2420 .wpb-content-wrapper .vc_row {
	margin-left: 0;
	margin-right: 0;
}

.page-id-2420 .wpb-content-wrapper .vc_column_container > .vc_column-inner {
	padding-left: 0;
	padding-right: 0;
}

/* WPBakery gives every content element a 35px bottom margin. The sections butt
   up against each other by design, so the background changes read as one edge. */
.page-id-2420 .wpb-content-wrapper .wpb_content_element,
.page-id-2420 .wpb-content-wrapper .wpb_raw_code {
	margin-bottom: 0;
}


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

.ck-hub {
	/* 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;

	--ck-section-sm: 72px;
	--ck-container: 1300px;

	--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-hub *,
.ck-hub *::before,
.ck-hub *::after {
	box-sizing: border-box;
}

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

.ck-hub h1,
.ck-hub h2,
.ck-hub h3,
.ck-hub 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-hub h1 { font-size: clamp(34px, 5vw, 60px); }
.ck-hub h2 { font-size: clamp(28px, 3.4vw, 44px); }
.ck-hub h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.2; }

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

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

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


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

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

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

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

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

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

/* Inline links on dark and green bands. The brand green measures about 1.7:1 on
   the dark band, which is 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-hub.ck-dark a:not(.ck-btn):not(.ck-link),
.ck-hub.ck-green-bg a:not(.ck-btn):not(.ck-link),
.ck-hub.ck-hero a:not(.ck-btn):not(.ck-link),
.ck-hub .ck-dark a:not(.ck-btn):not(.ck-link),
.ck-hub .ck-green-bg a:not(.ck-btn):not(.ck-link),
.ck-hub .ck-hero a:not(.ck-btn):not(.ck-link) {
	color: var(--ck-yellow);
	text-decoration: underline;
	text-underline-offset: 3px;
}


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

.ck-hub .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-hub .ck-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

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

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

/* Text link with underline reveal */
.ck-hub .ck-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ck-green);
	position: relative;
}
.ck-hub .ck-link svg { width: 16px; height: 16px; flex: none; }
.ck-hub .ck-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--ease);
}
.ck-hub a:hover .ck-link::after,
.ck-hub .ck-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}


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

.ck-hub .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-hub.ck-dark .ck-eyebrow,
.ck-hub.ck-green-bg .ck-eyebrow,
.ck-hub .ck-dark .ck-eyebrow,
.ck-hub .ck-green-bg .ck-eyebrow {
	color: var(--ck-yellow);
}


/* --------------------------------------------------------------------------
   Hero - full bleed image, content bottom
   -------------------------------------------------------------------------- */

.ck-hub.ck-hero,
.ck-hub .ck-hero {
	position: relative;
	color: #fff;
}

.ck-hub .ck-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.ck-hub .ck-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ck-hub .ck-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.82) 100%);
}

.ck-hub .ck-hero__inner {
	position: relative;
	z-index: 2;
}

.ck-hub.ck-hero h1,
.ck-hub .ck-hero h1 {
	color: #fff;
}

.ck-hub .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-hub.ck-hero--full,
.ck-hub .ck-hero--full {
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	padding-block: var(--ck-s7);
}


/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.ck-hub .ck-trust {
	display: flex;
	align-items: center;
	gap: var(--ck-s5);
	flex-wrap: wrap;
}
.ck-hub .ck-trust img {
	height: 76px;
	width: auto;
	object-fit: contain;
}
.ck-hub .ck-trust--sm img { height: 54px; }


/* --------------------------------------------------------------------------
   Split
   -------------------------------------------------------------------------- */

.ck-hub .ck-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ck-s7);
	align-items: center;
}


/* --------------------------------------------------------------------------
   Feature card - the three routing doors
   -------------------------------------------------------------------------- */

.ck-hub .ck-feature {
	position: relative;
	border-radius: var(--ck-radius);
	overflow: hidden;
	min-height: 460px;
	display: flex;
	align-items: flex-end;
	color: #fff;
}
.ck-hub .ck-feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease);
}
.ck-hub .ck-feature:hover img { transform: scale(1.04); }
.ck-hub .ck-feature::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.85) 100%);
}
.ck-hub .ck-feature__body {
	position: relative;
	z-index: 2;
	padding: var(--ck-s5);
	width: 100%;
}
.ck-hub .ck-feature__body h3 {
	color: #fff;
	max-width: 20ch;
}


/* --------------------------------------------------------------------------
   Oversized number moment
   -------------------------------------------------------------------------- */

.ck-hub .ck-bignum {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ck-s6);
}
.ck-hub .ck-bignum__n {
	font-size: clamp(56px, 8vw, 104px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--ck-yellow);
	margin-bottom: var(--ck-s3);
}
.ck-hub .ck-bignum p { font-size: 16px; }


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

@media only screen and (max-width: 1024px) {
	.ck-hub .ck-split { grid-template-columns: 1fr; gap: var(--ck-s5); }
	.ck-hub .ck-bignum { grid-template-columns: 1fr; gap: var(--ck-s5); }
	/* The closing CTA right-aligns its buttons on desktop; once stacked that
	   reads as a stray indent. */
	.ck-hub .ck-cta-actions { justify-content: flex-start !important; }
}

@media only screen and (max-width: 767px) {
	.ck-hub { font-size: 16px; }
	.ck-hub .ck-container { padding-inline: 20px; }
	.ck-hub.ck-section--sm,
	.ck-hub .ck-section--sm { padding-block: var(--ck-section-sm); }
	.ck-hub.ck-hero--full,
	.ck-hub .ck-hero--full { min-height: 480px; }
	.ck-hub .ck-trust img { height: 56px; }
	.ck-hub .ck-trust { gap: var(--ck-s3); }
	.ck-hub .ck-feature { min-height: 380px; }
	.ck-hub .ck-feature__body { padding: var(--ck-s3); }
	/* Full width buttons below 480 so neither CTA ends up orphaned on its row */
	.ck-hub .ck-btn { padding: 0 20px; }
}

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

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