/* ==========================================================================
   Corporate Projukti — Redesign :: Layout v2 (PROTOTYPE)

   Levers 1–6 of the layout proposal, scoped to a `.rd-v2` root so the other
   21 templates keep rendering off the v1 primitives in system.css untouched.

     1. Asymmetric 12-column shell            .rd-grid12 / .rd-rail
     2. Left-aligned page heads               (scoped .rd-pagehead override)
     3. Left-aligned section heads            (scoped .rd-section-head override)
     4. Width tiers                           .rd-shell-narrow / -wide / .rd-bleed
     5. Flow-based vertical rhythm            .rd-flow  (kills padding-top:0)
     6. Section bands                         .rd-band / .rd-band-alt

   Nothing here redefines a token and nothing here is an unscoped override of
   a v1 class. When this graduates, fold it into system.css and delete the
   `.rd-v2` prefixes.
   ========================================================================== */

.rd-v2 {
    /* Sticky rail clears the 68px topbar plus a breath of space. */
    --rail-top: 92px;
    /* One rhythm value for the whole page instead of 58 inline overrides. */
    --flow: var(--sp-16);
    --band-pad: var(--sp-21);
}

/* ==========================================================================
   4 — WIDTH TIERS
   v1 has exactly one container width (1180px) on all 89 sections. These are
   modifiers on .rd-shell, so gutters and centring still come from v1.
   ========================================================================== */

.rd-v2 .rd-shell-narrow { max-width: var(--shell-narrow); }
.rd-v2 .rd-shell-wide   { max-width: var(--shell-wide); }

/* Edge-to-edge. Keeps the gutter so nothing touches a phone bezel. */
.rd-v2 .rd-bleed {
    max-width: none;
    margin-inline: 0;
}

/* ==========================================================================
   6 — BANDS
   A band is the full-width zone; .rd-shell still caps the content inside it.
   This is why sections stop needing `padding-top: 0` — the band owns the
   vertical space, and adjacent bands share one border rather than stacking
   two paddings.
   ========================================================================== */

.rd-v2 .rd-band {
    position: relative;
    z-index: var(--z-shell);
    padding-block: var(--band-pad);
}

/* Alternating zone. Sits above the ambient orbs on the light canvas and
   lets them through on the dark one, which is the intended difference. */
.rd-v2 .rd-band-alt {
    background: var(--surface-2);
    border-block: 1px solid var(--border);
}

/* Deliberately no adjacency rules: every band carries symmetric padding and
   the alternating background does the separating. That is the whole point of
   dropping v1's `padding-top: 0` patching — one predictable value, no
   special cases at the seams. */

/* ==========================================================================
   5 — FLOW
   Owns the space BETWEEN siblings only, so the first and last child never
   fight the band padding. Replaces every `style="padding-top: 0"`.
   ========================================================================== */

.rd-v2 .rd-flow > * + * { margin-top: var(--flow); }
.rd-v2 .rd-flow-tight > * + * { margin-top: var(--sp-10); }

/* ==========================================================================
   1 — THE 12-COLUMN SHELL
   ========================================================================== */

.rd-v2 .rd-grid12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--sp-10);
    align-items: start;
}

/* The rail: heading holds columns 1–4 and stays put while the content
   column scrolls past it. */
.rd-v2 .rd-rail-head {
    grid-column: 1 / span 4;
    position: sticky;
    top: var(--rail-top);
}

.rd-v2 .rd-rail-body { grid-column: 6 / -1; }

/* Wider heading for short bodies where a 4-col rail looks starved. */
.rd-v2 .rd-rail-head-wide { grid-column: 1 / span 5; }
.rd-v2 .rd-rail-body-tight { grid-column: 7 / -1; }

/* Full-width row inside a 12-col grid. */
.rd-v2 .rd-span-all { grid-column: 1 / -1; }

/* ==========================================================================
   2 + 3 — LEFT ALIGNMENT
   The only rules here that override v1 behaviour. Scoped, so no other page
   is affected until this graduates.
   ========================================================================== */

.rd-v2 .rd-pagehead {
    text-align: left;
    padding-block: var(--sp-17) var(--sp-12);
}

.rd-v2 .rd-pagehead p,
.rd-v2 .rd-pagehead h1 { margin-inline: 0; }
.rd-v2 .rd-pagehead p { max-width: 54ch; }
.rd-v2 .rd-crumbs { justify-content: flex-start; }

.rd-v2 .rd-section-head {
    text-align: left;
    margin-inline: 0;
    margin-bottom: 0;          /* the grid/flow owns the gap now */
    max-width: 42ch;
}

/* A rail head reads as a label + statement, so the lede needs room to
   breathe under a narrow measure. */
.rd-v2 .rd-rail-head .rd-section-head p { margin-top: var(--sp-4); }

/* Optional hairline that ties the sticky heading to its content. */
.rd-v2 .rd-rail-head .rd-section-head {
    padding-left: var(--sp-5);
    border-left: 2px solid var(--accent-line);
}

/* ==========================================================================
   THE CARD — replaces the gapless hairline slab inside .rd-v2

   v1's slab is one bordered frame with cells sharing hairlines, which is why
   it forbids hover transforms (they tear the shared lines). A detached card
   has no shared edges, so it can lift, round its corners and carry its own
   shadow. Two per row: at 4-up inside a 700px rail body the cells were
   ~165px wide and the titles wrapped to three lines.

   Opt in by adding .rd-cards to an existing .rd-slab — the markup does not
   otherwise change.
   ========================================================================== */

.rd-v2 .rd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);

    /* Undo the slab frame: the cards are the objects now. */
    border: 0;
    overflow: visible;
    background: transparent;

    --glow-size: 190px;
}

.rd-v2 .rd-cards .rd-cell {
    /* Two-column interior: tile beside the title, body and tags spanning. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--sp-4);
    row-gap: var(--sp-3);

    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);

    /* Kill the shared-hairline box-shadow the slab relies on. */
    box-shadow: none;

    transition: transform var(--t), border-color var(--t),
                box-shadow var(--t), background var(--t);
}

/* Detached, so lifting is safe here — nothing shares an edge to tear. */
.rd-v2 .rd-cards .rd-cell:hover,
.rd-v2 .rd-cards .rd-cell:focus-within {
    transform: translateY(-4px);
    border-color: var(--accent-line);
    background: var(--surface-2);
    /* box-shadow: 0 22px 44px -28px rgba(var(--brand-1-rgb), .55), inset 3px 0 0 var(--accent-ink); */
}

/* Square corner brackets read as a mistake on a radiused card. */
.rd-v2 .rd-cards .rd-bracket { display: none; }

/* The 150px ghost numeral was sized for a quarter-width slab cell. Here it
   becomes a small mono index in the corner. */
.rd-v2 .rd-cards .rd-numeral {
    top: var(--sp-5);
    right: var(--sp-6);
    bottom: auto;
    font-size: var(--fs-micro);
    letter-spacing: var(--track-micro);
    -webkit-text-stroke: 0;
    color: var(--tx-3);
    opacity: .7;
}

/* ---- Interior placement ------------------------------------------------ */

.rd-v2 .rd-cards .rd-tile {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
}

.rd-v2 .rd-cards .rd-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1.06rem;
    /* Clears the corner index. */
    padding-right: var(--sp-8);
}

.rd-v2 .rd-cards .rd-cell-body {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    font-size: 13.4px;
}

.rd-v2 .rd-cards .rd-tags {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: end;
    margin-top: 0;
    padding-top: var(--sp-5);
}

/* ---- Compact variant — the capability one-liners ----------------------- */
/* Same card, one row of content: glyph left, label right, nothing else. */

.rd-v2 .rd-cards-compact { gap: var(--sp-3); }

.rd-v2 .rd-cards-compact .rd-cell {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    column-gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    /* v1's .rd-slab-secondary .rd-cell forces 112px for the tall slab cell;
       a one-line card must not inherit that. */
    min-height: 0;
}

.rd-v2 .rd-cards-compact .rd-cell:hover,
.rd-v2 .rd-cards-compact .rd-cell:focus-within { transform: translateY(-2px); }

.rd-v2 .rd-cards-compact .rd-cap-icon {
    grid-column: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--tile-bg);
    color: var(--accent-ink);
    font-size: 1.15rem;
    transition: background var(--t);
}

.rd-v2 .rd-cards-compact .rd-cell:hover .rd-cap-icon { background: var(--tile-bg-hover); }

.rd-v2 .rd-cards-compact .rd-cap-label {
    grid-column: 2;
    color: var(--tx-1);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}

/* ==========================================================================
   RESPONSIVE
   Below the nav breakpoint the rail cannot hold a column, and sticky on a
   stacked heading just pins it over its own content.
   ========================================================================== */

@media (max-width: 980px) {
    .rd-v2 {
        --band-pad: var(--sp-14);
        --flow: var(--sp-12);
    }

    .rd-v2 .rd-grid12 { grid-template-columns: 1fr; row-gap: var(--sp-8); }

    .rd-v2 .rd-rail-head,
    .rd-v2 .rd-rail-head-wide,
    .rd-v2 .rd-rail-body,
    .rd-v2 .rd-rail-body-tight,
    .rd-v2 .rd-span-all {
        grid-column: 1 / -1;
        position: static;
    }

    .rd-v2 .rd-section-head { max-width: 62ch; }

    /* The rail is gone here, so the cards have the full width back and can
       hold two columns comfortably down to tablet. */
    .rd-v2 .rd-cards { gap: var(--sp-4); }
}

@media (max-width: 560px) {
    .rd-v2 .rd-cards,
    .rd-v2 .rd-cards-compact { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .rd-v2 { --band-pad: var(--sp-12); }
    .rd-v2 .rd-rail-head .rd-section-head {
        padding-left: var(--sp-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Sticky is motion the user did not ask for on a heading. */
    .rd-v2 .rd-rail-head { position: static; }
}