/* Reused page headers belong to a full-width page canvas, not the prose column.
   Imported pages and the existing homepage do not have rb-new-content. */
.rb-new-content:has(> .wp-block-post-content > :is(.phead, .phead-img, .view, .rb-page-layout)) {
    width: 100%;
    max-width: none;
    padding-top: 0;
    padding-inline: 0;
}
.rb-new-content .wp-block-post-content > :is(.phead, .phead-img, .view, .rb-page-layout) {
    width: 100%;
    max-width: none;
}
/* Explicitly keep a photo and card below each other even if a copied Group was a Row. */
:is(.rb-new-content, .rb-page-layout) .phead,
.editor-styles-wrapper .is-root-container > .phead {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}
:is(.rb-new-content, .rb-page-layout) .phead > .phead-img,
.editor-styles-wrapper .is-root-container > .phead > .phead-img {
    flex: none;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
}
/* Percentages refer to this card's actual container, unlike the old 100vw offset.
   This also repairs an existing image/card pair pasted as separate root blocks. */
:is(.rb-new-content, .rb-page-layout) .phead-text,
.editor-styles-wrapper .is-root-container > .phead-text {
    --rb-page-gutter: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
    flex: none;
    align-self: flex-start;
    min-width: 0;
    width: calc(100% - 2 * var(--rb-page-gutter));
    max-width: var(--wp--style--global--content-size, 760px);
    margin-inline-start: max(var(--rb-page-gutter), calc((100% - var(--wp--style--global--wide-size, 1120px)) / 2));
    margin-inline-end: var(--rb-page-gutter);
    overflow-wrap: break-word;
}
.rb-new-content .phead-img > p:empty {
    display: none;
}
/* A new page's content remains a normal editable Gutenberg flow. */
.rb-page-layout > .rb-page-body {
    min-width: 0;
    width: 100%;
    max-width: calc(var(--wp--style--global--wide-size, 1120px) + 2 * clamp(16px, 4vw, 40px));
    margin-inline: auto;
}
/* Gutenberg normally constrains each root block to the prose width as well. */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :is(.rb-page-layout, .view:has(> .phead), .phead, .phead-img) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .phead-text {
    margin-inline-start: max(clamp(16px, 4vw, 40px), calc((100% - var(--wp--style--global--wide-size, 1120px)) / 2));
    margin-inline-end: clamp(16px, 4vw, 40px);
}
/* The source stylesheet has a more-specific !important rule inside .view. */
:is(body, #_) .rb-page-layout .phead-text {
    margin-top: -32px !important;
}
.rb-page-layout .phead-text .wp-block-post-title {
    max-width: none;
    margin: 0 0 .25em;
    padding: 0;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
}
@media (max-width: 760px) {
    :is(body, #_) .rb-page-layout .phead-text {
        margin-top: 0 !important;
    }
    :is(.rb-new-content, .rb-page-layout) .phead-text,
    .editor-styles-wrapper .is-root-container > .phead-text {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
    }
    .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .phead-text {
        margin-inline: 0;
    }
}
