/* Media badges: photo credit (bottom right) and AI / Symbolbild label (bottom left).
   Rendered by EXT:starnberger_seeleben Resources/Private/Partials/Media/BadgeStrip.html.
   Hand-written on purpose (not part of the Grunt/SCSS pipeline). */
.sl-media-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.sl-media-frame--block {
  display: block;
  line-height: 0; /* no inline gap below the image, so the badge hugs the picture */
}

.sl-media-badge {
  position: absolute;
  bottom: 0.5rem;
  z-index: 1;
  box-sizing: border-box;
  max-width: calc(100% - 1rem);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.sl-media-badge--credit {
  right: 0.5rem;
}

.sl-media-badge--ai {
  left: 0.5rem;
  z-index: 2;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.sl-media-badge--credit-shared {
  max-width: calc(50% - 0.75rem);
}

/* The icon sits inside image containers whose descendant rules (e.g. ".foo img { width: 100% }")
   would otherwise blow it up; higher specificity plus !important keeps it at text height. */
.sl-media-badge img.sl-media-badge__icon {
  display: inline-block !important;
  width: auto !important;
  height: 1.6em !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0.3em 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain !important;
  vertical-align: middle;
}

.sl-media-badge--compact {
  bottom: 0.35rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.6875rem;
}

.sl-media-badge--compact.sl-media-badge--credit {
  right: 0.35rem;
}

.sl-media-badge--compact.sl-media-badge--ai {
  left: 0.35rem;
}