@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import '../../../node_modules/bulma/sass/utilities/mixins.sass';

.purdue-home-link-cards {
    overflow: hidden;

    .glide__track {
        overflow: visible;
    }

    .glide__slide {
        padding-bottom: 0.2rem;
        height: auto;
    }

    .container.header-wrap {
        margin-bottom: 3rem;

        @include mobile {
            margin-bottom: 2rem;
        }

        .tagged-header-container {
            border-color: $boiler-gold;
            margin-bottom: 0;

            &.tagged-header-container--black {
                border-color: #000000;
            }
        }
    }

    .has-gold-background {
        .tagged-header-container {
            border-color: $black !important;
        }
    }

    .purdue-home-cta-card.purdue-home-cta-card--story {

        .flex-container{
            position: static;
        }
        .purdue-home-cta-grid__card-title {
            text-decoration: none;    
            margin-top: 0;       

        }

        a.purdue-home-button--story {
                &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%
                }
            }

        .purdue-home-cta-grid__card-subtext {
            overflow: visible;
            -webkit-line-clamp: none;
        }

        .purdue-home-buttons {
            margin-top: auto;
        }

        .purdue-home-button-list {
            padding-left: 0;
            display: inline-flex;
            align-items: stretch;
            justify-content: start;
            gap: 0.5rem 0;

            li {
                padding-bottom: 0;
            }
        }
    }

    .purdue-home-cta-card.has-content-bottom {
        a.purdue-home-cta-grid__card-title {
            text-decoration: none;
            text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);
            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%
            }
        }
        p.purdue-home-cta-hero__card-subtext {
            text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);
        }

    }

    .purdue-home-cta-card:not(.purdue-home-cta-card--story) {
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 95%, rgba(255, 255, 255, 1) 100%);
        display: flex;
        flex-direction: column;

        .image {
            border-radius: 4px 4px 0 0;
            position: relative;

            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, #000000 100%);
                pointer-events: none;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .flex-container {
            padding: 2rem;
            margin-top: -5rem;
            position: static !important;
            z-index: 2;
            height: 100%;
            display: flex;
            flex-direction: column;

            .purdue-home-cta-grid__card-name,
            .purdue-home-cta-grid__card-title {
                color: $white;
                font-family: $acumin-pro-semicondensed;
                font-size: 1.5rem;
                font-weight: 700;
                letter-spacing: 0;
                line-height: 1.3;
            }

            .purdue-home-cta-grid__card-tag,
            .purdue-home-cta-grid__card-date,
            .purdue-home-cta-grid__card-titleline {
                color: $dust-gold;
                font-family: $acumin-pro;
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: 1px;
                line-height: 1.4;
            }

            &--story {
                .purdue-home-cta-grid__card-date {
                    margin-top: auto;
                    margin-bottom: 0;
                    text-transform: uppercase;
                }

                .purdue-home-cta-grid__card-tag {
                    margin-bottom: 1rem;
                    text-transform: uppercase;
                }
            }

            &--faculty {
                .purdue-home-cta-grid__card-name {
                    margin-bottom: 1rem;
                }

                .purdue-home-cta-grid__card-titleline:not(:last-child) {
                    margin-bottom: 0.5rem;
                }

                .purdue-home-cta-grid__card-email,
                .purdue-home-cta-grid__card-phone,
                .purdue-home-cta-grid__card-address,
                .purdue-home-cta-grid__card-websiteLink,
                .purdue-home-cta-grid__card-websiteURL {
                    margin-top: 0.5rem;
                    color: white;
                    font-weight: 700;
                    font-size: 1rem;
                    margin-bottom: 0;

                }
            }

            &--align-bottom {
                position: absolute;
                margin-top: 0;
                padding: 2.25rem 7rem 2.25rem 3.25rem;

                @include touch {
                    padding: 1rem 5rem 1rem 1.5rem;
                }

                .purdue-home-cta-grid__card-title {
                    color: $white;
                    font-family: $acumin-pro;
                    font-size: 2rem;
                    font-weight: 700;
                    letter-spacing: 0;
                    line-height: .9;
                }

                .purdue-home-cta-grid__card-subtext {
                    color: $white;
                    font-family: $acumin-pro;
                    font-size: 1rem;
                    font-weight: 400;
                    letter-spacing: 0;
                    line-height: 1.5;
                    margin-bottom: 0;
                }
            }
        }

        &.has-content-bottom {
            .image:after {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
            }
        }


    }

    .column.is-4-desktop,
    .column.is-3-desktop {
        .purdue-home-cta-card {
            .flex-container--align-bottom {
                @include desktop {
                    padding: 1rem 5rem 1rem 1.5rem;
                }

                .purdue-home-cta-grid__card-title {
                    @include desktop {
                        font-size: 1.5rem;
                    }
                }
            }
        }
    }

    .purdue-home-cta-card:not(.has-content-bottom, .purdue-home-cta-card--story) {            

        a.purdue-home-cta-grid__card-name{
            text-decoration: none;
            &:after {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath fill='%23ffffff' d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");
            height: 32px;
            width: 28px;
            background-repeat: no-repeat;
            background-size: cover;
            right: 1rem;
            font-size: 2rem;
            position: absolute;
            bottom: 1rem;
            transition: all 0.3s ease;
        }
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%
            }

            &:hover {
            
            text-decoration: underline;
            

            &:after {
                transform: translateX(3px);
            }
        }
        }
    }

    .slider-controls {
        margin-top: 3rem;
        justify-content: flex-start;

        @include mobile {
            margin-top: 1.5rem;
            justify-content: center;
        }
    }

    .button-container.mobile-show {
        margin-top: 2rem;
        text-align: center;
    }


    .purdue-home-cta-card--horizontal {
        flex-direction: row;

        .card-image{
            width: 31%;
        }

        .image {            
            width: 31%;

            img {
                height: 100%;
                width: 100%;
            }
        }

        @include mobile {
            flex-direction: column;

            .image {
                width: 100%;

                img {
                    height: 100%;
                    width: 100%;
                }
            }
        }

    }
}