/* =============================================================================
   Case study listing — hero, filter rail, project grid
   Figma: Webz → "Case study & blog page", Section 32 + Frame 2147225765.

   Loaded only on the case_study archive and its category archives, after every
   core sheet, so plain class selectors win on source order alone.
   ========================================================================== */

/* ---------- 1. Hero ------------------------------------------------------- */
.ca-hero {
	position: relative; overflow: hidden; background: var(--c-white);
	padding: calc(var(--header-top) + var(--header-h) + clamp(1.5rem, 3.4vw, 58px)) 0 clamp(2.5rem, 4.2vw, 72px);
}
/* The scattered lilac squares behind the composition. Two repeating gradients
   masked to the corners rather than a dozen empty <span>s. */
.ca-hero__tiles {
	position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background:
		linear-gradient(0deg, #EFE9FC, #EFE9FC) 4% 22% / clamp(40px, 3.4vw, 58px) clamp(40px, 3.4vw, 58px) no-repeat,
		linear-gradient(0deg, #EFE9FC, #EFE9FC) 9% 14% / clamp(28px, 2.4vw, 40px) clamp(28px, 2.4vw, 40px) no-repeat,
		linear-gradient(0deg, #F3EFFD, #F3EFFD) 1.5% 46% / clamp(34px, 2.8vw, 48px) clamp(34px, 2.8vw, 48px) no-repeat,
		linear-gradient(0deg, #EFE9FC, #EFE9FC) 86% 18% / clamp(40px, 3.4vw, 58px) clamp(40px, 3.4vw, 58px) no-repeat,
		linear-gradient(0deg, #F3EFFD, #F3EFFD) 94% 30% / clamp(28px, 2.4vw, 40px) clamp(28px, 2.4vw, 40px) no-repeat;
}
.ca-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); }

/* Centre column: the headline sits in normal flow and sets the hero's height;
   the two side compositions are lifted out of flow around it so neither one
   can push the headline off-centre. */
.ca-hero__copy { grid-area: 1 / 1; text-align: center; max-width: 62ch; margin: 0 auto; padding: clamp(1rem, 3vw, 3.25rem) 0 0; }
.ca-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 clamp(.6rem, 1vw, 1rem);
	font-family: var(--f-display); font-weight: 500; font-size: clamp(.95rem, 1.05vw, 1.125rem); color: var(--c-ink);
}
.ca-hero__spark { display: inline-flex; width: 1em; height: 1em; }
.ca-hero__spark svg { width: 100%; height: 100%; }
.ca-hero__title {
	margin: 0; font-family: var(--f-display); font-weight: 600;
	font-size: clamp(2.4rem, 4.9vw, 5.25rem); line-height: 1.04; letter-spacing: -.012em; color: var(--c-ink);
}
.ca-hero__title .hl { color: var(--c-brand); }
.ca-hero__lead { margin: clamp(1rem, 1.6vw, 1.6rem) auto 0; max-width: 54ch; }
.ca-hero__lead p { margin: 0; font-size: clamp(1rem, 1.08vw, 1.1875rem); line-height: 1.5; color: #4A4A4A; }
.ca-hero__lead b { font-weight: 700; color: var(--c-ink); }

/* Side compositions. */
.ca-hero__left,
.ca-hero__right { grid-area: 1 / 1; position: relative; align-self: center; pointer-events: none; }
.ca-hero__left > *,
.ca-hero__right > * { pointer-events: auto; }
.ca-hero__left { justify-self: start; width: clamp(240px, 27vw, 420px); }
.ca-hero__right { justify-self: end; width: clamp(220px, 23vw, 356px); }

/* Left: the lilac plate, the shot that overhangs it, and the clients card. */
.ca-hero__plate { position: absolute; left: 6%; top: 12%; width: 72%; height: 76%; border-radius: 18px; background: #C9C9F0; }
.ca-hero__shot { position: relative; margin: 0; }
.ca-hero__shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* A placeholder has no intrinsic size, so without this the empty hero
   collapses to a 55px strip and the plate behind it with it. */
.ca-hero__shot .wz-ph { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 477 / 414; border-radius: 12px; }
.ca-hero__sparks { position: absolute; right: -4%; top: 14%; width: clamp(34px, 3.4vw, 56px); height: auto; color: var(--c-ink); }
.ca-hero__stat {
	position: absolute; right: -10%; bottom: -6%;
	display: grid; gap: .15rem; padding: clamp(.6rem, .9vw, .95rem) clamp(.8rem, 1.1vw, 1.15rem);
	border-radius: 12px; background: var(--c-white); box-shadow: 0 16px 34px -20px rgba(47, 47, 47, .4);
}
.ca-hero__stat-num { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.35vw, 1.5rem); line-height: 1; color: var(--c-ink); }
.ca-hero__stat-label { font-size: clamp(.7rem, .78vw, .8125rem); color: var(--c-muted); }
.ca-hero__faces img { display: block; height: clamp(20px, 1.8vw, 28px); width: auto; margin-top: .25rem; }

/* Right: the delivered-projects note, the doodle, the quote. */
.ca-hero__note {
	padding: clamp(.8rem, 1.1vw, 1.15rem) clamp(.9rem, 1.3vw, 1.35rem);
	border-radius: 14px; background: var(--c-white); box-shadow: 0 18px 38px -22px rgba(47, 47, 47, .45);
}
.ca-hero__note-title { margin: 0; font-size: clamp(.8rem, .92vw, 1rem); line-height: 1.35; color: var(--c-ink); }
.ca-hero__note-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: clamp(.5rem, .8vw, .85rem) 0 0; }
.ca-hero__note-label { font-family: var(--f-display); font-weight: 500; font-size: clamp(.72rem, .82vw, .875rem); color: var(--c-brand); }
.ca-hero__note-num { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 1.6vw, 1.75rem); line-height: 1; color: var(--c-ink); }
.ca-hero__curl { display: block; width: clamp(34px, 3vw, 50px); height: auto; margin: clamp(.4rem, .8vw, .8rem) 0 clamp(.2rem, .5vw, .5rem) auto; color: var(--c-ink); }
.ca-hero__quote {
	position: relative; margin: 0 0 0 clamp(1rem, 3vw, 3rem);
	padding: clamp(.85rem, 1.2vw, 1.25rem);
	border-radius: 14px; background: var(--c-white); box-shadow: 0 18px 38px -22px rgba(47, 47, 47, .45);
}
.ca-hero__qmark { display: block; width: clamp(18px, 1.5vw, 24px); height: auto; color: #9E9EA8; }
.ca-hero__quote-face { position: absolute; right: clamp(.85rem, 1.2vw, 1.25rem); top: clamp(.85rem, 1.2vw, 1.25rem); }
.ca-hero__quote-face img { display: block; width: clamp(26px, 2.2vw, 34px); height: clamp(26px, 2.2vw, 34px); border-radius: 8px; object-fit: cover; }
.ca-hero__quote-text { margin: .5rem 0 .6rem; font-size: clamp(.75rem, .86vw, .9375rem); line-height: 1.45; color: #3F3F3F; }
.ca-hero__stars { display: inline-flex; gap: .15rem; }
.ca-hero__stars svg { width: clamp(11px, 1vw, 15px); height: auto; fill: #FFC400; }

/* ---------- 2. Filter rail ------------------------------------------------ */
.ca-work { background: var(--c-surface); padding: clamp(2rem, 3.4vw, 3.5rem) 0 var(--section-pad); }
.ca-filters {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: clamp(.75rem, 2.4vw, 2.75rem); margin-bottom: clamp(1.5rem, 2.6vw, 2.75rem);
}
.ca-filter {
	display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .15rem;
	border-bottom: 2px solid transparent;
	font-size: clamp(.78rem, .88vw, .9375rem); letter-spacing: .04em; text-transform: uppercase;
	color: var(--c-muted); text-decoration: none; cursor: pointer;
	transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.ca-filter__icon { width: 1.15em; height: 1.15em; flex: none; }
.ca-filter:hover { color: var(--c-ink); }
.ca-filter.is-on { color: var(--c-brand); border-bottom-color: var(--c-brand); }

/* ---------- 3. Project grid ---------------------------------------------- */
/* The card itself lives in components.css — it is used on the home page and
   the service pages too. Only the listing's own grid is here. */
.ca-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.7vw, 1.75rem);
}

.ca-empty { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; color: var(--c-muted); }

/* ---------- 4. Responsive ------------------------------------------------- */
@media (max-width: 1100px) {
	/* The side cards overlap the headline once the hero narrows, so the whole
	   composition goes back into normal flow and stacks. */
	.ca-hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); }
	.ca-hero__copy,
	.ca-hero__left,
	.ca-hero__right { grid-area: auto; }
	.ca-hero__copy { order: -1; padding-top: 0; }
	.ca-hero__left { justify-self: center; width: min(420px, 78%); }
	.ca-hero__right { justify-self: center; width: min(400px, 88%); }
	.ca-hero__curl { display: none; }
	.ca-hero__quote { margin-left: 0; }
	.ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ca-hero__tiles { display: none; }
	.ca-hero__left { width: min(340px, 86%); }
	.ca-hero__stat { right: -4%; }
	.ca-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.ca-filters::-webkit-scrollbar { display: none; }
	.ca-filter { flex: none; }
	.ca-grid { grid-template-columns: minmax(0, 1fr); }
}