/* ===================================================================
   BLOG - PREGLED TEKSTOVA

   Ovaj fajl se učitava POSLE style.css i ne dira ništa zajedničko:
   tokene, heder, futer, meni i h1 i dalje nosi style.css. Ovde je samo
   ono što postoji na blog stranici.

   Nijedna boja, senka ni zaobljenje nisu upisani "na ruku" - sve dolazi
   iz tokena u :root, pa promena jedne vrednosti tamo povuče i blog.
   =================================================================== */


/* Uvodna rečenica ispod naslova. Širina je ograničena na 60ch jer je to
   dužina reda na kojoj se tekst još čita bez napora - preko toga oko
   gubi početak sledećeg reda. Na desktopu blok stoji u mreži, pa mu se
   zadaje i grid-column (vidi dole). */
.blog-intro {
    max-width: 60ch;
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}


/* -------------------------------------------------------------------
   FILTERI PO RUBRICI
   Pilule istog oblika kao polje i dugme pretrage na naslovnoj
   (--radius-pill), ali sitne i u verzalu - to su oznake, a ne dugmad
   koja nešto pokreću.
   ------------------------------------------------------------------- */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.blog-chip {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-quiet);
    font-size: 0.75em;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.blog-chip:hover {
    color: var(--brand);
    border-color: var(--brand-light);
}

/* Izabrana rubrika je puna, a ne samo obojena - razlika se vidi i kad
   boje ne pomažu (crno-beli štampač, daltonizam), isto kao što je
   aktivna stavka menija podebljana, a ne samo narandžasta. */
.blog-chip.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}


/* -------------------------------------------------------------------
   KARTICA TEKSTA
   Oblik je preuzet sa naslovne strane (tri gornje kartice): bela
   površina, --radius-lg, --shadow-md i --kartica-razmak iznutra.
   Razlika je samo u sadržaju.
   ------------------------------------------------------------------- */
.blog-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    /* overflow: hidden drži sliku unutar zaobljenih uglova kartice i kad
       se pri prelasku mišem uveća. */
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Cela kartica je jedna veza, a ne samo naslov - meta za klik je time
   velika koliko i kartica, što na telefonu znači razliku između lakog i
   nezgodnog pogotka. Zato su svi elementi unutra <span>: <a> ne sme da
   sadrži blokove poput <div> ili <p>. Raspored im daje display iz CSS-a. */
.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

/* Fokus se crta oko cele kartice, a ne oko teksta u njoj - outline-offset
   je negativan da prsten ostane unutar zaobljenja, umesto da ga preseče. */
.blog-card__link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -3px;
    border-radius: var(--radius-lg);
}

.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.07), 0 12px 28px rgba(16, 24, 40, 0.12);
}


/* Slika zaglavlja. Nosi je pozadina, a ne <img>, iz dva razloga: odnos
   stranica je uvek isti pa se kartice ne razilaze po visini, a ako slika
   nedostaje ostaje meki preliv umesto ikonice slomljene slike.
   Sam put do slike stoji u HTML-u, u promenljivoj --cover. */
.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background-color: var(--surface-inset);
    background-image: var(--cover, none),
        linear-gradient(135deg, var(--brand-light) 0%, var(--info) 100%);
    background-size: cover;
    background-position: center;
    transition: transform 0.35s ease;
}

/* Blago uvećanje slike pri prelasku mišem - jedini pokret u kartici osim
   podizanja same kartice. Radi samo zato što kartica ima overflow: hidden. */
.blog-card:hover .blog-card__media {
    transform: scale(1.04);
}


/* Tekstualni deo kartice. flex: 1 na odlomku (dole) gura podnožje na dno,
   pa "Pročitaj" u svim karticama stoji na istoj liniji bez obzira na to
   koliko je naslov dugačak. */
.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--kartica-razmak);
    /* Tekst je uvek levo poravnat, i na telefonu, gde body centrira sve
       ostalo. Odlomak od tri reda centriran po sredini teško se čita -
       svaki red počinje na drugom mestu. */
    text-align: left;
}

/* Rubrika i datum u istom redu: rubrika levo, datum desno. Na najužim
   karticama datum sme da padne u novi red (flex-wrap). */
.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

/* Oznaka rubrike sedi u sivom oblačiću - istom onom koji u karticama
   prognoze nosi podatke (--surface-inset, --radius-pill). */
.blog-card__tag {
    background: var(--surface-inset);
    color: var(--text-quiet);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.6875em;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Datum je tirkizan - ista boja koju datumi imaju i u karticama prognoze,
   pa se kroz ceo sajt čita kao "ovo je vreme". */
.blog-card__date {
    color: var(--info);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
}

/* Naslov je u boji glavnog teksta, a ne narandžast: na strani sa devet
   kartica devet narandžastih naslova poništi isticanje. Narandžastu
   dobija tek kad se pređe mišem. */
.blog-card__title {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 1.0625em;
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    transition: color 0.2s ease;
}

.blog-card__link:hover .blog-card__title {
    color: var(--brand);
}

/* Odlomak se skraćuje na tri reda. Bez toga visinu reda u mreži diktira
   najduži uvod, pa ostale kartice dobiju prazan prostor na dnu - isti
   razlog zbog kog opis vremena u dnevnoj prognozi ima rezervisana dva
   reda. flex: 1 usput gura podnožje kartice na dno. */
.blog-card__excerpt {
    flex: 1;
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Podnožje kartice: samo poziv na čitanje, uz desnu ivicu - tamo gde oko
   završava red. Tanka linija iznad je ista ona koja deli heder i futer od
   sadržaja. */
.blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

/* "Pročitaj" nije dugme nego natpis sa strelicom - kartica je već cela
   veza, pa bi dugme unutar nje obećavalo drugu radnju. Strelica se crta
   kroz ::after, da se u HTML-u ne ponavlja znak. */
.blog-card__more {
    color: var(--brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.blog-card__more::after {
    content: " →";
    /* inline-block je uslov da se transform uopšte primeni na ovaj znak. */
    display: inline-block;
    transition: transform 0.2s ease;
}

.blog-card__link:hover .blog-card__more::after {
    transform: translateX(3px);
}


/* -------------------------------------------------------------------
   MREŽA
   Na telefonu jedna kolona (osnovno stanje, bez upita), a razmak među
   karticama je isti kao među karticama prognoze.
   ------------------------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.blog-featured-section,
.blog-list-section {
    margin-bottom: 24px;
}

/* Naslovi sekcija ("Izdvajamo", "Najnovije") koriste .section-title iz
   style.css; ovde se zadaje samo poravnanje na telefonu, gde body sve
   centrira, a kartice ispod su levo poravnate. */
.blog-featured-section .section-title,
.blog-list-section .section-title {
    text-align: left;
}


/* Poruka kad u izabranoj rubrici nema tekstova. Ista mera širine kao
   uvodna rečenica, da se ne razvuče preko cele strane. */
.blog-prazno {
    max-width: 60ch;
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}


/* -------------------------------------------------------------------
   DUGME "UČITAJ JOŠ"
   Oblik i veličina kao dugme pretrage, ali prazno (bela pozadina,
   narandžasta ivica): to je sporedna radnja i ne sme da se takmiči sa
   zelenim dugmetom sa naslovne strane.
   ------------------------------------------------------------------- */
.blog-more-row {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.blog-more-button {
    padding: 10px 28px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.blog-more-button:hover {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-md);
}

.blog-more-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(246, 137, 22, 0.25);
}


/* ===================================================================
   DESKTOP / TABLET (701px i šire)
   Main je mreža od dvanaest kolona (style.css), pa svaki blok mora sam
   da kaže koliko kolona zauzima - inače padne u jednu i ispadne kao
   uska traka. Isto pravilo koje na naslovnoj važi za #pollen i #forecast.
   =================================================================== */
@media (min-width: 701px) {

    .blog-intro,
    .blog-filters,
    .blog-featured-section,
    .blog-list-section {
        grid-column: 1 / -1;
    }

    .blog-intro {
        margin-bottom: 0;
        /* Razmak do filtera dolazi iz row-gap glavne mreže (22px), pa se
           ovde ne dodaje još jednom. */
    }

    .blog-filters {
        margin-bottom: 0;
    }

    /* Dve kolone na tablet širinama, tri od 1000px (vidi dole) - isti
       korak kojim se širi i mreža prognoze.
       minmax(0, 1fr) umesto samog 1fr iz istog razloga kao tamo: sa
       "auto" kao donjom granicom kolona ne sme da bude uža od najdužeg
       naslova u njoj, pa bi dugačak naslov raširio svoju karticu, a
       ostale skupio. */
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    /* Istaknuti tekst: slika levo, tekst desno. Odnos kolona je zlatni
       presek (1.618 : 1), isti onaj po kom su podeljeni polje i dugme
       pretrage i visine hedera i futera. */
    .blog-card--featured .blog-card__link {
        display: grid;
        grid-template-columns: 1.618fr 1fr;
        align-items: stretch;
    }

    /* U širokoj kartici slika nema zadat odnos stranica nego se razvlači
       do visine teksta pored sebe - visinu diktira tekst, a ne slika. */
    .blog-card--featured .blog-card__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 260px;
    }

    /* Više vazduha iznutra nego u običnoj kartici i sadržaj centriran po
       visini - kartica je široka, pa bi tekst zbijen uz vrh ostavio
       prazan pojas ispod sebe. */
    .blog-card--featured .blog-card__body {
        justify-content: center;
        padding: 28px;
    }

    .blog-card--featured .blog-card__title {
        font-size: 1.375em;
        margin-bottom: 10px;
    }

    /* U širokoj kartici ima mesta za više teksta, pa se uvod skraćuje na
       četiri reda umesto na tri. */
    .blog-card--featured .blog-card__excerpt {
        font-size: var(--fs-base);
        -webkit-line-clamp: 4;
        line-clamp: 4;
        /* flex: 1 ovde bi razvukao odlomak i razbio centriranje po visini
           iz .blog-card__body, pa se poništava. */
        flex: 0 1 auto;
    }

    .blog-featured-section,
    .blog-list-section {
        margin-bottom: 0;
    }
}


@media (min-width: 1000px) {
    .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ===================================================================
   TELEFON (do 700px)
   =================================================================== */
@media (max-width: 700px) {

    /* Body na telefonu centrira sav tekst; uvod i filteri se vraćaju na
       levo poravnanje, da se poklope sa karticama ispod. */
    .blog-intro {
        text-align: left;
    }

    .blog-filters {
        /* Traka se ne prelama u tri reda pilula nego kliza postrance -
           zauzima jedan red bez obzira na broj rubrika. */
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Negativne margine i padding puštaju pilule do same ivice ekrana
           dok klize, ali ih u mirnom stanju drže poravnate sa karticama. */
        margin-left: -20px;
        margin-right: -20px;
        padding: 2px 20px;
        /* Klizač se ne prikazuje - traka se prevlači prstom. */
        scrollbar-width: none;
    }

    .blog-filters::-webkit-scrollbar {
        display: none;
    }

    /* Slika je na telefonu niža (3:2 umesto 16:9), da kartica ne zauzme
       ceo ekran pre nego što se vidi naslov. */
    .blog-card__media {
        aspect-ratio: 3 / 2;
    }

    /* Na dodirnom ekranu nema prelaska mišem, pa podizanje kartice ostaje
       kao kratak odgovor na dodir - ali bez uvećanja slike, koje na
       telefonu deluje kao podrhtavanje. */
    .blog-card:hover .blog-card__media {
        transform: none;
    }
}


/* Ko je u sistemu isključio animacije, ne dobija ni podizanje kartice ni
   pomeranje strelice. Isto pravilo važi svuda gde se nešto pomera. */
@media (prefers-reduced-motion: reduce) {

    .blog-card,
    .blog-card__media,
    .blog-card__more::after {
        transition: none;
    }

    .blog-card:hover {
        transform: none;
    }

    .blog-card:hover .blog-card__media {
        transform: none;
    }
}


/* ===================================================================
   DODACI: PUTANJA, PAGINACIJA, PRISTUPAČNOST
   (dopisano uz uvođenje čistih adresa)
   =================================================================== */


/* Veza "Preskoči na sadržaj". Stoji van ekrana dok se ne fokusira
   tastaturom - tada uskoči u vidno polje. Prvo je na šta se dolazi
   tabulatorom, pa korisnik tastature ne mora kroz ceo meni da bi stigao
   do teksta. */
.preskoci {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 10px 18px;
    background: var(--brand);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border-radius: 0 0 var(--radius-md) 0;
}

.preskoci:focus {
    left: 0;
}

/* Tekst koji postoji samo za čitače ekrana - npr. natpis uz polje
   pretrage, koje vizuelno nosi placeholder. Ne koristi se display: none,
   jer to sadržaj skriva i od čitača ekrana. */
.vizuelno-skriveno {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* PUTANJA KROZ SAJT -------------------------------------------------
   Sitna i siva: ovo je orijentir, ne sadržaj. Razdvojnik se crta kroz
   ::before, da se u HTML-u ne ponavlja znak.

   Stoji UNUTAR <main>, pa širinu i bočni razmak već ima od njega - ovde se
   zadaje samo razmak do sadržaja ispod. */
.mrvice {
    margin: 0 0 14px;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.mrvice ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mrvice li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mrvice li + li::before {
    content: "›";
    color: var(--text-quiet);
}

.mrvice a {
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.mrvice a:hover {
    color: var(--brand);
}

/* Poslednja stavka je naziv tekuće strane - nije veza i ne sme da se lomi
   preko tri reda, pa se skraćuje. */
.mrvice li:last-child span {
    color: var(--text-quiet);
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* PAGINACIJA -------------------------------------------------------- */
.paginacija {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.paginacija-dugme {
    padding: 9px 22px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.paginacija-dugme:hover {
    background: var(--brand);
    color: #fff;
}

.paginacija-brojac {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}


@media (min-width: 701px) {

    .paginacija,
    .mrvice {
        grid-column: 1 / -1;
    }

    /* Main na desktopu ima row-gap od 22px, pa bi uz sopstvenu marginu
       razmak ispod putanje bio dvostruk. */
    .mrvice {
        margin-bottom: 0;
    }
}


/* ===================================================================
   BLOK "SA BLOGA" NA NASLOVNOJ
   Kartice su iste kao na blogu; ovde se zadaje samo okvir bloka.
   =================================================================== */

.pocetna-blog {
    margin-top: 10px;
}

.pocetna-blog .section-title {
    text-align: left;
}

.pocetna-blog-svi {
    margin: 18px 0 0;
    text-align: center;
}

.pocetna-blog-svi a {
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pocetna-blog-svi a::after {
    content: " →";
    display: inline-block;
    transition: transform 0.2s ease;
}

.pocetna-blog-svi a:hover::after {
    transform: translateX(3px);
}

@media (min-width: 701px) {
    .pocetna-blog {
        grid-column: 1 / -1;
    }
}