/* usecase-itmanagers.css — styles used only by /use-cases/it-managers. */

/* =========================================================================
   Problem head (uc-itm-problem) — stacked: eyebrow, headline, then text,
   so it does not repeat the split head of the fix below it.
   ========================================================================= */
.uc-itm-problem { max-width: 780px; margin-bottom: clamp(64px, 8vw, 104px); }
.uc-itm-problem h2 { margin: 0; max-width: 18ch; text-wrap: balance; }
.uc-itm-problem .lede { margin: 24px 0 0; max-width: 68ch; }
.uc-itm-link {                      /* the NIS2 guide link, on its own row under the lede */
    margin: 18px 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}
.uc-itm-link a { color: inherit; text-underline-offset: 3px; }

/* =========================================================================
   Claim / proof split (uc-proof) — design-system Asymmetric Feature / Proof
   Split. The fix is the claim, pinned on the left while its six supports
   scroll past on the right as an open ruled list (mono tag, headline,
   text). Navy hairlines, no fills, no accent on any item. Stacks on phones.
   ========================================================================= */
.uc-proof {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(320px, 1.22fr);
    gap: clamp(40px, 7vw, 104px);
    align-items: start;
    padding-top: clamp(48px, 6vw, 72px);
    border-top: 1px solid var(--border);
}
.uc-proof-claim { position: sticky; top: 112px; }
.uc-proof-claim h2 { margin: 0; text-wrap: balance; }
.uc-proof-claim .lede { margin: 24px 0 0; font-size: 1rem; }
.uc-proof-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--border);
}
.uc-proof-list > li { padding: 30px 0 32px; }
.uc-proof-list > li:first-child { padding-top: 0; }   /* first tag level with the fix eyebrow */
.uc-proof-list > li + li { border-top: 1px solid var(--border-soft); }
.uc-proof-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-proof-list h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.uc-proof-list p {
    margin: 10px 0 0;
    max-width: 62ch;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-2);
}

/* Link rows inside the split and under the terms row. Same face as the
   problem-head link row. */
.uc-proof-list .uc-itm-link { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }

/* =========================================================================
   Noise-to-fix spine (uc-spine). The five workflow items hang off one navy
   rule with square nodes. Above the first node, three lines (the "three
   tools" of the problem lede) run in from the column gap and merge into
   the spine: the section's one teal moment. Verify is the verified state,
   so its node is green. The Prioritise item carries the real risk queue,
   bleeding off the right edge.
   ========================================================================= */
.uc-proof-body { position: relative; }
.uc-spine {
    position: relative;
    padding-left: 44px;
    border-bottom: 0;
}
.uc-spine::before {                 /* the spine */
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 40px;
    width: 1px;
    background: linear-gradient(180deg, var(--teal) 0, var(--teal-25) 56px, var(--border) 120px);
}
.uc-spine > li { position: relative; }
.uc-spine > li + li { border-top-color: var(--border-soft); }
.uc-spine > li::before {            /* square node, level with the tag */
    content: "";
    position: absolute;
    left: -44px;
    top: 0;
    width: 11px;
    height: 11px;
    margin-top: 1px;
    background: var(--surface);
    border: 1px solid var(--ink-3);
}
.uc-spine > li + li::before { top: 30px; }
.uc-spine > li:first-child::before { border-color: var(--teal); }
.uc-spine > li.uc-spine-verify::before { background: var(--green); border-color: var(--green); }
.uc-merge {                         /* three tool lines merging into the spine */
    position: absolute;
    top: -64px;
    left: -110px;
    width: 120px;
    height: 64px;
    overflow: visible;
    fill: none;
    stroke: var(--ink-3);
    stroke-opacity: 0.45;
    stroke-width: 1px;
}
.uc-merge path { vector-effect: non-scaling-stroke; }

section:has(.uc-shot) { overflow-x: clip; }
.uc-shot {                          /* risk queue, bleeding into the right gutter */
    position: relative;
    margin: 26px 0 0;
    margin-right: calc(-1 * max(28px, (100vw - 1240px) / 2 + 28px));
    border: 1px solid var(--border);
    border-right: 0;
    background: var(--bg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.uc-shot img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
    mask-image: linear-gradient(180deg, #000 72%, transparent);
}

/* =========================================================================
   Platform terms (uc-terms): the three items that qualify the whole
   platform, not a workflow step, as one open ruled row at full width.
   ========================================================================= */
.uc-terms {
    margin-top: clamp(56px, 7vw, 88px);
    padding-top: clamp(32px, 4vw, 44px);
    border-top: 1px solid var(--border);
}
.uc-terms ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.uc-terms li { padding: 0 clamp(20px, 3vw, 40px); }
.uc-terms li:first-child { padding-left: 0; }
.uc-terms li:last-child { padding-right: 0; }
.uc-terms li + li { border-left: 1px solid var(--border-soft); }
.uc-terms h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ink);
}
/* Icon beside each term headline: 20px line icon in the site sprite's
   style, muted ink, no tile and no teal (the terms are peers). */
.uc-terms h3 { display: flex; align-items: flex-start; gap: 12px; }
.uc-terms-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;                /* level with the first line of a wrapped headline */
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
}
.uc-terms li p {
    margin: 10px 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-2);
}
.uc-terms > .uc-itm-link { margin-top: clamp(32px, 4vw, 44px); }

@media (max-width: 900px) {
    .uc-proof { grid-template-columns: 1fr; gap: 36px; }
    .uc-proof-claim { position: static; }
    .uc-proof-list > li { padding: 24px 0 26px; }
    .uc-proof-list > li:first-child { padding-top: 0; }
    .uc-spine { padding-left: 28px; }
    .uc-spine > li::before { left: -28px; }
    .uc-spine > li + li::before { top: 24px; }
    .uc-merge { display: none; }
    .uc-spine::before { background: linear-gradient(180deg, var(--teal) 0, var(--border) 80px); }
    .uc-shot { margin-right: -28px; }
    .uc-shot img { width: 180%; max-width: none; }   /* show priority, severity and finding columns at a readable size; the rest runs off */
    .uc-terms ul { grid-template-columns: 1fr; }
    .uc-terms li { padding: 24px 0 0; }
    .uc-terms li:first-child { padding-top: 0; }
    .uc-terms li + li { border-left: 0; border-top: 1px solid var(--border-soft); margin-top: 24px; }
}