/*
 * HighPassCV homepage trust section
 * Two distinct rows of university logos.
 */

.hp-destination-proof {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(
            38px,
            6vw,
            74px
        )
        0;

    border-top:
        1px solid
        #e4eaf1;

    border-bottom:
        1px solid
        #e4eaf1;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(
                201,
                159,
                74,
                0.11
            ),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 100%
        );
}

.hp-destination-proof::before {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    content:
        "";

    background:
        linear-gradient(
            90deg,
            rgba(
                0,
                45,
                98,
                0.026
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(
                0,
                45,
                98,
                0.026
            )
            1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    mask-image:
        linear-gradient(
            180deg,
            #000,
            transparent 72%
        );
}

.hp-destination-proof__inner {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            1320px,
            calc(
                100% -
                36px
            )
        );

    margin:
        0 auto;
}

.hp-destination-proof__intro {
    display:
        grid;

    max-width:
        860px;

    gap:
        10px;

    margin:
        0 auto 30px;

    text-align:
        center;
}

.hp-destination-proof__eyebrow {
    display:
        inline-flex;

    width:
        fit-content;

    margin:
        0 auto;

    padding:
        7px 12px;

    border:
        1px solid
        rgba(
            154,
            116,
            43,
            0.25
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            250,
            240,
            0.88
        );

    color:
        #8d671d;

    font-size:
        0.73rem;

    font-weight:
        850;

    letter-spacing:
        0.105em;

    text-transform:
        uppercase;
}

.hp-destination-proof__title {
    margin:
        0;

    color:
        #002d62;

    font-size:
        clamp(
            1.8rem,
            4vw,
            3rem
        );

    letter-spacing:
        -0.035em;

    line-height:
        1.12;
}

.hp-destination-proof__copy {
    max-width:
        760px;

    margin:
        0 auto;

    color:
        #617089;

    font-size:
        clamp(
            0.96rem,
            1.4vw,
            1.08rem
        );

    line-height:
        1.75;
}

.hp-catalogue-metrics {
    display:
        grid;

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

    gap:
        13px;

    margin:
        0 0
        clamp(
            34px,
            5vw,
            52px
        );
}

.hp-catalogue-metric {
    position:
        relative;

    display:
        grid;

    min-height:
        128px;

    align-content:
        center;

    gap:
        8px;

    overflow:
        hidden;

    padding:
        20px 15px;

    border:
        1px solid
        #dce4ed;

    border-radius:
        19px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    text-align:
        center;

    box-shadow:
        0 16px 34px
        rgba(
            0,
            45,
            98,
            0.065
        );
}

.hp-catalogue-metric::after {
    position:
        absolute;

    right:
        -28px;

    bottom:
        -42px;

    width:
        94px;

    height:
        94px;

    border:
        18px solid
        rgba(
            201,
            159,
            74,
            0.08
        );

    border-radius:
        50%;

    content:
        "";
}

.hp-catalogue-metric strong {
    position:
        relative;

    z-index:
        1;

    color:
        #002d62;

    font-size:
        clamp(
            1.85rem,
            3vw,
            2.65rem
        );

    letter-spacing:
        -0.04em;

    line-height:
        1;
}

.hp-catalogue-metric span {
    position:
        relative;

    z-index:
        1;

    max-width:
        185px;

    margin:
        0 auto;

    color:
        #637089;

    font-size:
        0.78rem;

    font-weight:
        750;

    line-height:
        1.45;
}

.hp-institution-showcase {
    display:
        grid;

    gap:
        14px;
}

.hp-institution-showcase__heading {
    display:
        grid;

    gap:
        6px;

    margin:
        0 0 4px;

    text-align:
        center;
}

.hp-institution-showcase__heading strong {
    color:
        #002d62;

    font-size:
        clamp(
            1.08rem,
            2vw,
            1.34rem
        );
}

.hp-institution-showcase__heading span {
    color:
        #748096;

    font-size:
        0.82rem;

    line-height:
        1.5;
}

.hp-logo-marquee {
    --hp-logo-gap:
        16px;

    position:
        relative;

    overflow:
        hidden;

    padding:
        6px 0;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 7%,
            #000 93%,
            transparent
        );
}

.hp-logo-marquee__track {
    display:
        flex;

    width:
        max-content;

    gap:
        var(
            --hp-logo-gap
        );

    will-change:
        transform;
}

.hp-logo-marquee--top
.hp-logo-marquee__track {
    animation:
        hp-logo-scroll-left
        118s
        linear
        infinite;
}

.hp-logo-marquee--bottom
.hp-logo-marquee__track {
    animation:
        hp-logo-scroll-right
        132s
        linear
        infinite;
}

.hp-logo-marquee:hover
.hp-logo-marquee__track,
.hp-logo-marquee:focus-within
.hp-logo-marquee__track {
    animation-play-state:
        paused;
}

.hp-logo-marquee__group {
    display:
        flex;

    flex:
        0 0 auto;

    gap:
        var(
            --hp-logo-gap
        );
}

.hp-university-logo-card {
    position:
        relative;

    display:
        grid;

    flex:
        0 0
        clamp(
            190px,
            17vw,
            232px
        );

    width:
        clamp(
            190px,
            17vw,
            232px
        );

    height:
        92px;

    place-items:
        center;

    overflow:
        hidden;

    padding:
        17px 20px;

    border:
        1px solid
        rgba(
            174,
            188,
            205,
            0.72
        );

    border-radius:
        18px;

    background:
        rgba(
            255,
            255,
            255,
            0.95
        );

    box-shadow:
        0 11px 26px
        rgba(
            0,
            45,
            98,
            0.055
        );

    transition:
        transform
        0.24s
        ease,
        border-color
        0.24s
        ease,
        box-shadow
        0.24s
        ease;
}

.hp-university-logo-card::before {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    border-radius:
        inherit;

    content:
        "";

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                255,
                255,
                0.75
            ),
            transparent 50%
        );
}

.hp-university-logo-card:hover {
    border-color:
        rgba(
            0,
            45,
            98,
            0.34
        );

    box-shadow:
        0 17px 34px
        rgba(
            0,
            45,
            98,
            0.11
        );

    transform:
        translateY(
            -3px
        );
}

.hp-university-logo-card img {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    width:
        100%;

    max-width:
        174px;

    height:
        52px;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        grayscale(
            1
        )
        saturate(
            0
        )
        contrast(
            1.08
        );

    opacity:
        0.76;

    transition:
        filter
        0.24s
        ease,
        opacity
        0.24s
        ease,
        transform
        0.24s
        ease;
}

.hp-university-logo-card:hover img {
    filter:
        grayscale(
            1
        )
        saturate(
            0
        )
        contrast(
            1.25
        );

    opacity:
        0.98;

    transform:
        scale(
            1.025
        );
}

.hp-university-logo-card__fallback {
    position:
        relative;

    z-index:
        1;

    display:
        none;

    grid-template-columns:
        44px
        minmax(
            0,
            1fr
        );

    width:
        100%;

    gap:
        10px;

    align-items:
        center;

    color:
        #344054;
}

.hp-university-logo-card.is-missing
.hp-university-logo-card__fallback {
    display:
        grid;
}

.hp-university-logo-card.is-missing
img {
    display:
        none;
}

.hp-university-logo-card__monogram {
    display:
        grid;

    width:
        44px;

    height:
        44px;

    place-items:
        center;

    border:
        1px solid
        #aab5c3;

    border-radius:
        50%;

    color:
        #4b5565;

    font-family:
        Georgia,
        serif;

    font-size:
        0.72rem;

    font-weight:
        800;

    text-align:
        center;
}

.hp-university-logo-card__name {
    overflow:
        hidden;

    color:
        #465164;

    font-family:
        Georgia,
        serif;

    font-size:
        0.8rem;

    font-weight:
        700;

    line-height:
        1.35;

    text-overflow:
        ellipsis;
}

.hp-institution-showcase__notice {
    max-width:
        980px;

    margin:
        4px auto 0;

    color:
        #7a8597;

    font-size:
        0.7rem;

    line-height:
        1.6;

    text-align:
        center;
}

@keyframes
hp-logo-scroll-left {
    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                calc(
                    -50% -
                    8px
                ),
                0,
                0
            );
    }
}

@keyframes
hp-logo-scroll-right {
    from {
        transform:
            translate3d(
                calc(
                    -50% -
                    8px
                ),
                0,
                0
            );
    }

    to {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}

@media (
    max-width:
        980px
) {
    .hp-catalogue-metrics {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .hp-catalogue-metric:nth-child(
        4
    ),
    .hp-catalogue-metric:nth-child(
        5
    ) {
        grid-column:
            span 1;
    }
}

@media (
    max-width:
        640px
) {
    .hp-destination-proof__inner {
        width:
            min(
                100% -
                22px,
                1320px
            );
    }

    .hp-catalogue-metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            9px;
    }

    .hp-catalogue-metric {
        min-height:
            112px;

        padding:
            16px 10px;

        border-radius:
            15px;
    }

    .hp-catalogue-metric:last-child {
        grid-column:
            1 / -1;
    }

    .hp-logo-marquee {
        --hp-logo-gap:
            10px;

        mask-image:
            linear-gradient(
                90deg,
                transparent,
                #000 3%,
                #000 97%,
                transparent
            );
    }

    .hp-university-logo-card {
        flex-basis:
            174px;

        width:
            174px;

        height:
            78px;

        padding:
            13px 15px;

        border-radius:
            15px;
    }

    .hp-university-logo-card img {
        max-width:
            145px;

        height:
            44px;
    }
}

@media (
    prefers-reduced-motion:
        reduce
) {
    .hp-logo-marquee__track {
        width:
            auto;

        animation:
            none
            !important;
    }

    .hp-logo-marquee__group {
        flex-wrap:
            wrap;

        justify-content:
            center;
    }

    .hp-logo-marquee__group[
        aria-hidden="true"
    ] {
        display:
            none;
    }
}