/* =============================================================================
   RESYD ENTERPRISE LINKS SECTION
   PREMIUM INTERNAL LINK EXPERIENCE
   ALIGNED WITH CORE + COMPONENT + SECTIONS
   ============================================================================= */

/* =============================================================================
   SECTION
   ============================================================================= */

.links-section {

    position:
        relative;

    padding:
        110px 0 130px;

    background:
        linear-gradient(
            180deg,
            #08090b 0%,
            #0c0f12 100%
        );

    overflow:
        hidden;

    isolation:
        isolate;

    z-index:
        2;
}

.links-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top left,
            rgba(199,170,116,.08),
            transparent 34%
        );

    pointer-events:
        none;
}

/* =============================================================================
   CONTAINER
   ============================================================================= */

.links-section .container {

    width:
        min(100% - 2rem, 1440px);

    margin-inline:
        auto;

    position:
        relative;

    z-index:
        2;
}

/* =============================================================================
   HEADER
   ============================================================================= */

.links-header {

    max-width:
        920px;

    margin:
        0 auto 60px;

    text-align:
        center;
}

/* =============================================================================
   TAG
   ============================================================================= */

.section-tag {

    min-height:
        38px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 18px;

    border-radius:
        999px;

    margin-bottom:
        24px;

    background:
        rgba(199,170,116,.08);

    border:
        1px solid rgba(199,170,116,.16);

    color:
        #e3c693;

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

/* =============================================================================
   TITLE
   ============================================================================= */

.links-title {

    color:
        #ffffff;

    font-size:
        clamp(2.4rem,5vw,5rem);

    line-height:
        .98;

    letter-spacing:
        -.06em;

    margin-bottom:
        24px;
}

/* =============================================================================
   DESCRIPTION
   ============================================================================= */

.links-description {

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

    font-size:
        clamp(1rem,1vw + .7rem,1.18rem);

    line-height:
        1.9;

    max-width:
        760px;

    margin-inline:
        auto;
}

/* =============================================================================
   GRID
   ============================================================================= */

.links-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px,1fr)
        );

    gap:
        28px;

    align-items:
        start;
}

/* =============================================================================
   COLUMN
   ============================================================================= */

.links-column {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        30px;

    background:
        linear-gradient(
            180deg,
            rgba(18,20,22,.98),
            rgba(8,10,12,.98)
        );

    border:
        1px solid rgba(255,255,255,.06);

    padding:
        28px;

    box-shadow:
        0 24px 70px rgba(0,0,0,.34);

    transition:
        transform .34s ease,
        border-color .34s ease,
        box-shadow .34s ease;

    isolation:
        isolate;
}

.links-column:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(199,170,116,.18);

    box-shadow:
        0 34px 90px rgba(0,0,0,.44);
}

.links-column::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at top right,
            rgba(199,170,116,.08),
            transparent 34%
        );

    opacity:
        0;

    transition:
        opacity .34s ease;

    pointer-events:
        none;
}

.links-column:hover::before {

    opacity:
        1;
}

/* =============================================================================
   COLUMN TITLE
   ============================================================================= */

.links-column h3 {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #ffffff;

    font-size:
        1.2rem;

    font-weight:
        800;

    line-height:
        1.3;

    margin-bottom:
        24px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.links-column h3::before {

    content:
        "";

    width:
        10px;

    height:
        10px;

    border-radius:
        50%;

    background:
        #d7bc8a;

    box-shadow:
        0 0 18px rgba(215,188,138,.52);
}

/* =============================================================================
   LIST
   ============================================================================= */

.links-column ul {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

/* =============================================================================
   ITEM
   ============================================================================= */

.links-column li {

    position:
        relative;
}

/* =============================================================================
   LINK
   ============================================================================= */

.links-column a {

    position:
        relative;

    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        0 18px;

    border-radius:
        18px;

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

    border:
        1px solid rgba(255,255,255,.05);

    color:
        rgba(255,255,255,.82);

    font-size:
        .86rem;

    font-weight:
        700;

    line-height:
        1.4;

    text-decoration:
        none;

    overflow:
        hidden;

    transition:
        transform .24s ease,
        border-color .24s ease,
        background .24s ease,
        color .24s ease,
        box-shadow .24s ease;
}

.links-column a::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        #9fe18d;

    box-shadow:
        0 0 12px rgba(159,225,141,.72);

    flex-shrink:
        0;

    animation:
        resydLinksPulse 2s infinite;
}

.links-column a::after {

    content:
        "→";

    margin-left:
        auto;

    color:
        rgba(255,255,255,.34);

    transition:
        transform .24s ease,
        color .24s ease;
}

/* =============================================================================
   HOVER
   ============================================================================= */

.links-column a:hover {

    transform:
        translateX(4px);

    background:
        rgba(199,170,116,.06);

    border-color:
        rgba(199,170,116,.14);

    color:
        #ffffff;

    box-shadow:
        0 12px 28px rgba(0,0,0,.22);
}

.links-column a:hover::after {

    color:
        #d7bc8a;

    transform:
        translateX(3px);
}

/* =============================================================================
   ACTIVE
   ============================================================================= */

.links-column a:active {

    transform:
        scale(.99);
}

/* =============================================================================
   SCROLLBAR
   ============================================================================= */

.links-column ul::-webkit-scrollbar {

    width:
        6px;
}

.links-column ul::-webkit-scrollbar-thumb {

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

    border-radius:
        999px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1080px) {

    .links-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}

@media (max-width: 720px) {

    .links-section {

        padding:
            72px 0 90px;
    }

    .links-header {

        margin-bottom:
            42px;
    }

    .links-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;
    }

    .links-column {

        padding:
            22px;
    }

    .links-title {

        font-size:
            clamp(2rem,11vw,3.6rem);
    }

    .links-column a {

        min-height:
            52px;

        padding:
            0 16px;
    }
}

/* =============================================================================
   ANIMATION
   ============================================================================= */

@keyframes resydLinksPulse {

    0%,100% {

        opacity:
            1;
    }

    50% {

        opacity:
            .42;
    }
}