/* =========================================================
   FitCheck - blog

   Ucitava se posle style.css i zajednicko.css. Sve --nv-* promenljive
   dolaze iz .nv bloka u zajednicko.css, pa svaki koren blog stranice
   MORA da nosi klasu "nv" (vidi partials/head.php i blog.php).

   Sve klase su prefiksovane sa nv- da se ne sudaraju sa style.css.
   ========================================================= */

/* Navbar je fiksne visine u style.css; blog nema hero sekciju
   pa sadrzaj mora sam da se skloni ispod njega. */
.nv-blog,
.nv-clanak-strana,
.nv-404 {
    padding-top: clamp(7rem, 12vw, 9.5rem);
    padding-bottom: var(--nv-sekcija);
    background: var(--nv-bela);
    color: var(--nv-text);
    line-height: 1.7;
}

.nv-akcenat {
    background: var(--nv-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ===================== Dugmad =====================
   style.css definise .btn-first/.btn-secondary SAMO pod ".hero .cta-row",
   a sekcije.css (gde su .nv-btn-*) se na blogu ne ucitava. Zato blog ima
   svoja dugmad - da ne zavisi ni od jednog ni od drugog. */

.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--nv-r-pill);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.nv-btn:hover {
    transform: translateY(-3px);
}

.nv-btn--glavno {
    background: var(--nv-grad);
    color: var(--nv-bela);
    box-shadow: var(--nv-senka-nar);
}

.nv-btn--sporedno {
    border-color: var(--nv-linija);
    background: var(--nv-bela);
    color: var(--nv-crna);
    box-shadow: var(--nv-senka);
}

/* Na tamnoj CTA podlozi se uloge boja obrcu. */
.nv-blog-cta .nv-btn--glavno {
    background: var(--nv-bela);
    border-color: var(--nv-bela);
    color: var(--nv-crna);
    box-shadow: none;
}

.nv-blog-cta .nv-btn--glavno:hover {
    background: transparent;
    color: var(--nv-bela);
}

.nv-blog-cta .nv-btn--sporedno {
    border-color: rgba(255, 255, 255, 0.4);
    background: transparent;
    color: var(--nv-bela);
    box-shadow: none;
}

.nv-blog-cta .nv-btn--sporedno:hover {
    background: var(--nv-bela);
    border-color: var(--nv-bela);
    color: var(--nv-crna);
}

/* ===================== Mrvice ===================== */

.nv-mrvice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--nv-tiho);
}

.nv-mrvice a {
    color: var(--nv-tiho);
    text-decoration: none;
}

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

/* ===================== Zaglavlje liste ===================== */

.nv-blog-zaglavlje {
    max-width: 46rem;
    margin-bottom: 2.5rem;
}

.nv-blog-zaglavlje h1 {
    margin: 0 0 1rem;
    color: var(--nv-crna);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.nv-blog-uvod {
    margin: 0;
    font-size: 1.125rem;
    color: var(--nv-text);
}

/* ===================== Tagovi ===================== */

.nv-tagovi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.nv-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--nv-linija);
    border-radius: var(--nv-r-pill);
    background: var(--nv-podloga);
    color: var(--nv-text);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.nv-tag-pill:hover {
    border-color: var(--nv-narandzasta);
    color: var(--nv-narandzasta);
}

.nv-tag-pill.is-active {
    border-color: transparent;
    background: var(--nv-grad);
    color: var(--nv-bela);
    box-shadow: var(--nv-senka-nar);
}

.nv-tag-broj {
    opacity: 0.6;
    font-size: 0.75rem;
}

.nv-tagovi--clanak {
    margin-bottom: 0;
}

/* ===================== Lista kartica ===================== */

.nv-blog-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1.75rem;
}

.nv-blog-kartica {
    border: 1px solid var(--nv-linija);
    border-radius: var(--nv-r-lg);
    background: var(--nv-bela);
    box-shadow: var(--nv-senka);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.nv-blog-kartica:hover {
    transform: translateY(-4px);
    box-shadow: var(--nv-senka-jaka);
}

.nv-kartica-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.nv-kartica-slika {
    aspect-ratio: 16 / 9;
    background: var(--nv-podloga-2);
    overflow: hidden;
}

.nv-kartica-slika img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nv-kartica-slika--prazna {
    display: grid;
    place-items: center;
    background: var(--nv-grad);
}

.nv-kartica-slika--prazna span {
    color: var(--nv-bela);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    opacity: 0.85;
}

.nv-kartica-telo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.nv-kartica-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--nv-tiho);
}

.nv-kartica-telo h2,
.nv-kartica-telo h3 {
    margin: 0 0 0.625rem;
    color: var(--nv-crna);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.nv-kartica-telo p {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
}

.nv-kartica-dalje {
    margin-top: auto;
    color: var(--nv-narandzasta);
    font-size: 0.9375rem;
    font-weight: 600;
}

.nv-kartica-dalje::after {
    content: " →";
}

.nv-blog-prazno {
    padding: 3rem;
    border: 1px dashed var(--nv-linija);
    border-radius: var(--nv-r-lg);
    text-align: center;
    color: var(--nv-tiho);
}

/* ===================== Paginacija ===================== */

.nv-paginacija {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.nv-paginacija a,
.nv-paginacija span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--nv-linija);
    border-radius: var(--nv-r-sm);
    color: var(--nv-text);
    font-size: 0.9375rem;
    text-decoration: none;
}

.nv-paginacija a:hover {
    border-color: var(--nv-narandzasta);
    color: var(--nv-narandzasta);
}

.nv-paginacija .is-active {
    border-color: transparent;
    background: var(--nv-crna);
    color: var(--nv-bela);
}

/* ===================== Clanak ===================== */

.nv-clanak {
    max-width: 46rem;   /* ~68ch za ovu velicinu slova */
    margin-inline: auto;
}

.nv-clanak-zaglavlje h1 {
    margin: 0 0 1rem;
    color: var(--nv-crna);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.nv-clanak-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    color: var(--nv-tiho);
}

.nv-clanak-slika {
    margin: 2rem 0;
}

.nv-clanak-slika img {
    width: 100%;
    height: auto;
    border-radius: var(--nv-r-lg);
    display: block;
}

/* --- sadrzaj (TOC) --- */

.nv-toc {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    border-left: 3px solid var(--nv-narandzasta);
    border-radius: var(--nv-r-md);
    background: var(--nv-podloga);
}

.nv-toc h2 {
    margin: 0 0 0.75rem;
    color: var(--nv-crna);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nv-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nv-toc li {
    margin-bottom: 0.375rem;
}

.nv-toc-n3 {
    padding-left: 1.25rem;
    font-size: 0.9375rem;
}

.nv-toc a {
    color: var(--nv-text);
    text-decoration: none;
}

.nv-toc a:hover {
    color: var(--nv-narandzasta);
    text-decoration: underline;
}

/* --- telo teksta --- */

.nv-clanak-telo {
    margin-top: 2.5rem;
    font-size: 1.0625rem;
    line-height: 1.8;
}

/* Prvi element nema svoju marginu (razmak daje .nv-clanak-telo), inace bi
   se sabrali i odvojili tekst od zaglavlja clanka. */
.nv-clanak-telo > *:first-child {
    margin-top: 0;
}

.nv-clanak-telo h2 {
    margin: 2.75rem 0 1rem;
    color: var(--nv-crna);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    scroll-margin-top: 2rem;    /* deep-link iz sadržaja ne sme da zalepi naslov za vrh */
}

.nv-clanak-telo h3 {
    margin: 2rem 0 0.75rem;
    color: var(--nv-crna);
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 7rem;
}

.nv-clanak-telo h4 {
    margin: 1.75rem 0 0.5rem;
    color: var(--nv-crna);
    font-size: 1.0625rem;
    font-weight: 700;
}

.nv-clanak-telo p {
    margin: 0 0 1.25rem;
}

.nv-clanak-telo a {
    color: var(--nv-narandzasta);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.nv-clanak-telo a:hover {
    text-decoration-thickness: 2px;
}

.nv-clanak-telo strong {
    color: var(--nv-crna);
    font-weight: 700;
}

.nv-clanak-telo ul,
.nv-clanak-telo ol {
    margin: 0 0 1.25rem;
    padding-left: 1.375rem;
}

.nv-clanak-telo li {
    margin-bottom: 0.5rem;
}

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

.nv-clanak-telo blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.75rem;
    border-left: 3px solid var(--nv-narandzasta);
    border-radius: 0 var(--nv-r-md) var(--nv-r-md) 0;
    background: var(--nv-podloga);
    color: var(--nv-crna);
    font-size: 1.125rem;
}

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

.nv-clanak-telo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--nv-r-md);
    display: block;
}

.nv-clanak-telo figure {
    margin: 2rem 0;
}

.nv-clanak-telo figcaption {
    margin-top: 0.625rem;
    color: var(--nv-tiho);
    font-size: 0.875rem;
    text-align: center;
}

.nv-clanak-telo hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--nv-linija);
}

.nv-clanak-telo code {
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    background: var(--nv-podloga-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.nv-clanak-telo pre {
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--nv-r-md);
    background: var(--nv-crna);
    color: #E8E8EE;
    overflow-x: auto;
}

.nv-clanak-telo pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: 0.875rem;
}

/* Tabele moraju da skroluju, a ne da razvuku stranicu. */
.nv-tabela-wrap {
    margin: 1.75rem 0;
    overflow-x: auto;
}

.nv-clanak-telo table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.nv-clanak-telo th,
.nv-clanak-telo td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--nv-linija);
    text-align: left;
}

.nv-clanak-telo th {
    background: var(--nv-podloga);
    color: var(--nv-crna);
    font-weight: 700;
    white-space: nowrap;
}

.nv-clanak-podnozje {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--nv-linija);
}

.nv-azurirano {
    margin: 0;
    color: var(--nv-tiho);
    font-size: 0.875rem;
}

/* ===================== Srodni tekstovi ===================== */

.nv-srodni {
    margin-top: var(--nv-sekcija);
}

.nv-srodni > h2 {
    margin: 0 0 1.75rem;
    color: var(--nv-crna);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ===================== CTA ===================== */

.nv-blog-cta {
    margin-top: var(--nv-sekcija);
    padding: clamp(2.5rem, 5vw, 3.5rem);
    border-radius: var(--nv-r-xl);
    background: var(--nv-crna);
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.nv-blog-cta h2 {
    margin: 0 0 0.75rem;
    color: var(--nv-bela);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.nv-blog-cta p {
    margin: 0 auto 1.75rem;
    max-width: 36rem;
}

.nv-blog-cta-dugmad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
}

/* ===================== Traka za nacrt ===================== */

.nv-draft-traka {
    position: sticky;
    top: 0;
    z-index: 120;     /* iznad navbara (.navbar ima z-index 99) */
    padding: 0.75rem 1.5rem;
    background: #FFE9A8;
    color: #5C4200;
    font-size: 0.9375rem;
    text-align: center;
}

/* Kad postoji traka, navbar ulazi u normalan tok umesto da lebdi preko
   vrha stranice. Tako se razmak racuna sam - bez pogadjanja visine trake,
   koja se na uzim ekranima prelama u vise redova.
   .navbar je u style.css: position:absolute; top:1rem; z-index:99. */
body.nv-ima-traku .navbar {
    position: static;
    margin-top: 1rem;
}

/* Gornji padding je tu da sadrzaj prodje ispod lebdeceg navbara - kad
   navbar vise ne lebdi, padding se svodi na obican razmak. */
body.nv-ima-traku .nv-clanak-strana {
    padding-top: 2.5rem;
}

.nv-draft-traka strong {
    letter-spacing: 0.06em;
}

.nv-draft-traka a {
    color: #5C4200;
    text-decoration: underline;
}

/* ===================== 404 ===================== */

.nv-404 {
    text-align: center;
}

.nv-404-broj {
    margin: 0;
    background: var(--nv-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(4rem, 14vw, 8rem);
    font-weight: 800;
    line-height: 1;
}

.nv-404 h1 {
    margin: 0.5rem 0 1rem;
    color: var(--nv-crna);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
}

.nv-404-tekst {
    margin: 0 auto 2rem;
    max-width: 32rem;
}

.nv-404-dugmad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
}

.nv-404-predlozi {
    margin-top: 3rem;
}

.nv-404-predlozi h2 {
    margin: 0 0 1rem;
    color: var(--nv-crna);
    font-size: 1.125rem;
}

.nv-404-predlozi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nv-404-predlozi li {
    margin-bottom: 0.5rem;
}

.nv-404-predlozi a {
    color: var(--nv-narandzasta);
}

/* ===================== Mobilno ===================== */

@media (max-width: 40rem) {
    .nv-blog,
    .nv-clanak-strana,
    .nv-404 {
        padding-top: clamp(6rem, 22vw, 7.5rem);
    }

    .nv-blog-lista {
        grid-template-columns: 1fr;
    }

    .nv-toc {
        padding: 1.25rem;
    }

    .nv-clanak-telo {
        font-size: 1rem;
    }
}