/* ═══════════════════════════════════════
   AI Transparency Tags – Frontend Styles
   ═══════════════════════════════════════ */

/* ─── Wrapper ─── */
.ait-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.ait-wrapper > img,
.ait-wrapper > video {
    display: block;
    width: 100%;
    height: auto;
}

/* ─── Overlay Container ─── */
.ait-overlay {
    position: absolute;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ait-tag-gap, 6px);
    pointer-events: auto;
    transform: rotate(var(--ait-tag-rotation, 0deg));
    transform-origin: center center;
}

/* Richtung */
.ait-overlay--horizontal {
    flex-direction: row;
    align-items: center;
}

.ait-overlay--vertical {
    flex-direction: column;
    align-items: flex-start;
}

/* ─── Preset-Positionen ─── */
.ait-overlay--top-left {
    top: var(--ait-pos-y, 10px);
    left: var(--ait-pos-x, 10px);
}

.ait-overlay--top-right {
    top: var(--ait-pos-y, 10px);
    right: var(--ait-pos-x, 10px);
}

.ait-overlay--bottom-left {
    bottom: var(--ait-pos-y, 10px);
    left: var(--ait-pos-x, 10px);
}

.ait-overlay--bottom-right {
    bottom: var(--ait-pos-y, 10px);
    right: var(--ait-pos-x, 10px);
}

.ait-overlay--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--ait-tag-rotation, 0deg));
}

/* ─── Hover-Modus ─── */
.ait-overlay--hover {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ait-wrapper:hover .ait-overlay--hover,
.ait-wrapper:focus-within .ait-overlay--hover {
    opacity: 1;
}

/* ─── Tag: Glassmorphism Pill ─── */
.ait-tag--pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--ait-pill-py, 6px) var(--ait-pill-px, 12px);
    background: var(--ait-pill-bg, rgba(0, 0, 0, 0.35));
    color: var(--ait-pill-color, #ffffff);
    border: 1px solid var(--ait-pill-border, rgba(255, 255, 255, 0.18));
    border-radius: var(--ait-pill-radius, 20px);
    backdrop-filter: blur(var(--ait-pill-blur, 12px));
    -webkit-backdrop-filter: blur(var(--ait-pill-blur, 12px));
    box-shadow: var(--ait-pill-shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
    font-size: var(--ait-pill-font-size, 12px);
    font-family: var(--ait-pill-font-family, inherit);
    font-weight: var(--ait-pill-font-weight, 500);
    line-height: 1.3;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ait-tag--pill:hover {
    transform: scale(1.03);
}

/* ─── Tag: Reiner Text ─── */
.ait-tag--text {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    color: var(--ait-cat-color, var(--ait-pill-color, #ffffff));
    font-size: calc(var(--ait-pill-font-size, 12px) * 0.85);
    font-family: var(--ait-pill-font-family, inherit);
    font-weight: var(--ait-pill-font-weight, 500);
    line-height: 1.3;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    cursor: default;
    user-select: none;
}

/* ─── Tag: Wasserzeichen ─── */
.ait-tag--watermark {
    display: inline-block;
    line-height: 0;
}

.ait-watermark-img {
    display: block;
    max-width: 100%;
    height: auto;
    pointer-events: none;
}

/* ─── Links ─── */
.ait-overlay__link,
.ait-tag__link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.ait-overlay__link:hover .ait-tag--pill,
.ait-tag__link:hover .ait-tag--pill {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.ait-overlay__link:focus-visible,
.ait-tag__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--ait-pill-radius, 20px);
}

/* ─── Elementor Pro Gallery Items (div-based thumbnails, NO img tags) ─── */
a.e-gallery-item {
    position: relative !important;
}

a.e-gallery-item > .ait-overlay {
    z-index: 3; /* above e-gallery-image and elementor-gallery-item__overlay */
    pointer-events: none;
}

a.e-gallery-item > .ait-overlay .ait-tag__link {
    pointer-events: auto;
}

/* Classic WP Gallery */
.gallery-item .gallery-icon {
    position: relative;
}

/* BG-Image Sections: Overlay must span full size */
.elementor-section > .ait-overlay,
.elementor-column > .ait-overlay,
.e-con > .ait-overlay,
[data-elementor-type] > .ait-overlay {
    z-index: 5;
}

/* ─── Elementor Lightbox ─── */
.elementor-lightbox .ait-overlay,
.dialog-lightbox-widget .ait-overlay,
.elementor-slideshow .ait-overlay {
    z-index: 20;
    pointer-events: none;
}

/* DO NOT touch swiper-slide position - breaks swiper layout */
/* Instead target the image wrapper inside */
.elementor-lightbox .ait-lightbox-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Elementor Swiper Slides */
.elementor-image-carousel .swiper-slide .ait-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover visibility also on gallery items (not just ait-wrapper) */
a.e-gallery-item:hover > .ait-overlay--hover {
    opacity: 1;
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
    .ait-tag--pill {
        font-size: calc(var(--ait-pill-font-size, 12px) * 0.8);
        padding: calc(var(--ait-pill-py, 6px) * 0.7) calc(var(--ait-pill-px, 12px) * 0.7);
    }

    .ait-tag--text {
        font-size: calc(var(--ait-pill-font-size, 12px) * 0.7);
    }

    .ait-overlay {
        gap: calc(var(--ait-tag-gap, 6px) * 0.7);
    }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .ait-overlay--hover {
        transition: none;
    }

    .ait-tag--pill,
    .ait-tag--pill:hover {
        transition: none;
        transform: none;
    }
}

/* ─── Print ─── */
@media print {
    .ait-overlay {
        opacity: 1 !important;
    }

    .ait-tag--pill {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: none;
    }
}