/* ////// Service card ////// */
.service-card-holder {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    min-height: 100%;
}
.wp-block-acf-service-card {
    min-height: 100%;
    grid-template-rows: min-content;
}
.editor-styles-wrapper .service-image > div {
    width: 100%;
}

/* figure.service-card-image {
    aspect-ratio: 3/2;
} */
/* --- Services Icon --- */
.wp-block-acf-service-card figure:has(img[src$=".png"]),
.wp-block-acf-service-card figure:has(img[src$=".svg"]),
.wp-block-acf-service-card figure:has(svg) {
    display: flex;
    justify-content: center;
    align-items: center;
}
.wp-block-acf-service-card figure img[src$=".png"],
.wp-block-acf-service-card figure img[src$=".svg"],
.wp-block-acf-service-card figure svg {
    object-fit: contain !important;
    height: 200px;
    width: 100%;
}

/* Heading Above */
.services-heading-above .wp-block-acf-service-text > .service-heading {
    display: none;
}
.services-heading-above .service-card-holder > .service-heading {
    display: block;
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) 0;
}

/* --- Services Text --- */
.wp-block-acf-service-text,
.wp-block-acf-service-text, .wp-block-acf-service-text > div > .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--wp--preset--spacing--10);
}
/* Content */
.wp-block-acf-service-content, 
.wp-block-acf-service-content .acf-innerblocks-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* gap: var(--wp--preset--spacing--20); */
    height: 100%;
    flex-grow: 1;
}

.services-buttons-bottom .wp-block-buttons:last-child {
    flex-grow: 1;
    align-items: flex-end;
}

/* --- Cover --- */
.services-cover-image .service-card-holder {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.services-cover-image .service-card-image, 
.services-cover-image .wp-block-acf-service-content {
    grid-column: 1/2;
    grid-row: 1/2;
}
.services-cover-image .service-card-image {
    position: relative;
}
.services-cover-image .service-card-image::after {
    position: absolute;
    content: '';
    inset: 0;
    background: black;
    opacity: .7;
}
.services-cover-image .wp-block-acf-service-content {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
    z-index: 2;
}
.services-cover-image .wp-block-acf-service-content,
.services-cover-image .wp-block-acf-service-content :is(h1,h2,h3,h4,h5,h6) {
    color: snow;
}


/* ////// Card Responsive - Landscape ////// */
.wp-block-acf-service-card  {
    container: card-container / inline-size;
    width: 100%;
}

@container card-container (min-width:700px) {
    .service-card-holder {
        display: grid;
        grid-template-columns: minmax(250px, 30cqw) 1fr;
        /* gap: var(--wp--preset--spacing--30); */
    }
    .wp-block-acf-service-card figure {
        height: 0;
        min-height: max(100px, 100%);
        aspect-ratio: unset;
    }
    .wp-block-acf-service-card figure img {
        height: 100%;
    }
    .wp-block-acf-service-text {
        align-items: flex-start;
        padding: var(--padding-while-landscape) 0;
    }
    .wp-block-acf-service-text :is(h1, h2, h3, h4, h5, h6, p, span, li, a) {
        text-align: left;
    }

    /* Icon */
    .services-icon figure {
        margin-top: 0
    }

    /* Heading Above */
    .services-heading-above .wp-block-acf-service-text > .service-heading {
        display: block;
    }
    .services-heading-above .service-card-holder > .service-heading {
        display: none;
    }
}

/* ////// Columns responsive ////// */

.wp-block-acf-services-group {
    /* shorthand: name / type */
    container: column-container / inline-size;
}
.services-group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--30);
}

/* --- 1 column layout --- */
.wp-block-acf-services-group .wp-block-acf-service-card  {
    flex: 1 0 100%;
}

/* --- 2 column layout --- */
@container column-container (min-width:700px) {
    .wp-block-acf-services-group .wp-block-acf-service-card {
        flex-grow: 1;
        flex-basis: 34% !important;
    }
}

/* --- 3 column layout --- */
@container column-container (min-width:850px) {
    .wp-block-acf-services-group.services-max-cols-3 .wp-block-acf-service-card,
    .wp-block-acf-services-group.services-max-cols-5 .wp-block-acf-service-card,
    .wp-block-acf-services-group.services-max-cols-6 .wp-block-acf-service-card {
        flex-grow: 1;
        flex-basis: 26% !important;
    }
}

/* --- 4 column layout --- */
@container column-container (min-width:1000px) {
    .wp-block-acf-services-group.services-max-cols-4 .wp-block-acf-service-card,
    .wp-block-acf-services-group.services-max-cols-6 .wp-block-acf-service-card {
        flex-grow: 1;
        flex-basis: 21% !important;
    }
}

/* --- 5 column layout --- */
@container column-container (min-width:1250px) {
    .wp-block-acf-services-group.services-max-cols-5 .wp-block-acf-service-card  {
        flex-grow: 1;
        flex-basis: 1% !important;
    }
}

/* --- 6 column layout --- */
@container column-container (min-width:1500px) {
    .wp-block-acf-services-group.services-max-cols-6 .wp-block-acf-service-card  {
        flex-grow: 1;
        flex-basis: 1% !important;
    }
}