/* Tema „deco" – GENERISANO skriptom ___alati/theme-sync.mjs iz statičkog sajta; ne mijenjati ručno.
   Dopunski <style> blok podstranica (isti na svim) + CSS stranice Reference (D10). Naslovna ga ne učitava. */
      /* Dopuna: bundle je build-ovan za naslovnu, ovdje su klase koje joj ne trebaju. */
      .page-hero { padding-top: calc(var(--header-h, 88px) + 3.25rem); padding-bottom: clamp(2.75rem, 6vw, 5rem); }

      /* Hijerarhija naslova: h1 nosi punu .h-section velicinu (do 3.6rem),
         h2 ide jedan stepenik nize. Na naslovnoj je h1 vec .h-display pa ovo tamo ne ide. */
      h2.h-section { font-size: clamp(1.35rem, 3.1vw, 2.6rem); }
      .h-brand { font-size: clamp(1.55rem, 3.4vw, 2.7rem); }
      .crumbs { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-400); }
      .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
      .crumbs li + li::before { content: "/"; margin: 0 .55rem; color: var(--color-ink-600); }
      .crumbs a { transition: color .3s var(--ease-out-expo); }
      .crumbs a:hover { color: var(--color-ink-200); }
      .crumbs [aria-current] { color: var(--color-ink-300); }

      .prose { color: var(--color-ink-300); font-size: .9375rem; line-height: 1.75; text-wrap: pretty; }
      .prose > * + * { margin-top: 1.05rem; }
      .prose strong { color: var(--color-ink-100); font-weight: 600; }
      .prose a { color: var(--color-brand-400); text-decoration: underline; text-underline-offset: 3px; }
      .prose ul { display: flex; flex-direction: column; gap: .7rem; }
      .prose li { position: relative; padding-left: 1.15rem; }
      .prose li::before { content: ""; position: absolute; left: 0; top: .62rem; width: .4rem; height: .4rem; background: var(--accent, var(--color-brand-500)); }

      .autogrid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 17rem)), 1fr)); }
      .stack-lg > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }
      .rule { height: 1px; background: linear-gradient(90deg, rgb(255 255 255 / .12), rgb(255 255 255 / .02)); }

      /* Puna sirina ekrana: panoramska traka sa fotografijom, stopljena sa pozadinom. */
      .band { aspect-ratio: 4 / 3; }
      @media (min-width: 640px)  { .band { aspect-ratio: 16 / 7; } }
      @media (min-width: 1024px) { .band { aspect-ratio: 24 / 10; } }
      .band-wrap::before, .band-wrap::after { content: ""; position: absolute; inset-inline: 0; height: 22%; pointer-events: none; }
      .band-wrap::before { top: 0; background: linear-gradient(to bottom, #05070f, rgb(5 7 15 / .35) 55%, transparent); }
      .band-wrap::after  { bottom: 0; background: linear-gradient(to top, #05070f, rgb(5 7 15 / .35) 55%, transparent); }
      .glow::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        background: radial-gradient(var(--glow-size, 58% 62%) at var(--glow-at, 50% 0%), rgb(var(--glow-rgb, 27 157 216) / var(--glow-a, .09)), transparent 70%); }
      .hero-fade { position: absolute; inset-inline: 0; bottom: 0; height: 55%; background: linear-gradient(to top, #05070f 0%, rgb(5 7 15 / .86) 32%, rgb(5 7 15 / .35) 68%, transparent 100%); }
      /* D15 (N30): okvir fokusa preko fotografije heroja – isti dvobojni okvir kao na naslovnoj (N15): okvir (2 px, odmak
         3 px) u tamnom pojasu od 7 px, pa kontrast ne zavisi od fotografije ispod; važi i za header, koji stoji iznad
         heroja. Dugmad (.btn) su izuzeta – fokus ih ispuni (kao hover), a clip-path ionako siječe i okvir i pojas. */
      .page-hero :focus-visible:not(.btn), [data-header] :focus-visible:not(.btn) { box-shadow: 0 0 0 7px rgb(5 7 15 / .92) }

      /* --- reference: filter + lightbox --- */
      .filter-btn { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
        display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; color: var(--color-ink-400);
        background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .1);
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
        transition: color .35s var(--ease-out-expo), background-color .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo); }
      .filter-btn:hover { color: var(--color-ink-100); background: rgb(255 255 255 / .06); }
      .filter-btn::before { content: ""; width: .45rem; height: .45rem; background: var(--accent, var(--color-ink-500)); transition: transform .35s var(--ease-out-expo); }
      .filter-btn[aria-pressed="true"] { color: var(--color-ink-50); border-color: var(--accent, var(--color-brand-500)); background: color-mix(in oklab, var(--accent, #1B9DD8) 12%, transparent); }
      .filter-btn[aria-pressed="true"]::before { transform: scale(1.5); }
      .filter-btn span { color: var(--color-ink-600); }

      .gal-item.is-hidden { display: none; }

      .lb { position: fixed; inset: 0; z-index: 9500; display: none; background: rgb(3 5 11 / .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
      .lb.is-open { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
      html.lb-lock, html.lb-lock body { overflow: hidden; }

      .lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / .08); }
      .lb-stage { position: relative; display: flex; align-items: center; justify-content: center;
        padding: 1rem; min-height: 0; overflow: hidden; }
      .lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
        opacity: 0; transition: opacity .45s var(--ease-out-expo); }
      .lb-img.is-on { opacity: 1; }
      .lb-btn { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 3rem; height: 3rem;
        color: var(--color-ink-100); background: rgb(8 11 22 / .72); border: 1px solid rgb(255 255 255 / .14);
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
        transition: background-color .35s var(--ease-out-expo), color .35s var(--ease-out-expo); }
      .lb-btn:hover { background: var(--color-brand-500); color: var(--color-ink-950); }
      .lb-btn[disabled] { opacity: .3; pointer-events: none; }
      .lb-btn.prev { left: .75rem; }
      .lb-btn.next { right: .75rem; }
      .lb-thumbs { display: flex; gap: .4rem; overflow-x: auto; padding: .85rem 1.25rem; border-top: 1px solid rgb(255 255 255 / .08); scrollbar-width: thin; }
      .lb-thumb { flex: none; width: 5.5rem; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgb(255 255 255 / .12); opacity: .45;
        transition: opacity .35s var(--ease-out-expo), border-color .35s var(--ease-out-expo); }
      .lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
      .lb-thumb:hover { opacity: .8; }
      .lb-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent, var(--color-brand-500)); }
      @media (max-width: 639px) { .lb-btn { width: 2.5rem; height: 2.5rem; } .lb-thumb { width: 4rem; } }