/* Add one class to the required Gutenberg Cover or Group block. */

body.fatidica-ui.fatidica-has-cover-screen .site-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.fatidica-ui.fatidica-has-cover-screen .site-main > .ct-container-full[data-vertical-spacing] {
    padding-top: 0;
}

/* Add only to a Group whose background image is configured in Gutenberg. */
.wp-block-group.fat-new-page-background {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 783px) {
    .fat-cover-first-screen-desktop {
        box-sizing: border-box;
        min-block-size: 100vh;
        min-block-size: 100dvh;
    }
}

@media (max-width: 782px) {
    .fat-cover-first-screen-mobile {
        box-sizing: border-box;
        min-block-size: 100vh;
        min-block-size: 100svh;
        min-block-size: 100dvh;
    }

    /* Keep Cover content below Blocksy's transparent mobile header. */
    .fat-cover-first-screen-mobile > .wp-block-cover__inner-container {
        box-sizing: border-box;
        padding-block-start: max(24px, calc(var(--header-height, 0px) + var(--admin-bar, 0px) + 24px));
    }
}

/* Add to a Gutenberg Columns block when only the column layout is needed. */
.wp-block-columns.fat-new-grid {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    grid-auto-rows: auto;
    align-items: stretch;
    width: min(100%, 1400px);
    max-width: 1400px;
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(16px, 2vw, 32px);
    padding-left: clamp(16px, 2vw, 32px);
    gap: clamp(12px, 1.5vw, 20px);
}

.wp-block-columns.fat-new-grid > .wp-block-column {
    box-sizing: border-box;
    min-width: 0;
    width: auto !important;
    flex-basis: auto !important;
    margin: 0 !important;
}

/* Add to the Cover block itself. Gutenberg keeps the Cover height content-driven. */
.wp-block-cover.fat-new-grid-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
}

.wp-block-cover.fat-new-grid-card > img.wp-block-cover__image-background {
    object-fit: cover;
    object-position: center;
}

/* Add to the first Group directly inside a fat-new-grid-card Cover. */
.wp-block-cover.fat-new-grid-card
    > .wp-block-cover__inner-container
    > .wp-block-group.fat-new-grid-card-content {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}

@media (min-width: 783px) {
    .wp-block-cover.fat-new-grid-card
        > .wp-block-cover__inner-container
        > .wp-block-group.fat-new-grid-card-content {
        padding: 24px !important;
    }
}

@media (max-width: 782px) {
    .wp-block-columns.fat-new-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        width: 100%;
        gap: 12px;
    }

    .wp-block-columns.fat-new-grid > .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

}

/* Add fat-cover-compact-grid to the Columns block and fat-cover-compact to each Cover. */
.wp-block-columns.fat-cover-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
    align-items: stretch;
    justify-content: center;
    gap: clamp(12px, 1.5vw, 20px);
}

.wp-block-columns.fat-cover-compact-grid > .wp-block-column {
    display: flex;
    min-width: 0;
    margin: 0;
}

.wp-block-columns.fat-cover-compact-grid > .wp-block-column > .wp-block-cover.fat-cover-compact {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: auto !important;
    min-height: clamp(220px, 18vw, 300px) !important;
    margin: 0;
}

@media (max-width: 782px) {
    .wp-block-columns.fat-cover-compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .wp-block-columns.fat-cover-compact-grid > .wp-block-column {
        width: auto;
        flex-basis: auto;
    }

    .wp-block-columns.fat-cover-compact-grid > .wp-block-column > .wp-block-cover.fat-cover-compact {
        min-height: clamp(160px, 48vw, 220px) !important;
    }
}