/* Blog — isti jezik kao ostatak sajta: papirna podloga, mekani uglovi,
   ista tipografija. Ne uvodi nove boje, koristi promjenljive iz style.css
   kad postoje, a pada na sigurne vrijednosti kad ne postoje. */

.blog-okvir{max-width:860px;margin:0 auto;padding:120px 20px 80px}
.blog-uvod{margin-bottom:38px}
.blog-uvod h1{font-size:clamp(32px,5vw,48px);line-height:1.1;margin:0 0 10px}
.blog-uvod p{margin:0;opacity:.75;font-size:17px}

.blog-spisak{display:grid;gap:22px}
.blog-kartica{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start;
  background:var(--papir,#fffaf3);border:1px solid rgba(0,0,0,.08);
  border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.blog-kartica h2{font-size:21px;line-height:1.25;margin:0 0 6px}
.blog-kartica h2 a{color:inherit;text-decoration:none}
.blog-kartica h2 a:hover{text-decoration:underline}
.blog-slika img{width:100%;height:auto;border-radius:12px;display:block}
.blog-datum{font-size:13px;opacity:.6;margin:0 0 8px}
.blog-dalje{display:inline-block;margin-top:8px;font-weight:700;text-decoration:none}

.blog-tekst{background:var(--papir,#fffaf3);border:1px solid rgba(0,0,0,.08);
  border-radius:18px;padding:32px}
.blog-tekst h1{font-size:clamp(28px,4.5vw,40px);line-height:1.15;margin:0 0 8px}
.blog-slika-velika img{width:100%;height:auto;border-radius:14px;margin:18px 0}
.blog-sadrzaj{font-size:17px;line-height:1.7}
.blog-sadrzaj h2{margin:1.6em 0 .4em;font-size:24px}
.blog-sadrzaj ul{padding-left:22px}
.blog-sadrzaj img{max-width:100%;height:auto;border-radius:12px}

.pagination{margin-top:30px;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{padding:8px 13px;border-radius:10px;
  border:1px solid rgba(0,0,0,.12);text-decoration:none}
.pagination .current{background:rgba(0,0,0,.08);font-weight:700}

@media(max-width:620px){
  .blog-okvir{padding:100px 16px 60px}
  .blog-kartica{grid-template-columns:1fr}
  .blog-tekst{padding:22px 18px}
}