/* ============================================================
 * mi-banner.css — Banner Marketing "what's new" modal card.
 *
 * A Morgan-Stanley-style welcome card: full-viewport scrim, a thick
 * white-bordered card with a navy→teal interior, and the close "×"
 * sitting OUTSIDE the card on the scrim at top-right.
 *
 * Deliberately self-contained and prefixed `mib-` so it can drop onto
 * any page without colliding with page CSS. Colors are hard-coded
 * (not themed) — the card is always the dark brand treatment, in both
 * light and dark app themes, exactly like the reference.
 * ============================================================ */

.mib-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px;
  background: rgba(0, 0, 0, 0.72);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mib-overlay[hidden] { display: none; }

/* The stage is the positioning context for the close button so that the
   "×" can live outside the card's white border, on the scrim itself. */
/* iter25DD — desktop card scaled 25% (680 -> 850). Type, padding and the
   image slot below are scaled to match so the card reads proportionally
   larger rather than just wider. 92vw keeps it off the viewport edges. */
.mib-stage {
  position: relative;
  width: min(850px, 92vw);
  max-width: 850px;
  animation: mib-in 220ms ease-out;
}

@keyframes mib-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mib-stage { animation: none; }
}

/* Close "×" — outside the card, top-right, on the scrim. No background. */
.mib-close {
  position: absolute;
  top: -42px;
  right: 0;
  /* iter25DD — the card is later in the DOM, so without this its 10px white
     border would paint over the bottom of the close button's 40px hit box and
     swallow taps meant to dismiss (measured 6px of overlap at 375px). */
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: 300 30px/1 'Inter', -apple-system, sans-serif;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 140ms ease;
}
.mib-close:hover { opacity: 1; }
.mib-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The defining visual: a thick white border, barely rounded. */
.mib-card {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 10px solid #fff;
  border-radius: 3px;
  background: linear-gradient(180deg, #0b1a2e 0%, #12304a 62%, #1d6b7a 100%);
  color: #fff;
  cursor: pointer;
  min-height: 380px;
  max-height: calc(88vh - 56px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.mib-card:focus-visible { outline: 3px solid #4F98A3; outline-offset: 4px; }

/* No cta_url — the card goes nowhere, so don't promise a click. */
.mib-card.mib-inert { cursor: default; }

.mib-card-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 45px 50px 35px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Brand wordmark, top-left. Light weight, slightly tight tracking.
   Intentionally the app's own font — not a facsimile of any other mark. */
.mib-brand {
  flex: 0 0 auto;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff;
}

/* Two columns on wide cards: screenshot left, copy right. */
.mib-body {
  display: flex;
  align-items: center;
  gap: 35px;
  flex: 1 1 auto;
  min-height: 0;
}

.mib-figure {
  flex: 1 1 52%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

/* Any admin-uploaded image must fit without distorting or blowing out
   the card, whatever its intrinsic aspect ratio. */
.mib-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 2px;
  background: #12161c;
}

/* When there is no image the copy takes the full width. */
.mib-body.mib-no-image .mib-text { flex: 1 1 100%; }

.mib-text {
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mib-headline {
  margin: 0;
  font-size: 50px;
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: break-word;
}

.mib-subhead {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
}

.mib-cta {
  margin: 5px 0 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  color: #fff;
}
.mib-cta strong { font-weight: 700; }

/* The footnote sits on the lightest part of the gradient, so it needs a
   genuinely light ink to clear AA — 0.42 alpha measured ~2.4:1. A scrim
   behind it darkens the teal without disturbing the gradient elsewhere. */
.mib-footnote {
  flex: 0 0 auto;
  padding: 15px 50px 25px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(4, 14, 24, 0) 0%, rgba(4, 14, 24, 0.55) 45%, rgba(4, 14, 24, 0.72) 100%);
}

/* ---- Tablet / small laptop (621–950px) ----
   iter25DD — the desktop card is 850px wide, but `min(850px, 92vw)` clamps it
   below ~925px of viewport. Without this step a 700px-wide window would get
   the full 50px headline and 300px image slot inside a card only ~640px wide,
   which crowds the two-column layout. These are the pre-25DD desktop values,
   which are already proven at this width. */
@media (max-width: 950px) {
  .mib-card-inner { gap: 26px; padding: 36px 40px 28px; }
  .mib-brand { font-size: 26px; }
  .mib-body { gap: 28px; }
  .mib-figure img { max-height: 240px; }
  .mib-headline { font-size: 40px; }
  .mib-subhead { font-size: 15px; }
  .mib-cta { margin: 4px 0 0; font-size: 16px; }
  .mib-footnote { padding: 12px 40px 20px; font-size: 11px; }
}

/* ---- Narrow viewports: stack, shrink type ----
   The card must never let content escape its own border. .mib-card-inner is
   the scroll container (flex:1 + min-height:0 above), so long copy scrolls
   inside the white frame instead of pushing the CTA past the bottom edge and
   colliding with the footnote. */
@media (max-width: 620px) {
  .mib-overlay { padding: 58px 12px 20px; align-items: flex-start; }
  .mib-card { min-height: 0; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); }
  .mib-card-inner { padding: 22px 20px 16px; gap: 16px; }
  .mib-brand { font-size: 20px; }
  .mib-body { flex-direction: column; align-items: stretch; gap: 16px; }
  .mib-figure { flex: 0 0 auto; }
  .mib-figure img { max-height: 150px; }
  .mib-headline { font-size: 25px; }
  .mib-subhead { font-size: 13.5px; }
  .mib-cta { font-size: 14.5px; }
  .mib-footnote { padding: 10px 20px 14px; font-size: 10.5px; }
  .mib-close { top: -44px; right: -2px; }
}

/* Very narrow (≤380px): tighten further so typical copy needs no scroll. */
@media (max-width: 380px) {
  .mib-overlay { padding: 52px 10px 16px; }
  .mib-card { border-width: 8px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
  .mib-card-inner { padding: 18px 16px 14px; gap: 13px; }
  .mib-brand { font-size: 18px; }
  .mib-figure img { max-height: 128px; }
  .mib-headline { font-size: 22px; }
  .mib-subhead { font-size: 13px; }
  .mib-cta { font-size: 14px; }
  .mib-footnote { padding: 9px 16px 12px; }
  .mib-close { top: -42px; }
}

/* Short viewports (landscape phones): keep everything on screen.
   iter25DD — .mib-card's 380px min-height only gets cleared by the ≤620px
   width query, so a landscape phone (e.g. 740×400 — wide enough to miss that
   query, short enough to matter) kept a 380px card inside a 400px viewport.
   The overlay scrolled, but the close "×" started ABOVE the fold: the one
   control that must always be reachable was the first thing off-screen.
   Clear the min-height and cap against the viewport here too. */
@media (max-height: 560px) {
  .mib-overlay { padding: 46px 12px 14px; align-items: flex-start; }
  .mib-card {
    min-height: 0;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
  }
  .mib-card-inner { gap: 12px; padding: 20px 24px 14px; }
  .mib-brand { font-size: 20px; }
  .mib-figure img { max-height: 120px; }
  .mib-headline { font-size: 24px; }
  .mib-subhead { font-size: 13.5px; }
  .mib-cta { font-size: 14.5px; }
  .mib-footnote { padding: 9px 24px 12px; font-size: 10.5px; }
  .mib-close { top: -38px; }
}