/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for
    LINKED CARDS WITH IMAGES
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.uu-block-link.image {
    box-shadow: none;
    filter: none;
    transition: box-shadow 0.5s ease;
}

.uu-block-link.image:hover {
    background-color: var(--color-card-bg);
    box-shadow: var(--box-shadow);
    filter: none;
    transition: box-shadow 0.5s ease;
}

@media (prefers-color-scheme: dark) {
    .uu-block-link.image:hover {
        background-color: var(--color-card-bg);
    }
}

.uu-block-link.image a {
    text-decoration: none;
}

.uu-block-link.image .card-body {
    padding: var(--space-extra-large);
}

.uu-block-link.image .icon-call-to-action::after {
    align-self: flex-end;
    margin-top: auto;
}

.uu-block-link.image .card-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.uu-block-link:hover {
    background-color: var(--color-grey-light);
    cursor: pointer;
    filter: grayscale(1);
}

.uu-block-link.card-call-to-action:hover {
    background-color: var(--color-grey);
}

@media (prefers-color-scheme: dark) {
    .uu-block-link.card-call-to-action:hover {
        background-color: var(--color-border);
    }
}

.uu-block-link a:hover {
    color: var(--color-text);
}

.uu-block-link a:focus {
    color: var(--color-text);
    outline-offset: .5em;
    outline: 3px solid var(--color-focus) !important;
}

.card.image .uu-blurb {
    position: static !important;
}

.card.image .uu-blurb__content .card-text {
    margin-bottom: 1rem;
}

.card.image .uu-blurb__content {
    display: flex;
    flex-direction: column;
}