/* ============================================================================================================
   niguro (writer): galleries and embeds inside an article — the news article (.nwa-content), a blog
   (.ng-blog__prose) and the editors' writing area (.ng-wr__body), so a block looks the same while it is written.
   Markup (niguro-writer.js, kept by get_html_purifier()):
     figure.ng-gallery.ng-gallery--g3|g2|masonry|carousel > figure.ng-gallery__item > a > img (+ figcaption),
       then figcaption.ng-gallery__caption; older WordPress galleries (figure.wp-block-gallery.columns-N) too.
     figure.ng-embed.ng-embed--x|youtube|instagram|facebook|tiktok|vimeo|spotify > blockquote > p > a (+ caption);
       includes/assets/js/core/niguro-embeds.js turns it into the real embed on the article page.
   Loaded on the news and blogs pages (_head.tpl).
   ============================================================================================================ */

/* ---------- galleries ---------- */
/* [Gallery layouts] ONE set of rules for the editors' canvas (.ng-wr__body: TinyMCE inline, so the page's own CSS)
   and the published news article (.nwa-content) and blog (.ng-blog__prose): the same columns, gap, radius, captions,
   masonry (by picture count, [Masonry gallery]) and carousel (the stacked card deck of niguro-gallery-deck.js, built by niguro-embeds.js on the
   article and by niguro-writer.js in the editor with unsaved wrappers). The selectors carry figure.ng-gallery so
   they beat the pages' own `figure` / `figcaption` / `img` rules (news.css .nwa-content figcaption 12.5px faint,
   blogs.css .ng-blog__prose figcaption 14px with 8px on top), which made the captions differ from place to place. */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery {
  --ng-gal-gap: 8px; --ng-gal-r: var(--ng-r-sm);
  position: relative; margin: 1.6em 0; padding: 0;
}
/* figure.… beats the articles' own `figure { margin: 1.4em 0 }` (news.css, blogs.css) */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery figure.ng-gallery__item { position: relative; min-width: 0; margin: 0; padding: 0; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery .ng-gallery__item a { display: block; border-radius: var(--ng-gal-r); overflow: hidden; background: var(--ng-fill); text-decoration: none; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery .ng-gallery__item img {
  display: block; width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; margin: 0; border-radius: 0;
  transition: transform .25s ease;
}
:is(.nwa-content, .ng-blog__prose) figure.ng-gallery .ng-gallery__item a:hover img { transform: scale(1.03); }
:is(.nwa-content, .ng-blog__prose) figure.ng-gallery .ng-gallery__item a:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery figure.ng-gallery__item > figcaption {
  margin: 6px 2px 0; padding: 0; font-size: 12.5px; line-height: 1.4; color: var(--ng-sub); text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery > figcaption.ng-gallery__caption {
  grid-column: 1 / -1; margin: 4px 0 0; padding: 0; font-size: 13px; line-height: 1.45; color: var(--ng-sub); text-align: center;
}
@media (prefers-reduced-motion: reduce) { :is(.nwa-content, .ng-blog__prose) figure.ng-gallery .ng-gallery__item img { transition: none; } }

/* grid: 3 columns (2 on phones), 2 columns */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--g3,
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ng-gal-gap); align-items: start; }
@media (min-width: 576px) {
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--g2 .ng-gallery__item img { aspect-ratio: 4 / 3; }

/* [Masonry gallery] (owner, 2026-10-19) masonry arranges itself by the number of pictures. The same markup and these
   same rules draw it in the editors (TinyMCE inline, so this page CSS) and on the article: the count comes from
   :has() (no count classes, nothing for the sanitizer to keep, no script). Each picture fills its link (`a`, which
   carries the shape and the gallery radius); the gap, radius and captions are the other layouts' (--ng-gal-gap,
   --ng-gal-r, the shared caption rules above). The old rule was one fixed column flow (2 / 3 columns) for any count:
   two pictures left an empty third column, three made a plain row, and same-shaped photos looked like a grid.
     1 picture: full width, its own shape.
     2: side by side (4:5 each).
     3: a larger, taller picture in the middle (3:4) between two smaller ones (4:5), columns 1fr 1.4fr 1fr; on phones
        the first picture full width (4:3), then the other two side by side (1:1).
     4: two columns, tall / short on the left and short / tall on the right (4:5 and 4:3, so both columns end level).
     5 or more: balanced columns (2 on phones, 3 from 576px), shapes in a 4:5, 4:3, 1:1, 1:1 cycle. */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry { columns: 2; column-gap: var(--ng-gal-gap); }
@media (min-width: 576px) { :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry { columns: 3; } }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry > figure.ng-gallery__item { break-inside: avoid; margin-bottom: var(--ng-gal-gap); }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry .ng-gallery__item a { position: relative; aspect-ratio: 1 / 1; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry .ng-gallery__item img { position: absolute; inset: 0; height: 100% !important; aspect-ratio: auto; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry > figure.ng-gallery__item:nth-of-type(4n+1) a { aspect-ratio: 4 / 5; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry > figure.ng-gallery__item:nth-of-type(4n+2) a { aspect-ratio: 4 / 3; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry > figcaption.ng-gallery__caption { column-span: all; }
/* the column flow leaves its last gap under the pictures: the gallery's own bottom margin takes it back */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:not(:has(> figcaption.ng-gallery__caption)) { margin-bottom: calc(1.6em - var(--ng-gal-gap)); }
/* 1 */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:not(:has(> figure.ng-gallery__item:nth-of-type(2))) { columns: auto; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:not(:has(> figure.ng-gallery__item:nth-of-type(2))) .ng-gallery__item a { aspect-ratio: auto; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:not(:has(> figure.ng-gallery__item:nth-of-type(2))) .ng-gallery__item img { position: static; height: auto !important; }
/* 4: two columns, ending level */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(4):last-of-type) { columns: 2; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(4):last-of-type) > figure.ng-gallery__item:nth-of-type(3) a { aspect-ratio: 4 / 3; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(4):last-of-type) > figure.ng-gallery__item:nth-of-type(4) a { aspect-ratio: 4 / 5; }
/* 2 and 3: a grid */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(2):last-of-type),
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) {
  display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ng-gal-gap); align-items: start; margin-bottom: 1.6em;
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(2):last-of-type) > figure.ng-gallery__item,
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item { margin-bottom: 0; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(2):last-of-type) > figure.ng-gallery__item a { aspect-ratio: 4 / 5; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(1) { grid-column: 1 / -1; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(1) a { aspect-ratio: 4 / 3; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(n+2) a { aspect-ratio: 1 / 1; }
@media (min-width: 576px) {
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(1) { grid-area: 1 / 2; }
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(1) a { aspect-ratio: 3 / 4; }
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(2) { grid-area: 1 / 1; }
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(3) { grid-area: 1 / 3; }
  :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--masonry:has(> figure.ng-gallery__item:nth-of-type(3):last-of-type) > figure.ng-gallery__item:nth-of-type(n+2) a { aspect-ratio: 4 / 5; }
}
/* [/Masonry gallery] */

/* carousel: a stacked card deck (niguro-gallery-deck.js builds .ng-gallery__track and .ng-gallery__deckbar, in the
   editor and on the article alike). The front card sits upright on the left with the full shadow and its caption;
   the next ones are stacked behind it to the right, each smaller, further over, turned a little more and dimmer.
   Moving, the front card slides out to the left and the next one straightens into its place: transform and
   opacity only, none of it with reduced motion. The card is the theme's card (--ng-r, --ng-shadow-lg, --ng-card). */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel > .ng-gallery__track {
  --ng-deck-w: 74%; --ng-deck-dx: 0px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  padding: 12px 8px 22px; margin: -12px -8px 0; overflow: hidden; touch-action: pan-y; outline: none;
}
@media (max-width: 575.98px) { :is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel > .ng-gallery__track { --ng-deck-w: 80%; } }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel > .ng-gallery__track:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: -2px; border-radius: var(--ng-r); }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel > .ng-gallery__track > figure.ng-gallery__item {
  grid-area: 1 / 1; justify-self: start; width: var(--ng-deck-w); padding: 8px 8px 10px; border: 1px solid var(--ng-line); border-radius: var(--ng-r);
  background: var(--ng-card); box-shadow: var(--ng-shadow-lg); transform-origin: 50% 100%; will-change: transform, opacity;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: hsl(0 0% 0%); opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel .ng-gallery__item a { border-radius: var(--ng-r-sm); }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel .ng-gallery__item img { aspect-ratio: 3 / 2; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel .ng-gallery__item > figcaption { margin: 8px 2px 0; transition: opacity .3s ease; }
/* the places in the deck */
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="0"] { z-index: 5; transform: translateX(var(--ng-deck-dx)) rotate(calc(var(--ng-deck-dx) / 40 * 1deg)); }
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="1"] { z-index: 4; transform: translateX(19%) scale(.92) rotate(4deg); }
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="2"] { z-index: 3; transform: translateX(34%) scale(.84) rotate(8deg); }
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="3"] { z-index: 2; transform: translateX(44%) scale(.78) rotate(11deg); opacity: 0; }
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="-1"] { z-index: 6; transform: translateX(-125%) rotate(-8deg); opacity: 0; }
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="1"]::after { opacity: .1; }
figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="2"]::after { opacity: .22; }
body.night-mode figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="1"]::after { opacity: .25; }
body.night-mode figure.ng-gallery--carousel > .ng-gallery__track > [data-ng-deck="2"]::after { opacity: .42; }
/* the cards behind: a click brings them to the front (not into the lightbox); their caption waits */
figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item:not([data-ng-deck="0"]) { cursor: pointer; }
figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item:not([data-ng-deck="0"]) a { pointer-events: none; }
figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item:not([data-ng-deck="0"]) > figcaption { opacity: 0; }
figure.ng-gallery--carousel > .ng-gallery__track.is-dragging > .ng-gallery__item { transition: none; }
figure.ng-gallery--carousel > .ng-gallery__track.is-dragging { cursor: grabbing; user-select: none; }
figure.ng-gallery--carousel > .ng-gallery__track a:hover img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item,
  figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item::after,
  figure.ng-gallery--carousel > .ng-gallery__track > .ng-gallery__item > figcaption { transition: none; }
}
/* the bar under the deck: previous, the dots, "n / N", next */
.ng-gallery__deckbar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; user-select: none; }
.ng-gallery__deckbtn {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ng-line); border-radius: 999px;
  background: var(--ng-card); color: var(--ng-ink); box-shadow: none; cursor: pointer; transition: background-color .15s ease, opacity .15s ease;
}
.ng-gallery__deckbtn:hover { background: var(--ng-fill); }
.ng-gallery__deckbtn:focus-visible, .ng-gallery__dot:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-gallery__deckbtn[disabled] { opacity: .35; cursor: default; background: var(--ng-card); }
.ng-gallery__deckbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .ng-gallery__deckbtn svg { transform: scaleX(-1); }
.ng-gallery__dots { display: flex; align-items: center; gap: 6px; }
.ng-gallery__dots:empty { display: none; }
.ng-gallery__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--ng-line); cursor: pointer; transition: width .2s ease, background-color .2s ease; }
.ng-gallery__dot[aria-current="true"] { width: 20px; background: var(--ng-brand); }
.ng-gallery__count { min-width: 3.2em; font-size: 12.5px; font-weight: 600; color: var(--ng-sub); text-align: center; font-variant-numeric: tabular-nums; }
/* no script (yet): the pictures make one row that scrolls */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel:not(:has(> .ng-gallery__track)) {
  display: flex; gap: var(--ng-gal-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel:not(:has(> .ng-gallery__track)) > .ng-gallery__item { flex: 0 0 72%; scroll-snap-align: start; }
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-gallery--carousel:not(:has(> .ng-gallery__track)) > figcaption.ng-gallery__caption { display: none; }
/* the arrows the lightbox puts on a gallery's pictures (niguro-embeds.js) */
.ng-gallery__nav {
  position: absolute; top: calc(50% - 20px); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px;
  background: hsl(0 0% 100% / .92); color: hsl(220 14% 20%); box-shadow: 0 2px 10px hsl(220 20% 10% / .18); cursor: pointer;
}
.ng-gallery__nav[disabled] { opacity: 0; pointer-events: none; }
.ng-gallery__nav--prev { left: 10px; }
.ng-gallery__nav--next { right: 10px; }
.ng-gallery__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .ng-gallery__nav { display: none; } }
/* [/Gallery layouts] */

/* older WordPress galleries (stories imported from niguro.com) */
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 1.6em 0; }
@media (min-width: 576px) { :is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery:not(.columns-2):not(.columns-1) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery.columns-1 { grid-template-columns: minmax(0, 1fr); }
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery > figure { margin: 0; min-width: 0; }
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; cursor: zoom-in; }
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery.columns-2 img { aspect-ratio: 4 / 3; }
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery > figcaption { grid-column: 1 / -1; }
:is(.nwa-content, .ng-blog__prose) .ng-gallery__item a,
:is(.nwa-content, .ng-blog__prose) figure.wp-block-gallery img { cursor: zoom-in; }

/* ---------- embeds ---------- */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-embed { margin: 1.6em auto; max-width: 100%; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed--x { max-width: 550px; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed--instagram { max-width: 540px; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed--facebook { max-width: 500px; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed--tiktok { max-width: 340px; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed > figcaption { margin-top: 8px; font-size: 13px; color: var(--ng-sub); text-align: center; }
/* before the embed loads (and without scripts): a link card */
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-embed > blockquote {
  margin: 0; padding: 14px 16px; border: 1px solid var(--ng-line); border-radius: 14px; background: var(--ng-card); box-shadow: none;
  font-size: 14.5px; line-height: 1.5; color: var(--ng-sub); overflow-wrap: anywhere;
}
:is(.nwa-content, .ng-blog__prose, .ng-wr__body) figure.ng-embed > blockquote p { margin: 0; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed iframe { display: block; max-width: 100% !important; margin: 0 auto !important; border: 0; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed .twitter-tweet { margin: 0 auto !important; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed .instagram-media { min-width: 0 !important; margin: 0 auto !important; }
:is(.nwa-content, .ng-blog__prose) figure.ng-embed .tiktok-embed { margin: 0 auto; border: 0; }
/* 16:9 players (YouTube, Vimeo) */
.ng-embed__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.ng-blogs .ng-blog__prose .ng-embed__frame iframe,
.ng-embed__frame iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; border-radius: 0; }
.ng-embed__play {
  position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0;
  background: #000 center / cover no-repeat; color: #fff; cursor: pointer;
}
.ng-embed__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, hsl(0 0% 0% / .05), hsl(0 0% 0% / .35)); }
.ng-embed__play span {
  position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 48px; border-radius: 14px; background: hsl(0 100% 45%);
  box-shadow: 0 6px 20px hsl(0 0% 0% / .35); transition: transform .15s ease;
}
.ng-embed__play:hover span, .ng-embed__play:focus-visible span { transform: scale(1.06); }
.ng-embed__play:focus-visible { outline: 3px solid var(--ng-brand); outline-offset: -3px; }
.ng-embed__play svg { width: 22px; height: 22px; fill: #fff; }
.ng-embed__play b {
  position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; font-size: 13px; font-weight: 600; text-align: start; text-shadow: 0 1px 3px hsl(0 0% 0% / .6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Spotify's player */
:is(.nwa-content, .ng-blog__prose) figure.ng-embed--spotify iframe { width: 100% !important; border-radius: 14px; }
/* an iframe already in an older story (Facebook's plugin at 500px) never runs off the page */
:is(.nwa-content, .ng-blog__prose) iframe { max-width: 100%; }