/**
 * Pattern: Card 2
 *
 */



.wp-block-group.card--2 {
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

@media(hover: hover) {
    .wp-block-group:where(.card--2) > figure > img {
        transition: transform 0.5s ease-out;
    }
    
    .wp-block-group:where(.card--2):hover > figure > img {
        transform: scale(1.02);
    }
}

.wp-block-group.card--2 > .wp-block-group {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
}

.wp-block-group.card--2 .value {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--fixed-0-5);
    padding-inline-start: initial;
}

.wp-block-group.card--2 .value .meta-link--service-cat {
    font-size: 90%;
    line-height: var(--wp--custom--line-height--md);
    background-color: var(--wp--preset--color--accent-1-200);
    color: var(--wp--preset--color--primary-1-500);
    padding: 0.375em 0.75em;
    border-radius: 0.25em;
    box-shadow: initial;
    white-space: nowrap;
    transition: background-color 0.3s ease-out;
}

.wp-block-group.card--2 .value .meta-link--service-cat:where( [href*="wordpress-development"] ) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wp-block-group.card--2 .value .meta-link--service-cat:is(:hover, :focus, :focus-visible) {
    background-color: var(--wp--preset--color--accent-1-300);
}

@media(max-width: 1023px) {
    .card--2 .work-tags {
        display: none;
    }
}

.taxonomy-basse_work_tag :where(a[rel="tag"]) {
    font-size: 90%;
}

.taxonomy-basse_work_tag .wp-block-post-terms__separator {
    margin-inline-end: 0.25rem;
}

@media(hover: hover) {
    body:not(.editor-styles-wrapper) .wp-block-group.card--2 .wp-block-buttons:not(:focus-within) {
        opacity: 0;
        height: 0;
        overflow: hidden;
        margin-block-start: 0!important;
        transition: all 0.3s ease-out, opacity 0.3s 0.05s ease-out;
    }

    body:not(.editor-styles-wrapper) .wp-block-group.card--2:hover .wp-block-buttons {
        opacity: revert;
        height: revert;
        overflow: revert;
        margin-block-start: var(--wp--preset--spacing--fluid-1-step-1-5)!important;
    }
}

.card--2 .work-preview-btn {
    --_hover-shadow-alpha: 0.32;
    
    padding: var(--wp--preset--spacing--fluid-0-5-step-1-25);
    width: fit-content!important;
    box-shadow: initial;
    aspect-ratio: 1 / 1;
    transition: all.3s ease-out;
}

.card--2 .work-preview-btn:is(:hover, :focus, :focus-visible) {
    color: var(--wp--preset--color--primary-1-500);
    background-color: var(--wp--preset--color--primary-1-200)!important;
    box-shadow: 0 10px 10px -14px rgba(0, 0, 0, var(--_hover-shadow-alpha)), 0 16px 14px -14px rgba(0, 0, 0, calc( var(--_hover-shadow-alpha) / 2 )), 0 20px 20px -14px rgba(0, 0, 0, calc( var(--_hover-shadow-alpha) / 4 ));
    transform: translateY(-0.25rem) scale(1);
}

.work-preview-btn > svg {
    pointer-events: none;
}