/*
N.B. The preferred mode of asset loading for blocks would be to specify a CSS file in the block.json file for each block, e.g.
    "style": [ "file:../../css/blocks.min.css" ]

Unfortunately that appears to force you to make a css file for each block, making it hard to use shared declarations (e.g. .mod1, .mod2 {display: flex;}).
Therefore, as long as it keeps working, I'm enqueueing this file the old fashioned way, from functions.php
*/

/* Module 1 */
.mm25mod.mod1 {
    padding: calc(var(--sidepad) * 2) var(--sidepad);
    padding-bottom: 10rem;
}

.mm25mod.mod1 > .flcont > h2 {
    font-size: var(--fs-fl-running);
    line-height: var(--lh_std);
    width: 25%;
    padding-right: 2rem;
}

.mm25mod.mod1 p {
    margin-top: 0;
}

.mm25mod.mod1 > .flcont {
    display: flex;
}

.mm25mod.mod1 > .flcont > div {
    width: 75%;
}

.mm25mod.mod1 a, .mm25mod.mod2 a {
    text-decoration: underline;
}

.mm25mod.mod1 > .flcont > div ul {
    list-style: disc;
    margin: 0;
    padding-left: 2em;
}

.mm25mod.mod1 > .flcont > div ul li {
    margin-bottom: 1em;
}

/*.mm25mod.mod1 > .flcont > div ul li::before {
    content: '-';
    margin-right: 1ch;
}*/

.mm25mod.mod1 > .flcont > div ul li ul {
    list-style: circle;
}

.mm25mod.mod1 > .flcont > div ul li ul li {
    margin-bottom: .25em;
}

.mm25mod.mod1 > .flcont > div ul li ul li:first-child {
    margin-top: .25em;
}

.mm25mod.mod1 .button {
    margin-left: 25%;
}

/* Module 2 */
.mm25mod.mod2 {
    display: flex;
    flex-direction: column;
    font-size: var(--htext);
    line-height: 1;
    padding: var(--sidepad);
}

.mm25mod.mod2 p {
    margin: 1rem 0 10rem;
}

.mm25mod.mod2 p.intro {
    margin-bottom: 1rem;
    font-size: var(--fs-fl-running);
}

/* Module 3+4 */
.mm25mod.mod3 {
    display: flex;
    height: 40vw;
}

.mm25mod.mod4 {
    display: flex;
    height: 32vw;
}

.mm25mod.mod3 figure {
    width: calc(100% / 3);
    height: 100%;
}

.mm25mod.mod4 figure {
    width: 50%;
    height: 100%;
}

.page-content > .mm25mod.modtext:nth-of-type(even) {
    background-color: var(--col-linen);
}

/* Backend only */
body.wp-admin div.is-root-container::before {
    content: 'NOTICE: Remember to add the featured image in the right side bar (it won\'t be shown in this preview)';
    background-color: #fae44e;
    display: flex;
    align-items: center;
    top: -27px;
    justify-content: center;
    max-width: 70%;
    margin: 0 auto 2rem;
}

body.wp-admin div.is-root-container > * {
    margin-bottom: 0;
    margin-top: 0;
}

body.wp-admin div.is-root-container > *:nth-child(odd) {
    background-color: var(--col-springwood);
}

body.wp-admin div.is-root-container > *:nth-child(even) {
    background-color: var(--col-linen);
}

body.wp-admin figure {
    margin: 0;
    padding: 0;
    line-height: 0;
}

body.wp-admin div.emptyblock:before {
    font-style: italic;
    text-align: center;
    width: 100%;
}
body.wp-admin div.emptyblock {
    background-color: aliceblue;
    min-height: 3rem;
    padding: .5em;
    border: 1px dashed #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

body.wp-admin .mm25mod.mod1 div.emptyblock:before {
    content: 'Module 1 - No text yet, please add it for preview';
}

body.wp-admin .mm25mod.mod2 div.emptyblock:before {
    content: 'Module 2 - No text yet, please add it for preview';
}

body.wp-admin .mm25mod.mod3 div.emptyblock:before {
    content: 'Module 3 - No images in gallery, please add at least three';
}

body.wp-admin .mm25mod.mod4 div.emptyblock:before {
    content: 'Module 4 - No images in gallery, please add at least two';
}

.wp-block {
    max-width: 70%;
}

.block-editor-inserter__preview_container {
	background-color: red !important;
}

.block-editor-inserter__preview_container .mm25mod {
	background-color: pink;
	max-width: 100%;
}

body.wp-admin div.is-root-container > .block-list-appender {
    background-color: var(--col-violet);
    color: #fff;
}

body.wp-admin div.is-root-container > .block-list-appender svg {
    fill: #fff;
}

/* MEDIA QUERIES */

@media screen and ( max-width: 767px ) {/* Under iPad Mini */

    .mm25mod.mod1 > .flcont {
        flex-direction: column;
    }

    .mm25mod.mod1 > .flcont > h2 {
        font-size: var(--htext);
        width: 100%;
        padding: 0;
        margin-bottom: 1em;
    }

    .mm25mod.mod1 > .flcont > div {
        width: 100%;
    }

    .mm25mod.mod2 p {
        margin-bottom: 3rem;
    }

    .mm25mod.mod2 p.intro {
        font-size: var(--htext);
    }

    .mm25mod.mod3, .mm25mod.mod4 {
        flex-direction: column;
        height: auto;
    }

    .mm25mod.mod3 figure, .mm25mod.mod4 figure {
        width: 100%;
    }

    /*768 insert point*/

}