/* AI image disclosure — EU AI Act Art. 50(4).
   Markup is injected server-side by includes/ai-image-label.php:
     <span class="ai-shot"><img …><span class="ai-mark"><img … ></span></span>

   .ai-shot MUST NOT generate a box. `display: contents` makes the wrapper
   layout-invisible, so the photo stays a direct layout child of its container and
   is sized exactly as before.

   Do not give this an inline-block/relative box. That was tried on 2026-08-03 and
   broke the brand slogan stamp: `.has-slogan::after` (assets/css/components/content/
   slogan.css) is positioned against `.img-wrap`, and once the wrapper stopped the
   photo from filling that wrap, the gold stamp anchored below the image instead of
   inside its corner. */
.ai-shot {
  display: contents;
}

/* With `display: contents` the marker resolves against the nearest positioned
   ancestor. The site's image containers (.img-wrap, .s1-bg-wrap) are already
   position:relative; this gives any other container the same anchor without
   otherwise changing its layout. Zero-specificity so an explicit `position` wins. */
:where(*:has(> .ai-shot)) {
  position: relative;
}

/* The Commission's Basic icon, bottom-left inside the photo. Never an overlay ON
   the marking — the marking is the topmost element in the slot. */
.ai-shot > .ai-mark {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

/* !important on the dimensions only: this site has many broad rules such as
   `.content img { width: 100% }` that would otherwise stretch the disclosure icon
   to the full width of the photo. The marking has to stay the size we set. */
.ai-shot > .ai-mark > img {
  display: block;
  /* `position` needs !important as well: the ported .cy-np pages carry an inline
     <style> with `.cy-np .ph img { position: absolute; inset: 0 }`, which has the
     SAME specificity as this rule and wins on source order because the inline block
     comes after this stylesheet. Left alone it rips the icon out of flow and
     collapses .ai-mark to 0×0. */
  position: static !important;
  inset: auto !important;
  width: 26px !important;
  height: 26px !important;
  max-width: none;
  min-width: 0;
  object-fit: contain;
  /* Keeps the mark legible over light areas of a photo. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

@media (max-width: 640px) {
  .ai-shot > .ai-mark { left: 6px; bottom: 6px; }
  .ai-shot > .ai-mark > img { width: 20px !important; height: 20px !important; }
}