/* ─────────────────────────────────────────────────────────────
   BLOG — /blog/, kategorije i stranica članka.
   Stranice pravi scripts/seo/stranice-bloga.cjs pri izradi paketa.
   Učitava se posle style.css i prodavnica.css i koristi iste boje.
   ───────────────────────────────────────────────────────────── */

.blog { padding-bottom: 3.5rem; }
.blog .kategorija-uvod { margin-bottom: 1.3rem; }

/* ─── Kategorije (čipovi) ─── */
.blog-kategorije { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.8rem; }
.blog-kat-cip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--linija); border-radius: 999px;
  background: var(--belo);
  font-size: 0.86rem; font-weight: 600; color: var(--teget);
  text-decoration: none; transition: var(--prelaz);
}
.blog-kat-cip small { font-size: 0.72rem; font-weight: 800; color: var(--tekst-blagi); }
a.blog-kat-cip:hover { border-color: var(--zlatna); background: var(--krem); }
.blog-kat-cip.aktivan { background: var(--teget); border-color: var(--teget); color: var(--belo); }
.blog-kat-cip.aktivan small { color: rgba(255, 255, 255, 0.75); }

/* ─── Meta red: kategorija · datum · vreme čitanja ─── */
.blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.9rem;
  margin: 0 0 0.55rem;
  font-size: 0.78rem; color: var(--tekst-blagi);
}
.blog-meta > * + *::before { content: '·'; margin-right: 0.9rem; color: var(--linija); font-weight: 800; }
.blog-meta > * { display: inline-flex; align-items: center; }
.blog-kat-oznaka {
  font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.7rem;
  color: var(--zlatna-tamna); text-decoration: none;
}
.blog-kat-oznaka:hover { color: var(--teget); }

/* ─── Spisak članaka (5 po strani) ─── */
.blog-spisak { display: flex; flex-direction: column; gap: 1.1rem; }
.blog-stavka {
  display: grid; grid-template-columns: 200px 1fr; gap: 1.4rem;
  padding: 1.1rem;
  background: var(--belo);
  border: 1px solid var(--linija); border-radius: var(--radius-lg);
  box-shadow: var(--senka-xs);
  transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.blog-stavka:hover { box-shadow: var(--senka-md); border-color: rgba(229, 168, 18, 0.45); }
/* Okviri slika imaju zadate razmere: korica se prikazuje CELA (contain) na
   kremastoj pozadini, a položene fotografije uspravlja js/rotacije.js
   unutar istog okvira (zato position: relative i overflow: hidden). */
.blog-stavka-slika {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); background: var(--krem);
}
.blog-stavka-slika img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s var(--ease-out); }
.blog-stavka:hover .blog-stavka-slika img { transform: scale(1.03); }
.blog-bez-slike {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--teget) 0%, var(--teget-svetli) 100%);
}
.blog-bez-slike img { width: 58% !important; height: auto !important; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.blog-stavka-telo { display: flex; flex-direction: column; min-width: 0; padding: 0.3rem 0.4rem 0.3rem 0; }
.blog-stavka-naslov { font-family: var(--font-naslov); font-size: 1.32rem; line-height: 1.3; margin: 0 0 0.55rem; }
.blog-stavka-naslov a { color: var(--teget); text-decoration: none; }
.blog-stavka-naslov a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.blog-stavka-opis {
  margin: 0 0 0.9rem; color: var(--tekst-blagi); line-height: 1.65; font-size: 0.95rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.blog-procitaj {
  margin-top: auto; align-self: flex-start;
  font-size: 0.86rem; font-weight: 800; color: var(--teget); text-decoration: none;
  border-bottom: 2px solid var(--zlatna); padding-bottom: 1px;
}
.blog-procitaj span { display: inline-block; transition: transform 0.2s var(--ease-out); }
.blog-procitaj:hover span { transform: translateX(3px); }

.blog-rezultati { margin: 1.4rem 0 0.4rem; text-align: center; font-size: 0.85rem; color: var(--tekst-blagi); }
.blog-paginacija { justify-content: center; margin-top: 0.6rem; }

/* ─── Članak ─── */
.blog-clanak { max-width: 760px; margin: 0 auto; }
.blog-clanak-zaglavlje { margin: 1.2rem 0 1.4rem; }
.blog-clanak-naslov {
  font-family: var(--font-naslov); color: var(--teget);
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 0.9rem;
}
.blog-clanak-uvod { font-size: 1.1rem; line-height: 1.65; color: var(--tekst); margin: 0; }
.blog-clanak-slika {
  position: relative; margin: 0 0 1.6rem; height: 380px; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--krem);
}
.blog-clanak-slika img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 1.2rem 0; box-sizing: border-box; }
.blog-clanak-slika img.slika-uspravljena { padding: 0; }

.blog-sadrzaj {
  margin: 0 0 1.8rem; padding: 1.1rem 1.3rem;
  background: var(--krem); border-left: 4px solid var(--zlatna); border-radius: var(--radius);
}
.blog-sadrzaj-naslov {
  margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tekst-blagi);
}
.blog-sadrzaj ol { margin: 0; padding-left: 1.2rem; }
.blog-sadrzaj li { padding: 0.18rem 0; }
.blog-sadrzaj a { color: var(--teget); font-weight: 600; text-decoration: none; }
.blog-sadrzaj a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tipografija teksta */
.blog-tekst { font-size: 1.04rem; line-height: 1.8; color: var(--tekst); }
.blog-tekst > * + * { margin-top: 1.05rem; }
.blog-tekst h2 {
  font-family: var(--font-naslov); color: var(--teget);
  font-size: 1.5rem; line-height: 1.3; margin-top: 2.2rem; scroll-margin-top: 100px;
}
.blog-tekst h3 { font-size: 1.15rem; color: var(--teget); margin-top: 1.6rem; scroll-margin-top: 100px; }
.blog-tekst p { margin-bottom: 0; }
.blog-tekst ul, .blog-tekst ol { padding-left: 1.4rem; }
.blog-tekst ul { list-style: disc; }
.blog-tekst ol { list-style: decimal; }
.blog-tekst li + li { margin-top: 0.35rem; }
.blog-tekst li::marker { color: var(--zlatna-tamna); font-weight: 700; }
.blog-tekst a { color: var(--teget); font-weight: 600; text-decoration: underline; text-decoration-color: var(--zlatna); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.blog-tekst a:hover { text-decoration-color: var(--teget); }
/* Naslov knjige u tekstu vodi na stranicu knjige + dugme „Pogledaj knjigu →" */
.blog-tekst .blog-knjiga-link { color: var(--teget); }
.blog-tekst .blog-knjiga-dugme {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin: 0 0.15rem; padding: 0.1rem 0.6rem;
  font-size: 0.78rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
  color: var(--teget); background: rgba(229, 168, 18, 0.14);
  border: 1px solid var(--zlatna); border-radius: 999px;
  text-decoration: none; vertical-align: 0.1em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.blog-tekst .blog-knjiga-dugme:hover,
.blog-tekst .blog-knjiga-dugme:focus-visible { background: var(--teget); color: #fff; border-color: var(--teget); }
.blog-tekst blockquote {
  margin-left: 0; margin-right: 0; padding: 0.9rem 1.2rem;
  border-left: 4px solid var(--teget); background: var(--pozadina);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; color: var(--tekst);
}
.blog-tekst blockquote p { margin: 0; }
.blog-azurirano { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linija); font-size: 0.82rem; color: var(--tekst-blagi); }

/* Veze: lektira i pisac */
.blog-veze { max-width: 760px; margin: 2rem auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; }
.blog-veza-kartica {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 1.2rem;
  background: var(--teget); color: var(--belo);
  border-radius: var(--radius); text-decoration: none;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.blog-veza-kartica span { font-size: 0.75rem; font-weight: 700; color: var(--zlatna); letter-spacing: 0.03em; }
.blog-veza-kartica strong { font-size: 0.98rem; line-height: 1.4; }
.blog-veza-kartica:hover { background: var(--teget-svetli); transform: translateY(-2px); }

/* Knjige iz teksta i „Pročitajte još" */
.blog-knjige, .blog-jos { margin-top: 2.8rem; }
.blog-knjige h2, .blog-jos h2 { font-family: var(--font-naslov); color: var(--teget); font-size: 1.4rem; margin: 0 0 1rem; }
.blog-jos-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.blog-jos-kartica {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0 0 1rem; overflow: hidden;
  background: var(--belo); border: 1px solid var(--linija); border-radius: var(--radius);
  box-shadow: var(--senka-xs); color: var(--tekst); text-decoration: none;
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.blog-jos-slika { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--krem); }
.blog-jos-slika img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 0.7rem 0; box-sizing: border-box; }
.blog-jos-slika img.slika-uspravljena { padding: 0; }
.blog-jos-kat { padding: 0.4rem 1rem 0; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--zlatna-tamna); }
.blog-jos-kartica strong { padding: 0 1rem; font-family: var(--font-naslov); color: var(--teget); font-size: 1.05rem; line-height: 1.35; }
.blog-jos-kartica:hover { box-shadow: var(--senka-md); transform: translateY(-2px); }

.blog-nazad { margin: 2.4rem 0 0; text-align: center; }
.blog-nazad a { color: var(--teget); font-weight: 700; text-decoration: none; }
.blog-nazad a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .blog-stavka { grid-template-columns: 1fr; gap: 0.9rem; padding: 0.9rem; }
  .blog-stavka-slika { aspect-ratio: 16 / 9; }
  .blog-clanak-slika { height: 260px; }
  .blog-stavka-telo { padding: 0; }
  .blog-stavka-naslov { font-size: 1.18rem; }
  .blog-tekst { font-size: 1rem; }
  .blog-tekst h2 { font-size: 1.32rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-stavka, .blog-stavka-slika img, .blog-procitaj span, .blog-veza-kartica, .blog-jos-kartica { transition: none; }
  .blog-stavka:hover .blog-stavka-slika img, .blog-veza-kartica:hover, .blog-jos-kartica:hover { transform: none; }
}

/* ─── Stranica pisca: „O piscu" (biografija) ─── */
.autor-bio {
  max-width: 860px; margin: 0 0 2rem; padding: 1.5rem 1.7rem;
  background: var(--belo); border: 1px solid var(--linija); border-top: 3px solid var(--zlatna);
  border-radius: var(--radius-lg); box-shadow: var(--senka-xs);
}
.autor-bio > h2 { font-family: var(--font-naslov); color: var(--teget); font-size: 1.4rem; margin: 0 0 0.8rem; }
.autor-bio .blog-tekst { font-size: 1rem; line-height: 1.75; }
.autor-bio .blog-tekst h3 { margin-top: 1.4rem; font-size: 1.08rem; }
.autor-tekstovi { max-width: 860px; margin: 0 0 2rem; }
.autor-tekstovi h2, .autor-knjige-naslov { font-family: var(--font-naslov); color: var(--teget); font-size: 1.3rem; margin: 0 0 0.8rem; }
.autor-tekstovi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.autor-tekstovi li a {
  display: block; padding: 0.75rem 1rem;
  background: var(--krem); border-left: 4px solid var(--zlatna); border-radius: var(--radius-sm);
  color: var(--teget); font-weight: 700; text-decoration: none;
}
.autor-tekstovi li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.autor-knjige-naslov { margin-top: 0.5rem; }
@media (max-width: 720px) { .autor-bio { padding: 1.1rem 1rem; } }

/* ─── Tekst kategorije (ispod knjiga, samo prva strana) ─── */
.kategorija-opis {
  max-width: 900px; margin: 3rem 0 1.6rem; padding: 1.6rem 1.8rem;
  background: var(--belo); border: 1px solid var(--linija); border-top: 3px solid var(--zlatna);
  border-radius: var(--radius-lg); box-shadow: var(--senka-xs);
}
.kategorija-opis > h2, .seo-faq > h2 { font-family: var(--font-naslov); color: var(--teget); font-size: 1.4rem; margin: 0 0 0.9rem; }
.kategorija-opis .blog-tekst { font-size: 0.98rem; line-height: 1.75; }
.kategorija-opis .blog-tekst h3 { font-size: 1.05rem; margin-top: 1.3rem; }
.kategorija-pisci { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linija); }
.kategorija-pisci h3 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tekst-blagi); margin: 0 0 0.5rem; }
.kategorija-pisci p { margin: 0; line-height: 2; font-size: 0.92rem; }
.kategorija-pisci a { color: var(--teget); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kategorija-pisci a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Česta pitanja (kategorije) */
.seo-faq { max-width: 900px; margin: 0 0 2.5rem; }
.seo-faq details { border: 1px solid var(--linija); border-radius: var(--radius-sm); background: var(--belo); margin-bottom: 0.6rem; }
.seo-faq summary {
  cursor: pointer; padding: 0.85rem 2.4rem 0.85rem 1rem; position: relative;
  font-weight: 700; color: var(--teget); list-style: none;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: '+'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.2rem; color: var(--zlatna-tamna); transition: transform 0.2s var(--ease-out);
}
.seo-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.seo-faq details p { margin: 0; padding: 0 1rem 1rem; color: var(--tekst-blagi); line-height: 1.65; }
@media (max-width: 720px) { .kategorija-opis { padding: 1.1rem 1rem; margin-top: 2rem; } }
@media (prefers-reduced-motion: reduce) { .seo-faq summary::after { transition: none; } }

/* ─── Stranica zanimljivosti: dodatne slike ispod teksta ─── */
.zan-slike { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.8rem; margin-top: 1.6rem; }
.zan-slike a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--krem); }
.zan-slike img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s var(--ease-out); }
.zan-slike a:hover img { transform: scale(1.03); }
.zan-glavna-slika img { object-fit: cover; padding: 0; }
@media (prefers-reduced-motion: reduce) { .zan-slike img { transition: none; } .zan-slike a:hover img { transform: none; } }

/* ─── Zaglavlje bloga — isti tamni okvir kao kod retkih antikvarnih knjiga ─── */
.blog-uvod {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(229, 168, 18, 0.22) 0%, transparent 55%),
    linear-gradient(135deg, var(--teget-taman) 0%, var(--teget) 100%);
  color: #fff;
  border: 1px solid rgba(229, 168, 18, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.7rem;
  margin: 0.8rem 0 1.4rem;
  box-shadow: var(--senka-md);
}
/* Naslov mora biti BEO — opšte pravilo iz style.css boji h1 u teget. */
.blog-uvod h1 { font-family: var(--font-naslov); font-size: 1.7rem; margin: 0 0 0.3rem; color: #fff; }
.blog-uvod h1 em { color: var(--zlatna); font-style: normal; }
.blog-uvod h1 .strana-oznaka { color: rgba(255, 255, 255, 0.7); }
.blog-uvod p { color: rgba(255, 255, 255, 0.86); max-width: 78ch; line-height: 1.55; font-size: 0.88rem; margin: 0; }
.blog-uvod-oznake { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.blog-uvod-oznaka {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(229, 168, 18, 0.4);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem; font-weight: 700;
}
@media (max-width: 720px) {
  .blog-uvod { padding: 1.1rem 1.1rem; }
  .blog-uvod h1 { font-size: 1.35rem; }
}