/*
================================================

Space Vanta Theme 1.0

Module:
Immediate Trust Bridge

File:
public/trust-bridge/cs/policy/policy-rail.css

Version:
1.5

Direction:
Horizontal Spatial Trust Rail

Responsibility:
- Policy Rail Layout
- Policy Header
- Horizontal Policy Composition
- Desktop Four-Node Display
- Desktop Center Alignment
- Mobile Horizontal Stream
- Mobile Spatial Auto Rail
- Policy Navigation
- Spatial Hover Surface
- Rail / Node Connection

Does Not Control:
- Policy Symbol Geometry
- Policy Symbol Color System
- Policy Interaction Logic
- Policy State
- Player / Slide

================================================
*/


/* ================================================
Policy Rail
================================================ */

.sv-trust-bridge-policy-rail {

    position:
        relative;

    width:
        100%;

    margin-top:
        0;

    color:
        var(--sv-trust-text);

}


/* ================================================
Policy Header
================================================ */

.sv-trust-bridge-policy-rail__header {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    margin:
        0 0 24px;

    text-align:
        center;

}


/* ================================================
Header Eyebrow
================================================ */

.sv-trust-bridge-policy-rail__eyebrow {

    margin:
        0 0 7px;

    font-size:
        10px;

    line-height:
        1.2;

    font-weight:
        500;

    letter-spacing:
        0.17em;

    text-transform:
        uppercase;

    color:
        var(--sv-trust-muted);

    opacity:
        .82;

}


/* ================================================
Header Title
================================================ */

.sv-trust-bridge-policy-rail__title {

    margin:
        0;

    font-size:
        22px;

    line-height:
        1.2;

    font-weight:
        500;

    letter-spacing:
        -.015em;

    color:
        var(--sv-trust-text);

}


/* ================================================
Track Wrapper
================================================ */

.sv-trust-bridge-policy-rail__track-wrap {

    position:
        relative;

    width:
        100%;

}


/* ================================================
Rail Track
================================================ */

.sv-trust-bridge-policy-rail__track {

    position:
        relative;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

    width:
        100%;

    min-width:
        100%;

    min-height:
        156px;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        none;

    border-top:
        1px solid rgba(24, 26, 28, .10);

    border-bottom:
        1px solid rgba(24, 26, 28, .10);

    scroll-behavior:
        smooth;

    overscroll-behavior-x:
        contain;

}


.sv-trust-bridge-policy-rail__track::-webkit-scrollbar {

    display:
        none;

}


/* ================================================
Spatial Central Rail
================================================ */

.sv-trust-bridge-policy-rail__track::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    right:
        0;

    height:
        1px;

    z-index:
        0;

    background:
        linear-gradient(90deg,
            rgba(113, 139, 163, 0),
            rgba(113, 139, 163, .12) 12%,
            rgba(113, 139, 163, .18) 50%,
            rgba(113, 139, 163, .12) 88%,
            rgba(113, 139, 163, 0));

    pointer-events:
        none;

}


/* ================================================
Policy Item
================================================ */

.sv-trust-bridge-policy-item {

    position:
        relative;

    z-index:
        1;

    flex:
        1 1 25%;

    min-width:
        0;

    min-height:
        156px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        27px 28px 22px;

    background:
        transparent;

    border:
        0;

    text-decoration:
        none;

    color:
        inherit;

    cursor:
        pointer;

    overflow:
        hidden;

    transition:
        background-color 260ms ease,
        color 260ms ease;

}


/* ================================================
Policy Item Divider
================================================ */

.sv-trust-bridge-policy-item+.sv-trust-bridge-policy-item {

    border-left:
        1px solid rgba(24, 26, 28, .075);

}


/* ================================================
Spatial Metallic Reflection
================================================ */

.sv-trust-bridge-policy-item::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        -42%;

    width:
        38%;

    z-index:
        0;

    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .48),
            rgba(255, 255, 255, 0));

    transform:
        skewX(-18deg) translateX(0);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        transform 680ms cubic-bezier(.2, .72, .18, 1),
        opacity 300ms ease;

}


/* ================================================
Policy Content Layers
================================================ */

.sv-trust-bridge-policy-item__symbol,
.sv-trust-bridge-policy-item__content,
.sv-trust-bridge-policy-item__signal {

    position:
        relative;

    z-index:
        1;

}


/* ================================================
Policy Symbol Space
================================================ */

.sv-trust-bridge-policy-item__symbol {

    position:
        relative;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    margin:
        0 0 17px;

}


/* ================================================
Rail Node Stem
================================================ */

.sv-trust-bridge-policy-item__symbol::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        -17px;

    width:
        1px;

    height:
        17px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(180deg,
            rgba(113, 139, 163, .46),
            rgba(178, 188, 196, .18));

    pointer-events:
        none;

}


/* ================================================
Policy Content
================================================ */

.sv-trust-bridge-policy-item__content {

    min-width:
        0;

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    text-align:
        center;

}


/* ================================================
Policy Title
================================================ */

.sv-trust-bridge-policy-item__title {

    margin:
        0;

    font-size:
        12px;

    line-height:
        1.25;

    font-weight:
        600;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;

    color:
        var(--sv-trust-text);

    transition:
        letter-spacing 260ms ease,
        opacity 260ms ease;

}


/* ================================================
Policy Description
================================================ */

.sv-trust-bridge-policy-item__description {

    width:
        100%;

    max-width:
        190px;

    margin:
        7px auto 0;

    font-size:
        11px;

    line-height:
        1.5;

    font-weight:
        400;

    color:
        var(--sv-trust-text-secondary);

    opacity:
        .82;

    transition:
        opacity 260ms ease;

}


/* ================================================
Policy Signal
================================================ */

.sv-trust-bridge-policy-item__signal {

    position:
        absolute;

    right:
        18px;

    bottom:
        14px;

    width:
        8px;

    height:
        1px;

    background:
        var(--sv-trust-blue);

    opacity:
        .38;

    box-shadow:
        0 0 0 rgba(113, 139, 163, 0);

    transition:
        width 320ms ease,
        opacity 260ms ease,
        box-shadow 320ms ease;

}


/* ================================================
Desktop Hover
================================================ */

@media (hover: hover) {

    .sv-trust-bridge-policy-item:hover {

        background:
            rgba(255, 255, 255, .30);

    }


    .sv-trust-bridge-policy-item:hover::before {

        opacity:
            .72;

        transform:
            skewX(-18deg) translateX(420%);

    }


    .sv-trust-bridge-policy-item:hover .sv-trust-bridge-policy-item__title {

        letter-spacing:
            .14em;

    }


    .sv-trust-bridge-policy-item:hover .sv-trust-bridge-policy-item__description {

        opacity:
            1;

    }


    .sv-trust-bridge-policy-item:hover .sv-trust-bridge-policy-item__signal {

        width:
            16px;

        opacity:
            .68;

        box-shadow:
            0 0 10px rgba(113, 139, 163, .24);

    }

}


/* ================================================
Policy Navigation
================================================ */

.sv-trust-bridge-policy-rail__nav {

    position:
        absolute;

    top:
        50%;

    z-index:
        10;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    margin-top:
        -18px;

    padding:
        0;

    border:
        1px solid rgba(24, 26, 28, .12);

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, .48);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    color:
        var(--sv-trust-text);

    cursor:
        pointer;

    box-shadow:
        0 8px 22px rgba(38, 44, 48, .06);

    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;

}


.sv-trust-bridge-policy-rail__nav[hidden] {

    display:
        none;

}


.sv-trust-bridge-policy-rail__nav--previous {

    left:
        -12px;

}


.sv-trust-bridge-policy-rail__nav--next {

    right:
        -12px;

}


.sv-trust-bridge-policy-rail__nav::before {

    content:
        "";

    width:
        7px;

    height:
        7px;

    border-top:
        1px solid currentColor;

    border-right:
        1px solid currentColor;

}


.sv-trust-bridge-policy-rail__nav--previous::before {

    transform:
        rotate(-135deg);

    margin-left:
        3px;

}


.sv-trust-bridge-policy-rail__nav--next::before {

    transform:
        rotate(45deg);

    margin-right:
        3px;

}


.sv-trust-bridge-policy-rail__nav:disabled {

    opacity:
        .32;

    cursor:
        default;

}


@media (hover: hover) {

    .sv-trust-bridge-policy-rail__nav:hover:not(:disabled) {

        background:
            rgba(255, 255, 255, .72);

        border-color:
            rgba(24, 26, 28, .20);

        box-shadow:
            0 10px 26px rgba(38, 44, 48, .10);

    }


    .sv-trust-bridge-policy-rail__nav--previous:hover:not(:disabled) {

        transform:
            translateX(-1px) scale(1.04);

    }


    .sv-trust-bridge-policy-rail__nav--next:hover:not(:disabled) {

        transform:
            translateX(1px) scale(1.04);

    }

}


/* ================================================
Tablet
================================================ */

@media (max-width: 1024px) and (min-width: 768px) {

    .sv-trust-bridge-policy-rail__track {

        min-height:
            148px;

    }


    .sv-trust-bridge-policy-item {

        min-height:
            148px;

        padding:
            24px 18px 20px;

    }


    .sv-trust-bridge-policy-item__symbol {

        width:
            36px;

        height:
            36px;

        margin-bottom:
            15px;

    }


    .sv-trust-bridge-policy-item__title {

        font-size:
            11px;

    }


    .sv-trust-bridge-policy-item__description {

        max-width:
            165px;

        font-size:
            10.5px;

    }


    .sv-trust-bridge-policy-rail__nav--previous {

        left:
            -8px;

    }


    .sv-trust-bridge-policy-rail__nav--next {

        right:
            -8px;

    }

}


/* ================================================
Mobile
================================================ */

@media (max-width: 767px) {

    .sv-trust-bridge-policy-rail__header {

        margin-bottom:
            18px;

    }


    .sv-trust-bridge-policy-rail__eyebrow {

        font-size:
            9px;

        letter-spacing:
            .15em;

    }


    .sv-trust-bridge-policy-rail__title {

        font-size:
            20px;

    }


    .sv-trust-bridge-policy-rail__track {

        min-height:
            138px;

        justify-content:
            flex-start;

        padding:
            0 11%;

        scroll-snap-type:
            x proximity;

    }


    .sv-trust-bridge-policy-rail__track::before {

        background:
            linear-gradient(90deg,
                rgba(113, 139, 163, 0),
                rgba(113, 139, 163, .12) 18%,
                rgba(113, 139, 163, .16) 50%,
                rgba(113, 139, 163, .12) 82%,
                rgba(113, 139, 163, 0));

    }


    .sv-trust-bridge-policy-item {

        flex:
            0 0 78%;

        min-width:
            78%;

        min-height:
            138px;

        padding:
            21px 20px 18px;

        scroll-snap-align:
            center;

    }


    .sv-trust-bridge-policy-item+.sv-trust-bridge-policy-item {

        border-left:
            1px solid rgba(24, 26, 28, .08);

    }


    .sv-trust-bridge-policy-item__symbol {

        width:
            35px;

        height:
            35px;

        margin-bottom:
            15px;

    }


    .sv-trust-bridge-policy-item__title {

        font-size:
            11px;

        letter-spacing:
            .10em;

    }


    .sv-trust-bridge-policy-item__description {

        max-width:
            100%;

        margin-top:
            6px;

        font-size:
            11px;

        line-height:
            1.5;

    }


    /*
    Mobile uses direct touch / swipe.
    Navigation buttons remain hidden.
    */

    .sv-trust-bridge-policy-rail__nav {

        display:
            none;

    }

}


/* ================================================
Very Small Screens
================================================ */

@media (max-width: 420px) {

    .sv-trust-bridge-policy-rail__title {

        font-size:
            19px;

    }


    .sv-trust-bridge-policy-rail__track {

        padding:
            0 8%;

    }


    .sv-trust-bridge-policy-item {

        flex-basis:
            84%;

        min-width:
            84%;

        min-height:
            134px;

        padding:
            19px 18px 17px;

    }


    .sv-trust-bridge-policy-item__description {

        font-size:
            10.5px;

    }

}


/* ================================================
Reduced Motion
================================================ */

@media (prefers-reduced-motion: reduce) {

    .sv-trust-bridge-policy-rail__track {

        scroll-behavior:
            auto;

    }


    .sv-trust-bridge-policy-item,
    .sv-trust-bridge-policy-item::before,
    .sv-trust-bridge-policy-item__title,
    .sv-trust-bridge-policy-item__description,
    .sv-trust-bridge-policy-item__signal,
    .sv-trust-bridge-policy-rail__nav {

        transition:
            none !important;

    }

}