/* ===================================================================
   FRIGO — Traka projekata
   Stil je preslikan 1:1 sa HTML predloška (pages.css → „HORIZONTALNA
   GALERIJA PROJEKATA", plus .eyebrow i .stack--sm iz base.css).

   Naslov sekcije nije deo widgeta, pa ovde nema ni `.sec-head` mreže ni
   `.sec-num` / `.d-lg` tipografije — to se pravi Elementorovim
   widgetima iznad trake.

   Svaka boja je zapisana kao `var(--token, #fallback)`. Uz FRIGO temu
   traka prati dizajn sistem; bez teme rezervne vrednosti drže isti
   izgled. Zato plugin radi i samostalno.

   Opšte klase iz teme (.eyebrow, .mono, .stack--sm) su pisane pod
   `.frigo-hs`. Bez toga bi plugin uz tuđu temu prepravio nadnaslove po
   celom sajtu.
   =================================================================== */

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

/* ---------- Red sa strelicama ----------
   Naslov sekcije nije deo widgeta, pa strelice ne dele `.sec-head`
   mrežu ni sa čim — dobijaju svoj uzan red poravnat udesno. */
.frigo-hs-nav-only {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

/* ---------- Traka ---------- */
.hscroll {
    display: flex;
    gap: clamp(16px, 2vw, 32px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;

    /* Traka za pomeranje je sakrivena, ne i pomeranje samo. Ostaju tri
       načina da se traka pomeri, pa se ništa ne gubi: strelice, prst
       ili trackpad, i tastatura (traka ima tabindex). */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* stari Edge / IE */
}
.hscroll::-webkit-scrollbar { display: none; }   /* Chrome, Safari, novi Edge */

/* Fokus na traci mora da se vidi — bez njega korisnik tastature ne zna
   da je stigao do nje, a strelice tada već rade. */
.hscroll:focus-visible {
    outline: 2px solid var(--red-lt, #D2323A);
    outline-offset: 4px;
}

/* ---------- Ugrađena kartica ---------- */
.hs-item {
    flex: 0 0 clamp(260px, 30vw, 400px);
    scroll-snap-align: start;
    display: grid;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}
.hs-item figure {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--coal-2, #1E2226);
}
.hs-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2);
    transition: transform 1s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), filter 0.6s;
}
.hs-item:hover img { transform: scale(1.05); filter: none; }
.hs-item figure::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--red, #B01F26);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.hs-item:hover figure::after { transform: scaleX(1); }

.frigo-hs .stack--sm { display: grid; gap: 10px; }

.hs-meta {
    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;
}
.hs-item h3 {
    margin: 0;
    font-family: var(--font-display, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 700;
    letter-spacing: -0.026em;
    line-height: 1.2;
}

/* ---------- Stavka iz Loop template-a ----------
   Namerno NE nasleđuje `.hs-item`. Tamošnje `height:100%` na slici i
   sopstveni font na h3 su ceo dizajn ugrađene kartice, ali unutar tuđeg
   šablona bi bili sabotaža. Ovde stoji samo ono bez čega traka ne radi:
   širina stavke i uklapanje pri pomeranju. */
.hs-loop-item {
    flex: 0 0 clamp(260px, 30vw, 400px);
    scroll-snap-align: start;
    min-width: 0;
}
.hs-loop-item > * { max-width: 100%; }

/* ---------- Strelice ---------- */
.hs-nav {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.hs-arrow {
    width: 48px;
    height: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid var(--line-d-2, rgba(242, 245, 246, 0.26));
    border-radius: 0;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.hs-arrow:hover {
    background: var(--red, #B01F26);
    border-color: var(--red, #B01F26);
    color: #fff;
}
.hs-arrow svg { width: 18px; height: 18px; display: block; }
.hs-arrow:focus-visible {
    outline: 2px solid var(--red-lt, #D2323A);
    outline-offset: 3px;
}

/* ---------- Pločica na kraju ---------- */
.hs-end {
    flex: 0 0 clamp(200px, 22vw, 280px);
    display: grid;
    place-content: center;
    text-align: center;
    aspect-ratio: 3 / 4;
    text-decoration: none;
    border: 1px solid var(--line-d, rgba(242, 245, 246, 0.13));
    transition: background 0.3s, border-color 0.3s;
}
.hs-end:hover {
    background: var(--coal-2, #1E2226);
    border-color: var(--red, #B01F26);
}
.frigo-hs .eyebrow {
    display: inline-block;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    font-weight: 500;
}
.hs-end-count {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 12px;
}

/* =========================================================
   PODLOGA
   Traka je na predlošku crtana za tamnu sekciju. Boje su tu iste;
   svetla varijanta postoji da widget ne bude neupotrebljiv kada ga
   neko spusti na belu pozadinu.
   ========================================================= */

/* --- Tamna (predložak) --- */
.frigo-hs--dark .hs-meta { color: var(--tx-mute-l, #98A1A7); }
.frigo-hs--dark .hs-item h3 { color: var(--tx-light, #F2F5F6); }
.frigo-hs--dark .hs-arrow { color: var(--tx-light, #F2F5F6); }
.frigo-hs--dark .eyebrow { color: var(--red-tx, #E45C62); }
.frigo-hs--dark .hs-end-count { color: var(--tx-mute-l, #98A1A7); }

/* --- Svetla --- */
.frigo-hs--light .hs-meta { color: var(--tx-mute-d, #586168); }
.frigo-hs--light .hs-item h3 { color: var(--tx-dark, #14181B); }
.frigo-hs--light .hs-arrow {
    color: var(--tx-dark, #14181B);
    border-color: var(--line-l-2, rgba(20, 24, 27, 0.22));
}
.frigo-hs--light .eyebrow { color: var(--red, #B01F26); }
.frigo-hs--light .hs-end { border-color: var(--line-l, rgba(20, 24, 27, 0.11)); }
.frigo-hs--light .hs-end:hover { background: var(--sand, #E6EAEC); }
.frigo-hs--light .hs-end-count { color: var(--tx-mute-d, #586168); }
.frigo-hs--light .hs-item figure { background: var(--sand-2, #D3D8DB); }

/* ---------- Poruka uredniku ----------
   Namerno neusklađena sa dizajnom sajta: to je poruka iz administracije,
   ne deo strane. Vidi je samo prijavljeni urednik. */
.frigo-hs-notice {
    padding: 20px 24px;
    border: 1px dashed #c3244a;
    background: #fff5f7;
    color: #3b2b2f;
    font-size: 14px;
    line-height: 1.6;
}
.frigo-hs-notice p { margin: 0 0 8px; }
.frigo-hs-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. */
.frigo-hs { font-family: var(--font-body, inherit); }