/* Chevron divider — YMCA Midsize 2026
   66px strip of purple-tint chevrons repeating every 38px. */

.bmg-chevron-divider {
    height: 66px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 66'%3E%3Cpath fill='%23f2e5f2' d='M36.97,31.11l-.15-.24L21.72,4.14l-.27-.48c-1.29-2.25-3.73-3.66-6.46-3.66H2.53C1.15,0,0,1.14,0,2.58s.09.87.29,1.23l15.23,26.88c.7,1.2,1.08,2.61,1.08,4.11s-.38,2.82-1.02,4.01L2.35,62.19c-.2.36-.29.78-.29,1.23,0,1.41,1.11,2.58,2.52,2.58h12.79c2.73,0,5.17-1.41,6.46-3.66l.27-.48,12.72-22.48.24-.42c.65-1.13.94-2.45.94-3.83s-.35-2.82-1.03-3.99v-.03Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 38px 66px;
    background-position: center center;
}

/* Block editor only: an empty Group renders a "Select a layout" placeholder
   (.wp-block-group__placeholder) that covers the chevron background. Hide it so
   the divider previews like the front end. These classes exist only in the
   editor, so this is inert on the front end. */
.bmg-chevron-divider.wp-block-group__placeholder {
    min-height: 66px;
}

.bmg-chevron-divider.wp-block-group__placeholder .components-placeholder {
    display: none;
}

/* Mobile: the divider carries its own 72px top/bottom padding, and the sections
   it sits between each carry ~72px of their own, so the strip ends up floating in
   ~144px of empty space on a phone. Halve the divider's padding and trim only the
   neighbours that actually touch a divider — every other section keeps its rhythm.
   The paddings are inline on the block markup, so these need !important. */
@media (max-width: 768px) {
    .bmg-chevron-divider {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    /* The second selector exists because the large-video pattern ships a hidden,
       zero-height wp:ymca/modal as a trailing sibling, so the section visually
       above a divider is not always the adjacent one. Skip the modal and trim the
       real section behind it. */
    .wp-block-post-content > *:not(.wp-block-ymca-modal):has(+ .bmg-chevron-divider),
    .wp-block-post-content > *:has(+ .wp-block-ymca-modal + .bmg-chevron-divider) {
        padding-bottom: 24px !important;
    }

    .wp-block-post-content > .bmg-chevron-divider + * {
        padding-top: 24px !important;
    }
}