/* CHILL HILL - realiu nuotrauku sluoksnis (F2, atnaujinta P13-VERTIMAS).

   Kraunamas PO app.css ir tokens.css, i TUOS PACIUS @layer'ius - todel sios
   taisykles tiesiog prisideda prie esamu konteineriu, nieko neperrasydamos.

   P13: prototipas nuotraukas deda kaip `<i class="imgfill">` su
   `background-image:var(--img-*)` (base64). Aplikacijoje toje pacioje vietoje
   stovi `<img class="imgfill">` is <x-photo> - su srcset ir issaugotais
   matmenimis. Prototipo `.imgfill` taisykles (position/inset/transform)
   taikosi abiem, nes jos rasytos klasei, ne elementui; cia lieka tik tai, ko
   background-image atveju nereikia: width/height/object-fit.

   Konteineriai turi fiksuota aspect-ratio, todel vieta rezervuota ir CLS = 0.
   Jokiu spalvu sitame faile - tik geometrija. */

@layer reset, tokens, base, components, sections, modules, skin;

@layer components{
  /* bendra: nuotrauka uzpildo konteineri be iskraipymo */
  .g-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .g-media{background:var(--shopium-sage-soft)}
}

@layer sections{
  /* P13: VIENA taisykle visiems prototipo nuotrauku lizdams - hero__bg,
     pcard__media, mosaic, kv__pic, buyout__bg, final__bg, g-foot__bg, res__pic.
     Prototipo CSS kiekvienam is ju jau nustato position/inset. */
  img.imgfill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

  /* Konteineriu placeholderis. Buvo --sc-far (rgb(22,48,44)) - tamsus SVG scenu
     palikimas, kuris blyksteledavo pries uzsikraunant nuotraukai. Dabar sviesus
     tonas IS PALETES (--shopium-sage-soft), naujos spalvos neivedama. */
  .pcard__media,.vid,.gal figure{background:var(--shopium-sage-soft)}

  /* video/galerija sekcijos (prototipe ju nera) nuotraukas deda be .imgfill */
  .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .gal figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .5s ease}
  .gal figure:hover img{transform:scale(1.06)}
  .pcard--soon .pcard__media img{filter:grayscale(.45) brightness(.8)}

  @media (prefers-reduced-motion:reduce){
    .gal figure img{transition:none}
    .gal figure:hover img{transform:none}
    /* prototipo zoom'ai .pcard__media/.mosaic .imgfill - tos pacios taisykles */
    .pcard__media .imgfill,.mosaic .imgfill{transition:none}
    .pcard:hover .pcard__media .imgfill,.mosaic figure:hover .imgfill{transform:none}
  }
}
