/* CampLogix — shared marketing-page rules (About, Destinations, Packages,
   Services, single-destination/package/service, Blog, Request a Quote).
   Layered on top of site-chrome.css's tokens; never redefines them.
   Extracted from page-about.css so every new page type reuses one
   implementation instead of duplicating ~150 lines of prose/card/hero CSS.
   Each page keeps its own hero/section CSS for a genuinely distinct visual
   rhythm — this file is only the parts that are truly page-agnostic. */

.clx-section { padding: 90px 0; }
@media (min-width: 900px) { .clx-section { padding: 130px 0; } }
.clx-section-alt { background: var(--clx-bg); }
.clx-section-head { max-width: 700px; margin: 0 auto 48px; text-align: center; }
.clx-section-head .clx-h2 { margin: 0 0 14px; }

/* Base pill/badge component — reused by package hero pills, blog archive
   card category badges, and blog post tags. page-packages.css layers its
   own compact variant on top of this when both are in scope. */
.clx-pill {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--clx-navy);
	background: var(--clx-bg);
	border: 1px solid var(--clx-border);
	border-radius: 100px;
	padding: 5px 13px;
}

/* Generic page/archive/index fallback header — plain light band by
   default; gains the shared dark photo-hero treatment when the page has
   a featured image (see template-parts/generic-fallback.php). */
.clx-generic-hero { background: var(--clx-bg); padding: 70px 0 46px; text-align: center; }
.clx-generic-hero-inner { max-width: 760px; margin: 0 auto; }
.clx-generic-hero--media {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	background: linear-gradient(160deg, #0E3357 0%, var(--clx-navy) 55%, var(--clx-navy-darker) 100%);
	overflow: hidden;
	padding: 0;
}
.clx-generic-hero--media .clx-generic-hero-inner { max-width: 800px; padding: 70px 0 48px; text-align: start; position: relative; z-index: 2; }
.clx-generic-hero--media .clx-breadcrumb { justify-content: flex-start; color: rgba(255,255,255,.6); }
.clx-generic-hero--media .clx-breadcrumb a { color: rgba(255,255,255,.85); }
.clx-generic-hero--media .clx-breadcrumb [aria-current] { color: #fff; }
.clx-generic-hero--media .clx-single-hero-media { position: absolute; inset: 0; }
.clx-generic-hero--media .clx-single-hero-img { width: 100%; height: 100%; object-fit: cover; }
.clx-generic-hero--media .clx-single-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,22,38,.35) 0%, rgba(8,22,38,.85) 100%); }

.clx-breadcrumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--clx-muted);
	margin-bottom: 22px;
}
.clx-breadcrumb a:hover { color: var(--clx-teal-hover); }
.clx-breadcrumb [aria-current] { color: var(--clx-navy); font-weight: 700; }

/* ---------- Prose (the_content — core Gutenberg blocks) ---------- */
.clx-prose { max-width: 1240px; padding-top: 90px; padding-bottom: 20px; }
.clx-prose > * + * { margin-top: 28px; }
.clx-prose h2 { font-family: var(--clx-font-head); font-weight: 800; color: var(--clx-navy); font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.25; margin-top: 64px; }
.clx-prose h3 { font-family: var(--clx-font-head); font-weight: 700; color: var(--clx-navy); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.clx-prose p { font-size: 17px; line-height: 1.9; color: var(--clx-muted); max-width: 760px; }
.clx-prose > p, .clx-prose > h2, .clx-prose > h3, .clx-prose > ul, .clx-prose > ol { margin-left: auto; margin-right: auto; }
.clx-prose ul, .clx-prose ol { max-width: 760px; margin-left: auto; margin-right: auto; padding-inline-start: 22px; color: var(--clx-muted); font-size: 16px; line-height: 1.9; }
.clx-prose li + li { margin-top: 10px; }
.clx-prose a:not(.clx-btn) { color: var(--clx-teal-hover); font-weight: 700; border-bottom: 1px solid rgba(0,181,165,.35); }
.clx-prose a:not(.clx-btn):hover { border-color: var(--clx-teal-hover); }

/* alternating media-text narrative blocks */
.clx-prose .wp-block-media-text {
	align-items: center;
	gap: 40px;
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}
.clx-prose .wp-block-media-text figure { position: relative; margin: 0; }
.clx-prose .wp-block-media-text img { border-radius: 24px; box-shadow: 0 24px 48px -20px rgba(10,24,40,.3); }
.clx-prose .wp-block-media-text__content { padding: 0; }
.clx-prose .clx-media-text::before {
	content: "";
	position: absolute;
	inset: -16px auto auto -16px;
	width: 60%;
	height: 60%;
	border-radius: 24px;
	background: linear-gradient(135deg, rgba(0,181,165,.16), rgba(232,178,58,.12));
	z-index: -1;
}
.clx-prose .clx-media-text .wp-block-media-text__media { position: relative; }

/* card grids */
.clx-prose .clx-card-grid.wp-block-columns { gap: 24px; margin-left: auto; margin-right: auto; }
.clx-card, .clx-prose .clx-card {
	background: #fff;
	border: 1px solid var(--clx-border);
	border-radius: 22px;
	padding: 32px 28px;
	box-shadow: 0 2px 8px rgba(10,24,40,.06);
	transition: transform .35s, box-shadow .35s;
}
.clx-card:hover, .clx-prose .clx-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -20px rgba(10,24,40,.22); }
.clx-prose .clx-card h3 { margin-top: 0; }
.clx-prose .clx-card p { max-width: none; }

/* pullquote */
.clx-prose .clx-pullquote.wp-block-pullquote {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding: 44px 40px;
	background: var(--clx-bg);
	border: 1px solid var(--clx-border);
	border-radius: 24px;
	position: relative;
	border-inline-start: 4px solid var(--clx-teal);
}
.clx-prose .clx-pullquote blockquote { margin: 0; }
.clx-prose .clx-pullquote p { font-family: var(--clx-font-head); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; color: var(--clx-navy); line-height: 1.6; max-width: none; }
.clx-prose .clx-pullquote cite { font-style: normal; font-size: 14px; color: var(--clx-muted); font-weight: 600; }

/* soft section-break groups inside content */
.clx-prose .clx-section-alt.wp-block-group {
	background: var(--clx-bg);
	border-radius: 28px;
	padding: 56px clamp(24px,5vw,64px);
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.clx-prose .clx-inline-cta { font-weight: 700; }

/* separator */
.clx-prose hr.wp-block-separator { max-width: 120px; border: none; border-top: 2px solid var(--clx-border); margin: 48px auto; }

/* 404 */
.clx-404 { padding: 100px 24px 120px; text-align: center; }
.clx-404-inner { max-width: 560px; margin: 0 auto; }
.clx-404-code {
	display: block;
	font-family: var(--clx-font-head);
	font-weight: 800;
	font-size: clamp(3.5rem, 12vw, 6rem);
	line-height: 1;
	color: var(--clx-border);
	margin-bottom: 8px;
}
.clx-404-text { color: var(--clx-muted); font-size: 16px; line-height: 1.85; margin: 0 0 36px; }
.clx-404-search { display: flex; gap: 10px; max-width: 420px; margin: 0 auto 40px; }
.clx-404-search input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border-radius: 11px;
	border: 1px solid var(--clx-border);
	background: #fff;
	font-family: var(--clx-font-body);
	font-size: 15px;
	color: var(--clx-text);
}
.clx-404-search input:focus-visible { outline: 2px solid var(--clx-teal); outline-offset: 2px; }
.clx-404-search .clx-btn { padding: 0 20px; flex-shrink: 0; }
.clx-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; padding-top: 28px; border-top: 1px solid var(--clx-border); }
.clx-404-links a { font-size: 14.5px; font-weight: 700; color: var(--clx-teal-hover); }
.clx-404-links a:hover { color: var(--clx-teal); }

/* dark-background outline button variant (process/timeline-style dark sections) */
.clx-btn--on-dark { border-color: rgba(255,255,255,.35); color: #fff; }
.clx-btn--on-dark:hover { background: var(--clx-teal); border-color: var(--clx-teal); }