/* ===================================================================
   STRANA JEDNOG TEKSTA

   Učitava se posle style.css i blog.css (odatle dolaze kartice srodnih
   tekstova na dnu).

   Ceo donji deo fajla (.clanak-telo ...) gađa OBIČNE TAGOVE, a ne klase.
   To je namerno: u fajlu sa tekstom pišeš <h2>, <p>, <table> i ništa
   više, a izgled se menja odavde - za sve tekstove odjednom.
   =================================================================== */


/* Širina teksta je ograničena na ~70 znakova po redu. To je mera na kojoj
   se duži tekst čita bez napora: preko toga oko teško nalazi početak
   sledećeg reda, ispod toga previše često prelazi u novi.
   Kartica sa prognozom sme da bude široka koliko ekran - tekst ne sme. */
.clanak {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}


/* Povratak na spisak. Strelica se crta kroz ::before, da se u HTML-u ne
   ponavlja znak. */
.clanak-nazad {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--text-quiet);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
}

.clanak-nazad::before {
    content: "← ";
    display: inline-block;
    transition: transform 0.2s ease;
}

.clanak-nazad:hover {
    color: var(--brand);
}


/* Rubrika i datum u jednom redu iznad naslova. Oblačić
   rubrike i boju datuma preuzimaju iz blog.css - isti su kao u karticama,
   pa se strana teksta i spisak čitaju kao jedna celina. */
.clanak-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Rubrika je ovde veza ka svojoj strani, pa dobija i odgovor na prelazak
   mišem - u kartici je samo oznaka i stoji mirno. */
.clanak-meta .blog-card__tag {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.clanak-meta .blog-card__tag:hover {
    background: var(--brand);
    color: #fff;
}



/* Naslov teksta je jedini h1 na strani, ali ne izgleda kao "VREMENSKA
   PROGNOZA" - naslov strane je oznaka, ovo je rečenica. Zato malim
   slovima, bez razmaknutih slova i u boji glavnog teksta. */
.clanak-naslov {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.75em;
    font-weight: var(--fw-bold);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
}

/* Uvod je krupniji od tela teksta i stoji iznad slike - čitalac u dve
   rečenice zna da li tekst traži ili ne. */
.clanak-uvod {
    margin: 0 0 22px;
    color: var(--text-quiet);
    font-size: 1.0625em;
    font-weight: var(--fw-medium);
    line-height: 1.55;
}

/* Slika na vrhu ima isto zaobljenje i istu senku kao kartice - sve što
   na ovom sajtu "leži" na strani izgleda isto. */
.clanak-cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 28px;
}


/* ===================================================================
   TELO TEKSTA
   Odavde nadole sve gađa obične tagove. U fajlu sa tekstom nema klasa.
   =================================================================== */

.clanak-telo {
    color: var(--text);
    font-size: 1.0625em;
    /* 1.7 je viši prored nego u karticama (1.2-1.5). Kartica je pregled -
       oko skače po njoj; ovo je štivo koje se čita red po red i tu prored
       nosi najveći deo čitljivosti. */
    line-height: 1.7;
}

.clanak-telo p {
    margin: 0 0 18px;
}

/* Prvi element u telu nema gornju marginu, da razmak do slike iznad ne
   bude dvostruk. */
.clanak-telo> :first-child {
    margin-top: 0;
}

.clanak-telo> :last-child {
    margin-bottom: 0;
}

/* Podnaslovi. Razmak IZNAD je osetno veći od razmaka ispod - tako
   podnaslov pripada tekstu koji sledi, a ne onom pre sebe. To je jedina
   stvar koja dugačak tekst čini preglednim bez ijedne linije i okvira. */
.clanak-telo h2 {
    margin: 40px 0 12px;
    color: var(--text);
    font-size: 1.375em;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
}

.clanak-telo h3 {
    margin: 28px 0 10px;
    color: var(--text);
    font-size: 1.125em;
    font-weight: var(--fw-semibold);
    line-height: 1.35;
}

/* Veze u tekstu su narandžaste i podvučene. Podvlačenje je ovde
   obavezno, a ne ukras: usred pasusa se veza po samoj boji ne primeti,
   a i ne vidi je svako. Razmak do linije (underline-offset) je tu da
   linija ne seče repove slova (p, j, g). */
.clanak-telo a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

.clanak-telo a:hover {
    color: var(--brand-light);
}

.clanak-telo strong {
    font-weight: var(--fw-semibold);
    color: var(--text);
}


/* SPISKOVI ---------------------------------------------------------
   style.css gasi tačke za meni (ul { list-style: none }), pa se ovde
   vraćaju - u tekstu su tačke ono što spisak čini spiskom. */
.clanak-telo ul,
.clanak-telo ol {
    margin: 0 0 18px;
    padding-left: 22px;
    list-style: revert;
}

.clanak-telo li {
    margin-bottom: 6px;
}

.clanak-telo li::marker {
    color: var(--brand);
}


/* SLIKE U TEKSTU ---------------------------------------------------
   Radi i sama <img>, i <figure> sa potpisom:

       <figure>
         <img src="media/blog/nesto.jpg" alt="Opis slike">
         <figcaption>Potpis ispod slike. Izvor: RHMZ</figcaption>
       </figure>
*/
.clanak-telo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: 24px 0;
}

.clanak-telo figure {
    margin: 24px 0;
}

.clanak-telo figure img {
    margin: 0;
}

.clanak-telo figcaption {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.45;
    text-align: center;
}


/* TABELE -----------------------------------------------------------
   Piše se obično:

       <table>
         <thead><tr><th>Čestica</th><th>Granica</th></tr></thead>
         <tbody><tr><td>PM2.5</td><td>25 µg/m³</td></tr></tbody>
       </table>

   Omotač sa skrolom nije potreban: na uskom ekranu tabela sama dobija
   vodoravni klizač (vidi .clanak-telo table dole, display: block).
*/
.clanak-telo table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: var(--fs-sm);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    /* overflow: hidden drži uglove zaobljenim - bez njega prvi i poslednji
       red isture svoje prave uglove preko zaobljenja tabele. */
    overflow: hidden;
}

.clanak-telo th,
.clanak-telo td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

/* Zaglavlje tabele je u sivoj traci - istoj onoj koju nose oblačići sa
   podacima u karticama prognoze. */
.clanak-telo thead th {
    background: var(--surface-inset);
    color: var(--text-quiet);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Poslednji red bez linije - inače se ona sudara sa donjom ivicom tabele
   i izgleda kao dvostruka. */
.clanak-telo tbody tr:last-child td {
    border-bottom: none;
}

/* Brojevi u tabeli se čitaju kolonom, pa idu desno - isto pravilo kao u
   karticama prognoze. Dodaje se klasa num u samoj ćeliji:
   <td class="num">25</td> */
.clanak-telo td.num,
.clanak-telo th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


/* NAPOMENA / IZDVOJENI CITAT ---------------------------------------
   <blockquote>Tekst koji se izdvaja iz toka.</blockquote>

   Bez navodnika i bez kurziva: ovo se najčešće koristi za napomenu i
   upozorenje, a ne za citat, pa je dovoljna narandžasta linija sa strane. */
.clanak-telo blockquote {
    margin: 24px 0;
    padding: 14px 18px;
    background: var(--surface);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-quiet);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.clanak-telo blockquote p:last-child {
    margin-bottom: 0;
}


/* Vodoravna linija razdvaja veće celine u dugačkom tekstu. Tanka i u boji
   ivice hedera - ista linija koja se već koristi na sajtu. */
.clanak-telo hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 36px 0;
}


/* SRODNI TEKSTOVI --------------------------------------------------
   Kartice preuzimaju izgled iz blog.css; ovde se zadaje samo razmak i
   linija koja ih odvaja od teksta. */
.clanak-srodni {
    max-width: 720px;
    margin: 48px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    text-align: left;
}

/* U jednoj koloni na uskom, u dve u širini teksta - tri bi ovde bile
   preuske, jer blok nije širok koliko cela strana. */
.clanak-srodni .blog-grid {
    grid-template-columns: 1fr;
}


/* ===================================================================
   DESKTOP / TABLET (701px i šire)
   Main je mreža od dvanaest kolona, pa i ovde svaki blok mora da kaže
   koliko kolona zauzima.
   =================================================================== */
@media (min-width: 701px) {

    .clanak,
    .clanak-srodni {
        grid-column: 1 / -1;
    }

    .clanak-naslov {
        font-size: 2.125em;
    }

    .clanak-srodni .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Slika sme da izađe iz širine teksta - do 80px sa svake strane.
       Tekst ostaje na svojoj meri (čitljivost), a slika dobija prostor
       koji joj treba. Klasa se dodaje samo tamo gde se to želi:
       <img class="siroka" src="..." alt="..."> */
    .clanak-telo img.siroka,
    .clanak-telo figure.siroka {
        width: calc(100% + 160px);
        max-width: none;
        margin-left: -80px;
        margin-right: -80px;
    }
}


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

    /* Body na telefonu centrira sav tekst - za štivo se vraća na levo. */
    .clanak,
    .clanak-telo,
    .clanak-srodni {
        text-align: left;
    }

    .clanak-naslov {
        font-size: 1.5em;
    }

    .clanak-telo {
        font-size: 1em;
    }

    .clanak-telo h2 {
        font-size: 1.25em;
        margin-top: 32px;
    }

    /* Tabela na uskom ekranu ne sme da se lomi ni da prelije stranu -
       dobija sopstveni vodoravni klizač. display: block je uslov da
       overflow uopšte proradi na tabeli. */
    .clanak-telo table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


@media (prefers-reduced-motion: reduce) {

    .clanak-nazad,
    .clanak-nazad::before,
    .clanak-telo a {
        transition: none;
    }
}


/* Datum poslednje izmene, uz datum objave. */
.clanak-izmenjeno {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}