/* v470 — category/media spacing and predictable mobile map selection.
   The image-to-label gap is explicit in RTL.  A selected map address may use
   the next lines, while the status chip tracks the rendered sheet height. */
.catgroup-head,
.catcard { gap: clamp(14px, 3.25vw, 18px); }

@media (max-width: 1024px) {
  .catgroup-head,
  .catcard { gap: 14px; }

  .map-stage:not(.has-expanded-card) .map-selected {
    max-height: min(44%, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 10px !important;
  }
  .map-selected .ms-row {
    display: block;
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.65;
  }
  .map-selected .ms-row::before {
    display: inline;
    margin-inline-end: 6px;
  }
  .map-stage.has-card .map-legend {
    bottom: calc(var(--map-selected-height, 180px) + 14px) !important;
  }
  .map-stage.has-expanded-card .map-selected {
    max-height: min(66%, 370px);
  }
}

@media (max-width: 420px) {
  .catgroup-head,
  .catcard { gap: 13px; }
}