/* Mini heroes: supporting concept illustrations (staging, 6 Oct 2026).
   The full transparent canvas is always shown: contain, never cover, no negative offsets, no transforms.
   Breathing room comes from the wrapper's padding, not from cropping. */
.mh{display:block;box-sizing:border-box;width:100%;margin:0;padding:6px;line-height:0;pointer-events:none}
.mh picture{display:block}
.mh img{display:block;width:100%;height:auto;aspect-ratio:960/638;object-fit:contain;object-position:center;max-width:100%}

.mh--card{max-width:300px;margin:0 auto 12px 0}
.mh--row{max-width:200px;margin:0 0 10px 0}
.mh--section{max-width:420px;margin:6px 0 22px 0}
.mh--cta{max-width:300px;margin:0 0 14px 0}
.mh--marker{width:120px;max-width:120px;padding:2px;margin:0 0 6px 0}

/* Groups of section visuals sit side by side on wide screens and stack on narrow ones. */
.mh-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:6px 0 22px;max-width:1100px}
.mh-strip .mh{max-width:340px;margin:0}

/* Table cells: keep the picture small and above the cell text. */
td .mh,th .mh{max-width:170px;margin:0 0 8px 0}

@media (max-width:759px){
  .mh--card,.mh--section,.mh--cta{max-width:min(100%,360px)}
  .mh--row{max-width:min(70%,240px)}
  .mh-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .mh-strip{grid-template-columns:minmax(0,1fr)}
}
@media print{.mh{display:none}}

/* Research questions (Q01-Q08): the card is a flex row, so the picture must not be squeezed. Desktop: fixed column
   beside the question. Narrow screens: the picture takes its own line above the question. */
.se315c5>.mh{flex:0 0 150px;max-width:150px;margin:0}
@media (max-width:759px){
  .se315c5{flex-wrap:wrap}
  .se315c5>.mh{flex:0 0 100%;max-width:220px}
}