/* ============================================================
   CASE STUDIES HUB — /case-studies

   The hub/index only. The individual 6-beat studies (GSHL, IceHQ,
   MIHWA) have their own shared shell in pages/casestudy.css using the
   `.cs-*` prefix — this file uses `.csh-*` so the two never collide.

   The organising idea is RANGE: a 22-member underwater hockey club
   through to a national federation and a World Cup. Cards are ordered
   small -> large so a prospect can find "there's one here that looks
   like me". Hence the spectrum bar above the grid.

   Cards come in three states, all driven off one Twig array:
     live      -> wrapped in <a>, hover lift + cyan border
     featured  -> live + gradient bg, cyan border, ribbon badge
     coming    -> plain <div>, dimmed, dashed "story coming soon" pill,
                  deliberately NOT a link (signals breadth, not depth)

   Theme traps handled: bare `a`/`p`/`button` are styled by the legacy
   theme at 0,1,1, so anything landing on one is scoped under .xs-page.
   ============================================================ */

/* ---------- hero ---------- */
.csh-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(circle at 74% 30%, #0d2138, #04070f 64%);
}
.csh-hero__glow {
	position: absolute; top: -140px; right: -120px; width: 560px; height: 560px;
	border-radius: 50%; pointer-events: none; filter: blur(30px);
	background: radial-gradient(circle, rgba(0, 212, 255, .22), transparent 62%);
	animation: cshGlow 8s ease-in-out infinite;
}
@keyframes cshGlow { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.06)} }
@media (prefers-reduced-motion: reduce) { .csh-hero__glow { animation: none } }

/* ---------- range band ---------- */
.csh-band {
	background: #070d1c;
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- spectrum scale ---------- */
.csh-spectrum { max-width: 640px; margin: 0 auto 2.6rem; }
.csh-spectrum__labels {
	display: flex; justify-content: space-between; gap: 1rem;
	font-size: .68rem; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .6rem;
}
.csh-spectrum__bar {
	height: 5px; border-radius: 5px;
	background: linear-gradient(90deg, #1276c4, #00d4ff);
}

/* ---------- card grid ---------- */
.csh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.3rem;
}

.csh-card {
	display: flex; flex-direction: column; height: 100%;
	background: #0b1120; border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px; padding: 1.5rem; position: relative;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
	transition: transform .22s var(--ease, ease-out), border-color .22s, box-shadow .22s;
}
/* the whole card is the link on live entries */
.xs-page a.csh-card,
.xs-page a.csh-card:link,
.xs-page a.csh-card:visited { text-decoration: none; color: inherit; }
.xs-page a.csh-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 212, 255, .55);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.xs-page a.csh-card:hover .csh-card__more { gap: .7rem; }

.csh-card--featured {
	background: linear-gradient(165deg, #0a2233, #0b1120);
	border-color: rgba(0, 212, 255, .4);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.csh-card--coming { opacity: .62; }

.csh-card__ribbon {
	position: absolute; top: -10px; left: 20px;
	background: var(--cyan, #00d4ff); color: #04070f;
	font-family: var(--font-display); font-size: .64rem; letter-spacing: .12em;
	text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px;
}

.csh-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.csh-card__logo {
	width: 54px; height: 54px; flex: none; border-radius: 12px;
	background: var(--navy-900, #04070f); border: 1px solid rgba(255, 255, 255, .12);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.csh-card__logo img { max-width: 40px; max-height: 34px; width: auto; height: auto; object-fit: contain; display: block; }
/* short-mark fallback where there's no logo yet */
.csh-card__mark {
	font-family: var(--font-display); font-size: .92rem; color: rgba(255, 255, 255, .8);
	letter-spacing: .02em; text-align: center; line-height: 1; padding: 0 4px;
}
.csh-card__chip {
	font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px; padding: .3rem .7rem; white-space: nowrap;
}
.csh-card--featured .csh-card__chip { color: var(--cyan, #00d4ff); border-color: rgba(0, 212, 255, .45); }

.xs-page .csh-card__name {
	font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
	line-height: 1.12; color: #fff; margin: 1.1rem 0 0;
}
.xs-page .csh-card__outcome {
	font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .78);
	margin: .6rem 0 0; flex: 1;
}

.csh-card__stat { margin-top: 1.1rem; }
.csh-card__statnum {
	font-family: var(--font-display); font-size: 2rem; line-height: 1;
	color: var(--cyan, #00d4ff);
}
.csh-card__statlbl {
	font-size: .78rem; color: rgba(255, 255, 255, .5); margin-top: .3rem; line-height: 1.4;
}

.csh-card__foot {
	margin-top: 1.2rem; padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.csh-card__more {
	display: inline-flex; align-items: center; gap: .45rem;
	font-family: var(--font-display); font-size: .95rem; color: var(--cyan, #00d4ff);
	transition: gap .22s ease-out;
}
.csh-card__soon {
	display: inline-flex; align-items: center; gap: .45rem;
	border: 1px dashed rgba(255, 255, 255, .25); border-radius: 999px;
	padding: .35rem .85rem; font-size: .66rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
}

/* ---------- through-line ---------- */
.csh-through { background: linear-gradient(180deg, #070d1c, #04070f); }
.csh-tcard {
	background: #0b1120; border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 16px; padding: 1.6rem;
}
.csh-tcard__ico {
	width: 46px; height: 46px; border-radius: 12px; display: flex;
	align-items: center; justify-content: center; font-size: 1.15rem;
}
.csh-tcard__ico--cyan  { background: rgba(0, 212, 255, .14);  color: var(--cyan, #00d4ff); }
.csh-tcard__ico--gold  { background: rgba(255, 214, 107, .14); color: #ffd66b; }
.csh-tcard__ico--green { background: rgba(58, 219, 118, .14);  color: #3adb76; }
.xs-page .csh-tcard__t {
	font-family: var(--font-display); font-weight: 400; font-size: 1.25rem;
	color: #fff; margin: 1rem 0 0; line-height: 1.15;
}
.xs-page .csh-tcard__b {
	font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: .6rem 0 0;
}

/* ---------- close ---------- */
.csh-close {
	position: relative; overflow: hidden; text-align: center;
	background: linear-gradient(150deg, var(--navy-900, #04070f), #0d2138);
}
.csh-close__glow {
	position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
	width: 620px; height: 400px; pointer-events: none; filter: blur(26px);
	background: radial-gradient(circle, rgba(0, 212, 255, .2), transparent 65%);
}
.csh-stamp {
	margin-top: 2.6rem; padding-top: 1.6rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255, 255, 255, .45); font-size: .85rem;
}
.csh-stamp small { display: block; margin-top: .5rem; letter-spacing: .02em;
	text-transform: none; font-family: var(--font-body); color: rgba(255, 255, 255, .3); }

@media (max-width: 600px) {
	.csh-grid { grid-template-columns: 1fr; }
	.csh-card { padding: 1.25rem; }
}