/*==========================================================
  MODERN BEAUTY DESIGN SYSTEM
  BASE
==========================================================*/

/* Box Model */

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* Images */

img{
    max-width:100%;
    height:auto;
}


/* Links */

a{
    transition:var(--mb-transition);
}


/* Selection */

::selection{

    background:var(--mb-primary);

    color:#fff;
}


/* Smooth Focus */

:focus-visible{

    outline:2px solid var(--mb-primary);

    outline-offset:2px;
}

/*==========================================================
  COURSE PAGE
  Hide WordPress author/date metadata
==========================================================*/

.single-mbe_course .entry-header .entry-meta {
    display: none !important;
}

/*==========================================================
  TYPOGRAPHY
==========================================================*/

body {
    font-family: var(--mb-body);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: var(--mb-heading);
}










/* ==========================================================
   MODERN BEAUTY
   IMAGE + TEXT ROWS
   TEXT CONTROLS HEIGHT
   IMAGE CROPS TO TEXT HEIGHT
   ========================================================== */

@media (min-width: 922px) {

    /* -----------------------------------------
       ROW
       ----------------------------------------- */

    .mb-image-text-row {
        display: flex !important;
        align-items: stretch !important;
        position: relative !important;

        /* Important: don't let child intrinsic height
           determine the row height */
        min-height: 0 !important;
        height: auto !important;
    }


    /* -----------------------------------------
       BOTH COLUMNS
       ----------------------------------------- */

    .mb-image-text-row > .wp-block-uagb-container {
        min-height: 0 !important;
        height: auto !important;
        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       TEXT COLUMN
       This is what determines the row height
       ----------------------------------------- */

    .mb-image-text-row > .wp-block-uagb-container:not(:has(.wp-block-image)) {
        position: relative !important;
        z-index: 2 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }


    /* -----------------------------------------
       IMAGE COLUMN
       ----------------------------------------- */

    .mb-image-text-row > .wp-block-uagb-container:has(.wp-block-image) {
        position: relative !important;

        min-height: 0 !important;
        height: auto !important;

        overflow: hidden !important;

        align-self: stretch !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       FIGURE
       Remove it from normal height calculation
       ----------------------------------------- */

    .mb-image-text-row
    > .wp-block-uagb-container:has(.wp-block-image)
    > .wp-block-image {

        position: absolute !important;

        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       IMAGE
       ----------------------------------------- */

    .mb-image-text-row
    > .wp-block-uagb-container:has(.wp-block-image)
    .wp-block-image img {

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        min-height: 0 !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: center center !important;

        margin: 0 !important;
    }
}


/* ==========================================================
   TABLET / MOBILE
   Return to normal image behavior
   ========================================================== */

@media (max-width: 921px) {

    .mb-image-text-row {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .mb-image-text-row > .wp-block-uagb-container {
        height: auto !important;
        min-height: 0 !important;
    }

    .mb-image-text-row
    > .wp-block-uagb-container:has(.wp-block-image) {

        position: relative !important;
        overflow: visible !important;
    }

    .mb-image-text-row
    > .wp-block-uagb-container:has(.wp-block-image)
    > .wp-block-image {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
    }

    .mb-image-text-row
    > .wp-block-uagb-container:has(.wp-block-image)
    .wp-block-image img {

        width: 100% !important;
        height: auto !important;

        aspect-ratio: auto !important;
        object-fit: initial !important;
    }
}







/* ==========================================================
   4:3 IMAGE ROWS
   Same mechanism as the proven mb-image-text-row
   ========================================================== */

@media (min-width: 922px) {

    .mb-image-text-row-43 {
        align-items: stretch !important;
    }

    .mb-image-text-row-43
    > .wp-block-uagb-container:has(.wp-block-image) {
        display: flex !important;
        min-height: 0 !important;
    }

    .mb-image-text-row-43
    > .wp-block-uagb-container:has(.wp-block-image)
    .wp-block-image {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .mb-image-text-row-43
    > .wp-block-uagb-container:has(.wp-block-image)
    .wp-block-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        aspect-ratio: auto !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}