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

Space Vanta Theme 1.0

Module:
Collection Bundle Stream

File:
related.css

Version:
1.1

Purpose:
Directional Related

Behavior:
Same-page Bundle Direction

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


/* =========================================
   RELATED WRAPPER
========================================= */

.sv-collection-bundle__related {
    width: 100%;

    margin-top:
        var(--sv-bundle-space-3xl, 160px);
}


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

.sv-collection-bundle__related-item {
    width: 100%;

    border-top:
        1px solid var(--sv-bundle-line, rgba(32, 36, 42, 0.14));
}


/* =========================================
   RELATED TRIGGER
========================================= */

.sv-collection-bundle__related-trigger {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(120px, 0.28fr) minmax(0, 1fr) auto;

    align-items: center;

    gap:
        var(--sv-bundle-space-lg, 48px);

    padding:
        var(--sv-bundle-space-lg, 48px) 0;

    border: 0;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        padding 280ms cubic-bezier(.22, 1, .36, 1),
        background 280ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================
   RELATED MEDIA
========================================= */

.sv-collection-bundle__related-media {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background:
        var(--sv-bundle-metal-light,
            linear-gradient(135deg,
                #f5f6f7 0%,
                #d9dde1 46%,
                #eef0f2 100%));

    border:
        1px solid var(--sv-bundle-line, rgba(32, 36, 42, 0.12));
}


.sv-collection-bundle__related-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 520ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================
   RELATED CONTENT
========================================= */

.sv-collection-bundle__related-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
}


.sv-collection-bundle__related-index {
    display: block;

    font-size: 11px;
    line-height: 1.2;

    letter-spacing:
        var(--sv-bundle-eyebrow-spacing, .16em);

    text-transform: uppercase;

    color:
        var(--sv-bundle-text-muted, #89919a);
}


.sv-collection-bundle__related-title {
    display: block;

    font-size: clamp(24px, 2.4vw, 40px);

    line-height: 1.05;

    letter-spacing: -0.025em;

    color:
        var(--sv-bundle-text, #20242a);
}


.sv-collection-bundle__related-description {
    display: block;

    max-width: 620px;

    font-size: 15px;

    line-height: 1.7;

    color:
        var(--sv-bundle-text-soft, #5f6873);
}


/* =========================================
   DIRECTION
========================================= */

.sv-collection-bundle__related-direction {
    min-width: 110px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    white-space: nowrap;
}


.sv-collection-bundle__related-direction-label {
    font-size: 11px;

    line-height: 1.2;

    letter-spacing:
        var(--sv-bundle-eyebrow-spacing, .16em);

    text-transform: uppercase;

    color:
        var(--sv-bundle-text-soft, #5f6873);
}


.sv-collection-bundle__related-arrow {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid var(--sv-bundle-line, rgba(32, 36, 42, 0.14));

    border-radius: 50%;

    font-size: 16px;

    color:
        var(--sv-bundle-accent, #66798c);

    transition:
        transform 280ms cubic-bezier(.22, 1, .36, 1),
        background 280ms cubic-bezier(.22, 1, .36, 1);
}


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

.sv-collection-bundle__related-trigger:hover {
    padding-left: 12px;
    padding-right: 12px;
}


.sv-collection-bundle__related-trigger:hover .sv-collection-bundle__related-image {
    transform: scale(1.025);
}


.sv-collection-bundle__related-trigger:hover .sv-collection-bundle__related-arrow {
    transform: translate(3px, -3px);
}


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

.sv-collection-bundle__related-item:last-child {
    border-bottom:
        1px solid var(--sv-bundle-line, rgba(32, 36, 42, 0.14));
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 749px) {

    .sv-collection-bundle__related {
        margin-top:
            var(--sv-bundle-space-2xl, 112px);
    }


    .sv-collection-bundle__related-trigger {
        grid-template-columns:
            88px minmax(0, 1fr) auto;

        gap: 20px;

        padding: 28px 0;
    }


    .sv-collection-bundle__related-title {
        font-size: 22px;
    }


    .sv-collection-bundle__related-description {
        font-size: 14px;

        line-height: 1.6;
    }


    .sv-collection-bundle__related-direction {
        min-width: auto;
    }


    .sv-collection-bundle__related-direction-label {
        display: none;
    }


    .sv-collection-bundle__related-arrow {
        width: 28px;
        height: 28px;

        font-size: 14px;
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .sv-collection-bundle__related-trigger,
    .sv-collection-bundle__related-image,
    .sv-collection-bundle__related-arrow {
        transition: none;
    }

}