/* =========================================================
   Promo strip — Italian-poster moment, centered stack.
   One per page max — earns its presence.
   ========================================================= */
.mz-promo {
  background: var(--brand);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Background image: brand-tinted gradient layered over the image.
   The overlay keeps text contrast and preserves the red identity. */
.mz-promo--has-image {
  background-color: var(--brand);
  background-image:
    linear-gradient(rgba(228, 31, 33, 0.65), rgba(184, 22, 24, 0.72)),
    var(--promo-bg-img);
  background-size: cover;
  background-position: center;
}

.mz-promo__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-6);
  padding: clamp(48px, 8vw, 80px) 0;
}

.mz-promo__tag {
  font: 600 var(--t-xs)/1 var(--ff-mono);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.34);
  padding: 6px var(--s-3);
  border-radius: var(--r-1);
}

.mz-promo__copy {
  font: 700 clamp(22px, 2.8vw, 32px)/1.15 var(--ff-ui);
  letter-spacing: -0.02em;
  max-width: 48ch;
}
.mz-promo__copy em { font-style: normal; background: var(--paper-ink); padding: 2px 6px; }

.mz-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--success);
  color: #fff;
  height: 44px;
  padding: 0 var(--s-6);
  border-radius: var(--r-2);
  font: 600 var(--t-sm)/1 var(--ff-ui);
  transition: background 150ms ease-out;
}
.mz-promo__cta:hover { background: #226030; border-bottom-color: transparent; }
.mz-promo__cta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Dark mode: lock the strip to light-on-red regardless of page theme.
   Image state keeps its own overlay and doesn't need the color lock. */
[data-theme="dark"] .mz-promo__copy em                  { background: #1E1E1E; }
[data-theme="dark"] .mz-promo__cta                      { background: #2F7A3F; color: #fff; }
[data-theme="dark"] .mz-promo__cta:hover                { background: #226030; }
[data-theme="dark"] .mz-promo:not(.mz-promo--has-image) { background: #E41F21; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mz-promo:not(.mz-promo--has-image) { background: #E41F21; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mz-promo__copy em   { background: #1E1E1E; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mz-promo__cta       { background: #2F7A3F; color: #fff; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .mz-promo__cta:hover { background: #226030; }
}