/* ==========================================================================
   Stranica pojedinacne vesti  (clean article / blog-magazine)
   Sve klase su prefiksovane sa .na- da ne diraju ostatak sajta.
   ========================================================================== */

.news-article-page{
    background: #f4f5f7;
    padding: 40px 15px 60px;
}

.na-container{
    max-width: 860px;
    margin: 0 auto;
}

/* --- Admin toolbar --- */
.na-admin-bar{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}
.na-admin-bar form{
    display: flex;
    gap: 10px;
    margin: 0;
}
.na-admin-btn{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .05s ease;
}
.na-admin-btn:hover{ text-decoration: none; transform: translateY(-1px); }
.na-admin-btn.na-edit{ background: #0f234a; color: #fff; }
.na-admin-btn.na-edit:hover{ background: #1b3a73; color: #fff; }
.na-admin-btn.na-delete{ background: #fdecec; color: #d33; }
.na-admin-btn.na-delete:hover{ background: #f9d5d5; color: #b00; }

/* --- Article card --- */
.na-article{
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(15, 35, 74, .08);
    padding: 44px 52px 40px;
    overflow: hidden;
}

/* --- Header --- */
.na-header{ margin-bottom: 26px; }
.na-kicker{
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 700;
    color: #fda30e;
    text-decoration: none;
    margin-bottom: 12px;
}
.na-kicker:hover{ color: #d98700; text-decoration: none; }
.na-title{
    /* px umesto rem: tema postavlja html na 62.5%, pa rem vrednosti ispadnu premale */
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    color: #14213d;
    margin: 0 0 14px;
}
.na-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 14px;
    color: #8a94a6;
}
.na-meta i{ margin-right: 5px; }

/* --- Hero image --- */
.na-hero{
    margin: 0 0 28px;
}
.na-hero img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: cover;
    border-radius: 10px;
}

/* --- Lead / short description --- */
.na-lead{
    font-size: 15px;
    line-height: 1.6;
    color: #3f4a5f;
    font-weight: 500;
    border-left: 4px solid #fda30e;
    padding-left: 18px;
    margin: 0 0 34px;
}

/* ==========================================================================
   Body typography
   ========================================================================== */
.na-body{
    /* isti izgled kao globalni p iz teme (14px Poppins 300) - to je referentni
       izgled clanka; p unutra nasledjuje, pa su stare i nove vesti identicne */
    font-size: 14px;
    line-height: 1.86;
    font-weight: 300;
    color: #2b2f38;
}
.na-body .na-block{ margin: 0 0 24px; }
/* globalno p pravilo teme (14px / Poppins 300) ne sme da vazi u clanku -
   pasusi iz TinyMCE moraju izgledati isto kao stari tekst bez <p> tagova */
.na-body p{
    margin: 0 0 18px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: inherit;
}
.na-body a{ color: #1b6fd6; text-decoration: underline; }
.na-body a:hover{ color: #0f234a; }
.na-body strong, .na-body b{ font-weight: 700; }
.na-body h2{ font-size: 20px; font-weight: 800; color: #14213d; margin: 34px 0 14px; }
.na-body h3{ font-size: 16px; font-weight: 700; color: #14213d; margin: 28px 0 12px; }
.na-body ul, .na-body ol{ margin: 0 0 18px; padding-left: 26px; }
.na-body li{ margin-bottom: 8px; }
.na-body blockquote{
    margin: 24px 0;
    padding: 14px 22px;
    border-left: 4px solid #cbd3e0;
    background: #f7f9fc;
    color: #4a5568;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}
.na-body img{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- Samo tekst blok --- */
.na-text{ }

/* --- Samo slika blok --- */
.na-figure{
    margin: 8px 0 28px;
}
.na-figure img{
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 640px;
    margin: 0 auto;
    border-radius: 10px;
}
/* poravnanje slike (0 = levo, 1 = centar/puna sirina, 2 = desno) */
.na-figure.align-0{ text-align: left; }
.na-figure.align-0 img{ margin-left: 0; }
.na-figure.align-2{ text-align: right; }
.na-figure.align-2 img{ margin-right: 0; }
.na-figure.align-1{ text-align: center; }

/* --- Slika + tekst blok --- */
.na-image-text{
    display: flex;
    gap: 28px;
    align-items: center;
    margin: 8px 0 30px;
}
.na-image-text .na-it-image{
    flex: 0 0 45%;
    margin: 0;
}
.na-image-text .na-it-image img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.na-image-text .na-it-text{ flex: 1 1 auto; }
.na-image-text.img-right{ flex-direction: row-reverse; }

/* ==========================================================================
   Share
   ========================================================================== */
.na-share{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid #eceff3;
}
.na-share-label{
    font-weight: 700;
    color: #14213d;
    margin-right: 6px;
}
.na-share-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .1s ease, opacity .15s ease;
}
.na-share-btn:hover{ transform: translateY(-2px); color: #fff; text-decoration: none; opacity: .92; }
.na-share-btn.fb{ background: #1877f2; }
.na-share-btn.tw{ background: #111; }
.na-share-btn.wa{ background: #25d366; }
.na-share-btn.vb{ background: #7360f2; }
.na-share-btn.copy{ background: #8a94a6; }
.na-share-btn.copied{ background: #25a244; }

/* ==========================================================================
   Ostale vesti
   ========================================================================== */
.na-related{ margin-top: 46px; }
.na-related-title{
    font-size: 16px;
    font-weight: 800;
    color: #14213d;
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eceff3;
}
.na-related-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.na-related-card{
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(15, 35, 74, .07);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.na-related-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(15, 35, 74, .14);
    text-decoration: none;
}
.na-related-img{
    display: block;
    width: 100%;
    padding-top: 62%;
    background-size: cover;
    background-position: center;
    background-color: #e9edf3;
}
.na-related-name{
    display: block;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #14213d;
    line-height: 1.4;
}
.na-related-all{ text-align: center; margin-top: 24px; }
.na-related-more{
    display: inline-block;
    padding: 11px 26px;
    background: #0f234a;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.na-related-more:hover{ background: #1b3a73; color: #fff; text-decoration: none; }

/* ==========================================================================
   Responsive  (bez zoom/scale hakova)
   ========================================================================== */
@media (max-width: 900px){
    .na-related-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px){
    .news-article-page{ padding: 24px 10px 44px; }
    .na-article{ padding: 26px 22px 28px; border-radius: 10px; }
    .na-title{ font-size: 22px; }
    .na-lead{ font-size: 14px; }
    .na-body{ font-size: 14px; }
    /* slika + tekst i poravnate slike -> pun sirina, uspravno slaganje */
    .na-image-text,
    .na-image-text.img-right{ flex-direction: column; gap: 16px; }
    .na-image-text .na-it-image{ flex-basis: auto; width: 100%; }
    .na-figure.align-0,
    .na-figure.align-2{ max-width: 100%; margin: 0; }
}

@media (max-width: 480px){
    .na-related-grid{ grid-template-columns: 1fr; }
    .na-title{ font-size: 20px; }
}

/* ==========================================================================
   Galerija / slajder  (vise uzastopnih slika bez teksta)
   ========================================================================== */
.na-gallery{ margin: 8px 0 30px; }
.na-gallery-viewport{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #0d1117;
}
.na-gallery-track{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.na-gallery-track::-webkit-scrollbar{ display: none; }
.na-gallery-slide{
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
}
.na-gallery-slide img{
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
    cursor: zoom-in;
}
.na-gallery-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background .15s ease, opacity .15s ease;
}
.na-gallery-nav:hover{ background: rgba(0,0,0,.78); }
.na-gallery-nav.prev{ left: 12px; }
.na-gallery-nav.next{ right: 12px; }
.na-gallery-nav.is-disabled{ opacity: .3; pointer-events: none; }
.na-gallery-counter{
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
}
.na-gallery-dots{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.na-gallery-dot{
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd3e0;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.na-gallery-dot:hover{ background: #9aa6ba; }
.na-gallery-dot.active{ background: #fda30e; transform: scale(1.25); }

/* ==========================================================================
   Lightbox  (uvecanje slika na klik)
   ========================================================================== */
.na-lightbox{
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8,10,16,.92);
    z-index: 100000;
    padding: 30px;
}
.na-lightbox.open{ display: flex; }
.na-lightbox img{
    max-width: 94vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 10px 50px rgba(0,0,0,.6);
}
.na-lightbox-close{
    position: absolute;
    top: 18px;
    right: 24px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.na-lightbox-close:hover{ background: rgba(255,255,255,.25); }

@media (max-width: 767px){
    .na-gallery-slide img{ height: 300px; }
    .na-gallery-nav{ width: 38px; height: 38px; font-size: 22px; }
    .na-lightbox{ padding: 14px; }
}