.ymca-announcements {
    position: relative;
}

.ymca-announcements__icon svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: currentColor;
}

.ymca-announcements__label {
    margin: 0;
    white-space: nowrap;
}

.wp-block-button.ymca-announcements__close .wp-block-button__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--white);

    /* The label is a plain multiplication-sign glyph, not an SVG: core/button
       stores its text as rich text, which strips a raw <svg> on parse and
       leaves the button empty ("Add text..."). Size it as type instead. */
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}

.wp-block-button.ymca-announcements__close .wp-block-button__link:hover {
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

/* ----------------------------------------------------------------------- */
/* Mobile / tablet layout.
   Stacked, the bar's four pieces (icon, text, "Learn More", close) each took a
   full row and pushed it past 250px tall on a phone. Instead: the icon sits
   beside the text, the close button is lifted out of flow into the top-right
   corner, and the action shrinks to a compact pill that shares the text's line
   whenever there is room for both. */
@media (max-width: 768px) {
    .ymca-announcements {
        /* The wider right pad keeps the copy clear of the absolute close. */
        padding: 16px 56px 16px 20px !important;
    }

    .ymca-announcements__inner {
        /* Icon and copy on one line: nowrap beats .is-layout-flex's wrap. */
        flex-wrap: nowrap !important;
        align-items: flex-start;
        gap: 12px !important;
        width: 100%;
    }

    .ymca-announcements__row__left {
        flex: 0 0 auto;
        /* Optically centers the 32px icon on the first line of copy. */
        padding-top: 2px;
    }

    .ymca-announcements__row__right {
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        border-left: none;
        padding-left: 0 !important;
        gap: 8px 16px !important;
    }

    /* Grow to fill, but wrap the button below once the copy would be squeezed
       under ~200px. One line together from roughly 465px up, stacked below that. */
    .ymca-announcements__row__right > p {
        flex: 1 1 200px;
        margin: 0;
    }

    .ymca-announcements__row__right .ymca-announcements__actions {
        width: auto;
        justify-content: flex-start;
    }

    /* Compact the action: the full 18px/32px pill is most of the bar's height. */
    .ymca-announcements__row__right .wp-block-button .wp-block-button__link {
        padding: 6px 16px;
        font-size: 16px;
    }

    /* Out of flow, so the close no longer costs the bar an entire row. */
    .ymca-announcements__close-wrapper {
        position: absolute;
        top: 12px;
        right: 12px;
        width: auto;
    }
}