/* ==========================================================================
   ORG COMPARE — two side-by-side diagrams (before / after)   (visual only)
   ==========================================================================
   A two-column comparison framed by a rule across the top and a hairline down
   the middle that runs the full height, to the next section. Cornerstone For
   Advisors: a chaotic phone-tree (left) vs a clean Concierge org chart (right).

   Build the diagram as an ARTICLE `band bg-cream oc-section` → element_group
   `org-compare` with two `text` children (left, right), each = <h3>Title</h3>
   [<p class="oc-sub">…</p>] then the `.oc-tree`.
   ========================================================================== */

/* Rebuilt 8 Oct from the board's own geometry (For Financial Advisors, "Most
   TPAs When you Call" / "Cornerstone"). Every size is in BOARD PIXELS through
   one unit, `--u`: a board px scaled to the column the tree sits in, so the
   boxes, gaps and connectors keep the board's proportions at any width (a
   container query unit: `cqi` = 1% of the tree's width).
     columns  left 300–1080 (780) │ 200 gap, the divider at its middle (x1180) │
              right 1280–2100 (820), on the 1800 content column
     title → first box 56; the phone tree 278 / 362 / 223 / 306 wide, 72 / 61
     tall, 3px red connectors; the Concierge 268×64, 342×78, four 186×68 boxes
     22 apart, a 4px spine in and 2px lines out (both navy on the board) */

/* The article: cream band. The centre rule runs through the bottom padding to
   meet the next (dark) section, as on the board. */
.band.oc-section { padding-top: var(--space-80); padding-bottom: 120px; }

.org-compare {
    position: relative;
    display: grid;
    grid-template-columns: 780fr 820fr;
    column-gap: 11.111%;                                /* 200 of 1800 */
    padding-top: clamp(2rem, 2.7vw, 4.0625rem);         /* rule → title: 65 */
    margin-top: 0;
    /* Top rule, inset to the page gutter (this group is a `.band` child, so
       `.band > *` pads it by the gutter). */
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--rule-inset, var(--page-gutter));
        right: var(--rule-inset, var(--page-gutter));
        height: 0;
        border-top: 1px solid var(--hairline);
        pointer-events: none;
    }
    /* Centre rule: from the titles down through the bottom padding. */
    &::after {
        content: "";
        position: absolute;
        top: calc(clamp(2rem, 2.7vw, 4.0625rem) - 6px);
        bottom: -120px;
        left: calc(var(--page-gutter) + (100% - 2 * var(--page-gutter)) * 0.48889);   /* x1180 */
        border-left: 1px solid var(--hairline);
    }
    > * { container-type: inline-size; min-width: 0; }
    > *:first-child { --u: calc(100cqi / 780); }
    > *:last-child  { --u: calc(100cqi / 820); }

    h3 {
        font-family: var(--type-display);
        font-weight: 500;
        font-size: clamp(1.2rem, 1.9vw, 1.6875rem);     /* 27 */
        line-height: 1.25;
        color: var(--prime);
        text-align: center;
        margin: 0 0 calc(56 * var(--u));
    }
    /* "You never have to navigate the org chart.": 24 under the title, 35 above the tree */
    h3:has(+ .oc-sub) { margin-bottom: calc(24 * var(--u)); }
    .oc-sub { text-align: center; color: #333B44; margin: 0 0 calc(35 * var(--u)); font-size: clamp(0.95rem, 0.8vw + 0.3rem, 1.1875rem); }
    .oc-note {
        display: block; text-align: center;
        color: var(--heading); font-weight: 500;
        font-size: clamp(0.75rem, calc(13 * var(--u)), 0.8125rem);
        margin-top: calc(37 * var(--u));
    }
}

/* ---- The trees ------------------------------------------------------------ */
.oc-tree { display: flex; flex-direction: column; align-items: center; }
.oc-tree--red { color: var(--red-700); --oc-w: max(2px, calc(3 * var(--u))); }
.oc-tree--navy { color: #083C6F; --oc-w: max(1.5px, calc(2 * var(--u))); }

.oc-box {
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    box-sizing: border-box;
    padding: calc(6 * var(--u)) calc(10 * var(--u));
    border-radius: 8px;
    font-family: var(--type-body);
    font-weight: 500;
    line-height: 1.2;
    flex: none;
    hyphens: auto; overflow-wrap: anywhere;   /* "administration" in a phone-width box */
}
/* Phone tree: white boxes, a 12-on / 10-off dashed red outline (a CSS dashed
   border can't set its dash, so the outline is drawn) */
.oc-box--dash {
    color: #083C6F; background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%2393191D' stroke-width='3' stroke-dasharray='12 10'/%3E%3C/svg%3E");
    font-size: clamp(0.75rem, calc(18 * var(--u)), 1.125rem);     /* 18 */
    width: calc(223 * var(--u)); min-height: calc(61 * var(--u));
}
.oc-tree--red > .oc-box:first-child { width: calc(278 * var(--u)); min-height: calc(72 * var(--u)); }       /* Advisor */
.oc-tree--red > .oc-link + .oc-box { width: calc(362 * var(--u)); min-height: calc(72 * var(--u)); }        /* Automated menu */
.oc-tree--red .oc-branch > :nth-child(2) > .oc-box:last-child { width: calc(306 * var(--u)); }             /* Transferred again */

/* Concierge: the pink "needing support" node, the navy Concierge, four outlined services */
.oc-tree--navy .oc-box { font-size: clamp(0.75rem, calc(16 * var(--u)), 1rem); color: #1F262D; }    /* 16 */
.oc-box--rose {
    background: radial-gradient(farthest-corner at 50% 50%, #FF8D8D 0%, #FBBAB9 100%);
    width: calc(268 * var(--u)); min-height: calc(64 * var(--u));
}
.oc-tree--navy .oc-box--nav {
    background: var(--prime); color: #fff; font-weight: 600;
    width: calc(342 * var(--u)); min-height: calc(78 * var(--u));
}
.oc-box--line {
    background: #fff; border: max(1px, calc(1.22 * var(--u))) solid var(--prime);
    width: calc(186 * var(--u)); min-height: calc(68 * var(--u));
}

/* The connector between the two top boxes: the phone tree's 39, the
   Concierge's 4px spine IN (49). The stem down to the branch is the branch's. */
.oc-link { width: 0; height: calc(39 * var(--u)); border-left: var(--oc-w) solid currentColor; }
.oc-tree--navy > .oc-link { height: calc(49 * var(--u)); border-left: max(2px, calc(4 * var(--u))) solid #0A417C; }

/* Branch: a bus from the first column's centre to the last's, a drop into each */
.oc-branch {
    --col: 223; --gap: 55; --drop: 28; --stem: 30;
    position: relative; display: flex; justify-content: center; align-items: flex-start;
    gap: calc(var(--gap) * var(--u));
    margin-top: calc(var(--stem) * var(--u));
    padding-top: calc(var(--drop) * var(--u));
}
.oc-tree--navy .oc-branch { --col: 186; --gap: 22; --drop: 32; --stem: 44; }
/* the stem from the box above down to the bus */
.oc-branch::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    top: calc(-1 * var(--stem) * var(--u)); height: calc(var(--stem) * var(--u));
    border-left: var(--oc-w) solid currentColor;
}
.oc-branch::before {
    content: ""; position: absolute; top: 0;
    left: calc(var(--col) / 2 * var(--u)); right: calc(var(--col) / 2 * var(--u));
    border-top: var(--oc-w) solid currentColor;
}
.oc-branch > * { position: relative; flex: none; width: calc(var(--col) * var(--u)); display: flex; flex-direction: column; align-items: center;
    &::before {
        content: ""; position: absolute; top: calc(-1 * var(--drop) * var(--u)); left: 50%;
        height: calc(var(--drop) * var(--u)); border-left: var(--oc-w) solid currentColor; transform: translateX(-50%);
    }
}
.oc-drop { width: 0; height: calc(31 * var(--u)); border-left: var(--oc-w) solid currentColor; margin: 0 auto; }

/* ---- Narrow: stack the two sides; drop the centre rule ------------------- */
@media only screen and (max-width: 760px) {
    .org-compare { grid-template-columns: 1fr; row-gap: 2.5rem; }
    .org-compare::after { display: none; }
    .org-compare > *:first-child { border-bottom: 1px solid var(--hairline); padding-bottom: 2.5rem; }
    /* a phone is narrower than either tree: the unit stops shrinking at 0.42 of
       the board, and the boxes' text wraps inside them */
    .org-compare > *:first-child { --u: max(calc(100cqi / 780), 0.42px); }
    .org-compare > *:last-child  { --u: max(calc(100cqi / 820), 0.42px); }
}

/* ---- Scroll-in reveal ----------------------------------------------------
   The design's note: "on scroll-in the phone tree draws first, then collapses
   into the Concierge model. One loop, then rest. Both sides stay visible if
   motion is cut."

   So the LEFT column draws node by node, top to bottom, the way you would
   actually walk a phone tree — each node and its connector arriving in turn,
   which is what makes the length of it land. Only once the left has finished
   does the RIGHT column resolve, as a single quick settle rather than another
   node-by-node crawl: that contrast IS the point being made. One pass, no
   repeat, no reverse on scroll-up.

   Both directions keep the weights the design asks for — outbound stays the
   thin grey connector, inbound the single accent line — because this only
   animates opacity and position, never colour or width.

   Gated on `.js-reveal` (see fe_page.html.twig), so with JS off or reduced
   motion both columns render complete and static. */
.js-reveal {
    .org-compare :is(.oc-box, .oc-link, .oc-drop),
    .org-compare .oc-branch::before, .org-compare .oc-branch::after,
    .org-compare .oc-branch > *::before { opacity: 0; }
    .org-compare.is-in :is(.oc-box, .oc-link, .oc-drop),
    .org-compare.is-in .oc-branch::before, .org-compare.is-in .oc-branch::after,
    .org-compare.is-in .oc-branch > *::before { animation: ocReveal 0.45s ease both; }

    /* Left column — the phone tree, walked one level at a time. */
    .org-compare.is-in > *:first-child {
        .oc-tree > .oc-box:first-child { animation-delay: 0.05s; }
        .oc-tree > .oc-link, .oc-tree > .oc-link + .oc-box { animation-delay: 0.35s; }
        .oc-branch::after, .oc-branch::before, .oc-branch > *::before,
        .oc-branch > * > .oc-box:first-child { animation-delay: 0.65s; }
        .oc-branch > * > .oc-box:first-child ~ * { animation-delay: 0.95s; }
        .oc-branch > :nth-child(2) > :nth-last-child(-n + 2) { animation-delay: 1.25s; }   /* → Transferred again */
    }

    /* Right column — the Concierge model, AFTER the tree has finished, as one
       settle rather than a crawl. */
    .org-compare.is-in > *:last-child {
        :is(.oc-box, .oc-link, .oc-drop), .oc-branch::before, .oc-branch::after, .oc-branch > *::before {
            animation-duration: 0.6s; animation-delay: 1.6s;
        }
        .oc-box--nav { animation-delay: 1.75s; }
    }
}

@keyframes ocReveal {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}