/* ============================================================================
   BLOG — stilovi stranice (page-blog.php · post 128 · /blog/)
   1:1 replika stare Gutenberg/UiCore stranice na svim širinama.
   Učitava se samo na is_page('blog') iz inc/setup.php (deps child-style).

   ORGANIZACIJA: svaka sekcija drži SVA svoja pravila na jednom mestu — bazna,
   pa njeni @media override-i. Numeracija je ista kao u markupu („NN. NASLOV").

   SADRŽAJ
     00  ZAJEDNIČKO
     01  HERO
     02  UVOD
     03  ČLANCI

   PRELOMI — preuzeti iz starih UiCore fajlova (critical inline stil stranice
   128, uploads/uicore-blocks/uicore-128-{mobile,tablet,desktop}.css) i
   globalnog container CSS-a:
     > 1024   desktop: hero kartica preko cele širine, slika contain (1240×461)
     ≤ 1024   tablet: širina hero kartice je „auto" (UiCore width-var za tablet
              nije postavljen) → kartica se skupi na širinu naslova (~195px)
     ≤ 767    mobilni: kartica 95%, cover slika, zaobljena; manji naslov i
              rečenica; bočni padding liste članaka
   Tipografija naslova (h1 56/60px) dolazi iz uicore-global.css — ovde se
   pregazi SAMO ono što su blokovi eksplicitno postavljali.

   KARTICE ČLANAKA: [inspirisanablog] + assets/css/blog-cards.css (deljeno sa
   naslovnom i srodnim člancima) i globalna .blog-card-* pravila iz style.css —
   ovde se NE diraju. blog-page.css daje samo okvir oko mreže.

   SPECIFIČNOST: uicore-global.css se učitava POSLE ovog fajla, pa sva pravila
   idu pod .blog-page (0,2,0) da bi pobedila njegove h1/p (0,0,1) selektore.

   Paleta: pozadina #FDFAF8 · gradijent rečenice #D1AD9F → #735E59
   ============================================================================ */


/* ==========================================================================
   00  ZAJEDNIČKO
   ======================================================================= */
/* Stari omotač .content-area je nosio pozadinu #FDFAF8 (uicore-inline stil);
   šablon ga nema, pa je pozadina na <main>. */
.blog-page {
    display: block;
    background: #FDFAF8;
}
.blog-page [class^="bl-"],
.blog-page [class*=" bl-"] { box-sizing: border-box; }


/* ==========================================================================
   01  HERO
   kartica 100% × min 461px, slika 1240×461 centrirana (contain) sa belim
   naslovom; na tabletu uska kartica (širina po sadržaju); na mobilnom 95%,
   cover slika i zaobljeni uglovi
   ======================================================================= */
.blog-page .bl-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin: 0;
    padding: 0;
}
.blog-page .bl-hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 461px;
    margin: 150px 0 0;
    padding: 0;
}
/* Umesto CSS pozadine: <picture> preko cele kartice; slika sa istim kadrom
   (contain / cover, centrirano). Apsolutno pozicionirana → ne utiče na širinu
   kartice po sadržaju na tabletu. */
.blog-page .bl-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    border-radius: inherit;
}
.blog-page .bl-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: 50% 50%;
    border-radius: inherit;
}
.blog-page .bl-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: inherit;
    gap: 20px;
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 0 80px;
}
.blog-page .bl-hero__title {
    position: relative;
    margin: 0;
    color: var(--uicore-white-color);
}

@media (max-width: 1024px) {
    .blog-page .bl-hero__card { width: auto; }
}
@media (max-width: 767px) {
    .blog-page .bl-hero__card {
        width: 95%;
        min-height: 475px;
        margin: 110px 10px 0;
        justify-content: flex-start;
        border-radius: 24px;
    }
    .blog-page .bl-hero__img { object-fit: cover; }
    .blog-page .bl-hero__inner { padding: 40px 0 0 20px; }
    .blog-page .bl-hero__title { font-size: 46px; }
}


/* ==========================================================================
   02  UVOD
   centrirana „pilula" sa gradijentom (nekadašnja .blogsentence iz style.css
   + veličine iz UiCore paragraph bloka)
   ======================================================================= */
.blog-page .bl-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.blog-page .bl-intro__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px;
}
.blog-page .bl-intro__lead {
    position: relative;
    width: max-content;
    margin: 40px auto 0;
    padding: 10px 20px;
    font-family: 'Lora';
    font-weight: 300;
    font-size: 20px;
    line-height: 34px;
    color: #fff;
    text-align: center;
    background: transparent linear-gradient(90deg, #D1AD9F 0%, #735E59 100%) 0% 0% no-repeat padding-box;
    border-radius: 13px;
}

@media (max-width: 767px) {
    .blog-page .bl-intro__lead { font-size: 16px; }
}


/* ==========================================================================
   03  ČLANCI
   okvir oko mreže kartica ([inspirisanablog]); izgled kartica je u
   blog-cards.css i style.css
   ======================================================================= */
.blog-page .bl-posts {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 50px 0 0;
    padding: 0;
}
.blog-page .bl-posts__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 95%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 0 200px;
}

/* Strelica „Pročitaj više" (i svaka druga slika u kartici) — preslikano globalno
   UiCore pravilo `[class*='wp-block-uicore-'] img` koje je na staroj stranici
   gađalo slike kroz omotač bloka; nove klase ga više ne pogađaju. */
.blog-page .bl-posts__wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .blog-page .bl-posts__wrap { padding: 0 20px 200px; }
}