/* EXT:media_labels: photo credit and AI disclosure / illustrative-image badges.
   Markup: Classes/Rendering/LabelRenderer.php (badges), Classes/ViewHelpers/FrameViewHelper.php
   (frame). Loaded by the ViewHelpers through the AssetCollector; switch it off with the site
   setting mediaLabels.includeCss and style the same classes yourself.

   Custom properties for integrators (on :root or any container):
     --media-labels-bg, --media-labels-fg   colours of the dark / light presets
     --media-labels-offset                  distance from the image edges (0.5rem)
     --media-labels-offset-compact          the same for compact badges (0.35rem)
     --media-labels-radius                  badge corner radius (4px)
     --media-labels-font-size               badge text size (0.75rem)
     --media-labels-font-size-compact       compact badge text size (0.6875rem) */

.media-labels-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

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

.media-labels {
  --media-labels-resolved-offset: var(--media-labels-offset, 0.5rem);
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-sizing: border-box;
  max-width: calc(100% - 2 * var(--media-labels-resolved-offset));
  line-height: 1.4;
  pointer-events: none;
}

.media-labels--compact {
  --media-labels-resolved-offset: var(--media-labels-offset-compact, 0.35rem);
}

/* The disclosure is never covered by the credit. */
.media-labels:has(.media-label--disclosure) {
  z-index: 2;
}

.media-labels--bottom-left {
  bottom: var(--media-labels-resolved-offset);
  left: var(--media-labels-resolved-offset);
  align-items: flex-start;
}

.media-labels--bottom-right {
  right: var(--media-labels-resolved-offset);
  bottom: var(--media-labels-resolved-offset);
  align-items: flex-end;
}

.media-labels--top-left {
  top: var(--media-labels-resolved-offset);
  left: var(--media-labels-resolved-offset);
  align-items: flex-start;
}

.media-labels--top-right {
  top: var(--media-labels-resolved-offset);
  right: var(--media-labels-resolved-offset);
  align-items: flex-end;
}

/* Credit and disclosure in opposite corners of the same edge: the credit gets half. */
.media-labels--shared-edge {
  max-width: calc(50% - 1.5 * var(--media-labels-resolved-offset));
}

.media-labels--style-dark {
  --media-labels-resolved-bg: var(--media-labels-bg, rgba(0, 0, 0, 0.55));
  --media-labels-resolved-fg: var(--media-labels-fg, #ffffff);
  --media-labels-resolved-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.media-labels--style-light {
  --media-labels-resolved-bg: var(--media-labels-bg, rgba(255, 255, 255, 0.85));
  --media-labels-resolved-fg: var(--media-labels-fg, #1a1a1a);
  --media-labels-resolved-shadow: none;
}

.media-labels--style-custom {
  --media-labels-resolved-bg: var(--media-labels-custom-bg, rgba(0, 0, 0, 0.55));
  --media-labels-resolved-fg: var(--media-labels-custom-fg, #ffffff);
  --media-labels-resolved-shadow: none;
}

.media-label {
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.15rem 0.5rem;
  border-radius: var(--media-labels-radius, 4px);
  background: var(--media-labels-resolved-bg);
  color: var(--media-labels-resolved-fg);
  font-size: var(--media-labels-font-size, 0.75rem);
  line-height: 1.4;
  text-shadow: var(--media-labels-resolved-shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The legally required disclosure is never truncated; it wraps instead. */
.media-label--disclosure {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.media-labels--compact .media-label {
  padding: 0.1rem 0.4rem;
  font-size: var(--media-labels-font-size-compact, 0.6875rem);
}

/* Caption line below the image instead of an overlay. */
.media-labels--below {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.75rem;
  max-width: none;
  margin-top: 0.25rem;
}

.media-labels--below .media-label {
  padding: 0;
  background: none;
  color: inherit;
  text-shadow: none;
  opacity: 0.8;
}