/* News blocks inside an article (editor/src/blocks, saved with data-mb-block).
   Loaded by the theme (base.html.twig) and by the editor, so an article looks
   the same while it is written. Colours come from the builder's tokens
   (--theme-primary, …) with neutral fallbacks; logical properties for RTL/LTR. */

.mb-facts, .mb-callout, .mb-quote, .mb-faq, .mb-timeline, .mb-related, .mb-readalso, .mb-figure, .mb-gallery, .mb-poll, .mb-poll-live {
  margin-block: 1.6em;
}

/* ── Fact box ───────────────────────────── */
.mb-facts {
  border: 1px solid color-mix(in srgb, var(--theme-primary, #b08a2e) 30%, transparent);
  border-inline-start: 4px solid var(--theme-primary, #b08a2e);
  background: color-mix(in srgb, var(--theme-primary, #b08a2e) 6%, transparent);
  border-radius: 10px;
  padding: 1em 1.25em;
}
.mb-facts > :first-child { margin-top: 0; }
.mb-facts > :last-child { margin-bottom: 0; }
.mb-facts h4 { font-size: 1.05em; margin-bottom: .5em; }
.mb-facts ul { margin: 0; padding-inline-start: 1.2em; }
.mb-facts li { margin-block: .3em; }

/* ── Callout ────────────────────────────── */
.mb-callout {
  --mb-tone: #2563eb;
  border-radius: 10px;
  padding: .9em 1.15em;
  background: color-mix(in srgb, var(--mb-tone) 9%, transparent);
  border-inline-start: 4px solid var(--mb-tone);
}
.mb-callout--warning { --mb-tone: #d97706; }
.mb-callout--success { --mb-tone: #059669; }
.mb-callout--note { --mb-tone: #64748b; }
.mb-callout > :first-child { margin-top: 0; }
.mb-callout > :last-child { margin-bottom: 0; }

/* ── Quote with source ──────────────────── */
.mb-quote {
  position: relative;
  margin-inline: 0;
  padding-block: .4em;
  padding-inline: 1.4em 0;
  border-inline-start: 4px solid var(--theme-primary, #b08a2e);
  font-size: 1.15em;
  font-weight: 600;
  line-height: 1.8;
}
.mb-quote p { margin-block: .3em; }
.mb-quote__cite {
  display: block;
  margin-top: .5em;
  font-size: .8em;
  font-style: normal;
  font-weight: 500;
  opacity: .75;
}
.mb-quote__cite::before { content: "\2014\00a0"; }
.mb-quote__cite:empty::before { content: none; }

/* ── FAQ ────────────────────────────────── */
.mb-faq { border-top: 1px solid rgba(127, 127, 127, .25); }
.mb-faq__item { border-bottom: 1px solid rgba(127, 127, 127, .25); padding-block: .8em; }
.mb-faq__q { font-size: 1.05em; margin: 0 0 .35em; }
.mb-faq__a > :first-child { margin-top: 0; }
.mb-faq__a > :last-child { margin-bottom: 0; }

/* ── Live timeline ──────────────────────── */
.mb-timeline { position: relative; padding-inline-start: 1.4em; }
.mb-timeline::before {
  content: ""; position: absolute; inset-block: .4em; inset-inline-start: .35em;
  width: 2px; background: rgba(127, 127, 127, .3);
}
.mb-timeline__item { position: relative; padding-block: .2em .8em; }
.mb-timeline__item::before {
  content: ""; position: absolute; top: .55em; inset-inline-start: -1.32em;
  width: .7em; height: .7em; border-radius: 50%;
  background: var(--theme-primary, #b08a2e);
  box-shadow: 0 0 0 3px var(--theme-bg, #fff);
}
.mb-timeline__time { margin: 0 0 .2em; font-size: .85em; font-weight: 700; color: var(--theme-primary, #b08a2e); direction: ltr; unicode-bidi: plaintext; text-align: start; }
.mb-timeline__item > :last-child { margin-bottom: 0; }

/* ── Related article card ───────────────── */
.mb-related__link {
  display: flex; align-items: center; gap: 1em;
  border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px;
  padding: .7em; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.mb-related__link:hover { border-color: var(--theme-primary, #b08a2e); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .4); }
.mb-related__img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; margin: 0 !important; }
.mb-related__body { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.mb-related__kicker { font-size: .78em; font-weight: 700; color: var(--theme-primary, #b08a2e); }
.mb-related__title { font-weight: 700; line-height: 1.5; }

/* ── Read also ──────────────────────────── */
.mb-readalso {
  border-block: 2px solid var(--theme-primary, #b08a2e);
  padding-block: .7em;
}
.mb-readalso__label { display: block; font-size: .85em; color: var(--theme-primary, #b08a2e); margin-bottom: .3em; }
.mb-readalso ul { margin: 0; padding-inline-start: 1.1em; }
.mb-readalso li { margin-block: .25em; }
.mb-readalso a { font-weight: 600; }

/* ── Image with caption and credit ──────── */
.mb-figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.mb-figure figcaption { font-size: .88em; opacity: .8; margin-top: .45em; }
.mb-figure__credit { display: block; font-size: .75em; opacity: .6; margin-top: .15em; }

/* ── Gallery ────────────────────────────── */
.mb-gallery__grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.mb-gallery[data-count="1"] .mb-gallery__grid { grid-template-columns: 1fr; }
.mb-gallery[data-count="2"] .mb-gallery__grid { grid-template-columns: 1fr 1fr; }
.mb-gallery__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin: 0 !important; }
.mb-gallery figcaption { font-size: .88em; opacity: .8; margin-top: .45em; }

@media (max-width: 575px) {
  .mb-related__img { width: 88px; height: 64px; }
}

/* ── Poll ─────────────────────────────────
   On the site the saved snapshot is replaced by the live poll (.mb-poll-live,
   the site builder's poll view); .mb-poll is how feeds and the editor show it. */
.mb-poll { border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; padding: .9em 1.1em; }
.mb-poll__q { font-weight: 700; margin: 0 0 .5em; }
.mb-poll ul { margin: 0; padding-inline-start: 1.2em; }