/* -----------------------------------------------------------------------------
   Chip ujawnienia tresci AI - AI Act art. 50(4) i 50(5).

   Wstawiany server-side przez lib/ai-disclosure.php jako rodzenstwo bezposrednio
   po znaczniku <img>. Arkusz laduje sie SYNCHRONICZNIE - etykieta zgodnosciowa
   nie moze mrugnac bez stylu ani dojechac z opoznieniem.

   Reguly pozycji sa wyprowadzone z pomiaru w przegladarce, nie z zalozen.
   Domyslnie lewy gorny rog: kotwiczenie do gory jest odporne na kontenery
   wyzsze od obrazu, a lewa krawedz nie jest w tym projekcie przycinana.
------------------------------------------------------------------------------*/

/* Kotwica chipa. Owija obraz, zeby chip pozycjonowal sie wzgledem OBRAZU, a nie
   wzgledem kontenera: kontener ma padding, bywa wysrodkowany albo wyzszy od
   obrazu, wiec chip ladowal poza kadrem (pomiar dal 132 takie przypadki).

   Chip jest kotwiczony w lewym gornym narozniku, wiec liczy sie tylko gorna i
   lewa krawedz ramki - nie jej szerokosc. Dlatego ramka jest zwyklym blokiem o
   szerokosci auto: zero wplywu na uklad. Nie ustawiamy fit-content globalnie,
   bo obraz o width: 100% zapada sie wtedy do szerokosci wlasnej.

   Nie ruszamy pozycjonowania zadnego istniejacego elementu w projekcie, wiec nie
   ma ryzyka przekotwiczenia czegokolwiek. */
.ai-frame {
    position: relative;
    display: block;
    max-width: 100%;
}

/* Pomiar (6 viewportow x 9 tras) wskazal dwa kontenery, w ktorych sama ramka nie
   odtwarza ukladu obrazu:

   1. .impl-split-img-wrap img ma height: 100%. Procent wzgledem ramki o
      wysokosci auto rozwiazalby sie do auto i obraz zapadlby sie do wysokosci
      wlasnej.
   2. .figure-thumb centruje sie wlasnymi margin-left/right: auto w bloku, wiec
      jego lewa krawedz nie pokrywa sie z krawedzia kontenera (do 91px roznicy).
      Ramka musi przejac i szerokosc, i centrowanie.

   Pozostale obrazy wezsze od kontenera (logotypy marek, packshoty katalogu,
   workflow.jpg) leza w kontenerach flex - ramka jest tam elementem flex i sama
   dopasowuje sie do tresci oraz dziedziczy justify-content. */
.impl-split-img-wrap > .ai-frame {
    height: 100%;
}
.ai-frame:has(> .figure-thumb) {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Kontenery flex. Ramka staje sie elementem flex w miejsce obrazu, wiec musi
   miec te sama baze rozmiaru - inaczej flex-shrink sciska ja mocniej niz
   scisnalby obraz, a Bulma ma globalne img { max-width: 100% }, ktore w ramce
   liczy sie juz od ramki (pomiar: logotyp 119.46px -> 92.41px). */
.is-flex > .ai-frame,
.image-custom-style > .ai-frame,
.img-column-left > .ai-frame,
.img-column-right > .ai-frame {
    width: fit-content;
}
/* Blok jako element flex ma minimalny rozmiar tresci rowny 0 (obraz ma z Bulmy
   max-width: 100%, wiec da sie scisnac do zera), przez co flex-shrink sciskal
   ramke znacznie mocniej niz scisnalby obraz - logotyp 119.46px -> 92.41px.
   fit-content ustawia dolna granice na szerokosc tresci.

   Reszta roznicy: logotypy maja width="120" height="70" przy innych proporcjach
   wlasnych i jako elementy flex renderowaly sie na min(120px, szerokosc z
   proporcji). Ramka nie ma tej reguly (dotyczy elementow zastepowanych), wiec
   logo-shirt jest o 6.6px szersze na 769-1024px, a logo-headphones o 0.5px.
   Zerowy dx i dy oraz niezmieniona wysokosc dokumentu - nic sie nie przelewa. */
.is-flex > .ai-frame {
    min-width: fit-content;
}

/* Obraz bez zadeklarowanego display, ktory byl elementem flex, byl przez to
   blokowany. W ramce staje sie z powrotem inline, wiec dochodzi pusty pasek
   pod linia bazowa (+6.5px). Dotyczy dwoch kontenerow flex w projekcie -
   pozostale maja img { display: block } zadeklarowane wprost. */
.is-flex > .ai-frame,
.image-custom-style > .ai-frame {
    line-height: 0;
}

/* Sekcja z obrazem tla CSS. Chip wstawiony recznie, wiec kotwica musi byc
   ustawiona wprost - nie ma tu wrappera. */
.hero-banner {
    position: relative;
}

.ai-tag {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;

    /* Nieprzezroczysta na tyle, by trzymac kontrast >= 5.8:1 z bialym tekstem
       nawet nad czysta biela - czyli w najgorszym przypadku podkladu.
       Wlosowa jasna obwodka odcina plakietke od ciemnych podkladow (hero z
       przygaszeniem, ciemna stopka), gdzie sama ciemna plytka sie w nich zlewa. */
    background-color: rgba(20, 22, 26, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;

    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;

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

.ai-tag__mark {
    display: block;
}

/* Pelne zdanie dla czytnikow ekranu. Samo "AI" jest niejednoznaczne. */
.ai-tag__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Wariant w tekscie - zdanie objasniajace w stopce. Musi zostac w normalnym
   przeplywie, wiec position: static kasuje absolutne pozycjonowanie bazy. */
.ai-tag--inline {
    position: static;
    vertical-align: middle;
    margin: 0 0.15em;
}

/* Obraz tla CSS (.hero-banner z /img/overview/banner.jpg). Chip wstawiony
   recznie, bo background-image nie ma znacznika <img>. Hero ma wlasny padding,
   wiec odstep wiekszy niz domyslny. */
.ai-tag--hero {
    top: 1rem;
    left: 1rem;
    z-index: 4;
}