/* ==========================================================================
   Case study detail pages (v9.25.0, first used by /case-studies/isshaela/)
   Builds on v9.css (op-hero, caps, modes, proofs, standards, story) and
   interactive.css section 8 (card character). Phone first; wider screens
   add columns. No plain white boxes: devices sit in frames, the ledger has
   gold rules, the timeline rides a navy line.
   ========================================================================== */

/* ---- hero: a laptop shot with a phone leaning on it ---- */
.csp-devices {
    position: relative;
    margin: 0;
    padding: 0 0 clamp(28px, 6vw, 56px) 0;
}
.csp-desk {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--v9-line);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.75);
    background: #0d1116;
}
.csp-phone {
    position: absolute;
    right: clamp(-6px, -1vw, 0px);
    bottom: 0;
    width: clamp(92px, 26%, 168px);
    height: auto;
    border-radius: 18px;
    border: 3px solid #1b2433;
    outline: 1px solid rgba(243, 192, 63, 0.55);
    outline-offset: 3px;
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
    background: #0d1116;
}
@media (min-width: 960px) {
    .csp-devices { transform: rotate(-1deg); }
}

/* ---- at a glance: a ledger with gold rules ---- */
.csp-ledger {
    background: var(--yev-navy);
    color: #fff;
    border-top: 1px solid var(--v9-line);
    padding-block: 22px 26px;
}
.csp-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin: 0;
}
.csp-facts > div {
    border-top: 2px solid var(--yev-gold);
    padding-top: 10px;
}
.csp-facts > div:last-child { grid-column: 1 / -1; }
.csp-facts dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 4px;
}
.csp-facts dd {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
}
@media (min-width: 768px) {
    .csp-facts { grid-template-columns: repeat(5, 1fr); }
    .csp-facts > div:last-child { grid-column: auto; }
}

/* ---- reading text ---- */
.csp-prose { max-width: 66ch; }
.csp-prose p {
    margin: 0 0 1.05em;
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.csp-prose p:last-child { margin-bottom: 0; }

/* ---- the three moments: phones on a navy line ---- */
.csp-then {
    list-style: none;
    margin: clamp(36px, 5vw, 60px) 0 0;
    padding: 0;
    display: grid;
    gap: 34px;
    position: relative;
}
.csp-then li {
    position: relative;
    padding-left: 30px;
}
.csp-then li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: -34px;
    width: 2px;
    background: rgba(10, 36, 87, 0.18);
}
.csp-then li:last-child::before { bottom: 0; }
.csp-then li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--yev-gold-deep);
}
.csp-then figure {
    margin: 0 0 14px;
    max-width: 240px;
}
.csp-then img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 1100;
    object-fit: cover;
    object-position: top;
    border-radius: 18px;
    border: 3px solid var(--yev-navy);
    box-shadow: 0 22px 40px -22px rgba(10, 36, 87, 0.55);
}
.csp-when {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yev-royal);
}
.csp-then p:not(.csp-when) {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 34ch;
}
@media (min-width: 768px) {
    .csp-then { grid-template-columns: repeat(3, 1fr); gap: 28px; padding-top: 30px; }
    .csp-then li { padding-left: 0; }
    .csp-then li::before { left: 0; right: -28px; top: 6px; bottom: auto; width: auto; height: 2px; }
    .csp-then li:last-child::before { right: 0; }
    .csp-then li::after { top: 0; }
    .csp-then figure { margin-top: 30px; max-width: none; }
}

/* ---- her credit line ---- */
.csp-credit {
    margin: clamp(36px, 5vw, 56px) 0 0;
    padding: 4px 0 4px clamp(20px, 3vw, 32px);
    border-left: 3px solid var(--yev-gold);
    max-width: 62ch;
}
.csp-credit blockquote { margin: 0; }
.csp-credit blockquote p {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
    line-height: 1.55;
    font-weight: 600;
    color: var(--yev-navy);
    text-wrap: pretty;
}
.csp-credit figcaption {
    margin-top: 12px;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* ---- before and after ---- */
.mode .tick { margin-top: 6px; }

/* ---- the proof ---- */
.csp-proofs { margin-bottom: clamp(28px, 4vw, 44px); }
.csp-proof-text { margin-bottom: 4px; }

/* ---- still going ---- */
.csp-next .story { align-items: start; }
.csp-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---- reduced motion: nothing tilts ---- */
@media (prefers-reduced-motion: reduce) {
    .csp-devices { transform: none; }
}