/*
    Block: Grid Cards
    Note: Selectors must start with .block-grid-cards
*/

.block-grid-cards {
    padding-inline: .75rem;
}

.block-grid-cards .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    max-width: 100rem;
    margin-inline: auto;
}

.block-grid-cards .card {
    aspect-ratio: .807;
    padding: 3.125rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
    text-align: center;
    overflow: hidden;
}

.block-grid-cards .card--simple {
    position: relative;
    justify-content: center;
}

.block-grid-cards .card--simple .leaf {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 98.5%;
    height: auto;
    transform: translate(-12.25%, 39.5%) scaleX(-1);
}

.block-grid-cards .card--link {
    justify-content: flex-end;
}

.block-grid-cards .card--link .media-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    bottom: -25%;
    background-image: linear-gradient(180deg, transparent 0%, var(--c-bg-d) 100%);
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
    transition: bottom 400ms ease-in-out;
}

.block-grid-cards .card--link:is(:hover, :focus-within) .media-wrapper::after {
    bottom: 0;
}

.block-grid-cards .card--link .card__title {
    transform: translateY(calc(var(--description-height, 0px) + 1.875rem));
    color: var(--c-heading-l);
    margin: 0;
    transition: 400ms ease-in-out;
    transition-property: color, transform;
}

.block-grid-cards .card--link .card__title .featured-text {
    color: var(--c-heading-l);
    transition: color 400ms ease-in-out;
}

.block-grid-cards .card--link:is(:hover, :focus-within) .card__title {
    transform: none;
    color: var(--c-featured-l);
}

.block-grid-cards .card--link:is(:hover, :focus-within) .card__title .featured-text {
    color: var(--c-featured-l);
}

.block-grid-cards .card__description {
    margin: 0;
    transition: 400ms ease-in-out;
    transition-property: opacity, transform;
}

.block-grid-cards .card--link:not(:hover, :focus-within) .card__description {
    opacity: 0;
    transform: translateY(calc(100% + 1.875rem));
}

.block-grid-cards .card--link .btn {
    margin-top: .625rem;
    flex-shrink: 0;
}

@media screen and (width > 1024px) {
    .block-grid-cards .card--link:not(:hover, :focus-within) .btn {
        padding: 1.25rem;
        max-width: 3.125rem;
        color: var(--c-primary);
        background-color: rgb(from var(--c-heading-l) r g b / .2);
    }
    .block-grid-cards .card--link:not(:hover, :focus-within) .btn .text-wrap {
        opacity: 0;
    }
}

@media screen and (width <= 1020px) {
    .block-grid-cards .card--simple .leaf {
        transform: translate(-12.25%, 50%) scaleX(-1);
    }
}

@media screen and (620px <= width <= 1024px) {
    .block-grid-cards .card {
        padding: 2.5rem 2rem;
    }
    .block-grid-cards .card--link .btn {
        margin-top: 0;
    }
}


@media screen and (width > 620px) {
    .block-grid-cards .card--link .btn {
        overflow: hidden;
        height: 3.125rem;
        max-width: 12.5rem;
        justify-content: flex-end;
        transition: 400ms ease-in-out;
        transition-property: padding, max-width, color, background-color;
    }
    .block-grid-cards .card--link .btn .text-wrap {
        flex-shrink: 0;
        text-wrap: nowrap;
        transition: opacity 400ms ease-in-out;
    }
}

@media screen and (width <= 620px) {
    .block-grid-cards .grid-wrapper {
        grid-template-columns: 1fr;
        gap: .625rem;
    }
    .block-grid-cards {
        padding: 0;
    }
    .block-grid-cards .card--simple {
        aspect-ratio: 1.393;
        padding: 1.25rem;
    }
    .block-grid-cards .card--simple .leaf {
        inset: unset;
        left: 0;
        top: 2.5rem;
        width: 76.7%;
        transform: translateX(-24.1%) scaleX(-1);
    }
    .block-grid-cards .card--link {
        aspect-ratio: 1;
        padding: 2.5rem;
    }
    .block-grid-cards .card--link .btn {
        margin-top: 0;
    }
    .block-grid-cards .card__title,
    .block-grid-cards .card--simple .text-content h3 {
        font-size: var(--font-44-30);
    }
}