/**
 * ACF Block: 画像とテキストエディター
 * メディアとテキストブロックと同様のスタイルを適用
 */

.acf-block-image-text-editor {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.5rem;
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
    width: 100%;

    @media screen and (max-width: 540px) {
        flex-direction: column;
        gap: 1.29rem
    }
}



.acf-block-image-text-editor--media-right .acf-block-image-text-editor__media {
    order: 2;
}

.acf-block-image-text-editor--media-right .acf-block-image-text-editor__content {
    order: 1;
}

.acf-block-image-text-editor__media {
    flex-shrink: 0;

    .acf-block-image-text-editor__caption {
        color: #A7A7A7;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 350;
        line-height: 180%;
        /* 1.35rem */
    }
}

@media screen and (max-width: 540px) {
    .acf-block-image-text-editor__media {
        width: 90%;
        margin: 0 auto;
    }
}

.acf-block-image-text-editor.size-large,
.acf-block-image-text-editor.size-full {
    .acf-block-image-text-editor__media {
        width: 22.4rem;
        aspect-ratio: 22.4/14;
        height: 100%;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
}

.acf-block-image-text-editor.size-thumbnail {
    .acf-block-image-text-editor__media {
        width: 14rem;
        aspect-ratio: 1/1;
        height: 100%;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
}

/* .acf-block-image-text-editor.size-full {
    flex-direction: column;

    .acf-block-image-text-editor__media {
        width: 100%;
        height: 100%;
        aspect-ratio: 50/22.7;

        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
} */

.acf-block-image-text-editor__media img {
    width: 100%;
    height: auto;
    display: block;
}

.acf-block-image-text-editor__content {
    flex: 1 0 1;

    @media screen and (max-width: 540px) {
        width: 100%;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
        margin-bottom: 0;
    }

    p {
        margin-top: 1.25rem;
    }

    p:first-child {
        margin-top: 0;
    }
}


/* エディタ用
////////////////////////////////////////////////////////////*/
.wp-block-acf-image-text-editor {
    width: 100%;
    min-width: 14rem;

    .acf-block-image-text-editor {
        margin: 0 auto;
    }
}

.wp-block-acf-image-text-editor.acf-block-image-text-editor {
    margin: 0 auto;
}

.acf-block-image-text-editor-preview-wrapper {
    flex: 1 0 auto;
}