/* ===================================================================
   Frigo Menadžment — teksture sa lupom
   Stil je preslikan 1:1 sa HTML predloška (pages.css → „TEKSTURE").

   Sve je pisano pod `.frigo-tex`, pa plugin ne dira ostatak sajta.
   Boje su `var(--token, #fallback)`: uz FRIGO temu prate dizajn sistem,
   bez teme drže isti izgled.
   =================================================================== */

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

.frigo-tex .tex-hint {
    margin: 0 0 clamp(18px, 2.2vw, 32px);
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Uputstvo o lupi nema smisla tamo gde lupe nema. */
@media (hover: none) {
    .frigo-tex .tex-hint { display: none; }
}

/* ---------- Mreža ---------- */
.tex-grid {
    display: grid;
    gap: clamp(18px, 2.2vw, 32px);
}
@media (min-width: 860px) {
    .tex-grid { grid-template-columns: repeat(var(--tex-cols, 3), 1fr); }
}

.tex-card {
    display: grid;
    gap: 18px;
    align-content: start;
}

/* ---------- Slika ---------- */
.tex-view {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--tex-ratio, 3 / 4);
    background: var(--coal-2, #1E2226);
    cursor: crosshair;
    display: block;
    text-decoration: none;
}
.tex-view img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Lupa ----------
   Prečnik postavlja skripta, jer se iz njega računa i pomeraj isečka —
   dve vrednosti koje moraju da ostanu iste ne smeju da žive na dva
   mesta. Ovde stoji samo izgled. */
.tex-lens {
    position: absolute;
    width: 168px;
    height: 168px;
    border: 1px solid var(--tex-lens-c, var(--red-lt, #D2323A));
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
    background-repeat: no-repeat;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
}
.tex-view:hover .tex-lens { opacity: 1; }

/* Na dodir lupe nema — prst pokriva tačno ono što bi uvećala. */
@media (hover: none) {
    .tex-lens { display: none; }
    .tex-view { cursor: pointer; }
}

.tex-view:focus-visible {
    outline: 2px solid var(--red-lt, #D2323A);
    outline-offset: 3px;
}

/* ---------- Tekst kartice ---------- */
.tex-card h3 {
    margin: 0;
    font-family: var(--font-display, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.024em;
    line-height: 1.25;
}
.tex-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 18px;
    margin: 0;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11.5px;
}
.tex-card dt { margin: 0; }
.tex-card dd { margin: 0; text-align: right; }

/* =========================================================
   PODLOGA
   Predložak drži teksture na tamnoj sekciji; svetla varijanta postoji
   da widget ne bude neupotrebljiv na beloj podlozi.
   ========================================================= */

/* --- Tamna (predložak) --- */
.frigo-tex--dark .tex-hint { color: var(--tx-mute-l, #98A1A7); }
.frigo-tex--dark .tex-card h3 { color: var(--tx-light, #F2F5F6); }
.frigo-tex--dark .tex-card dt { color: var(--tx-mute-l, #98A1A7); }
.frigo-tex--dark .tex-card dd { color: var(--tx-light, #F2F5F6); }

/* --- Svetla --- */
.frigo-tex--light .tex-hint { color: var(--tx-mute-d, #586168); }
.frigo-tex--light .tex-card h3 { color: var(--tx-dark, #14181B); }
.frigo-tex--light .tex-card dt { color: var(--tx-mute-d, #586168); }
.frigo-tex--light .tex-card dd { color: var(--tx-dark, #14181B); }
.frigo-tex--light .tex-view { background: var(--sand-2, #D3D8DB); }

/* ---------- Poruka uredniku ---------- */
.frigo-tex-notice {
    padding: 20px 24px;
    border: 1px dashed #c3244a;
    background: #fff5f7;
    color: #3b2b2f;
    font-size: 14px;
    line-height: 1.6;
}

/* ---------- 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. */
.frigo-tex { font-family: var(--font-body, inherit); }