/* 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 button */
    & .d-grid {
        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. */
        & .d-grid {
            visibility: visible;
            opacity: 1;
            max-height: 100vh;
        }
    }
}

/* 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;

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

        & .d-grid {
            visibility: visible;
            opacity: 1;
            max-height: 100vh;
        }

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