/* ==========================================================================
   POSLOVNI ENGLESKI — DESIGN SYSTEM
   --------------------------------------------------------------------------
   BELA je podloga strane. Krem iz brifa je TRAKA koja razdvaja sekcije.
   Zelena je jedan tamni blok na kraju. Zlatna je akcenat, ne materijal.

   v3 — posle poređenja sa referentnim sajtom škole jezika. Tri stvari koje
   su prethodnu verziju vukle ka butiku, a ne ka školi:

     1. KREM KAO PODLOGA CELE STRANE. Topla bež strana bez bele je izlog.
        Škola je bela strana sa jednom toplom trakom između sekcija.
     2. ZLATNA NA DUGMADIMA. Zlatno dugme je proizvod. Primarno dugme je sada
        zeleno sa belim tekstom; zlatna je ostala za sitno — link, navodnik,
        aktivan nivo, pločice.
     3. PREVELIKI NASLOVI. h1 od 3.5rem i h2 od 2.6rem su plakat. Spušteno na
        3rem i 2.125rem: naslov uvodi informaciju umesto da je zamenjuje.

   Ostaje: serif nosi glas (h1, h2), sans nosi sadržaj (h3 naniže). Radijusi
   su mali. Kartica se drži tankim okvirom, ne senkom.

   Svaki blok nadograđuje ove tokene i nikada ne deklariše svoju širinu
   kontejnera, breakpoint ili korak tipografske skale.
   ========================================================================== */

/* --------------------------------------------------------------- 1. FONTS */

/* Instrument Serif ima samo jednu težinu (400) plus italic — to je cela
   porodica, nema bold reza. Zato ga koriste samo h1 i h2. */
@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* DM Sans varijabilni — jedan fajl pokriva ceo raspon težina. Nosi sve od
   h3 naniže, sve oznake, meta redove i formu. Vidi assets/fonts/README.md. */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-var.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------- 2. TOKENS */

:root {
    /* --- Brend. Tri boje iz brifa, plus bela kao podloga. */
    --pew-white:        #FFFFFF;

    --pew-green:        #0E3B2E;
    --pew-green-deep:   #0A2C22;
    --pew-green-soft:   #17513F;
    --pew-green-line:   #24614D;

    --pew-gold:         #C08A2E;
    --pew-gold-hot:     #D9A34E;
    --pew-gold-ink:     #8A5F14;   /* akcenat KAO TEKST na beloj — 5.6:1 */
    --pew-gold-wash:    rgba(192, 138, 46, .11);

    --pew-cream:        #F5F1E6;   /* traka iz brifa, ne podloga strane */
    --pew-cream-line:   #E2DDCC;

    --pew-line-soft:    #E7E3D9;   /* hairline na beloj — topao, ne siv */

    /* --- Tekst */
    --pew-ink:          #0E3B2E;   /* naslovi na beloj — 11.9:1 */
    --pew-ink-body:     #33403A;   /* tekući tekst na beloj — 10.8:1 */
    --pew-ink-muted:    #5A665F;   /* sekundarno na beloj — 6.0:1 */

    --pew-light:        #FFFFFF;   /* naslovi na zelenoj */
    --pew-light-body:   #DCD8CB;   /* tekući tekst na zelenoj — 8.4:1 */
    --pew-light-muted:  #A3B0A8;   /* sekundarno na zelenoj — 5.3:1 */

    /* --- Semantičke uloge.
       Blokovi NIKADA ne imenuju brend boju direktno — čitaju ove uloge, a
       klasa površine (§4) ih premešta. Jedan set pravila, četiri površine.

       --pew-accent je akcenat KAO MASTILO (link, navodnik, ikonica).
       --pew-accent-fill je akcenat KAO POLJE (pločica, tačka, aktivan nivo).
       Nisu ista boja: zlatna na beloj je 2.7:1 kao tekst i pada AA, ali kao
       podloga sa zelenim mastilom je 5.3:1 i prolazi.

       --btn-* je zaseban par: primarno dugme je ZELENO na svetlim površinama
       i ZLATNO na zelenoj. Površina odlučuje, dugme ne zna ništa o tome. */
    --pew-bg:           var(--pew-white);
    --pew-fg:           var(--pew-ink);
    --pew-fg-body:      var(--pew-ink-body);
    --pew-fg-muted:     var(--pew-ink-muted);
    --pew-line:         var(--pew-line-soft);
    --pew-surface:      var(--pew-white);

    --pew-accent:       var(--pew-gold-ink);
    --pew-accent-fill:  var(--pew-gold);
    --pew-accent-hot:   var(--pew-gold-hot);
    --pew-accent-wash:  var(--pew-gold-wash);

    --pew-btn-bg:       var(--pew-green);
    --pew-btn-bg-hot:   var(--pew-green-soft);
    --pew-btn-fg:       var(--pew-white);

    /* --- Porodice pisma */
    --pew-font-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --pew-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* --- Tipografska skala. Spuštena: naslov uvodi informaciju, ne zamenjuje je. */
    --fs-display:  clamp(2.375rem,  4.4vw, 3.5rem);
    --fs-h1:       clamp(2.125rem,  3.6vw, 3rem);
    --fs-h2:       clamp(1.625rem,  2.6vw, 2.125rem);
    --fs-h3:       clamp(1.125rem,  1.4vw, 1.3125rem);
    --fs-h4:       1.0625rem;
    --fs-h5:       1rem;
    --fs-lead:     clamp(1rem,      1.1vw, 1.125rem);
    --fs-body:     1rem;
    --fs-small:    0.9375rem;
    --fs-tiny:     0.875rem;
    --fs-label:    0.75rem;

    --lh-tight:   1.08;
    --lh-snug:    1.18;
    --lh-normal:  1.45;
    --lh-relaxed: 1.65;

    --tr-display: -0.015em;
    --tr-heading: -0.012em;
    --tr-label:    0.09em;

    /* --- Skala razmaka */
    --sp-3xs:  0.25rem;
    --sp-2xs:  0.5rem;
    --sp-xs:   0.75rem;
    --sp-sm:   1rem;
    --sp-md:   1.5rem;
    --sp-lg:   2rem;
    --sp-xl:   clamp(2.25rem, 3.4vw, 3rem);
    --sp-2xl:  clamp(3rem, 5vw, 4.25rem);
    --sp-3xl:  clamp(4rem, 6.5vw, 6rem);

    --sp-section: var(--sp-3xl);
    --gutter:     clamp(20px, 4.5vw, 52px);

    /* --- Kontejneri */
    --w-narrow:  820px;
    --w-base:   1240px;
    --w-wide:   1480px;
    --w-prose:  760px;

    /* --- Radijusi. Mali. Alat, ne proizvod. */
    --r-xs:   2px;
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:  12px;
    --r-pill: 999px;   /* samo za oznake i tačke */

    /* --- Senke. Skoro nikad. Kartica se drži okvirom. */
    --sh-sm: 0 1px 2px rgba(14, 59, 46, .04);
    --sh-md: 0 6px 20px rgba(14, 59, 46, .06);

    /* --- Kretanje */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:   160ms;
    --dur-base:   260ms;
    --dur-reveal: 620ms;

    /* --- Z skala */
    --z-raised:   10;
    --z-sticky:  100;
    --z-header:  900;
    --z-overlay: 950;

    --header-h: 72px;
}

/* Breakpoints (samo dokumentacija — CSS promenljive ne rade u @media):
   560  768  1024  1280
   Mobile-first. Nikad peti. */

/* --------------------------------------------------------------- 3. RESET */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* One-pager: svaki skok na sidro mora da promaši fiksni header. */
    scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
    margin: 0;
    background: var(--pew-white);
    color: var(--pew-ink-body);
    font-family: var(--pew-font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip, ne hidden: hidden pretvara body u scroll kontejner i ubija
       position:sticky za sve unutra. */
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: inherit;
    text-wrap: balance;
}

/* Serif nosi glas. Samo dva nivoa — tvrdnja strane i tvrdnja sekcije. */
h1, h2 {
    font-family: var(--pew-font-display);
    font-weight: 400;
    line-height: var(--lh-snug);
    letter-spacing: var(--tr-heading);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-h2); }

/* Sans nosi sadržaj. Naslov kartice, naslov koraka, naslov polja. */
h3, h4, h5, h6 {
    font-family: var(--pew-font-body);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-small); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

blockquote, figure, dl, dd { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

hr { border: 0; border-top: 1px solid var(--pew-line); margin: var(--sp-xl) 0; }

::selection { background: var(--pew-gold); color: var(--pew-green-deep); }

*:focus { outline: 2px solid var(--pew-accent); outline-offset: 3px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 2px solid var(--pew-accent); outline-offset: 3px; border-radius: 2px; }

.pew-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: .9em 1.4em;
    background: var(--pew-green);
    color: var(--pew-white);
}
.pew-skip-link:focus { left: 0; }

.pew-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------- 4. LAYOUT */

.pew-container {
    width: 100%;
    max-width: var(--w-base);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.pew-container--narrow { max-width: var(--w-narrow); }
.pew-container--wide   { max-width: var(--w-wide); }
.pew-container--full   { max-width: none; }

.pew-section {
    position: relative;
    padding-block: var(--sp-section);
    background: var(--pew-bg);
    color: var(--pew-fg);
}
.pew-section--tight { padding-block: var(--sp-2xl); }
.pew-section--slim  { padding-block: var(--sp-xl); }
.pew-section--flush { padding-block: 0; }

/* --- Površine. Četiri, i to je ceo spisak. -------------------------------
   Bela je podrazumevana i nosi najviše sekcija. Krem je traka koja razdvaja
   dve bele. Zelena je jedan blok, na kraju. */

.pew-section--white,
.pew-theme-white {
    --pew-bg:         var(--pew-white);
    --pew-fg:         var(--pew-ink);
    --pew-fg-body:    var(--pew-ink-body);
    --pew-fg-muted:   var(--pew-ink-muted);
    --pew-line:       var(--pew-line-soft);
    --pew-surface:    var(--pew-white);
    --pew-accent:     var(--pew-gold-ink);
    --pew-btn-bg:     var(--pew-green);
    --pew-btn-bg-hot: var(--pew-green-soft);
    --pew-btn-fg:     var(--pew-white);
}

.pew-section--cream,
.pew-theme-cream {
    --pew-bg:         var(--pew-cream);
    --pew-fg:         var(--pew-ink);
    --pew-fg-body:    var(--pew-ink-body);
    --pew-fg-muted:   var(--pew-ink-muted);
    --pew-line:       var(--pew-cream-line);
    /* Kartica na kremu je BELA. To je jedini razlog zašto se traka i vidi. */
    --pew-surface:    var(--pew-white);
    --pew-accent:     var(--pew-gold-ink);
    --pew-btn-bg:     var(--pew-green);
    --pew-btn-bg-hot: var(--pew-green-soft);
    --pew-btn-fg:     var(--pew-white);
}

.pew-section--green,
.pew-theme-green {
    --pew-bg:         var(--pew-green);
    --pew-fg:         var(--pew-light);
    --pew-fg-body:    var(--pew-light-body);
    --pew-fg-muted:   var(--pew-light-muted);
    --pew-line:       var(--pew-green-line);
    --pew-surface:    var(--pew-green-soft);
    /* Na zelenoj puna zlatna prolazi AA (4.8:1), pa akcenat ne mora da tamni. */
    --pew-accent:     var(--pew-gold);
    --pew-accent-wash: rgba(192, 138, 46, .18);
    /* Zeleno dugme na zelenoj podlozi ne postoji. Ovde je zlatno. */
    --pew-btn-bg:     var(--pew-gold);
    --pew-btn-bg-hot: var(--pew-gold-hot);
    --pew-btn-fg:     var(--pew-green-deep);
}

.pew-section--green-deep {
    --pew-bg:      var(--pew-green-deep);
    --pew-line:    #1A4B3B;
    --pew-surface: var(--pew-green);
}

/* --- Rešetke ------------------------------------------------------------ */

.pew-grid { display: grid; gap: var(--sp-lg); }
.pew-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pew-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pew-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pew-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }

@media (max-width: 1024px) {
    .pew-grid--4, .pew-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .pew-grid--2, .pew-grid--3, .pew-grid--4,
    .pew-grid--split { grid-template-columns: minmax(0, 1fr); }
}

.pew-stack > * + * { margin-top: var(--sp-md); }
.pew-cluster { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
.pew-measure { max-width: 46ch; }
.pew-center  { text-align: center; }

.pew-section--fill { min-height: 72vh; display: grid; place-items: center; }
.pew-section--continued { padding-top: 0; }

/* -------------------------------------------------------------- 5. PLOČICE */

/*
 * Motiv kuće: nekoliko pravougaonika oko slike, u mreži.
 *
 * Preuzeto sa referentnog sajta škole, ali svedeno: tamo je fotografija
 * izrezana u šahovsko polje od dvadesetak kvadrata, što je razigrano do
 * dečjeg. Ovde su tri-četiri pločice OKO slike — dovoljno da se vidi da je
 * kadar konstruisan, premalo da postane ukras.
 *
 * Ceo sloj je aria-hidden i pointer-events:none: dekoracija ne sme da hvata
 * klik ni da postoji za čitač ekrana.
 */
.pew-tiles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.pew-tile {
    position: absolute;
    border-radius: var(--r-xs);
    background: var(--pew-cream);
}
.pew-tile--gold  { background: var(--pew-gold); }
.pew-tile--wash  { background: var(--pew-accent-wash); }
.pew-tile--green { background: var(--pew-green); }
.pew-tile--outline { background: none; border: 1px solid var(--pew-line); }

/* ---------------------------------------------------------- 6. TYPOGRAPHY */

/*
 * Nadnaslov: sitan sans na tankoj podlozi. Isto telo kao svaka druga oznaka
 * na sajtu (§8), pa čita se kao deo sistema, a ne kao vinjeta.
 */
.pew-eyebrow {
    display: inline-block;
    font-family: var(--pew-font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--pew-accent);
    line-height: 1;
    padding: .5em .75em;
    background: var(--pew-accent-wash);
    border-radius: var(--r-xs);
    margin: 0 0 var(--sp-md);
}
.pew-eyebrow--plain { background: none; padding: 0; margin-bottom: var(--sp-sm); }

.pew-display {
    font-family: var(--pew-font-display);
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-display);
    text-wrap: balance;
}

.pew-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-normal);
    color: var(--pew-fg-body);
    max-width: 58ch;
}

.pew-body { color: var(--pew-fg-body); max-width: 66ch; }
.pew-body a:not(.pew-btn) {
    color: var(--pew-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pew-muted { color: var(--pew-fg-muted); }
.pew-accent-text { color: var(--pew-accent); }

/*
 * Istaknuta reč u naslovu: Instrument Serif Italic u zlatnoj.
 * Samo u h1 i h2 — jedina dva mesta gde je serif uopšte u igri.
 */
.pew-em {
    font-style: italic;
    color: var(--pew-accent);
    /* inline-block, ne inline: transform se ne primenjuje na nezamenljiv
       inline box, pa bi reveal animacija tiho preskočila baš ovu reč i ona bi
       stajala dok se ostatak reda podiže. */
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.pew-meta { font-size: var(--fs-tiny); color: var(--pew-fg-muted); line-height: 1.5; }

/*
 * Broj i naziv sekcije. Na one-pageru je ovo jedini pokazatelj gde se čitalac
 * nalazi u redosledu.
 */
.pew-index {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--pew-font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--pew-fg-muted);
    margin-bottom: var(--sp-sm);
}
.pew-index__num { color: var(--pew-accent); }
.pew-index::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--pew-line);
    max-width: 56px;
}

.pew-section-head { max-width: 660px; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.pew-section-head > h2 { margin-bottom: var(--sp-sm); }
.pew-section-head--center { margin-inline: auto; text-align: center; }
.pew-section-head--center .pew-index { justify-content: center; }
.pew-section-head--center .pew-index::after { display: none; }
.pew-section-head--center .pew-lead { margin-inline: auto; }

.pew-section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
    max-width: none;
}
@media (max-width: 900px) {
    .pew-section-head--split { grid-template-columns: 1fr; align-items: start; }
}

/* ------------------------------------------------------------- 7. BUTTONS */

/*
 * Primarno dugme čita --btn-* koje postavlja POVRŠINA: zeleno na beloj i
 * kremu, zlatno na zelenoj. Zlatno dugme na svetloj podlozi je bilo najjači
 * "butik" signal u prethodnoj verziji — zlatna je materijal, zelena je marka.
 */
.pew-btn {
    --bg: var(--pew-btn-bg);
    --fg: var(--pew-btn-fg);
    --bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .9em 1.55em;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    font-family: var(--pew-font-body);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition: background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}
.pew-btn:hover { background: var(--pew-btn-bg-hot); color: var(--fg); }
.pew-btn:active { transform: translateY(1px); }

.pew-btn__icon { transition: transform var(--dur-base) var(--ease-out); flex: none; }
.pew-btn:hover .pew-btn__icon { transform: translateX(3px); }

.pew-btn--ghost {
    --bg: transparent;
    --fg: var(--pew-fg);
    --bd: var(--pew-line);
}
.pew-btn--ghost:hover { background: transparent; border-color: var(--pew-fg); }

/* Zlatno dugme na svetloj podlozi. Postoji, ali je sekundarno — za mesta gde
   zeleno dugme stoji pored zelenog bloka i ne bi se odvojilo. */
.pew-btn--accent {
    --bg: var(--pew-gold);
    --fg: var(--pew-green-deep);
}
.pew-btn--accent:hover { background: var(--pew-gold-hot); }

.pew-btn--sm    { padding: .65em 1.1em; font-size: var(--fs-tiny); }
.pew-btn--lg    { padding: 1.05em 1.9em; font-size: var(--fs-body); }
.pew-btn--block { display: flex; width: 100%; }

/* Tekstualni link sa strelicom. Tercijarna radnja. */
.pew-link {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--pew-accent);
    transition: gap var(--dur-base) var(--ease-out);
}
.pew-link:hover { gap: .8em; }

/* -------------------------------------------------------------- 8. OZNAKE */

/*
 * Jedno telo za sve oznake na sajtu. Bez ovoga bi svaka sekcija izmislila
 * svoju sitnu pravougaonu stvarčicu i one bi se sve razlikovale za dva piksela.
 */
.pew-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .35em .6em;
    border: 1px solid var(--pew-line);
    border-radius: var(--r-xs);
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--pew-fg-muted);
    background: transparent;
    white-space: nowrap;
}
.pew-badge svg { width: 13px; height: 13px; flex: none; }
.pew-badge--accent { color: var(--pew-accent); border-color: transparent; background: var(--pew-accent-wash); }

.pew-icon     { width: 20px; height: 20px; display: block; }
.pew-icon--sm { width: 16px; height: 16px; }
.pew-icon--lg { width: 24px; height: 24px; }

/* --------------------------------------------------------------- 9. CARDS */

.pew-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background: var(--pew-surface);
    border: 1px solid var(--pew-line);
    border-radius: var(--r-md);
    transition: border-color var(--dur-base) var(--ease-out);
}
.pew-card--hover:hover { border-color: var(--pew-accent-fill); }

.pew-card__title { margin-bottom: var(--sp-2xs); color: var(--pew-fg); }
.pew-card__text  { color: var(--pew-fg-body); font-size: var(--fs-small); line-height: 1.6; margin: 0; }

/* Ikonica: prazan kvadrat sa tankim okvirom, ne pun krug u boji. Krug u boji
   je bedž; okvir je stavka u katalogu. */
.pew-card__icon {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pew-line);
    border-radius: var(--r-sm);
    color: var(--pew-accent);
    flex: none;
    margin-bottom: var(--sp-md);
}

/* ------------------------------------------------------------- 10. MEDIJI */

/*
 * Okvir za sliku. Odnos stranica se zadaje kroz --ratio, pa raspored ne skače
 * dok se slika učitava — što je i razlog zašto svaka slika ide kroz ovaj
 * omotač umesto direktno u rešetku.
 */
.pew-media {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 3);
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--pew-cream);
}
.pew-media img { width: 100%; height: 100%; object-fit: cover; }
.pew-media--square { --ratio: 1 / 1; }
.pew-media--wide   { --ratio: 16 / 9; }
.pew-media--tall   { --ratio: 3 / 4; }

/*
 * Placeholder za sliku koja još ne postoji.
 *
 * Namerno NIJE prazan sivi pravougaonik: piše šta na to mesto ide i u kojoj
 * rezoluciji. Isti markup blok renderuje u editoru kada je ACF polje za sliku
 * prazno, pa urednik uvek vidi šta se od njega traži umesto rupe.
 */
.pew-ph {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 3);
    display: grid;
    place-items: center;
    align-content: center;
    gap: .45rem;
    padding: var(--sp-md);
    text-align: center;
    border: 1px dashed var(--pew-line);
    border-radius: var(--r-md);
    background: var(--pew-cream);
    color: var(--pew-fg-muted);
}
.pew-ph__icon { width: 26px; height: 26px; color: var(--pew-accent); opacity: .75; }
.pew-ph__label {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--pew-fg);
    max-width: 30ch;
    line-height: 1.4;
}
.pew-ph__meta {
    font-size: var(--fs-label);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pew-fg-muted);
}
.pew-ph--compact { gap: .25rem; padding: var(--sp-sm); }
.pew-ph--compact .pew-ph__icon { display: none; }
.pew-ph--compact .pew-ph__label { font-size: var(--fs-tiny); font-weight: 500; }
.pew-ph--round { border-radius: 50%; }

/* -------------------------------------------------------------- 11. FORMS */

.pew-field { display: flex; flex-direction: column; gap: .35rem; }
.pew-field__label {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pew-fg-muted);
}
.pew-field__label .pew-req { color: var(--pew-accent); }

.pew-input,
.pew-select,
.pew-textarea {
    width: 100%;
    padding: .75em 1em;
    background: var(--pew-surface);
    border: 1px solid var(--pew-line);
    border-radius: var(--r-sm);
    color: var(--pew-fg);
    font-size: var(--fs-small);
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.pew-input::placeholder,
.pew-textarea::placeholder { color: var(--pew-fg-muted); opacity: 1; }
.pew-input:focus,
.pew-select:focus,
.pew-textarea:focus {
    outline: none;
    border-color: var(--pew-accent-fill);
    box-shadow: 0 0 0 3px var(--pew-accent-wash);
}
.pew-textarea { min-height: 110px; resize: vertical; line-height: var(--lh-relaxed); }

.pew-select {
    appearance: none;
    padding-right: 2.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3B2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 15px;
}

.pew-check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-tiny); line-height: 1.5; }
.pew-check input { margin-top: .25em; accent-color: var(--pew-green); flex: none; }
.pew-check a { color: var(--pew-accent); text-decoration: underline; text-underline-offset: 3px; }

.pew-form__note { font-size: var(--fs-tiny); color: var(--pew-fg-muted); }

/* ------------------------------------------------------------- 12. HEADER */

.pew-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: var(--pew-white);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.pew-header.is-stuck { border-bottom-color: var(--pew-line-soft); }
.pew-header.is-hidden { transform: translateY(-100%); }

/*
 * Header nad tamnim herojem. Providan header preuzima boju sekcije ispod
 * sebe, pa nad zelenim herojem logo i meni u zelenoj postaju nevidljivi.
 * Klasu nosi <body>; važi samo dok header nije prilepljen.
 */
body.pew-hero-dark .pew-header:not(.is-stuck) { background: transparent; }
body.pew-hero-dark .pew-header:not(.is-stuck) .pew-logo,
body.pew-hero-dark .pew-header:not(.is-stuck) .pew-logo__sub,
body.pew-hero-dark .pew-header:not(.is-stuck) .pew-nav__link { color: var(--pew-white); }
body.pew-hero-dark .pew-header:not(.is-stuck) .pew-nav__link:hover { color: var(--pew-gold); }
body.pew-hero-dark .pew-header:not(.is-stuck) .pew-burger { border-color: rgba(255, 255, 255, .35); }
body.pew-hero-dark .pew-header:not(.is-stuck) .pew-burger__bar { background: var(--pew-white); }

.pew-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    width: 100%;
}

.pew-logo {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-family: var(--pew-font-display);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--pew-green);
    line-height: 1;
    flex: none;
}
.pew-logo__img { max-height: 36px; width: auto; }
.pew-logo__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pew-gold); flex: none; }
.pew-logo__sub {
    font-family: var(--pew-font-body);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pew-ink-muted);
}

.pew-nav__list { display: flex; align-items: center; gap: clamp(.85rem, 1.8vw, 1.75rem); }
.pew-nav__link {
    position: relative;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--pew-ink-body);
    padding-block: .45rem;
    transition: color var(--dur-base) var(--ease-out);
}
.pew-nav__link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--pew-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
}
.pew-nav__link:hover { color: var(--pew-green); }
.pew-nav__link:hover::after,
.pew-nav__item.is-current .pew-nav__link::after { transform: scaleX(1); transform-origin: left; }
.pew-nav__item.is-current .pew-nav__link { color: var(--pew-green); }

.pew-header__actions { display: flex; align-items: center; gap: var(--sp-2xs); flex: none; }

.pew-burger {
    display: none;
    width: 40px; height: 40px;
    place-items: center;
    border: 1px solid var(--pew-line-soft);
    border-radius: var(--r-sm);
    background: transparent;
}
.pew-burger__bar {
    display: block;
    width: 16px; height: 1.5px;
    background: var(--pew-green);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.pew-burger__bar + .pew-burger__bar { margin-top: 4px; }
.pew-burger[aria-expanded="true"] .pew-burger__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.pew-burger[aria-expanded="true"] .pew-burger__bar:nth-child(2) { opacity: 0; }
.pew-burger[aria-expanded="true"] .pew-burger__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 960px) {
    .pew-nav { display: none; }
    .pew-burger { display: grid; }
    .pew-header__actions .pew-btn { display: none; }
}

.pew-drawer {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: var(--z-overlay);
    background: var(--pew-white);
    padding-block: var(--sp-xl);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
}
.pew-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pew-drawer__list { display: flex; flex-direction: column; }
.pew-drawer__link {
    display: block;
    padding: 1rem 0;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--pew-green);
    border-bottom: 1px solid var(--pew-line-soft);
}
.pew-drawer__actions { margin-top: var(--sp-lg); }
.pew-drawer__actions .pew-btn { width: 100%; }

body.pew-drawer-open { overflow: hidden; }

.site-main { padding-top: var(--header-h); }
.site-main--flush { padding-top: 0; }

/* ------------------------------------------------------------- 13. FOOTER */

.pew-footer {
    background: var(--pew-green-deep);
    color: var(--pew-light-body);
    padding-block: var(--sp-2xl) var(--sp-lg);
    --pew-line: #1A4B3B;
    --pew-fg: var(--pew-light);
    --pew-fg-body: var(--pew-light-body);
    --pew-fg-muted: var(--pew-light-muted);
    --pew-accent: var(--pew-gold);
}
.pew-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    padding-bottom: var(--sp-xl);
}
@media (max-width: 768px) { .pew-footer__top { grid-template-columns: 1fr; } }

.pew-footer__brand {
    font-family: var(--pew-font-display);
    font-size: var(--fs-h3);
    color: var(--pew-light);
    margin-bottom: var(--sp-2xs);
}
.pew-footer__title {
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--pew-gold);
    margin-bottom: var(--sp-sm);
}
.pew-footer__list { display: flex; flex-direction: column; gap: .5rem; font-size: var(--fs-small); }
.pew-footer__list a { color: var(--pew-light-body); transition: color var(--dur-base) var(--ease-out); }
.pew-footer__list a:hover { color: var(--pew-gold); }

.pew-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding-top: var(--sp-md);
    border-top: 1px solid #1A4B3B;
    font-size: var(--fs-tiny);
    color: var(--pew-light-muted);
}
.pew-footer__bottom a { color: inherit; transition: color var(--dur-base) var(--ease-out); }
.pew-footer__bottom a:hover { color: var(--pew-gold); }

/* ------------------------------------------------------------ 14. MARQUEE */

/*
 * Beskonačna traka. Markup:
 *
 *   <div class="pew-marquee" data-pew-marquee>
 *     <div class="pew-marquee__viewport">
 *       <ul class="pew-marquee__track">
 *         <li class="pew-marquee__item"> … </li>
 *
 * assets/js/pew.js klonira stazu i postavlja --pew-marquee-duration.
 *
 * Podrazumevano stanje je HORIZONTALNO SKROLABILNO, ne skriveno: bez JS-a,
 * sa uključenim prefers-reduced-motion, ili kad sadržaj i tako staje u širinu,
 * do kartica se i dalje dolazi rukom. Klasu .is-running dodaje isključivo JS.
 */
.pew-marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.pew-marquee.is-running {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.pew-marquee__viewport { display: flex; gap: var(--sp-lg); width: max-content; }
.pew-marquee.is-running .pew-marquee__viewport {
    animation: pew-marquee var(--pew-marquee-duration, 40s) linear infinite;
}
/* Pauza na hover i na fokus. Fokus nije kozmetika: bez njega tastaturni
   korisnik juri karticu koja beži ispod kursora. */
.pew-marquee.is-running:hover .pew-marquee__viewport,
.pew-marquee.is-running:focus-within .pew-marquee__viewport { animation-play-state: paused; }

.pew-marquee__track { display: flex; gap: var(--sp-lg); margin: 0; padding: 0; list-style: none; }
.pew-marquee__item { flex: none; display: flex; width: min(400px, 82vw); }
.pew-marquee__item > * { width: 100%; }

/*
 * Pomeraj je jedna DUŽINA STAZE, a ne pola širine kontejnera.
 * Kontejner drži dve staze i razmak između njih: 2W + G.
 * -50% je -(W + G/2), pa fali još G/2 da bi se poklopilo sa W + G.
 * Bez oduzimanja pola razmaka šav skoči za pola gapa svaki krug.
 */
@keyframes pew-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-50% - var(--sp-lg) / 2), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pew-marquee { scroll-snap-type: x mandatory; }
    .pew-marquee__item { scroll-snap-align: start; }
}

/* -------------------------------------------------------------- 15. MOTION */

/*
 * Reveal ugovor. Blok postavi data-pew-animate="true" na sekciju, i svaki
 * element sa data-pew-reveal unutra klizne naviše kad sekcija uđe u vidno
 * polje. Bez biblioteke — IntersectionObserver iz assets/js/pew.js samo dodaje
 * .is-in, a CSS radi ostalo.
 *
 * Početno stanje visi o klasi .pew-js koju dodaje isti skript: posetilac bez
 * JS-a nikad ne vidi skriven sadržaj.
 */
.pew-js [data-pew-animate="true"] [data-pew-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
}
.pew-js [data-pew-animate="true"] [data-pew-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .pew-js [data-pew-animate="true"] [data-pew-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ 16. EDITOR / PRINT */

.pew-block-placeholder {
    padding: var(--sp-xl);
    border: 1px dashed var(--pew-line-soft);
    border-radius: var(--r-md);
    background: var(--pew-cream);
    color: var(--pew-ink-muted);
    text-align: center;
}
.pew-block-placeholder__title {
    font-size: var(--fs-h4);
    font-weight: 600;
    color: var(--pew-green);
    margin-bottom: var(--sp-2xs);
}

@media print {
    .pew-header, .pew-drawer, .pew-burger, .pew-tiles { display: none !important; }
    .site-main { padding-top: 0; }
    .pew-section { padding-block: 1.5rem; background: #fff; color: #000; }
}