/* Canonical HTML used by both the editor and published SDG content. */
:is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-gallery { margin: 1.5em 0; min-width: 0; clear: both; }
.pi-sdg-gallery > .pi-sdg-gallery__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pi-sdg-gallery--cols-1 > .pi-sdg-gallery__items { grid-template-columns: minmax(0, 1fr); }
.pi-sdg-gallery--cols-2 > .pi-sdg-gallery__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pi-sdg-gallery--cols-3 > .pi-sdg-gallery__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-sdg-gallery--cols-4 > .pi-sdg-gallery__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Image rows pack at their authored widths; unlike galleries, never stretch to fill a row. */
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items {
  grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center;
}
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row.pi-sdg-gallery--cols-1 > .pi-sdg-gallery__items { grid-template-columns: minmax(0, max-content); }
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row.pi-sdg-gallery--cols-3 > .pi-sdg-gallery__items { grid-template-columns: repeat(3, minmax(0, max-content)); }
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row.pi-sdg-gallery--cols-4 > .pi-sdg-gallery__items { grid-template-columns: repeat(4, minmax(0, max-content)); }
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items > figure {
  max-width: 100% !important; min-width: 0; float: none !important; margin: 0 !important; justify-self: start;
}
/* Runtime width only; the saved original width remains available for ungroup/Undo. */
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items > figure[style*="--pi-sdg-row-display-width"] {
  width: var(--pi-sdg-row-display-width) !important;
}
/* Independently center each visual line, including an incomplete last line. */
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items[style*="--pi-sdg-row-positioned"] {
  grid-template-columns: minmax(0, 1fr) !important;
}
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items[style*="--pi-sdg-row-positioned"] > figure {
  grid-column: 1; grid-row: var(--pi-sdg-row-line); margin-left: var(--pi-sdg-row-offset) !important;
}
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items > figure > :is(img,a),
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items > figure > a > img {
  display: block; width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; margin: 0 !important;
}
/* TinyMCE may add zero-width caret text around a linked picture. It must not create a text line above the photo. */
:root :is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-image-row > .pi-sdg-gallery__items > figure > a { font-size: 0 !important; line-height: 0 !important; }
:is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-gallery__item { min-width: 0; max-width: 100%; margin: 0; padding: 0; }
:is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-gallery__item > img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; object-fit: contain; }
:is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) .pi-sdg-gallery__item > figcaption { margin: 8px 0 0; font-size: 14px; line-height: 1.6; text-align: center; overflow-wrap: anywhere; }
:is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) details.pi-sdg-disclosure { margin: 1.5em 0; padding: 0; border: 1px solid #d5e0e8; background: #fff; clear: both; }
:is(body.mce-content-body, .pi-sdg-section__content, .pi-sdg-content-card) details.pi-sdg-disclosure > summary { display: list-item; cursor: pointer; padding: 16px 20px; color: #152c42; background: #eef4f7; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; }
.pi-sdg-disclosure > summary:focus-visible { outline: 2px solid #2271b1; outline-offset: -3px; }
.pi-sdg-disclosure[open] > summary { border-bottom: 1px solid #d5e0e8; }
.pi-sdg-disclosure > .pi-sdg-disclosure__body { padding: 20px; min-width: 0; }
.pi-sdg-disclosure__body > :first-child { margin-top: 0; }
.pi-sdg-disclosure__body > :last-child { margin-bottom: 0; }
@media (max-width: 767px) { .pi-sdg-gallery > .pi-sdg-gallery__items { gap: 8px; } .pi-sdg-disclosure > .pi-sdg-disclosure__body { padding: 14px; } }