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

    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 {
    box-shadow: var(--box-shadow);
    filter: none;
    transition: box-shadow 0.5s ease;
    background-color: var(--bs-card-bg);
}

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

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

.uu-block-link.image .icon-call-to-action::after {
    align-self: flex-end;
    background-position: center;
    border-radius: 50%;
    border: 0.5px var(--color-border) solid;
    display: block;
    height: 2.5rem;
    filter: invert(0.6);
    margin-top: auto;
    width: 2.5rem;
}

.uu-block-link.image:hover .icon-call-to-action::after {
    background-color: var(--color-profile);
    border-color: transparent;
    filter: invert(0);
    transition: background-color 0.5s ease;
}

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

.uu-block-link:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    filter: grayscale(1);
}

.uu-block-link.card-call-to-action:hover {
    background-color: #e5e5e5;
}

.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;
}