/*
 * PageTree default blocks - Media and text.
 * Zero specificity (:where) so a theme can override any rule.
 */

:where(.ptb-mediatext) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ptb-gap);
    align-items: center;
}

:where(.ptb-mediatext--third.ptb-mediatext--image-left) { grid-template-columns: 1fr 2fr; }
:where(.ptb-mediatext--third.ptb-mediatext--image-right) { grid-template-columns: 2fr 1fr; }

:where(.ptb-mediatext--valign-top) { align-items: start; }

/* The image comes first in the markup, so it is first when the columns stack */
:where(.ptb-mediatext--image-right) :where(.ptb-mediatext__media) { order: 2; }

:where(.ptb-mediatext__media, .ptb-mediatext__body) { min-width: 0; }

:where(.ptb-mediatext__image) {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ptb-radius);
}

:where(.ptb-mediatext__title) { margin-top: 0; }

:where(.ptb-mediatext__content) > :where(:first-child) { margin-top: 0; }
:where(.ptb-mediatext__content) > :where(:last-child) { margin-bottom: 0; }

:where(.ptb-mediatext__actions) { margin: var(--ptb-space-s) 0 0; }

@media (max-width: 767.98px) {
    :where(.ptb-mediatext),
    :where(.ptb-mediatext--third.ptb-mediatext--image-left),
    :where(.ptb-mediatext--third.ptb-mediatext--image-right) {
        grid-template-columns: 1fr;
    }

    :where(.ptb-mediatext--image-right) :where(.ptb-mediatext__media) { order: 0; }
}