/* This section enables the cards to overlay each other 
    -----------------------------------------------------------------------------------------------------------
    The row and columns are set to relative that way the cards have some way of
    positioning themselves as they rest outside of the main document flow (position absolute).
    -----------------------------------------------------------------------------------------------------------
    The z-index is what allows the hovered card to expand over the others.
    -----------------------------------------------------------------------------------------------------------
    Uses native CSS nesting (&) + psuedo classes (:hover,:focus-within)
    -----------------------------------------------------------------------------------------------------------
    I am creating a div with the .relative-padding class which forces a width ignoring the columns padding (bootstrap's gutter)
    This is necessary because the cards are positioned absolute and thus ignore the padding of the columns. */
.row,
.col,
.relative-padding {
    position: relative;
}

.hover-card {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    /* Sets a max height for the images and makes the bottom a half circle */
    & .card-img-top {
        object-fit: cover;
        max-height: 10rem;
        border-radius: 0 0 50% 50%;
    }
    /* Hides the card's buttons */
    & .btn-group-vertical {
        visibility: hidden;
        max-height: 0;
        opacity: 0;
    }

    &:hover,
    &:focus-within {
        transform: scale(1.05);
        z-index: 3;
        /* Expands the image on hover and removes the half circle filter */
        & .card-img-top {
            max-height: 100vh;
            border-radius: 0;
        }
        /* Shows the card's button. the max height is arbitrary. */
        & .btn-group-vertical {
            visibility: visible;
            opacity: 1;
            max-height: 100vh;
        }
    }
}

/* Other home buttons */
:root, [data-bs-theme=light] {
    /* Normal card */
    .home-image-btns {
        width: 100%;
        height: 15rem;
        overflow: hidden;
        background-color: #dce0e8;
        color: #4c4f69;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.1;
        }
        /* Keep entire image from scrolling when scrolling text (as in mobile) */
        & .card-img-overlay {
            overflow-y: auto;
        }

        /* Grow on hover */
        &:hover,
        &:focus-within {
            transform: scale(1.05);
        }
    }
    /* Card wrapped in a button*/
    button:has(div.home-image-btns) {
        /* Match border & radius */
        border: var(--bs-border-width) solid var(--bs-border-color-translucent);
        border-radius: var(--bs-border-radius);
        /* Grow on hover */
        &:hover,
        &:focus-within {
            transform: scale(1.05);
        }
        /* Prevent the normal class from duplicating the hover effect*/
        & div.home-image-btns {
            transform: unset !important;
            z-index: unset !important;
        }
    }
}

    [data-bs-theme=dark] {
        .home-image-btns {
            background-color: #181926;
            color: #cad3f5;
        }
    }
    /* Transition effect */
    .transition {
        transition: 0.6s cubic-bezier(.3, 0, 0, 1.3);
    }
    /* Accessibility for users with disorders that necessitate reduced motion/animation
    Largely copied from the expanded visuals
*/
@media (prefers-reduced-motion) {
    .hover-card {
        position: relative !important;

        & .card-img-top {
            max-height: 100vh !important;
            border-radius: 0 !important;
        }

        & .btn-group-vertical {
            visibility: visible !important;
            opacity: 1 !important;
            max-height: 100vh !important;
        }

        &:hover, &:focus-within {
            transform: none !important;
            z-index: 1 !important;
        }
    }

    .home-image-btns {
        &:hover, &:focus-within {
            transform: none !important;
        }
    }

    button:has(div.home-image-btns) {
        &:hover, &:focus-within {
            transform: none !important;
        }
    }
}