/**
 * EU AI Act Ready - Media Transparency Styles
 *
 * Organization:
 * 1. Media Container Base
 * 2. Caption Style (Default)
 * 3. Badge Style
 * 4. Overlay Style
 * 5. Border Style
 * 6. WordPress Integration
 * 7. Gallery Support
 * 7b. Bricks Builder Support
 * 8. Animations
 * 9. Responsive Design
 * 10. Accessibility & Print
 * 11. Label Placement
 * 12. Label Size
 */

@use '../variables' as *;
@use '../mixins' as *;

/* ========================================
   1. MEDIA CONTAINER BASE
   ======================================== */

.ai-media-container {
    position: relative;
    display: inline-block;

    img {
        display: block;
    }

    // Clear floats
    &::after {
        content: "";
        display: table;
        clear: both;
    }
}


/*
 * Keeps a labelled image inside its container on themes that do not constrain images
 * themselves.
 *
 * Deliberately not applied to builder-placed images: a builder sizes those itself, and
 * because these declarations are !important they would win over it. A hero using
 * height:100% with object-fit:cover would snap back to its natural aspect ratio and
 * overflow everything below it.
 */
.ai-media-container:not(.ai-media-bricks) img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========================================
   2. CAPTION STYLE (DEFAULT)
   ======================================== */

.ai-media-caption {
    @include flex-align(center);
    gap: $gap-sm;
    padding: $spacing-sm $spacing-md;
    background: $color-primary-light;
    @include border-left-accent($color-primary, 3px);
    margin-top: $spacing-sm;
    font-size: $font-size-lg;
    color: $color-text-light;
    border-radius: 0 $radius-base $radius-base 0;

    .ai-icon {
        font-size: $font-size-md;
    }

    .ai-text {
        font-weight: $font-weight-medium;
    }
}

/* ========================================
   3. BADGE STYLE
   ======================================== */

.ai-media-badge {
    position: absolute;
    top: $spacing-lg;
    right: $spacing-lg;
    @include badge-pill(rgba($color-primary, 0.95));
    padding: $badge-padding-base;
    gap: $gap-xs;
    box-shadow: $shadow-lg;
    z-index: $z-dropdown;
    cursor: help;
    transition: $transition-transform, $transition-box-shadow;
    font-size: $font-size-md;

    &:hover {
        transform: scale(1.05);
        box-shadow: $shadow-2xl;
    }

    .ai-icon {
        font-size: $font-size-md;
    }

    .ai-text {
        @include text-uppercase-spaced;
        font-size: $font-size-sm;
    }
}

/* ========================================
   4. OVERLAY STYLE
   ======================================== */

.ai-media-overlay {
    @include absolute-cover;
    background: linear-gradient(
        to bottom,
        $color-overlay-dark 0%,
        rgba($color-black, 0) 30%,
        rgba($color-black, 0) 70%,
        $color-overlay-dark 100%
    );
    pointer-events: none;
    border-radius: inherit;
}

.ai-overlay-badge {
    position: absolute;
    top: $spacing-lg;
    left: $spacing-lg;
    @include badge-pill(rgba($color-white, 0.95), $color-primary);
    padding: $spacing-sm $spacing-md;
    gap: $gap-sm;
    box-shadow: $shadow-lg;
    border-radius: $radius-lg;
    font-size: $font-size-md;

    .ai-icon {
        font-size: $font-size-md;
    }
}

/* ========================================
   5. BORDER STYLE
   ======================================== */

.ai-media-container:has(.ai-media-border-label) {
    @include gradient-border($gradient-primary, 3px);

    img {
        border-radius: $radius-sm;
    }
}

.ai-media-border-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: $gradient-primary;
    color: $color-white;
    padding: $spacing-xs $spacing-md;
    border-radius: $radius-2xl;
    font-size: $font-size-base;
    font-weight: $font-weight-semibold;
    white-space: nowrap;
    box-shadow: $shadow-lg;
}


/* ========================================
   6. WORDPRESS INTEGRATION
   ======================================== */

/* Gutenberg Editor Compatibility */
.block-editor {
    .ai-media-container {
        margin: $spacing-lg 0;
    }

    .ai-media-badge,
    .ai-overlay-badge {
        pointer-events: auto;
    }
}

/* WordPress Alignment Classes */
.alignleft,
.alignright,
.aligncenter {
    .ai-media-container {
        max-width: 100%;
    }
}

.alignleft .ai-media-container {
    float: left;
    margin: 5px $spacing-xl $spacing-xl 0;
}

.alignright .ai-media-container {
    float: right;
    margin: 5px 0 $spacing-xl $spacing-xl;
}

.aligncenter .ai-media-container {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   7. GALLERY SUPPORT
   ======================================== */

.gallery {
    .ai-media-container {
        display: inline-block;
        margin: 5px;
    }
}

.gallery-item {
    .ai-media-badge {
        top: 5px;
        right: 5px;
        padding: $badge-padding-sm;
        font-size: $font-size-xs;
    }
}

/* ========================================
   7b. BRICKS BUILDER SUPPORT
   ======================================== */

/*
 * The label container lands on one of two sides of the Bricks element root:
 *
 *   1. It wraps the root. That is the bare <img> carrying .brxe-image and #brxe-{id},
 *      a <picture> root when Sources are set without a link, or the link anchor.
 *   2. It sits inside the root, between root and image. A caption, overlay, gradient or
 *      custom tag makes Bricks emit its own <div>/<figure>/<a> and produces this.
 *
 * Either way the container is a box that was not there when the theme was written, so it
 * has to stay layout-neutral - and the two placements need opposite treatment, because
 * Bricks sizes the image differently in each:
 *
 *   wraps the root: the root sizes itself, since only the generic
 *                   `img { max-width: 100%; height: auto }` applies to it. A container
 *                   stretched to 100% would be wider than the image and drag the badge
 *                   off it, so the container shrinks to the root instead.
 *   inside the root: the image matches `:where(.brxe-image) img { width: 100%; height: 100% }`
 *                   and fills its parent - which is now the container. So the container
 *                   has to fill the root, or the image cannot reach the size the theme
 *                   intended. This is what a hero needs: full height, then object-fit
 *                   does the cropping.
 *
 * Which placement we are in is readable from the container: wrapping it contains the
 * brxe- root, inside it does not. The .ai-media-bricks class is still what gates both,
 * since a brxe- selector alone would also catch images inside the Post Content element,
 * which are ordinary content images.
 *
 * Where :has() is unsupported both rules drop and the container keeps the inline-block
 * above, which is the shape 1 behaviour and matches how the plugin behaved before.
 */
.ai-media-bricks:has([class*="brxe-"]) {
    display: inline-block;
    max-width: 100%;
}

.ai-media-bricks:not(:has([class*="brxe-"])) {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
}

/*
 * CSS background images. The badge is injected straight into the element root, so that
 * root has to provide the positioning context the badge is placed against.
 *
 * This turns a static element into a positioned one, which can change stacking order.
 * Override it per element if that matters.
 */
[data-euaiact-bg-done] {
    position: relative;
}

/*
 * The badge is out of flow, so it never becomes a flex or grid item. It is inserted as
 * the first child, which shifts :first-child selectors on that element by one.
 *
 * Corners are deliberately left to the placement classes in section 11. Setting them
 * here would win on source order at equal specificity and pin every background badge to
 * one corner.
 */
[data-euaiact-bg-done] > .ai-media-badge,
[data-euaiact-bg-done] > .ai-media-overlay,
[data-euaiact-bg-done] > .ai-media-border-label {
    position: absolute;
    z-index: $z-dropdown;
}

[data-euaiact-bg-done] > .ai-media-overlay {
    inset: 0;
}

/* ========================================
   8. ANIMATIONS
   ======================================== */

@keyframes fadeInLabel {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-media-caption,
.ai-media-badge,
.ai-overlay-badge {
    animation: fadeInLabel $transition-base $transition-ease-out;
}

/* ========================================
   9. RESPONSIVE DESIGN
   ======================================== */

@include mobile {
    .ai-media-badge {
        top: 5px;
        right: 5px;
        padding: $button-padding-sm;
        font-size: $font-size-sm;
    }

    .ai-media-caption {
        font-size: $font-size-md;
        padding: $spacing-sm $spacing-lg;
    }

    .ai-overlay-badge {
        padding: $button-padding-sm;
        font-size: $font-size-base;
    }
}

/* ========================================
   10. ACCESSIBILITY & PRINT
   ======================================== */

/* Accessibility - Focus States */
.ai-media-badge,
.ai-overlay-badge,
.ai-media-caption {
    @include focus-outline($color-primary);
}

/* Screen Reader Text */
.ai-media-sr-only {
    @include screen-reader-only;
}

/* High Contrast Mode */
@include high-contrast {
    .ai-media-badge {
        border: 2px solid $color-white;
    }

    .ai-media-caption {
        border-width: 3px;
        font-weight: $font-weight-bold;
    }
}

/* Reduced Motion */
@include reduced-motion {
    .ai-media-badge,
    .ai-media-caption,
    .ai-overlay-badge {
        animation: none;
        transition: none;
    }
}

/* Print Styles */
@include print {
    .ai-media-badge,
    .ai-media-overlay {
        display: none !important;
    }

    .ai-media-caption {
        background: $color-white;
        border: 1px solid $color-black;
        color: $color-black;

        &::before {
            content: "AI-Generated Image: ";
            font-weight: $font-weight-bold;
        }
    }
}

/* ========================================
   11. LABEL PLACEMENT
   ======================================== */

/*
 * Last in the file on purpose: these are overrides, and several later blocks - the
 * gallery rules above, for instance - set corners at the same specificity. Source
 * order decides there, so placement has to come after everything it overrides.
 *
 * Applied on top of the per-style defaults, so a site that never picks a placement keeps
 * the position its label style has always had.
 *
 * The caption style is deliberately absent: it sits below the image, not on it.
 */
.ai-media-badge,
.ai-overlay-badge {
    &.ai-media-pos-top-left {
        top: $spacing-lg;
        left: $spacing-lg;
        right: auto;
        bottom: auto;
    }

    &.ai-media-pos-top-right {
        top: $spacing-lg;
        right: $spacing-lg;
        left: auto;
        bottom: auto;
    }

    &.ai-media-pos-bottom-left {
        bottom: $spacing-lg;
        left: $spacing-lg;
        top: auto;
        right: auto;
    }

    &.ai-media-pos-bottom-right {
        bottom: $spacing-lg;
        right: $spacing-lg;
        top: auto;
        left: auto;
    }
}

/*
 * The border label straddles the frame rather than sitting inside it, so it keeps its
 * offset onto the edge and only changes which corner it hangs from. The default centring
 * transform has to be cleared, otherwise the label sits half outside its corner.
 */
.ai-media-border-label {
    &.ai-media-pos-top-left,
    &.ai-media-pos-top-right,
    &.ai-media-pos-bottom-left,
    &.ai-media-pos-bottom-right {
        transform: none;
    }

    &.ai-media-pos-top-left {
        top: -12px;
        left: $spacing-lg;
        right: auto;
        bottom: auto;
    }

    &.ai-media-pos-top-right {
        top: -12px;
        right: $spacing-lg;
        left: auto;
        bottom: auto;
    }

    &.ai-media-pos-bottom-left {
        bottom: -12px;
        left: $spacing-lg;
        top: auto;
        right: auto;
    }

    &.ai-media-pos-bottom-right {
        bottom: -12px;
        right: $spacing-lg;
        top: auto;
        left: auto;
    }
}

/* ========================================
   12. LABEL SIZE
   ======================================== */

/*
 * The tooltip is optional, so the cursor that advertises one has to be too. Keyed off the
 * attribute rather than a class: the markup omits `title` entirely when tooltips are
 * switched off, which makes this true by construction.
 */
.ai-media-badge:not([title]),
.ai-overlay-badge:not([title]),
.ai-media-border-label:not([title]) {
    cursor: default;
}

/*
 * Compact turns the label from a sticker placed on the image into an overlay belonging to
 * it: smaller type, no shouting, translucent rather than solid, and tucked closer to the
 * edge.
 */
$badge-inset-compact: $spacing-sm;

@mixin label-compact-pill {
    padding: 2px 6px;
    gap: 3px;
    background: rgba($color-black, 0.55);
    backdrop-filter: blur(4px);
    box-shadow: none;
    border-radius: $radius-base;
    color: $color-white;
    font-size: 9px;

    /*
     * The icon is an inline SVG carrying width="18" height="18" attributes, so font-size
     * cannot reach it.
     */
    .ai-icon svg {
        width: 11px;
        height: 11px;
    }

    .ai-text {
        font-size: 9px;
        text-transform: none;
        letter-spacing: 0.3px;
    }
}

/*
 * Two rules per corner, and both are needed.
 *
 * The base rule (0,2,0) covers the shipped default, where the placement setting is
 * "Unchanged" and the markup carries no `ai-media-pos-*` class at all. It beats the
 * mobile block in section 9 on specificity, which is a bare `.ai-media-badge` at (0,1,0).
 * Against `.gallery-item .ai-media-badge` in section 7 it ties at (0,2,0) and wins only
 * on source order - so this section has to stay below section 7, like section 11 does.
 *
 * The combined rules (0,3,0) then outrank the placement classes in section 11 (0,2,0),
 * and each resets all four sides: without that, the base rule above would leave a
 * bottom-placed compact badge with the `top` it sets.
 */
.ai-media-badge.ai-media-size-compact {
    @include label-compact-pill;

    top: $badge-inset-compact;
    right: $badge-inset-compact;

    &:hover {
        transform: none;
        box-shadow: none;
    }
}

.ai-overlay-badge.ai-media-size-compact {
    @include label-compact-pill;

    top: $badge-inset-compact;
    left: $badge-inset-compact;
}

.ai-media-badge,
.ai-overlay-badge {
    &.ai-media-size-compact.ai-media-pos-top-left {
        top: $badge-inset-compact;
        left: $badge-inset-compact;
        right: auto;
        bottom: auto;
    }

    &.ai-media-size-compact.ai-media-pos-top-right {
        top: $badge-inset-compact;
        right: $badge-inset-compact;
        left: auto;
        bottom: auto;
    }

    &.ai-media-size-compact.ai-media-pos-bottom-left {
        bottom: $badge-inset-compact;
        left: $badge-inset-compact;
        top: auto;
        right: auto;
    }

    &.ai-media-size-compact.ai-media-pos-bottom-right {
        bottom: $badge-inset-compact;
        right: $badge-inset-compact;
        top: auto;
        left: auto;
    }
}

/*
 * The border label straddles the frame, so it only loses weight - the offset onto the
 * edge is what makes the style read, and shrinking it would just look broken.
 */
.ai-media-border-label.ai-media-size-compact {
    padding: 1px $spacing-sm;
    font-size: 9px;
    font-weight: $font-weight-medium;
    box-shadow: none;

    .ai-icon svg {
        width: 11px;
        height: 11px;
    }
}

/* A caption sits below the image, so it shrinks in type and padding only. */
.ai-media-caption.ai-media-size-compact {
    padding: $spacing-xs $spacing-sm;
    font-size: 11px;

    .ai-icon svg {
        width: 12px;
        height: 12px;
    }
}