/* ==================================================
   Club Getaway - Activities (dark interactive theme)
   Style language inspired by mercrising.com:
   dark navy, glowing teal, purple + gold accents
   ================================================== */

:root {
	--primary:#00c9a7;
	--accent:#8b5cf6;
	--gold:#e8d94a;
	--bg:#030812;
	--card:#071220;
	--card-hi:#0a1628;
	--border:rgba(0,201,167,.16);
	--text:#e0f2ef;
	--muted:#6a9090;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
	font-family:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	background:var(--bg);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,201,167,.12), transparent),
		radial-gradient(ellipse 60% 40% at 90% 20%, rgba(139,92,246,.07), transparent);
	background-attachment:fixed;
	color:var(--text);
	-webkit-text-size-adjust:100%;
	min-height:100vh;
}

/* ---------- Hero ---------- */
.hero {
	text-align:center;
	padding:26px 16px 20px 16px;
}
/* Landing pages get the camp panorama behind the header, fading
   into the page background so it blends with the dark theme */
.hero.banner {
	position:relative;
	padding-top:150px;
	padding-bottom:26px;
	background-image:
		linear-gradient(180deg, rgba(3,8,18,.18) 0%, rgba(3,8,18,.62) 48%, rgba(3,8,18,.94) 82%, #030812 100%),
		url('/images/cg_hero_banner.jpg');
	background-size:cover;
	background-position:center top;
	background-repeat:no-repeat;
}
.hero.banner h1 {
	text-shadow:0 2px 16px rgba(0,0,0,.9), 0 0 26px rgba(0,201,167,.4);
}
.hero.banner .tagline {
	color:#bcd6d2;
	text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.hero.banner .cglogo {
	filter:drop-shadow(0 4px 18px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(0,201,167,.45));
}
@media (max-width:640px) {
	.hero.banner { padding-top:104px; }
}

.hero .cglogo {
	display:block;
	width:76px;
	height:auto;
	margin:0 auto 12px auto;
	border-radius:16px;
	filter:drop-shadow(0 0 16px rgba(0,201,167,.4));
}
.hero h1 {
	font-size:1.55em;
	letter-spacing:.35em;
	text-transform:uppercase;
	font-weight:700;
	text-shadow:0 0 24px rgba(0,201,167,.45);
}
.hero h1 span { color:var(--primary); }
.hero .tagline {
	margin-top:8px;
	color:var(--muted);
	font-size:.8em;
	letter-spacing:.25em;
	text-transform:uppercase;
}
.hero a.backlink {
	display:inline-block;
	margin-top:14px;
	color:var(--primary);
	background:rgba(0,201,167,.1);
	border:1px solid var(--border);
	border-radius:999px;
	padding:8px 18px;
	text-decoration:none;
	font-size:.85em;
	letter-spacing:.12em;
	text-transform:uppercase;
}

/* ---------- Sticky toolbar: search + filter chips ---------- */
.toolbar {
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(2,7,16,.92);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--border);
	padding:10px 12px;
}
.searchwrap { max-width:640px; margin:0 auto 10px auto; }
.searchwrap input {
	width:100%;
	background:rgba(7,18,32,.95);
	border:1px solid var(--border);
	border-radius:8px;
	color:var(--text);
	font-size:1em;
	padding:10px 14px;
	outline:none;
}
.searchwrap input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,201,167,.15); }
.searchwrap input::placeholder { color:var(--muted); }

.chips {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	max-width:640px;
	margin:0 auto;
	padding-bottom:2px;
}
.chip {
	flex:0 0 auto;
	display:inline-block;
	padding:8px 14px;
	border-radius:999px;
	background:rgba(7,18,32,.9);
	color:var(--text);
	font-weight:700;
	font-size:.85em;
	letter-spacing:.05em;
	text-decoration:none;
	border:1px solid var(--border);
	cursor:pointer;
	transition:all .18s ease;
}
.chip .cnt { color:var(--muted); font-weight:400; margin-left:4px; }
.chip.active {
	background:var(--primary);
	border-color:var(--primary);
	color:#000000;
	box-shadow:0 0 16px rgba(0,201,167,.45);
}
.chip.active .cnt { color:rgba(0,0,0,.55); }
.chip.mapchip {
	background:rgba(139,92,246,.14);
	border-color:rgba(139,92,246,.4);
	color:#c4b0fa;
}

/* ---------- Card grid ---------- */
.grid {
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
	padding:18px 14px 30px 14px;
	max-width:640px;
	margin:0 auto;
}
@media (min-width:640px) {
	.grid { grid-template-columns:1fr 1fr; max-width:900px; }
}
@media (min-width:960px) {
	.grid { grid-template-columns:1fr 1fr 1fr; max-width:1200px; }
}

.card {
	background:var(--card);
	border:1px solid var(--border);
	border-radius:14px;
	overflow:hidden;
	cursor:pointer;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .4s ease;
	opacity:0;
	transform:translateY(14px);
}
.card.in { opacity:1; transform:translateY(0); }
.card:hover, .card:active {
	transform:translateY(-3px);
	border-color:rgba(0,201,167,.45);
	box-shadow:0 8px 28px rgba(0,201,167,.12);
}
.card.hidden { display:none; }

.card .imgwrap {
	position:relative;
	background:var(--card-hi);
	height:180px;
	overflow:hidden;
}
.card .imgwrap img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .35s ease;
}
.card:hover .imgwrap img { transform:scale(1.05); }
.card .imgwrap .noimg {
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	font-size:2.4em;
	opacity:.5;
}

.badge {
	position:absolute;
	top:10px;
	left:10px;
	padding:4px 12px;
	border-radius:999px;
	font-size:.72em;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	background:rgba(2,7,16,.8);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
}
.t_water         { color:var(--primary); border:1px solid rgba(0,201,167,.5); }
.t_heights       { color:#c4b0fa; border:1px solid rgba(139,92,246,.55); }
.t_entertainment { color:#ff8da0; border:1px solid rgba(240,80,96,.55); }
.t_games         { color:var(--gold); border:1px solid rgba(232,217,74,.45); }
.t_wellness      { color:#7fe0a8; border:1px solid rgba(0,201,122,.5); }
.t_other         { color:#9fb8b3; border:1px solid rgba(160,180,180,.4); }

.card_body { padding:14px 16px 16px 16px; }
.card_body h3 { font-size:1.08em; margin-bottom:5px; }
.loc { font-size:.83em; color:var(--muted); margin-bottom:8px; }
.desc {
	font-size:.9em;
	line-height:1.5;
	color:#9fb8b3;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.tapmore {
	margin-top:10px;
	font-size:.78em;
	color:var(--primary);
	letter-spacing:.1em;
	text-transform:uppercase;
}

.noresults {
	text-align:center;
	color:var(--muted);
	padding:40px 20px;
	display:none;
}

/* ---------- Detail overlay ---------- */
.overlay {
	position:fixed;
	inset:0;
	z-index:100;
	background:rgba(2,7,16,.96);
	display:none;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.overlay.open { display:block; }
.sheet {
	max-width:640px;
	margin:0 auto;
	padding:16px 14px 40px 14px;
	animation:rise .28s ease;
}
@keyframes rise {
	from { opacity:0; transform:translateY(26px); }
	to   { opacity:1; transform:translateY(0); }
}
.sheet .close {
	display:inline-block;
	margin-bottom:12px;
	background:rgba(7,18,32,.95);
	border:1px solid var(--border);
	color:var(--text);
	border-radius:999px;
	padding:8px 18px;
	font-size:.85em;
	letter-spacing:.1em;
	text-transform:uppercase;
	cursor:pointer;
}
.sheet .sheet_img {
	width:100%;
	border-radius:14px;
	border:1px solid var(--border);
	display:block;
	margin-bottom:14px;
}
.sheet h2 { font-size:1.4em; margin-bottom:6px; }
.sheet .badge { position:static; display:inline-block; margin-bottom:10px; }
.sheet .loc { font-size:.95em; margin:8px 0 12px 0; }
.sheet .fulldesc { font-size:1em; line-height:1.65; color:#c2d6d2; }
.sheet .more {
	display:inline-block;
	margin-top:18px;
	background:var(--primary);
	color:#000000;
	font-weight:700;
	text-decoration:none;
	padding:11px 24px;
	border-radius:8px;
	letter-spacing:.05em;
}

/* ---------- Map page ---------- */
.map_wrap {
	max-width:900px;
	margin:14px auto;
	padding:0 12px;
}
.map_wrap img {
	display:block;
	width:100%;
	height:auto;
	border-radius:14px;
	border:1px solid var(--border);
	box-shadow:0 8px 30px rgba(0,201,167,.1);
	background:#FFFFFF;
}
.map_tip {
	text-align:center;
	color:var(--muted);
	font-size:.85em;
	letter-spacing:.1em;
	text-transform:uppercase;
	margin:14px 0 6px 0;
}
.map_pdf {
	display:block;
	width:fit-content;
	margin:16px auto 4px auto;
	background:var(--primary);
	color:#000000;
	text-decoration:none;
	font-weight:700;
	padding:11px 26px;
	border-radius:8px;
	letter-spacing:.05em;
	box-shadow:0 0 18px rgba(0,201,167,.35);
}

/* ---------- Footer ---------- */
.foot {
	text-align:center;
	color:var(--muted);
	font-size:.78em;
	letter-spacing:.2em;
	text-transform:uppercase;
	padding:26px 12px 40px 12px;
}
.foot a { color:var(--primary); }