/* =========================================================================
   ADULT SEO MINDS - CASE STUDIES (bespoke)
   Loaded ONLY on template-case-studies.php, in addition to style.css. Scoped to
   .cs-page. Reuses the VELVETRANK dark tokens. Mixed tones: dark / light /
   gradient. Zero inline CSS. Card images swap in via the $cs_items array (see
   template-case-studies.php) - the .cs-card__img rule below is ready for them.
   ====================================================================== */
.cs-page { overflow-x: clip; }
.cs-page .cs-wrap { max-width: var(--wide); margin-inline: auto; }
.cs-page .cs-narrow { max-width: 880px; margin-inline: auto; }

/* tones */
.cs-page > section { position: relative; }
.cs-page .cs-dark { background: var(--c-base); }
.cs-page .cs-light { background: linear-gradient(180deg, #eef1fb 0%, #f6f8fd 100%); color: #4c4e5b; }
.cs-page .cs-light :where(h2, h3) { color: #15151f; }
.cs-page .cs-light p { color: #4c4e5b; }

/* shared atoms */
.cs-page .cs-kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-primary-light); margin: 0 0 1.1rem; }
.cs-page .cs-kicker::before { content: ""; width: 24px; height: 2px; background: var(--gradient); border-radius: 2px; }
.cs-page .cs-light .cs-kicker { color: var(--c-primary); }
.cs-page .cs-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.95rem); line-height: 1.07; letter-spacing: -0.028em; margin: 0 0 1rem; }
.cs-page .cs-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); line-height: 1.65; color: var(--c-muted); }
.cs-page .cs-light .cs-lead { color: #5a5c6a; }
.cs-page .cs-grad { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons */
.cs-page .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--gradient); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .98rem; padding: .9em 1.9em; border-radius: var(--radius-pill); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cs-page .cs-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(255,45,120,.6); color: #fff; }
.cs-page .cs-btn--ghost { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--c-text); }
.cs-page .cs-btn--ghost:hover { background: rgba(255,255,255,.1); box-shadow: none; color: #fff; }

/* HERO */
.cs-page .cs-hero { text-align: center; background: radial-gradient(58% 72% at 50% -12%, rgba(255,45,120,.16), transparent 60%), var(--c-base); }
.cs-page .cs-hero .cs-kicker { margin-inline: auto; }
.cs-page .cs-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.035em; margin: 0 0 1.2rem; }
.cs-page .cs-hero__lead { max-width: 64ch; margin: 0 auto 1.9rem; }
.cs-page .cs-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.cs-page .cs-stats { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cs-page .cs-stat { padding: 1.3rem 1rem; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius); }
.cs-page .cs-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-page .cs-stat span { display: block; margin-top: .5rem; font-size: .82rem; letter-spacing: .04em; color: var(--c-muted); }

/* NICHE LEGEND */
.cs-page .cs-niches { padding-top: 0; text-align: center; }
.cs-page .cs-niches__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--c-hint); margin: 0 0 1.1rem; }
.cs-page .cs-niche-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.cs-page .cs-niche { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1.05rem; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .88rem; color: var(--c-text); }
.cs-page .cs-niche__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cs-accent, var(--c-primary)); flex: none; }

/* niche / badge colour groups (shared by legend dots + card tags + hover) */
.cs-page .cs-niche--ai,     .cs-page .cs-card--ai,     .cs-page.cs-detail--ai     { --cs-accent: #7C3AED; }
.cs-page .cs-niche--cam,    .cs-page .cs-card--cam,    .cs-page.cs-detail--cam    { --cs-accent: #C026D3; }
.cs-page .cs-niche--feet,   .cs-page .cs-card--feet,   .cs-page.cs-detail--feet   { --cs-accent: #FF5C8A; }
.cs-page .cs-niche--doll,   .cs-page .cs-card--doll,   .cs-page.cs-detail--doll   { --cs-accent: #2E5BFF; }
.cs-page .cs-niche--toy,    .cs-page .cs-card--toy,    .cs-page.cs-detail--toy    { --cs-accent: #0EA5A4; }
.cs-page .cs-niche--dir,    .cs-page .cs-card--dir,    .cs-page.cs-detail--dir    { --cs-accent: #E0A92B; }
.cs-page .cs-niche--social, .cs-page .cs-card--social, .cs-page.cs-detail--social { --cs-accent: #19B6E0; }
.cs-page .cs-niche--local,  .cs-page .cs-card--local,  .cs-page.cs-detail--local  { --cs-accent: #F26A2E; }

/* WORK GRID */
.cs-page .cs-work__head { max-width: 720px; margin: 0 0 clamp(1.8rem, 1rem + 2.5vw, 3rem); }
.cs-page .cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 1rem + 1.4vw, 2rem); }

.cs-page .cs-card { display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cs-page .cs-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--cs-accent) 55%, transparent); box-shadow: 0 22px 48px -22px rgba(0,0,0,.7); }

/* media / reserved image space */
.cs-page .cs-card__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background:
		radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--cs-accent) 26%, transparent), transparent 60%),
		linear-gradient(135deg, #1a1b24, #121219); }
.cs-page .cs-card__media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 22px 22px; opacity: .5; }
.cs-page .cs-card__ph { position: relative; z-index: 1; font-family: var(--font-display); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--c-muted); padding: .5rem 1rem; border: 1px dashed color-mix(in srgb, var(--cs-accent) 50%, var(--border)); border-radius: var(--radius-pill); background: rgba(10,10,14,.35); }
/* real image (used once 'img' is set in the array) */
.cs-page .cs-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cs-page .cs-card:hover .cs-card__img { transform: scale(1.05); }

.cs-page .cs-card__tag { position: absolute; z-index: 2; top: .8rem; left: .8rem; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #fff; padding: .35rem .75rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cs-accent) 90%, #000); box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); }

.cs-page .cs-card__body { padding: 1.25rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.cs-page .cs-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.2; margin: 0; }
.cs-page .cs-card__desc { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--c-muted); }
/* result metric pills (shown when an item has a 'result' array - e.g. local SEO wins) */
.cs-page .cs-card__metrics { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.cs-page .cs-card__metric { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-size: .74rem; font-weight: 700; color: var(--c-text); padding: .32rem .65rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cs-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cs-accent) 42%, transparent); }
.cs-page .cs-card__metric::before { content: "\2713"; color: var(--cs-accent); font-weight: 900; font-size: .85em; }

/* WHY (light) */
.cs-page .cs-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.cs-page .cs-point__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(255,45,120,.1); border: 1px solid var(--border-accent); margin-bottom: 1rem; }
.cs-page .cs-point__ic svg { width: 22px; height: 22px; stroke: var(--c-primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-page .cs-point h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 .45rem; }
.cs-page .cs-point p { margin: 0; font-size: .96rem; line-height: 1.6; }

/* CTA */
.cs-page .cs-cta { background: var(--c-base); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-page .cs-cta__panel { text-align: center; background: var(--gradient); border-radius: 26px; padding: clamp(2.4rem, 1.5rem + 4vw, 4.2rem) clamp(1.4rem, 1rem + 3vw, 3.5rem); box-shadow: 0 30px 70px -30px rgba(255,45,120,.6); }
.cs-page .cs-cta__panel h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.08; color: #fff; margin: 0 0 .8rem; }
.cs-page .cs-cta__panel > p { max-width: 56ch; margin: 0 auto 1.8rem; color: rgba(255,255,255,.9); font-size: 1.05rem; line-height: 1.6; }
.cs-page .cs-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.cs-page .cs-cta .cs-btn--solid { background: #fff; color: #15151f; }
.cs-page .cs-cta .cs-btn--solid:hover { box-shadow: 0 16px 36px -12px rgba(0,0,0,.5); color: #15151f; }
.cs-page .cs-cta .cs-btn--outline { background: transparent; border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.cs-page .cs-cta .cs-btn--outline:hover { background: rgba(255,255,255,.12); box-shadow: none; }

/* responsive */
@media (max-width: 980px) {
	.cs-page .cs-grid { grid-template-columns: repeat(2, 1fr); }
	.cs-page .cs-why__grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 600px) {
	.cs-page .cs-grid { grid-template-columns: 1fr; }
	.cs-page .cs-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.cs-page * { transition: none !important; }
}

/* ===== Case Studies CPT — linked card titles + single page ===== */
.cs-card__title a { color: inherit !important; text-decoration: none !important; background: none !important; }
.cs-card__title a:hover { color: var(--c-primary-light) !important; }
.cs-back { color: var(--c-primary-light) !important; text-decoration: none !important; font-weight: 600; }
.cs-back:hover { text-decoration: underline !important; }
.cs-single__tag { display: inline-block; margin: 0 0 1.1rem; padding: 0.35rem 0.95rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--gradient); color: #fff; }
.cs-single__metrics { margin-top: 1.6rem; }
.cs-single__body { padding-top: 0; }
.cs-single__img { display: block; width: 100%; max-width: 1000px; height: auto; border-radius: 18px; margin: 0 auto; }
.cs-prose { max-width: 760px; margin-inline: auto; }
.cs-prose p { margin: 0 0 1.1rem; }
.cs-single__feature { padding-top: 0; }
.cs-single__metrics { margin-top: 1.8rem; flex-wrap: wrap; }

/* Image placeholders inside case-study content (replace with real images later) */
.cs-ph { margin: 0 auto; max-width: 1000px; }
.cs-ph__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; min-height: clamp(220px, 30vw, 340px); border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 18px; background: rgba(255, 255, 255, 0.03); text-align: center; padding: 2rem; }
.cs-ph__label { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.05rem; }
.cs-ph__desc { color: var(--c-muted); font-size: 0.9rem; max-width: 42ch; }
.cs-ph--hero .cs-ph__inner { min-height: clamp(240px, 34vw, 420px); }
/* Small logo placeholder (brand logo slot in the body) */
.cs-ph--logo { max-width: 340px; }
.cs-ph--logo .cs-ph__inner { min-height: 140px; }
/* "Services delivered" chips */
.cs-tags { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; padding: 0; margin: 1.4rem auto 0; max-width: 820px; }
.cs-tags li { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.4rem 0.95rem; font-size: 0.85rem; color: var(--c-text); font-family: var(--font-display); font-weight: 600; }