/* ===========================================================================
   IZLOZBENI IZGLED STRANICE NEKRETNINE — css/14            (2026-08-02/03)
   Ucitava se posljednji, pa smije da nadjaca 08-single-property i 11-overrides.

   ⚠️ SVE u ovom fajlu MORA biti pod `body.rs-layout-showcase`.
      Ta klasa dolazi iz inc/25 i stoji SAMO na nekretninama koje su u aplikaciji
      oznacene kao „Izlozbene". Bez tog prefiksa bi se pokvarile sve ostale
      nekretnine (Standardne i Luksuzne) — vidi feedback o koliziji klasa.

   Sablon: Houzez Studio 21047 „Property Detail - Izlozbeni (showcase)".

   ── ⭐ ZASTO JE HERO PONOVO NAPRAVLJEN (2026-08-03) ─────────────────────────
   Prva verzija je koristila Houzezov widget `houzez-property-toparea-v2`.
   Korisnik: „ovo ne treba da bude top area… ovdje imamo sve ujedno, slike, video,
   360 turu, mape. To ne treba za ovu stranicu jer je ovdje poenta da je sve
   odvojeno. Hero sekcija treba da bude samo hero fotka ili video."

   I bio je u pravu: `toparea` je Houzezov „sve u jednom" blok — u sebi nosi
   galeriju, 3D turu, video, mapu i ulicni prikaz, sve kroz tabove. To je tacno
   suprotno od ideje Izlozbenog izgleda, gdje SVAKI medij dobija svoju sekciju.

   Sad je u herou samo `houzez-property-image` — widget koji ispise iskljucivo
   naslovnu fotografiju nekretnine (dinamicki, po nekretnini). Ispisuje:

     div.property-featured-image        ← na ovo se kacimo (stabilno ime widgeta)
       └ img                            ← naslovna fotografija

   ⚠️ Klasa `rs-hero` na Elementor kontejneru je PROBANA i NE PROLAZI — Elementor
      drzi izrenderovan HTML u meta `_elementor_element_cache` pa se klasa ne
      pojavi. Zato se drzimo widgetove sopstvene klase.
   ⚠️ Poslije SVAKE izmjene sablona obrisati taj kes:
      `wp post meta delete <ID sablona> _elementor_element_cache`

   ── STA TEK DOLAZI ─────────────────────────────────────────────────────────
   Ispod hero-a idu ZASEBNE sekcije za svaki medij (3D tura, video, dron, foto,
   tlocrt) — svaka svoj widget, ni jedna u tabovima. Vidi dogovorena pravila u
   memoriji: „niz mjesta koja MOGU BITI PRAZNA", „nista se ne ucitava dok se ne
   klikne".
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1.0  BROJEVI HERO-A NA JEDNOM MJESTU

   ISTORIJA (da se ne vrti u krug):
     razmak sa strana: 20px -> clamp(20,5vw,80) -> **0, puna sirina**
     visina: 100% ekrana -> **80%**
--------------------------------------------------------------------------- */
body.rs-layout-showcase {
    /* Visina hero-a na desktopu i tabletu. 80% ekrana, a ne 100%:
       korisnik: „hero slika treba da je manja, ovako ne staje na ogroman ekran".
       Na punih 100% posjetilac mora da preskoci CIJELI ekran prije nego vidi
       ijedan podatak; na 80% se ispod slike nazire pocetak sadrzaja.
       Telefon zadrzava punih 100svh (sek.1.5). */
    --rs-showcase-hero-h: 80svh;

    /* Visina pretapanja u pozadinu stranice (sek.1.4). */
    --rs-showcase-fade-h: 140px;
}

/* ---------------------------------------------------------------------------
   1.1  Header pluta PREKO slike (isto kao na pocetnoj)

   Na pocetnoj je <header> `position:absolute` pa slika pocinje od samog vrha
   stranice i prolazi ispod menija. Stranica nekretnine koristi „inner header"
   (css/07 sek.23 i sek.27): plavi zaobljeni bar u NORMALNOM toku, pa je
   zauzimao svojih ~115px i slika je pocinjala ispod njega.

   ⚠️ Ta pravila su pisana sa `!important` (bila su u ratu sa Houzez temom), pa
      ih obican prefiks ne moze nadjacati — moramo i mi `!important`.
   Razmak sa strana NE diramo: header zadrzava svojih 20px iz css/07 i pluta kao
   zaobljeni bar preko fotografije koja ide od ivice do ivice.

   ⚠️⚠️ NIKAD `top:0` (nauceno 2026-08-04) ────────────────────────────────────
   Korisnik: „header je pomjeren i velicina mu nije dobra na ovoj stranici."
   Ja to nisam vidio jer moj pregledac nije prijavljen, a korisnik sajt gleda
   PRIJAVLJEN — pa mu WordPress na vrh stavi svoju crnu traku i doda
   `html{margin-top:32px}`. Apsolutni element sa `top:0` NE racuna tu marginu
   (mjeri se od vrha platna), pa je header ulazio 32px previsoko, pod crnu traku.

   `top` se NAMJERNO ne zadaje: apsolutni element bez `top` ostaje tacno tamo
   gdje bi i inace bio, samo je izvan toka — dakle sam postuje i admin traku i
   `margin:18px 20px 0` iz css/07.
   IZMJERENO (simulirana admin traka): standardna stranica 18 -> 50px,
   izlozbena je ostajala na 18. Sad su obje 50.
--------------------------------------------------------------------------- */
body.rs-layout-showcase:not(.transparent-yes) #header-hz-elementor,
body.rs-layout-showcase #header-hz-elementor {
    position: absolute !important;
    left: 0;
    right: 0;
}

/* omotac headera ne smije da drzi visinu kad je header ispao iz toka */
body.rs-layout-showcase .rs-hdr-desktop,
body.rs-layout-showcase .rs-hdr-mobile {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
}

/* ---------------------------------------------------------------------------
   1.2  HERO — puna sirina, 80% visine ekrana, fotografija se NE razvlaci

   `svh` (small viewport height) a ne `vh`: na telefonu se traka pregledaca
   skuplja pri skrolu; `vh` racuna VELIKU visinu pa hero „viri" ispod ekrana i
   stranica se trese. `svh` uzima manju, sigurnu visinu. `80vh` iznad je rezerva
   za starije pregledace.

   ⭐ FOTOGRAFIJA SE NE SMIJE RAZVLACITI:
      `object-fit:cover` cuva odnos stranica — slika se uveca dok ne popuni
      okvir pa se visak ODSIJECE; nikad se ne isteze.
      ⛔ NIKAD `object-fit:fill` ni zadavanje sirine i visine slike bez `cover`.
      `object-position:center` bira sredinu isjecka; ako neka fotografija bude
      bolja sa naglaskom na dnu (bazen, terasa), tu se mijenja na `center 70%`.

   `width:100%` a NE `100vw` — `100vw` racuna i traku za skrol pa napravi
   vodoravni skrol od ~15px.
--------------------------------------------------------------------------- */
body.rs-layout-showcase .rs-hero,
body.rs-layout-showcase .property-featured-image {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 80vh;                                /* rezerva za stare pregledace */
    height: var(--rs-showcase-hero-h);
}

/* Fotografija ILI video — isto pravilo, jer se oba ponasaju kao „ispuni okvir".
   `.rs-hero__media` je apsolutan da vise fotografija moze da stoji JEDNA PREKO
   DRUGE (smjenjivanje je pretapanje, ne pomjeranje). */
body.rs-layout-showcase .rs-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    margin: 0;
    border-radius: 0;
}

body.rs-layout-showcase .property-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    margin: 0;
    border-radius: 0;
}

/* ---------------------------------------------------------------------------
   1.2b  SMJENJIVANJE FOTOGRAFIJA — pretapanje, ne klizanje

   Sve fotografije stoje jedna preko druge; vidi se ona sa `is-active`. Prelaz je
   sporo pretapanje (1.4s) jer je hero preko cijelog ekrana — brz rez bi trzao.
   ⚠️ Neaktivne NE gasimo sa `display:none` nego providnoscu: `display` prekida
      pretapanje pa bi se slike smjenjivale rezom.
--------------------------------------------------------------------------- */
body.rs-layout-showcase .rs-hero__slide {
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}
body.rs-layout-showcase .rs-hero__slide.is-active {
    opacity: 1;
}
/* ko je u sistemu iskljucio animacije — nema pretapanja (JS ionako ne pokrece
   smjenjivanje, ovo je da prva fotografija bude odmah puna) */
@media (prefers-reduced-motion: reduce) {
    body.rs-layout-showcase .rs-hero__slide { transition: none; }
}

/* Elementor kontejner oko hero-a ne smije da mu oduzme sirinu ni da doda razmak */
body.rs-layout-showcase .elementor-widget-houzez-property-image,
body.rs-layout-showcase .elementor-widget-houzez-property-image > .elementor-widget-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------------------------
   1.3  Blago tamnjenje pri vrhu — da se meni vidi preko svijetle fotografije

   Header je providan i pluta preko slike. Na fotografiji sa svijetlim nebom
   bijeli natpisi menija nestanu. Tamni se SAMO gornji pojas; sredina i dno
   fotografije ostaju netaknuti — fotografija je ovdje glavna stvar.
   `pointer-events:none` da preliv ne pojede klik.
--------------------------------------------------------------------------- */
body.rs-layout-showcase .rs-hero::before,
body.rs-layout-showcase .property-featured-image::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 240px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(7, 17, 28, .55) 0%,
        rgba(7, 17, 28, .18) 55%,
        rgba(7, 17, 28, 0) 100%
    );
}

/* ---------------------------------------------------------------------------
   1.4  PRETAPANJE U POZADINU STRANICE (fade out) — kao hero na pocetnoj

   Korisnik: „napravi da ima fade out opciju ispod kao na main stranici."
   Isti recept kao css/02 sek.9a: traka na dnu slike koja iz providnog prelazi u
   boju stranice, pa se ne vidi gdje fotografija prestaje.

   ⚠️ Boja MORA da prati temu, i to NE preko `--rs-dark`. Stranica nekretnine u
      tamnoj temi ima svoju, malo svjetliju pozadinu `#0b1524` (css/08 l.70),
      dok je `--rs-dark` = #07111c. Razlika je mala ali se VIDI kao tanka traka
      tacno na dnu fotografije. Svijetla tema: `#f7f8f9` (css/08 l.631).
      Provjereno mjerenjem `#main-wrap` u obje teme.
--------------------------------------------------------------------------- */
body.rs-layout-showcase .rs-hero::after,
body.rs-layout-showcase .property-featured-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rs-showcase-fade-h);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(247, 248, 249, 0) 0%,
        rgba(247, 248, 249, .7) 55%,
        #f7f8f9 100%
    );
}

html.rs-dark body.rs-layout-showcase .rs-hero::after,
body.rs-layout-showcase .property-featured-image::after {
    background: linear-gradient(
        to bottom,
        rgba(11, 21, 36, 0) 0%,
        rgba(11, 21, 36, .7) 55%,
        #0b1524 100%
    );
}

/* ---------------------------------------------------------------------------
   1.5  TELEFON / TABLET USPRAVNO

   Na telefonu hero uzima CIJELI ekran: tamo je fotografija prvi utisak, a
   sadrzaj pocinje odmah ispod nje pa nema sta da se „nazire".
   Pretapanje se skracuje srazmjerno (kao na pocetnoj: 140 -> 90px).
--------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.rs-layout-showcase {
        --rs-showcase-hero-h: 100svh;
        --rs-showcase-fade-h: 90px;
    }
    body.rs-layout-showcase .rs-hero::before,
body.rs-layout-showcase .property-featured-image::before {
        height: 180px;
    }
}