/* MMR Recraft brand icons (transparent blue→purple PNGs) + theme-adaptive
   backing. Icons ship transparent; on the dark (default) theme their chips get
   a white tile so they pop, and on the light theme the chips go transparent so
   the icon floats on the page (per the approved treatment). */

.mmr-ico { display: inline-block; object-fit: contain; vertical-align: middle; }
.megaico .mmr-ico { width: 22px; height: 22px; }
.t-frame .mmr-ico { width: 30px; height: 30px; opacity: .85; }

/* Content icon chips — white tile in dark (default), transparent in light. */
.megaico,
.t-pain-ic,
.t-trust-ic,
.res-itemicon,
.t-note-ic {
  background: #fff !important;
  border: 1px solid rgba(11, 15, 26, 0.06) !important;
  color: inherit !important;
}
[data-theme="light"] .megaico {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="light"] .t-pain-ic,
[data-theme="light"] .t-trust-ic,
[data-theme="light"] .res-itemicon,
[data-theme="light"] .t-note-ic {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Icons on the always-dark bands / converge stage keep a white tile in both
   themes so the blue→purple art stays legible on the deep navy. */
.t-band-ic,
.t-talk-ic,
.t-cicon {
  background: #fff !important;
  border: 1px solid rgba(11, 15, 26, 0.06) !important;
}
.t-cicon .mmr-ico { width: 48px; height: 48px; }
@media (max-width: 640px) { .t-cicon .mmr-ico { width: 34px; height: 34px; } }
.t-converge-logo .mmr-ico { width: 100%; height: 100%; }

/* ---- Template A media accents on mobile ----
   The blue offset block, stat badge, and note card are positioned for the
   desktop 2-column layout (offset -22px past the frame). On stacked mobile the
   media is full-width, so those pieces jut past the right edge and the accent
   box looks badly off-set. Keep them inside the frame on narrow screens. */
@media (max-width: 980px) {
  .t-media-wrap, .t-feature-media, .t-frame { max-width: 100% !important; width: 100% !important; }
  /* base .t-frame forces ~453px min-width via min-height:340 + aspect-ratio 4/3;
     drop the floor on mobile so the frame shrinks to its column (no overflow). */
  .t-frame:not(.t-frame--phone) { min-height: 0 !important; aspect-ratio: 16 / 10 !important; }
  .t-media-offset {
    right: 6% !important; left: auto !important; bottom: -14px !important;
    width: 74% !important; height: 58% !important;
  }
  .t-badge { right: 0 !important; }
  .t-note { left: 0 !important; }
}