/* ==========================================================================
   AI DISCLOSURE CHIP
   --------------------------------------------------------------------------
   Widoczne ujawnienie dla obrazkow wygenerowanych/edytowanych AI
   (EU AI Act art. 50). Markup wstrzykiwany serwerowo przez filtr w index.php
   na podstawie ai_images.txt - nigdy przez JS, bo ujawnienie nie moze
   zalezec od wykonania skryptu.

   UWAGA: ten plik laduje sie SYNCHRONICZNIE w header.php, wbrew regule
   "components/* sa deferred". Celowo: chip jest elementem zgodnosciowym,
   nie moze pojawic sie z opoznieniem ani mignac bez stylu.

   Krycie tla 0.66 nad var(--navbar-bg) gwarantuje kontrast bialego tekstu
   >= 6:1 nawet gdy pod chipem jest czysta biel (najgorszy przypadek).
   ========================================================================== */

/* Domyslnie LEWY gorny rog, nie prawy. Powod zmierzony w przegladarce:
   przy szerokosci tabletu (834px) Bulmowe .columns wystaja ~12px za viewport
   (ujemne marginesy kolumn + .container bez paddingu), a overflow:hidden sekcji
   to obcina. Prawa krawedz kontenerow obrazkow jest wiec systemowo przycieta -
   obrazki traca tam kawalek tak samo jak chip. Lewa krawedz nigdy nie wystaje. */
.ai-tag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 5;

    display: inline-block;
    padding: 0.2rem 0.42rem;
    border-radius: 4px;

    background: rgba(20, 22, 26, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;

    /* obrazki czesto siedza w <a> - chip nie moze przechwytywac klikniec */
    pointer-events: none;
    user-select: none;
}

/* Wersja inline dla zdania wyjasniajacego w stopce - ten sam jezyk wizualny,
   ale w normalnym przeplywie tekstu, na ciemnym tle stopki. */
.ai-tag-inline {
    display: inline-block;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #ffffff;
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* Pelne zdanie dla czytnikow ekranu. Widoczny chip mowi tylko "AI",
   wyjasnienie skrotu jest dodatkowo w stopce. */
.ai-tag-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;
}


/* --------------------------------------------------------------------------
   KOTWICA POZYCJONOWANIA
   Chip jest position:absolute, wiec rodzic musi byc pozycjonowany. Wiekszosc
   kontenerow obrazkow ma juz position:relative; ponizsze go nie maja.
   Sprawdzone pomiarem: zaden z nich nie ma absolutnie pozycjonowanych
   dzieci, wiec dodanie relative nie przekotwiczy niczego istniejacego.
   -------------------------------------------------------------------------- */

.ov-ucp-pillar-img,
.tid-ecosystem-img-wrap,
.idn-img-card,
.idn-step-img,
.ov-ai-img-wrap,
.tls-hub-hero-img,
.pim-hero-img,
.cs-hero-img,
.cbam-hero-img,
.eco-hero-img,
.eco-layer-img,
.eco-svc-img,
.edn-hero-img-dark,
.eudr-hero-img,
.eudr-section-img,
.eudr-section-img-sm,
.hw-odr-image,
.ppwr-hero-img,
.rep-hero-img-dark,
.dc-fm-img,
.tid-acronym-img-wrap,
.train-intro-banner-wrap {
    position: relative;
}

/* Zabezpieczenie na przyszlosc: kazdy kontener, ktory dostanie chip a nie jest
   pozycjonowany, zlapie sie tutaj. Lista wyzej zostaje jako gwarancja dla
   przegladarek bez :has(). */
figure:has(> .ai-tag),
div:has(> .ai-tag),
picture:has(> .ai-tag),
span:has(> .ai-tag) {
    position: relative;
}


/* --------------------------------------------------------------------------
   KOLIZJE - kontenery, w ktorych lewy gorny rog jest juz zajety.
   Kazdy przypadek zmierzony w przegladarce w 3 viewportach.
   -------------------------------------------------------------------------- */

/* .of-product-card-tag siedzi w lewym gornym (top/left 1rem) - chip na prawo.
   Ten kontener jest kartą w gridzie, nie wystaje za viewport. */
.of-product-card-img-wrap > .ai-tag {
    left: auto;
    right: 0.6rem;
}

/* Labelki, ktore sa szerokimi pigulkami przy gornej krawedzi i przy waskim
   kontenerze zajmuja OBA gorne rogi - chip schodzi na dol.
   .aud-external-img-badge "Auditor-ready evidence pack" (top 1.5rem)
   .edn-interop-img-badge  "Verified at border"          (top 1.5rem) */
.aud-external-img-wrap > .ai-tag,
.edn-interop-img-wrap > .ai-tag,
/* logo platformy: top/left 1rem, szerokie - na mobile przechodzi caly gorny pas */
.ov-platform-card-image > .ai-tag,
.sw-platform-card-image > .ai-tag {
    top: auto;
    bottom: 0.6rem;
}


/* --------------------------------------------------------------------------
   HERO Z BACKGROUND-IMAGE
   Trzy hero nie maja <img>, wiec filtr ich nie widzi - chip jest wpisany
   w markup recznie (klasa .ai-tag--hero).

   Tu wyjatkowo PRAWY gorny rog: hero to sekcje pelnej szerokosci, wiec nie
   wystaja za viewport (zmierzone: box == szerokosc okna), a cala tresc hero
   jest wyrownana do lewej - chip po lewej wchodzilby na eyebrow i naglowek.
   -------------------------------------------------------------------------- */

.ai-tag--hero {
    top: 1.1rem;
    right: 1.1rem;
    left: auto;
}

@media screen and (max-width: 768px) {
    .ai-tag {
        top: 0.45rem;
        left: 0.45rem;
        padding: 0.16rem 0.36rem;
        font-size: 0.58rem;
    }

    .of-product-card-img-wrap > .ai-tag {
        left: auto;
        right: 0.45rem;
    }

    .aud-external-img-wrap > .ai-tag,
    .edn-interop-img-wrap > .ai-tag,
    .ov-platform-card-image > .ai-tag,
    .sw-platform-card-image > .ai-tag {
        top: auto;
        bottom: 0.45rem;
    }

    .ai-tag--hero {
        top: 0.7rem;
        right: 0.7rem;
        left: auto;
    }
}