@use '../../utils' as *;

/*----------------------------------------*/
/*  4.2 Campus css
/*----------------------------------------*/

.bd-campus {
    &-wrapper {
        &.style-one {
            .bd-campus-item {
                position: relative;
                z-index: 2;

                &:hover {
                    .bd-campus-thumb {
                        a::before {
                            background: rgba($color: $theme-black, $alpha: .50);
                        }
                        img {
                            transform: scale(1.1);
                        }
                    }

                    .bd-campus-title {
                        &::before {
                            width: 100%;
                        }
                    }
                }
            }

            .bd-campus-thumb {
                overflow: hidden;
                border-radius: 6px;
                position: relative;
                z-index: 5;

                & a::before {
                    position: absolute;
                    content: "";
                    display: block;
                    height: 100%;
                    width: 100%;
                    top: 0;
                    left: 0;
                    transition: all 0.3s ease-in-out;
                    background: rgba($color: $theme-black, $alpha: .30);
                    z-index: 6;
                }

                img {
                    width: 100%;
                    transition: all 0.5s linear 0s;
                }
            }

            .bd-campus-content {
                position: absolute;
                left: 0;
                bottom: 0;
                background: rgba($color: $black, $alpha: .50);
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 30px 20px;
                gap: 20px;
                border-radius: 0 0px 6px 6px;
                backdrop-filter: blur(2px);
                -webkit-backdrop-filter: blur(2px);
                z-index: 6;
            }

            .bd-campus-title {
                color: var(--bd-white);
                margin-bottom: 5px;

            }

            .bd-campus-btn {
                color: var(--bd-white);
            }

            .bd-campus-icon {
                svg * {
                    transition: all 0.5s linear 0s;
                    stroke: var(--bd-white);
                }
            }
        }
    }

    &-story-highlight {
        font-size: 60px;
        font-weight: 300;
        line-height: 1.18;
        margin-bottom: 60px;
        letter-spacing: -1.2px;
        color: var(--bd-primary);

        @media #{$md} {
            font-size: 42px;
        }

        @media #{$sm,$xs} {
            font-size: 36px;
        }
    }

    &-title {
        border-bottom: 1px solid var(--bd-border-primary);
        padding-bottom: 15px;
        position: relative;

        &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: -2px;
            width: 10%;
            height: 3px;
            background-color: var(--bd-primary);
            transition: all 0.3s ease-in-out;
        }
    }

    &-gallery {
        &-wrapper {
            text-align: center;

            &:hover {

                .bd-campus-gallery-thumb {
                    border-color: var(--bd-primary);
                }

                .bd-campus-gallery-title {
                    color: var(--bd-primary);
                }
            }
        }

        &-thumb {
            display: block;
            width: 300px;
            height: 260px;
            border: 1px solid var(--bd-border-primary);
            border-radius: 8px;
            padding: 15px 15px;
            margin-bottom: 20px;
            transition: all 0.3s ease-in-out;

            @media #{$xl,$lg,$md,$sm,$xs} {
                width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 8px;
            }
        }
    }

    &-infrastructure {
        .table>thead {
            tr td {
                background-color: var(--primary-rgb-05);
            }
        }
    }

    &-view {
        iframe {
            width: 100%;
            border-radius: 8px;
        }
    }

    &-intro-thumb img {
        border-radius: 10px;

        @media #{$sm} {
            width: 100%;
        }
    }

    &-intro-thumb-group {
        display: flex;
        flex-direction: column;
        gap: 30px;

        @media #{$md} {
            flex-direction: row;
        }
    }
}


.hidden {
    overflow: hidden;
    display: none;
    visibility: hidden;
}
.bd-campus-virtual-tour-thumb {
    img {
        border-radius: 16px;
    }
}