/* CampLogix — shared scaffolding for the three hub pages (Destinations,
   Packages, Services): full-bleed photo hero + card grid + pagination.
   Deliberately distinct from the About page's boxed/rounded hero — see
   the "unique visual rhythm per page" requirement. Each hub's own
   stylesheet (page-destinations.css etc.) layers its specific variant. */

.clx-hub-hero {
	position: relative;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.clx-hub-hero-media { position: absolute; inset: 0; }
.clx-hub-hero-img { width: 100%; height: 100%; object-fit: cover; }
.clx-hub-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8,22,38,.55) 0%, rgba(8,22,38,.75) 60%, rgba(8,22,38,.92) 100%);
}
.clx-hub-hero-inner { position: relative; z-index: 2; padding: 90px 0 56px; max-width: 760px; }
.clx-hub-hero .clx-breadcrumb { justify-content: flex-start; color: rgba(255,255,255,.6); }
.clx-hub-hero .clx-breadcrumb a { color: rgba(255,255,255,.85); }
.clx-hub-hero .clx-breadcrumb [aria-current] { color: #fff; }
.clx-hub-hero-intro { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.85; margin: 16px 0 28px; max-width: 600px; }

.clx-hub-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
@media (min-width: 640px) { .clx-hub-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .clx-hub-grid { grid-template-columns: repeat(3, 1fr); } }

.clx-hub-card {
	display: block;
	background: #fff;
	border: 1px solid var(--clx-border);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(10,24,40,.06);
	transition: transform .35s, box-shadow .35s;
}
.clx-hub-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -20px rgba(10,24,40,.22); color: inherit; }
.clx-hub-card-media { aspect-ratio: 4/3; overflow: hidden; }
.clx-hub-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.clx-hub-card:hover .clx-hub-card-media img { transform: scale(1.05); }
.clx-hub-card-body { padding: 22px 24px 26px; }
.clx-hub-card-body h2 { margin: 0 0 8px; }
.clx-hub-card-body p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--clx-muted); }
.clx-hub-card-link { display: inline-block; margin-top: 14px; color: var(--clx-teal-hover); font-weight: 700; font-size: 14px; }

.clx-hub-empty { text-align: center; max-width: 560px; margin: 0 auto; }
.clx-hub-empty p { color: var(--clx-muted); margin-bottom: 22px; }

.clx-pagination { margin-top: 48px; }
.clx-pagination ul { list-style: none; display: flex; justify-content: center; gap: 8px; padding: 0; margin: 0; }
.clx-pagination li a,
.clx-pagination li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--clx-border);
	color: var(--clx-navy);
	font-weight: 600;
	font-size: 14px;
}
.clx-pagination li a:hover { border-color: var(--clx-teal); color: var(--clx-teal-hover); }
.clx-pagination li span.current { background: var(--clx-teal); border-color: var(--clx-teal); color: #fff; }