/*
 * EU AI Act Art. 50(4) disclosure badge.
 *
 * Art. 50(5) requires the disclosure to be "clear and distinguishable" and to conform
 * to accessibility requirements. That rules out low-opacity styling: the badge sits on
 * a solid scrim so contrast holds over any photograph, and it stays real text so
 * screen readers announce it.
 *
 * Note the badge text lives in the DOM, NOT in CSS content — generated content is not
 * reliably exposed to assistive technology.
 */

[data-ai-labelled] {
    position: relative;
}

/*
 * Positioning host. The badge anchors to this rather than to the figure or row, because
 * an absolutely positioned element aligns to its container's PADDING box — and Page
 * Builder puts padding and margins on figures, which pushed the badge outside the
 * picture. Wrapping the image means the host's box IS the image's box.
 *
 * line-height:0 removes the inline descender gap that would otherwise leave a few pixels
 * between the bottom of the image and the bottom of the host.
 */
.ai-image-label-host {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    /* Never let the badge stick out past the picture's edge. */
    overflow: hidden;
}

.ai-image-label-host > img {
    max-width: 100%;
    display: block;
}

/*
 * A Page Builder image emits a desktop and a mobile <img> and hides the one that does
 * not apply. The host inherits that class so it disappears with its image, leaving
 * exactly one badge visible even though two exist in the markup.
 */
.ai-image-label-host.pagebuilder-mobile-hidden,
.ai-image-label-host.pagebuilder-mobile-only {
    max-width: 100%;
}

.ai-image-label {
    position: absolute;
    z-index: 2;
    margin: 8px;
    padding: 4px 8px;
    border-radius: 3px;
    background: rgba(17, 17, 17, 0.82);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
    /* Never swallow a click meant for the banner or link underneath. */
    pointer-events: none;
}

/*
 * Carries the disclosure for CSS backgrounds, which have no alt attribute. Hidden
 * visually but NOT from assistive technology — display:none or visibility:hidden would
 * remove it from the accessibility tree, which is the opposite of what is needed.
 */
.ai-image-label-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ai-image-label--bottom_right {
    right: 0;
    bottom: 0;
}

.ai-image-label--bottom_left {
    left: 0;
    bottom: 0;
}

.ai-image-label--top_right {
    top: 0;
    right: 0;
}

.ai-image-label--top_left {
    top: 0;
    left: 0;
}

@media (max-width: 767px) {
    .ai-image-label {
        margin: 5px;
        padding: 3px 6px;
        font-size: 11px;
    }
}

/* Windows high-contrast: keep the disclosure legible when colours are overridden. */
@media (forced-colors: active) {
    .ai-image-label {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
        box-shadow: none;
    }
}

/* The disclosure obligation does not stop at the screen. */
@media print {
    .ai-image-label {
        background: #000;
        color: #fff;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}