/* usecase-msps.css — styles used only by /use-cases/msps. */

/* =========================================================================
   Workspace stack (uc-stack) — one client workspace drawn as a square
   frame holding the five per-client items, with two empty outline frames
   offset behind it: the same again for every client. The front frame takes
   the section ground so the outlines pass behind it. The one teal moment is
   the front frame's top edge. Scale and economics are the front frame's
   bottom row, set off by a full navy rule (platform level).
   The fix head is the front frame's title row: the workspace is the fix.
   One left spine on phones, outlines dropped.
   ========================================================================= */
.uc-stack {
    --off: 14px;
    position: relative;
    margin: calc(var(--off) * 2 + 40px) calc(var(--off) * 2) 0 0;
    isolation: isolate;
}
.uc-stack::before,
.uc-stack::after {                  /* other client workspaces */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--border-soft);
    pointer-events: none;
}
.uc-stack::before { transform: translate(var(--off), calc(var(--off) * -1)); border-color: var(--border); }
.uc-stack::after  { transform: translate(calc(var(--off) * 2), calc(var(--off) * -2)); opacity: 0.6; }
.uc-stack-front {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--surface);
    border: 1px solid var(--border);
    border-top-color: var(--teal);
}
.uc-stack-front > article {
    grid-column: span 2;
    min-width: 0;
    padding: 28px clamp(18px, 2.4vw, 30px) 32px;
}
.uc-stack-front > article:nth-of-type(n+4) { grid-column: span 3; border-top: 1px solid var(--border-soft); }
.uc-stack-front > article:nth-of-type(1),
.uc-stack-front > article:nth-of-type(2),
.uc-stack-front > article:nth-of-type(4) { border-right: 1px solid var(--border-soft); }
.uc-stack-head {                    /* title row: the fix */
    grid-column: 1 / -1;
    padding: clamp(28px, 3.5vw, 44px) clamp(18px, 2.4vw, 30px);
    border-bottom: 1px solid var(--border);
}
.uc-stack-head h2 { margin: 0; max-width: 22ch; text-wrap: balance; }
.uc-stack-head .lede { margin: 16px 0 0; max-width: 64ch; font-size: 1rem; }
.uc-stack-tag {
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.uc-stack h3,
.uc-stack-foot h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.uc-stack p,
.uc-stack-foot p {
    margin: 10px 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink-2);
}
.uc-stack-foot {                    /* platform-level row: scale, economics */
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}
.uc-stack-foot > div { min-width: 0; padding: 26px clamp(18px, 2.4vw, 30px) 30px; }
.uc-stack-foot > div + div { border-left: 1px solid var(--border-soft); }
.uc-stack-foot p { max-width: 58ch; }

@media (max-width: 820px) {
    .uc-stack { margin: 0; }
    .uc-stack::before, .uc-stack::after { display: none; }
    .uc-stack-front { grid-template-columns: 1fr; background: none; border: 0; }
    .uc-stack-head { padding: 0 0 36px; border: 0; }
    /* :nth-of-type(n) lifts specificity to beat the desktop cell rules; the spine is each item's left rule */
    .uc-stack-front > article:nth-of-type(n) { grid-column: auto; margin-left: 4px; padding: 0 0 32px 26px; border: 0; border-left: 1px solid var(--border); }
    .uc-stack-front > article:last-of-type { padding-bottom: 0; }
    .uc-stack-foot { grid-template-columns: 1fr; border: 0; }
    /* continue the spine */
    .uc-stack-foot > div,
    .uc-stack-foot > div + div { margin-left: 4px; padding: 32px 0 0 26px; border: 0; border-left: 1px solid var(--border); }
}