.card {
    position: relative;
    background-color: transparent;
    transition: background-color 300ms ease;
}

.card:not(.blog-post):hover {
    background-color: var(--bg-card);
}

:not(.accordion) > .card a:not(.btn-plain)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-group {
    flex: 1; /* take remaining space after the title-group */
    min-height: 0; /* prevents flex blowout */
}

/* .card {
    max-height: 50rem;
} */

.card picture {
    flex: 1; /* picture grows, text stays natural height */
    min-height: 0;
}

.card picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-group div,
.card-group li {
    min-height: 0;
    box-sizing: border-box;
}

.fancy-accordion {
    position: relative;
}

.fancy-accordion .content {
    position: absolute;
    display: grid;
    right: 0;
    top: 0;
    height: 100%;
    max-height: 100%;
}

.fancy-accordion .card {
    position: static;
}

.fancy-accordion .card:not(.is-open) > :first-child {
    opacity: 0.4;
}

.card .text-hover {
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    transition: all 300ms ease;
}

.card .text-hover > div {
    justify-content: flex-end;
    background-color: var(--bg);
}

.card:hover .text-hover {
    transform: translateY(0%);
}

.card picture.reg-pic,
picture.reg-pic {
    overflow: clip;
}

.card picture.reg-pic > img,
picture.reg-pic > img {
    transition: var(--trans-default);
}

.card:has(a:hover) picture.reg-pic > img,
picture.reg-pic:hover > img {
    scale: 1.02;
}

#modal-gallery picture.reg-pic:hover > img {
    scale: 1;
}

/*
 * A gallery tile can be a <video> instead of a <picture> — see
 * resources/views/components/blocks/media.blade.php. The rules above are
 * element-qualified (`picture.reg-pic`), so none of them reach it; these give the
 * video branch the same box and the same hover zoom. The transform sits on the
 * element itself rather than on a child, because a <video> has no inner node to
 * scale.
 */
.card video.reg-pic,
video.reg-pic {
    overflow: clip;
    transition: var(--trans-default);
}

.card:has(a:hover) video.reg-pic,
video.reg-pic:hover {
    scale: 1.04;
}

#modal-gallery video.reg-pic:hover {
    scale: 1;
}

@media screen and (max-width: 1360px) {
    .grid.col-2 > .card.col-2 {
        display: flex;
        gap: unset;
    }

    .grid.col-2 > .card.col-2 > .flex-1 > div {
        width: 100%;
    }

    .industries-4 > .grid.col-3 {
        display: flex;
    }

    .industries-4 > .grid.col-3 .flex-1 {
        justify-content: space-between;
    }
}

@media screen and (max-width: 1024px) {
    .card .text-hover {
        transform: translateY(0%);
    }
}

@media screen and (max-width: 480px) {
    .card.row {
        display: flex;
        flex-direction: column;
    }

    .card.row > *,
    .card.grid > * {
        width: 100%;
        padding: unset;
    }

    .card.blog-post picture.reg-pic {
        aspect-ratio: auto;
    }

    .card picture.reg-pic,
    .card video.reg-pic {
        aspect-ratio: 1;
    }
}