/* ==========================================================================
   /case-studies/{slug} — one case study (app/Views/case-studies/show.php
   and blocks/*.php). Values from "Case Study - CTR UK.dc.html" and
   "Case Study - LFS.dc.html". Animation strips carry their own CSS
   (/assets/css/animations/<slug>.css), linked only when used.
   ========================================================================== */

/* ---------- Draft preview banner (editors only) ---------- */
.cs-draft {
    margin: 16px var(--gutter) 0; padding: 12px 18px; border-radius: var(--r-field);
    background: var(--c-yellow-tint); border: 3px dashed var(--c-ink); font-weight: 700;
}
.cs-draft a { text-decoration: underline; margin-left: 6px; }

/* ---------- Hero ---------- */
.cs-hero { gap: 48px; }
.cs-hero__text { display: flex; flex-direction: column; gap: 24px; max-width: 860px; }

.cs-crumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 700; font-size: 15px; }
.cs-crumbs a { text-decoration: underline; }

.cs-h1 {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(44px, 6.5vw, 88px); line-height: .95; letter-spacing: -0.03em;
}
.cs-intro { font-size: 20px; line-height: 1.55; max-width: 640px; text-wrap: pretty; }

.cs-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-tag {
    padding: 5px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: 13px;
    border: 2px solid var(--c-ink); background: var(--c-yellow); color: var(--c-ink);
}
.cs-tag:nth-child(4n + 2) { background: var(--c-pink-text); color: var(--c-white); }
.cs-tag:nth-child(4n + 3) { background: var(--c-orange); }
.cs-tag:nth-child(4n + 4) { background: var(--c-lilac); }

.cs-hero__media {
    position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 32px;
    overflow: hidden; background: var(--c-cream);
}

/* Any chosen picture fills its frame. */
.cs-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Facts ---------- */
.cs-facts-wrap { padding-top: 40px; }
.cs-fact {
    background: var(--c-yellow-tint); border-radius: var(--r-card); padding: 24px;
    display: flex; flex-direction: column; gap: 6px;
}
.cs-fact:nth-child(4n + 2) { background: var(--c-pink-tint); }
.cs-fact:nth-child(4n + 3) { background: var(--c-orange-tint); }
.cs-fact:nth-child(4n + 4) { background: var(--c-lilac-tint); }
.cs-fact__label { font-weight: 700; font-size: 14px; }
.cs-fact__value { font-size: 18px; font-weight: 600; }
.cs-fact__value--link { text-decoration: underline; }

/* ---------- Shared block heading ---------- */
.cs-head { display: flex; flex-direction: column; gap: 20px; }
.cs-head--narrow { max-width: 760px; }
.cs-head--tight { gap: 16px; }
.cs-eyebrow { font-weight: 700; color: var(--c-pink-text); }
.cs-eyebrow--ink { color: var(--c-ink); }

.cs-stack { display: flex; flex-direction: column; gap: 40px; }
.cs-stack--32 { gap: 32px; }

/* ---------- Animation strip ---------- */
.cs-art { overflow: hidden; }

/* ---------- Split: heading | paragraphs ---------- */
.cs-split {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 48px; align-items: start;
}
.cs-split__body { display: flex; flex-direction: column; gap: 18px; font-size: 19px; line-height: 1.6; }
.cs-split__body p { text-wrap: pretty; }

/* ---------- Gallery ---------- */
.cs-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.cs-gallery__item { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-gallery__media {
    width: 100%; aspect-ratio: 4 / 3; border-radius: 32px; overflow: hidden; background: var(--c-lilac-tint);
}
.cs-gallery--bubble .cs-gallery__media { border-radius: 32px 32px 32px 8px; }
.cs-gallery__item:nth-child(3n + 2) .cs-gallery__media { background: var(--c-yellow-tint); }
.cs-gallery__item:nth-child(3n + 3) .cs-gallery__media { background: var(--c-orange-tint); }
.cs-gallery__cap { font-weight: 600; font-size: 16px; }

/* ---------- Feature: the pink panel ---------- */
.cs-feature {
    background: var(--c-pink-tint); border-radius: var(--r-hero); padding: clamp(36px, 6vw, 80px);
    display: flex; flex-direction: column; gap: 48px;
}
.cs-feature__top {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 48px; align-items: start;
}
.cs-bubbles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-bubble {
    background: var(--c-cream); color: var(--c-ink); border-radius: 24px 24px 24px 6px;
    padding: 20px 24px; font-size: 18px; font-weight: 500; line-height: 1.45;
}
.cs-bubble:nth-child(even) { border-radius: 24px 24px 6px 24px; margin-left: clamp(0px, 4vw, 48px); }
.cs-bubble--hl { background: var(--c-teal); font-weight: 600; }

/* The two screenshots drawn as devices: a browser window (.screen-frame, in
   site.css) and a phone. The phone's sizes are in cqi (a percentage of the
   .cs-feature__shots width), so its corners and bezel shrink with it on a
   phone instead of turning a 100px-wide handset into a pill. */
.cs-feature__shots {
    container-type: inline-size;
    display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
    gap: clamp(10px, 2.4cqi, 16px); align-items: end;
}
.cs-shot-desktop { width: 100%; aspect-ratio: 16 / 10; }
.cs-shot-phone {
    position: relative; width: 100%; aspect-ratio: 9 / 19; overflow: hidden;
    background: var(--c-cream);
    border: clamp(3px, 1.3cqi, 9px) solid var(--c-ink);
    border-radius: clamp(10px, 4.6cqi, 38px);
}
.cs-shot-phone > img { object-position: top; }
/* The speaker notch. */
.cs-shot-phone::after {
    content: ""; position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%);
    width: 38%; height: clamp(4px, 1.4cqi, 12px);
    background: var(--c-ink); border-radius: 0 0 999px 999px;
}

/* ---------- Steps ---------- */
.cs-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px;
}
/* .grid-4 (timeline style) sets its own columns; keep them. */
.cs-steps.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cs-steps.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cs-steps.grid-4 { grid-template-columns: minmax(0, 1fr); } }

.cs-step {
    background: var(--c-white); border: 2px solid var(--c-ink); border-radius: var(--r-card);
    padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.cs-step__badge {
    width: 44px; height: 44px; border-radius: 50%; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-pink-text); color: var(--c-white);
}
.cs-step:nth-child(4n + 2) .cs-step__badge { background: var(--c-yellow); color: var(--c-ink); }
.cs-step:nth-child(4n + 3) .cs-step__badge { background: var(--c-orange); color: var(--c-ink); }
.cs-step:nth-child(4n + 4) .cs-step__badge { background: var(--c-lilac); color: var(--c-ink); }

.cs-steps--timeline .cs-step__badge {
    align-self: flex-start; width: auto; min-width: 44px; padding: 0 12px; border-radius: 22px;
    font-family: var(--f-display); font-weight: 800;
}

.cs-step__title { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.cs-step__text { font-size: 16px; line-height: 1.5; }

.cs-wide { width: 100%; aspect-ratio: 21 / 9; border-radius: 32px; overflow: hidden; background: var(--c-lilac-tint); }

/* ---------- Stats ---------- */
.cs-stat {
    background: var(--c-yellow-tint); border-radius: 32px 32px 32px 8px; padding: 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.cs-stat:nth-child(4n + 2) { background: var(--c-teal-tint); }
.cs-stat:nth-child(4n + 3) { background: var(--c-pink-tint); }
.cs-stat:nth-child(4n + 4) { background: var(--c-lilac-tint); }
.cs-stat__figure { display: flex; align-items: baseline; gap: 6px; }
.cs-stat__num {
    font-family: var(--f-display); font-weight: 800; font-size: 56px; line-height: 1;
    border-bottom: 4px dashed var(--c-ink); min-width: 80px;
}
.cs-stat__unit { font-family: var(--f-display); font-weight: 800; font-size: 28px; }
.cs-stat__label { font-size: 17px; line-height: 1.4; font-weight: 600; }
.cs-footnote { font-size: 14px; font-weight: 600; }

/* ---------- Cards ---------- */
.cs-cards {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, calc(33.3% - 22px))), 1fr));
}
.cs-card {
    background: var(--c-teal-tint); border-radius: 32px 32px 32px 8px; padding: 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.cs-card:nth-child(3n + 2) { background: var(--c-yellow-tint); }
.cs-card:nth-child(3n + 3) { background: var(--c-lilac-tint); }
.cs-card__kicker { font-weight: 700; font-size: 14px; color: var(--c-pink-text); }
.cs-card__title { font-family: var(--f-display); font-weight: 800; font-size: 24px; }
.cs-card__text { font-size: 16px; line-height: 1.5; }

/* ---------- CTA: the yellow speech bubble ---------- */
.cs-cta { position: relative; }
.cs-cta__panel {
    background: var(--c-yellow); border-radius: 48px 48px 48px 0; padding: clamp(36px, 6vw, 80px);
    display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
    position: relative; overflow: hidden;
}
.cs-cta__panel > :not(.blob) { position: relative; }
.cs-cta__blob { right: -60px; bottom: -60px; width: 200px; height: 200px; }
.cs-cta__text { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.cs-cta__title {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(36px, 4.5vw, 60px); line-height: 1; letter-spacing: -0.025em;
}
.cs-cta__tail {
    position: absolute; left: var(--gutter); bottom: -30px; width: 60px; height: 32px;
    overflow: hidden; background: var(--c-yellow); clip-path: polygon(0 0, 100% 0, 0 100%);
}