/* =====================================================================
   FONDACIJA MIHAJLOVIĆ – FENIKS
   Galerije

   Ovaj fajl koristi i javni sajt i pregled u administraciji — da
   pregled ne bi lagao. Zato ovde nema ničega vezanog za administraciju.
   ===================================================================== */

.galerija {
    --kolone:    3;
    --razmak:    18px;
    --aubergine: #2C1A3A;
    --identitet: #4B2E83;
    --tiho:      #6b665f;

    margin: 2.5rem 0;
}

.galerija__stavka {
    margin: 0;
    min-width: 0;
}

/* Oznaka <picture> je omotač i mora da se ponaša kao blok, inače
   se slika unutar nje ne poravnava kako treba. */
.galerija picture {
    display: block;
    width: 100%;
    height: 100%;
}

.galerija__slika {
    display: block;
    width: 100%;
    height: auto;
}

.galerija__veza {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: #efeae4;
    text-decoration: none;
}

/* Tanka linija umesto okvira — diskretno odvaja svetlu sliku od
   svetle pozadine, a ne pravi ram. */
.galerija__veza::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(44, 26, 58, .08);
    pointer-events: none;
    z-index: 2;
}

/* Veo koji se spušta preko slike pri prelazu mišem. */
.galerija__veo {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: linear-gradient(
        to top,
        rgba(44, 26, 58, .55) 0%,
        rgba(44, 26, 58, .12) 45%,
        rgba(44, 26, 58, 0) 100%
    );
    opacity: 0;
    transition: opacity .35s ease;
}

.galerija__veo::before {
    content: "";
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background:
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) center/13px 1px no-repeat,
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) center/1px 13px no-repeat;
    transform: scale(.75);
    transition: transform .35s ease;
}

.galerija__veza:hover .galerija__veo,
.galerija__veza:focus-visible .galerija__veo { opacity: 1; }

.galerija__veza:hover .galerija__veo::before { transform: scale(1); }

.galerija__potpis {
    margin-top: .6rem;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--tiho);
    letter-spacing: .01em;
}


/* --- Mreža ----------------------------------------------------------- */

.galerija--mreza {
    display: grid;
    /* Kad je zadata najveća širina pločice, kolone se ne rastežu preko
       nje; bez nje se širina deli ravnomerno. */
    grid-template-columns: repeat(var(--kolone), minmax(0, var(--p-sirina, 1fr)));
    justify-content: start;
    gap: var(--razmak);
}

/* Odsecanje na isti format daje urednu mrežu. Slika se skraćuje sa
   krajeva, ali nikad ne rasteže — proporcije ostaju netaknute. */
/* Odnos strana: zadat obema merama, inače kvadrat. */
.galerija--mreza.galerija--odseci .galerija__veza {
    aspect-ratio: var(--p-odnos, 1 / 1);
}

/* Zadata samo visina — pločica se skraćuje, širina ostaje slobodna. */
.galerija--odseci .galerija__veza { max-height: var(--p-visina, none); }

.galerija--mreza.galerija--odseci .galerija__slika {
    height: 100%;
    object-fit: cover;
}

/* Bez odsecanja raspored preuzima zidani sloj (vidi niže). */
.galerija--mreza:not(.galerija--odseci) .galerija__stavka {
    max-width: var(--p-sirina, none);
}

/* Bez odsecanja visina je samo gornja granica — slika se uklapa cela. */
.galerija--mreza:not(.galerija--odseci) .galerija__slika {
    max-height: var(--p-visina, none);
    width: auto;
    max-width: 100%;
}

.galerija--mreza .galerija__slika {
    transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.galerija--mreza .galerija__veza:hover .galerija__slika {
    transform: scale(1.045);
}


/* --- Niz ------------------------------------------------------------- */

.galerija--niz {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.galerija--niz .galerija__stavka {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.galerija--niz .galerija__veza { background: none; }

.galerija--niz .galerija__potpis {
    margin-top: .9rem;
    text-align: center;
    font-size: .86rem;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}


/* --- Klizač ---------------------------------------------------------- */

.galerija--klizac {
    display: flex;
    gap: var(--razmak);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: .75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.galerija--klizac .galerija__stavka {
    flex: 0 0 var(--p-sirina,
        calc((100% - (var(--kolone) - 1) * var(--razmak)) / var(--kolone)));
    scroll-snap-align: start;
}

.galerija--klizac.galerija--odseci .galerija__veza {
    aspect-ratio: var(--p-odnos, 4 / 3);
}

.galerija--klizac.galerija--odseci .galerija__slika {
    height: 100%;
    object-fit: cover;
}


/* --- Strelice klizača ------------------------------------------------ */

.klizac { position: relative; }

/* Klizna traka se sakriva — pomeranje ide strelicama, prevlačenjem
   ili točkićem, a traka bi samo kvarila utisak. */
.klizac .galerija--klizac { scrollbar-width: none; }
.klizac .galerija--klizac::-webkit-scrollbar { display: none; }

.klizac__dugme {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--aubergine);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(44, 26, 58, .12);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(44, 26, 58, .16);
    transition: opacity .25s, background .2s, box-shadow .2s;
}

.klizac__dugme:hover {
    background: #fff;
    box-shadow: 0 5px 20px rgba(44, 26, 58, .24);
}

.klizac__dugme--nazad  { left: -14px; }
.klizac__dugme--napred { right: -14px; }

/* Na kraju trake dugme nestaje, ali ostaje na mestu — da se sadržaj
   ne pomera dok se lista. */
.klizac__dugme[disabled] {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .klizac__dugme--nazad  { left: 4px; }
    .klizac__dugme--napred { right: 4px; }
}


/* =====================================================================
   Uvećanje
   ===================================================================== */

/* Bez ovoga skriveni sloj ostaje raširen preko cele stranice i, iako
   proziran, guta klikove — pa se posle prvog zatvaranja ništa više ne
   može otvoriti. Razred nadjačava podrazumevano ponašanje atributa
   hidden, zato mora izričito. */
.uvecanje[hidden] { display: none; }

.uvecanje {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    grid-template-rows: 1fr auto;
    background: rgba(24, 14, 32, .96);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .25s ease;
}

.uvecanje--vidljivo { opacity: 1; }

.uvecanje__okvir {
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 4rem 4.5rem 0;

    /* Bez ovoga se ćelija razvuče do prirodne visine slike, jer se
       grid-ćelija podrazumevano ne skuplja ispod svog sadržaja — pa
       max-height na slici nema šta da ograniči i uspravne slike ispadaju
       iz ekrana. */
    min-height: 0;
    min-width: 0;
}

.uvecanje__slika {
    /* Veličina se vezuje za prozor, ne za roditelja.

       Sa `max-height: 100%` visina zavisi od lanca roditelja, a taj se
       ovde prekida: okvir naraste do visine slike umesto da je
       ograniči, pa uspravne slike ispadaju iz ekrana. Mera prozora ne
       zavisi ni od čega iznad. Oduzeto je mesto za traku sa strelicama
       i za potpis ispod. */
    max-width: calc(100vw - 9rem);
    max-height: calc(100vh - 11rem);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    animation: uvecanje-ulaz .35s cubic-bezier(.2, .7, .3, 1);

    cursor: zoom-in;
    transition: transform .25s ease;
}

/* Drugi klik uvećava sliku preko ekrana i ona se pomera za mišem —
   obrnuto od njegovog kretanja, jer se time razgleda ono što je van
   vidnog polja. */
.uvecanje--zum .uvecanje__slika {
    max-width: none;
    max-height: none;
    cursor: zoom-out;
    transition: transform .08s linear;
    box-shadow: none;
    animation: none;
}

.uvecanje--zum .uvecanje__okvir { padding: 0; }

/* U uvećanju potpis ne samo da se sklanja nego i oslobađa prostor —
   dok zauzima svoj red, slika je pomerena naviše i donja ivica se ne
   može dovesti do dna ekrana. */
.uvecanje--zum .uvecanje__potpis { display: none; }

.uvecanje--zum .uvecanje__dugme--nazad,
.uvecanje--zum .uvecanje__dugme--napred { opacity: 0; pointer-events: none; }

@keyframes uvecanje-ulaz {
    from { opacity: 0; transform: scale(.985); }
    to   { opacity: 1; transform: none; }
}

.uvecanje__potpis {
    padding: 1.25rem 1.5rem 1.75rem;
    text-align: center;
    color: rgba(255, 255, 255, .78);
    font-size: .86rem;
    line-height: 1.6;
    max-width: 64ch;
    margin: 0 auto;
    letter-spacing: .01em;
}

.uvecanje__dugme {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .9);
    background: none;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    transition: background .2s, border-color .2s;
}

.uvecanje__dugme:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
}

.uvecanje__dugme--nazad  { left: 1.25rem; }
.uvecanje__dugme--napred { right: 1.25rem; }

.uvecanje__zatvori {
    top: 1.25rem;
    right: 1.25rem;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
}

.uvecanje__broj {
    position: absolute;
    top: 1.9rem;
    left: 1.75rem;
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}


/* --- Telefon --------------------------------------------------------- */

@media (max-width: 700px) {
    .galerija { --razmak: 10px; }

    .galerija--mreza {
        grid-template-columns: repeat(min(var(--kolone), 2), 1fr);
    }

    .galerija--klizac .galerija__stavka { flex-basis: 82%; }

    .galerija--niz { gap: 2.25rem; }

    /* Na dodirnom ekranu nema prelaza mišem, pa veo samo smeta. */
    .galerija__veo { display: none; }

    .uvecanje__okvir { padding: 3.5rem 1rem 0; }

    .uvecanje__slika {
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 9rem);
    }
    .uvecanje__dugme { width: 38px; height: 38px; font-size: 1.2rem; }
    .uvecanje__dugme--nazad  { left: .4rem; }
    .uvecanje__dugme--napred { right: .4rem; }
    .uvecanje__zatvori { top: .75rem; right: .75rem; }
    .uvecanje__broj { top: 1.25rem; left: 1rem; }
}

/* =====================================================================
   Umetnička galerija

   Slike iste širine i različitih visina, svaka u belom okviru sa
   senkom — onako kako se reprodukcije prikazuju u katalogu.

   Proporcije se nikad ne diraju: kod umetničkog dela odnos strana nije
   ukras nego podatak, i uspravan format ne sme da izgleda kao položen.
   ===================================================================== */

.galerija--umetnicka {
    --razmak: 34px;

    /* Raspored preuzima zidani sloj (vidi niže). */
}

.galerija--umetnicka .galerija__stavka {
    /* Bez ovoga se senka odseca na ivici polja. */
    padding: 2px;
}

.galerija--umetnicka .galerija__veza {
    background: #fff;

    /* Beli rub oko slike — kao paspartu ispod stakla. */
    padding: 12px;

    border: 1px solid rgba(44, 26, 58, .12);

    /* Dve senke: uska i tamnija tik uz okvir, široka i mekana ispod —
       zajedno daju utisak da slika stoji odvojeno od pozadine. */
    box-shadow:
        0 1px 2px rgba(44, 26, 58, .10),
        0 8px 20px -6px rgba(44, 26, 58, .16);

    transition: box-shadow .35s ease, transform .35s ease,
                border-color .35s ease;
}

.galerija--umetnicka .galerija__veza::after { content: none; }

.galerija--umetnicka .galerija__slika {
    display: block;
    width: 100%;
    height: auto;
}

.galerija--umetnicka .galerija__veza:hover,
.galerija--umetnicka .galerija__veza:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(44, 26, 58, .2);
    box-shadow:
        0 2px 4px rgba(44, 26, 58, .12),
        0 18px 38px -8px rgba(44, 26, 58, .3);
}

/* Slika se ne uvećava unutar okvira — okvir bi je odsekao. Naglašava
   se ceo predmet, ne sadržaj slike. */
.galerija--umetnicka .galerija__veza:hover .galerija__slika {
    transform: none;
}

.galerija--umetnicka .galerija__veo {
    /* Veo staje unutar bele ivice, da ne prelazi preko okvira. */
    inset: 12px;
    background: linear-gradient(
        to top,
        rgba(44, 26, 58, .45) 0%,
        rgba(44, 26, 58, .08) 50%,
        rgba(44, 26, 58, 0) 100%
    );
}

.galerija--umetnicka .galerija__potpis {
    margin-top: .75rem;
    padding: 0 2px;
    text-align: center;
    font-size: .8rem;
    line-height: 1.5;
}


@media (max-width: 900px) {
    .galerija--umetnicka { --razmak: 22px; }
}

@media (max-width: 700px) {
    .galerija--umetnicka {
        --razmak: 16px;
    }

    .galerija--umetnicka .galerija__veza { padding: 8px; }
    .galerija--umetnicka .galerija__veo  { inset: 8px; }
}

/* =====================================================================
   Zidani raspored

   Slike zadržavaju izvorne visine i lepe se jedna uz drugu, pa je
   razmak svuda isti — nema praznog prostora ispod niže slike u redu.

   Redosled ipak ostaje po redovima: prve tri slike su vrh triju
   kolona, četvrta ide ispod prve, peta ispod druge. O rasporedu vodi
   računa JavaScript, jer CSS ne ume oboje odjednom — kolone koje se
   same pune idu odozgo nadole, a mreža sa redovima pravi rupe.

   Dok se JavaScript ne izvrši (ili ako je isključen), slike stoje
   jedna ispod druge — bez rasporeda, ali čitljivo.
   ===================================================================== */

.galerija--zidano {
    display: flex;
    align-items: flex-start;
    gap: var(--razmak);
}

.galerija__kolona {
    display: flex;
    flex-direction: column;
    gap: var(--razmak);
    flex: 1 1 0;
    min-width: 0;
}

/* Kad kolone još nisu napravljene, slike se ponašaju kao običan niz. */
.galerija--zidano:not(.galerija--slozeno) {
    display: block;
}

.galerija--zidano:not(.galerija--slozeno) .galerija__stavka {
    margin-bottom: var(--razmak);
}