/**
 * Kadrowanie obrazu glownego artykulu - warstwa addytywna.
 *
 * Renderery (index.php, aktualnosci.php, aktualnosci/article.php) wypuszczaja na
 * elemencie <img> zmienne CSS z punktem kadru, np.:
 *     <img src="..." style="--ksp-crop:50% 28%;--ksp-crop-m:50% 12%">
 *
 * Ten plik przeklada je na object-position. Brak zmiennej = fallback 50% 50%,
 * czyli dokladnie to, co przegladarka robila do tej pory. Zaden obraz bez
 * ustawionego kadru nie zmienia wygladu.
 *
 * WAZNE - kolejnosc ladowania: ten plik musi byc dolaczony PO css/style.css,
 * css/article-blocks.css oraz po blokach <style> w index.php i aktualnosci.php,
 * bo selektory maja te sama specyficznosc (0,1,0) i decyduje kolejnosc.
 *
 * WAZNE - dlaczego zmienne, a nie object-position wprost w atrybucie style:
 * inline style wygrywa z kazda regula arkusza, wiec media query dla telefonu
 * nigdy by nie zadzialal. Zmienne CSS omijaja ten problem - inline jest tylko
 * nosnikiem wartosci, a wybor desktop/mobile robi arkusz.
 */

/* Warianty grafiki: renderer opakowuje <img> w <picture>, gdy jakies miejsce ma
   podpiety wlasny plik. Cale style layoutu w projekcie sa pisane pod sam <img>
   (".news-image img { width:100% }" itd.), wiec <picture> musi zniknac z ukladu -
   inaczej wstawiloby wlasny boks inline i obraz przestalby wypelniac kontener.
   "display: contents" robi dokladnie to: element nie generuje boksa, a dziecko
   zachowuje sie tak, jakby lezalo bezposrednio w kontenerze.

   Selektory pozostaja niezmienione, bo <img> nadal jest dzieckiem <picture>
   w drzewie DOM - a w projekcie nie ma ani jednej reguly z "> img". */
.news-slide-image picture,
.news-thumb picture,
.news-image picture,
.article-header picture {
    display: contents;
}

/* Kadr podstawowy (komputer i wszystko, co nie ma osobnej reguly mobilnej) */
.news-slide-image img,
.news-thumb img,
.news-image img,
.news-list .news-image img,
.article-header img {
    object-position: var(--ksp-crop, 50% 50%);
}

/* Telefon: slajd karuzeli i baner artykulu maja tam zupelnie inne proporcje
   (karuzela robi sie pionowa, baner nizszy), wiec dostaja wlasny punkt kadru.
   Fallback jest dwustopniowy: kadr mobilny -> kadr podstawowy -> srodek. */
@media (max-width: 768px) {
    .news-slide-image img,
    .article-header img {
        object-position: var(--ksp-crop-m, var(--ksp-crop, 50% 50%));
    }
}