/*
 * MtAiMediaLabel 1.0.2
 * Kennzeichnung KI-generierter bzw. KI-bearbeiteter Medien im Shopware-Storefront.
 *
 * Das Label wird ausschliesslich visuell ueber die vorhandene Shopware-Bildausgabe
 * gelegt. Bilddateien und Thumbnails bleiben unveraendert.
 *
 * Aufbau:
 *   .mt-ai-media-anchor   fuellt den Shopware-Bildcontainer und dient als Bezugsgroesse
 *   .mt-ai-media-frame    bildet die tatsaechlich dargestellte Bildflaeche ab
 *   .mt-ai-media-badge    das Label, positioniert am Rand des Rahmens
 */

/* ------------------------------------------------------------------
 * Anker
 *
 * Deckt den Shopware-Bildcontainer vollstaendig ab und stellt ueber
 * container-type: size die Container-Abmessungen als cqw / cqh bereit.
 * Nur damit laesst sich die eingepasste Bildflaeche in reinem CSS berechnen,
 * denn dafuer muessen Containerbreite und -hoehe miteinander verglichen werden.
 * ------------------------------------------------------------------ */

.mt-ai-media-anchor {
    position: absolute;
    inset: 0;
    z-index: 1;
    container-type: size;
    pointer-events: none;
}

/* ------------------------------------------------------------------
 * Rahmen
 *
 * Der Rahmen bildet die dargestellte Bildflaeche ab, nicht den umgebenden
 * Container. Das ist notwendig, weil Shopware Bilder je nach Anzeigemodus
 * einpasst (object-fit: contain / scale-down) oder der Container per min-height
 * groesser ist als das Bild. Ohne diese Korrektur steht das Label neben oder
 * unter dem sichtbaren Bild.
 *
 * Grundlage sind die Bildabmessungen aus den Media-Metadaten, die die Komponente
 * als --mt-ai-media-w / --mt-ai-media-h setzt.
 * ------------------------------------------------------------------ */

.mt-ai-media-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

/* Bild wird eingepasst und zentriert (object-fit: contain / scale-down oder ein
   per max-width/max-height begrenztes Bild).

   Die Breite ist der kleinere der beiden Werte "volle Containerbreite" und
   "Containerhoehe mal Seitenverhaeltnis". Das ist exakt dieselbe Rechnung, die
   object-fit: contain durchfuehrt. Die Hoehe folgt ueber aspect-ratio.

   Die vorangehende Deklaration width: 100% ist der Rueckfall fuer Browser ohne
   Container-Query-Einheiten. Das Label steht dann waagerecht korrekt und
   senkrecht mittig; ein Layoutfehler entsteht nicht. */
.mt-ai-media-frame--fit {
    width: 100%;
    height: auto;
    aspect-ratio: var(--mt-ai-media-w, 1) / var(--mt-ai-media-h, 1);
    width: min(100cqw, calc(100cqh * var(--mt-ai-media-w, 1) / var(--mt-ai-media-h, 1)));
}

/* Bild fuellt den Container vollstaendig (object-fit: cover / stretch).
   Container und Bildflaeche sind deckungsgleich. Auch der Rueckfall, wenn keine
   Media-Metadaten vorliegen. */
.mt-ai-media-frame--fill {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

/* Bild steht im normalen Fluss oben links im Container (Anzeigemodus "standard"). */
.mt-ai-media-frame--flow {
    top: 0;
    left: 0;
    width: 100%;
    max-width: var(--mt-ai-media-width, 100%);
    height: auto;
    aspect-ratio: var(--mt-ai-media-w, 1) / var(--mt-ai-media-h, 1);
    transform: none;
}

/* ------------------------------------------------------------------
 * Label
 *
 * Breite, Randabstand und Ecke stammen aus der Plugin-Konfiguration und werden
 * von der Komponente als CSS-Variablen bzw. Modifier-Klasse gesetzt.
 * Die Prozentangaben beziehen sich auf den Rahmen, also auf die dargestellte
 * Bildflaeche. Dadurch skaliert das Label automatisch mit der Bildgroesse,
 * ohne JavaScript und ohne Kenntnis der physischen Thumbnail-Datei.
 * ------------------------------------------------------------------ */

.mt-ai-media-badge {
    position: absolute;
    display: block;
    width: var(--mt-ai-label-width, 25%);
    height: auto;

    /* Untergrenze fuer die Lesbarkeit, Obergrenze gegen Ueberdeckung.
       Auf sehr kleinen Bildern gewinnt die Obergrenze, damit das Label das
       Motiv nicht dominiert. */
    min-width: min(84px, 46%);
    max-width: 46%;

    /* Das Label darf niemals Links, Slider, Zoom oder Touch-Gesten blockieren. */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.mt-ai-media-badge--bottom-right {
    right: var(--mt-ai-label-offset, 3%);
    bottom: var(--mt-ai-label-offset, 3%);
}

.mt-ai-media-badge--bottom-left {
    left: var(--mt-ai-label-offset, 3%);
    bottom: var(--mt-ai-label-offset, 3%);
}

.mt-ai-media-badge--top-right {
    top: var(--mt-ai-label-offset, 3%);
    right: var(--mt-ai-label-offset, 3%);
}

.mt-ai-media-badge--top-left {
    top: var(--mt-ai-label-offset, 3%);
    left: var(--mt-ai-label-offset, 3%);
}

/* Kleine Darstellungen, z. B. Galerie-Navigation (ca. 75 x 75 px).
   Hier wird die quadratische AI-Marke verwendet, das breite Label waere
   unleserlich. Breite und Abstand sind bewusst unabhaengig von der
   Plugin-Konfiguration. */
.mt-ai-media-badge--sm {
    --mt-ai-label-offset: 5%;

    width: clamp(18px, 26%, 34px);
    min-width: 0;
    max-width: 40%;
}

/* Sehr kleine Darstellungen, z. B. Search Suggest (35 x 35 px). */
.mt-ai-media-badge--xs {
    --mt-ai-label-offset: 3%;

    width: clamp(12px, 34%, 16px);
    min-width: 0;
    max-width: 46%;
}

/* ------------------------------------------------------------------
 * Bildcontainer, die im Standard-Theme keine eigene Positionierung besitzen.
 * Alle uebrigen genutzten Container (.product-image-wrapper, .cms-image-container,
 * .gallery-slider-item, .gallery-slider-single-image,
 * .gallery-slider-thumbnails-item-inner) sind bereits position: relative.
 *
 * position: relative allein veraendert den normalen Textfluss nicht und wirkt
 * sich daher nicht auf bestehende Layouts aus.
 * ------------------------------------------------------------------ */

.image-slider-item-container,
.image-slider-link,
.search-suggest-product-image-container {
    position: relative;
}