/* ===================================================================
   FRIGO — Pre / Posle
   Stil je preslikan 1:1 sa HTML predloška (pages.css → „BEFORE/AFTER").

   Svaka boja je zapisana kao `var(--token, #fallback)`. Kada je FRIGO
   tema aktivna, tokeni postoje i klizač prati dizajn sistem; kada teme
   nema, rezervne vrednosti drže isti izgled. Zato plugin radi i
   samostalno, a ne postaje drugi izvor istine za boje.
   =================================================================== */

.ba, .ba *,
.ba *::before,
.ba *::after { box-sizing: border-box; }

/* ---------- Okvir slike ---------- */
.ba {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--coal, #16191C);
    user-select: none;
    -webkit-user-select: none;
}
@media (min-width: 900px) {
    .ba { aspect-ratio: 16 / 9; }
}

.ba img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: none;
}

/* Prevlaka: gornja slika se seče sleva do položaja klizača. */
.ba-after { clip-path: inset(0 0 0 var(--ba, 50%)); }

/* ---------- Ručica ---------- */
.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba, 50%);
    width: 2px;
    background: var(--red, #B01F26);
    transform: translateX(-1px);
    pointer-events: none;
}
.ba-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border: 2px solid var(--red, #B01F26);
    background: rgba(20, 18, 15, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ba-handle::after {
    content: "‹ ›";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 20px;
    color: #fff;
    letter-spacing: 4px;
}

/* ---------- Oznake ---------- */
.ba-label {
    position: absolute;
    top: 20px;
    margin: 0;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(20, 18, 15, 0.6);
    padding: 7px 13px;
    pointer-events: none;
}
.ba-label--pre  { left: 20px; }
.ba-label--post { right: 20px; }

/* ---------- Klizač ----------
   Pravi <input type="range"> preko cele slike, vizuelno proziran. Otud
   rad tastaturom i podrška za čitače ekrana bez dodatnog koda. */
.ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
}

/* Okvir fokusa se crta na susednoj ručici, jer je sam input proziran.
   Zato .ba-handle MORA da stoji odmah iza .ba-range u HTML-u. */
.ba-range:focus-visible + .ba-handle::before {
    border-color: var(--tx-light, #F2F5F6);
    box-shadow: 0 0 0 3px var(--red-gl, rgba(210, 50, 58, 0.3));
}
/* Pregledači bez :focus-visible — bolje vidljiv okvir nego nijedan. */
.ba-range:focus + .ba-handle::before {
    border-color: var(--tx-light, #F2F5F6);
}

/* ---------- Traka sa podacima ispod ---------- */
.ba-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/*
 * Predložak traku ispisuje u boji --tx-mute-l, koja je namenjena tamnoj
 * podlozi. Na svetloj sekciji (index.html je koristi upravo tamo) to je
 * kontrast oko 2.3:1 — ispod praga čitljivosti. Zato podloga bira boju,
 * umesto da se preslika greška. Na tamnoj podlozi vrednosti su iste kao
 * u predlošku.
 */
.ba-meta--dark { color: var(--tx-mute-l, #98A1A7); }
.ba-meta--dark b { color: var(--tx-light, #F2F5F6); font-weight: 500; }

.ba-meta--light { color: var(--tx-mute-d, #586168); }
.ba-meta--light b { color: var(--tx-dark, #14181B); font-weight: 500; }

/* ---------- Poruka uredniku ----------
   Namerno neusklađena sa dizajnom sajta: to je poruka iz administracije,
   ne deo strane. Vidi je samo prijavljeni urednik. */
.frigo-ba-notice {
    padding: 20px 24px;
    border: 1px dashed #c3244a;
    background: #fff5f7;
    color: #3b2b2f;
    font-size: 14px;
    line-height: 1.6;
}
.frigo-ba-notice p { margin: 0 0 8px; }
.frigo-ba-notice p:last-child { margin-bottom: 0; }

/* ---------- Osnovni font ----------
   Sve u elementu što nije naslov (`--font-display`) ni sitan natpis
   (`--font-mono`) ide odavde. Bez ovoga ti delovi nemaju nijedan
   `font-family`, pa nasleđuju font teme i ne menjaju se kad urednik
   izabere font u panelu ili na elementu.

   `inherit` kao rezerva: dok font nije izabran, ponaša se tačno kao
   da pravila nema. */
.ba { font-family: var(--font-body, inherit); }