/* ═════════════════════════════════════════════════════════════════
   Truss columns — decorative CSS-only truss side columns

   Drawn with absolutely-positioned struts and hubs inside
   repeating .truss-unit blocks.  Populated by truss-builder.js.

   Hidden below the main narrow breakpoint (max-width: 1000px).
   ═════════════════════════════════════════════════════════════════ */

:root {
    --column-gap-left:  34px;          /* distance from left edge to left column */
    --column-gap-right: 14px;          /* distance from right edge to right column */
    --strut-width: 5%;
    --hub-width: 20%;
    --truss-unit-size: 100px;          /* fixed — doesn't scale with viewport */
    --truss-col-top: 30px;             /* column start offset from page top */
    --truss-col-width: calc(var(--truss-unit-size) + 1rem);

    --diagonal-strut-length: calc(100% * 1.42 - var(--hub-width));
    --ortho-strut-length: calc(100% - var(--hub-width));
    --ortho-strut-push: calc(var(--hub-width) / 2);
    --ortho-strut-creep: calc(var(--strut-width) / -2);
    --hub-push: calc(var(--hub-width) / -2);
}

/* ── Truss unit (one repeating cell) ───────────────── */
.truss-unit {
    width: var(--truss-unit-size);
    height: var(--truss-unit-size);
    position: relative;
}

/* ── Side truss columns ──────────────────────────────
   Absolutely positioned so they sit outside the content
   flow and scroll with the page.                       */
.truss-column {
    position: absolute;
    top: var(--truss-col-top);
    width: var(--truss-col-width);
    display: block;
    text-align: center;
    z-index: 0;
    pointer-events: none;
}

.truss-column--left {
    left: var(--column-gap-left);
}

.truss-column--right {
    right: var(--column-gap-right);
}

.truss-column .truss-unit {
    margin: 0;
    display: block;
    flex: none;
    width: var(--truss-unit-size) !important;
    height: var(--truss-unit-size) !important;
}

/* Hide below the main narrow breakpoint */
@media (max-width: 1000px) {
    .truss-column {
        display: none;
    }
}

/* ── Struts ────────────────────────────────────────── */
.strut {
    box-sizing: border-box;
    background-color: var(--purple-light);
    position: absolute;
}

.diagonal-strut {
    width: var(--diagonal-strut-length);
    height: var(--strut-width);
    left: calc((var(--diagonal-strut-length) - 100%) / -2);
    top: calc(50% - (var(--strut-width) / 2));
}

.diagonal-strut-a { transform: rotate(45deg);  }
.diagonal-strut-b { transform: rotate(-45deg); }

.vertical-strut {
    width: var(--strut-width);
    height: var(--ortho-strut-length);
    top: var(--ortho-strut-push);
}

.horizontal-strut {
    width: var(--ortho-strut-length);
    height: var(--strut-width);
    left: var(--ortho-strut-push);
}

.top-strut    { top:    var(--ortho-strut-creep); }
.bottom-strut { bottom: var(--ortho-strut-creep); }
.left-strut   { left:   var(--ortho-strut-creep); }
.right-strut  { right:  var(--ortho-strut-creep); }

/* ── Hubs ──────────────────────────────────────────── */
.hub {
    box-sizing: border-box;
    background-color: var(--purple-mid);
    position: absolute;
    width: var(--hub-width);
    height: var(--hub-width);
    clip-path: polygon(
        30% 0%, 70% 0%,
        100% 30%, 100% 70%,
        70% 100%, 30% 100%,
        0% 70%, 0% 30%
    );
}

.bottom-left-hub  { bottom: var(--hub-push); left:  var(--hub-push); }
.bottom-right-hub { bottom: var(--hub-push); right: var(--hub-push); }
.top-left-hub     { top:    var(--hub-push); left:  var(--hub-push); }
.top-right-hub    { top:    var(--hub-push); right: var(--hub-push); }