/* ─────────────────────────────────────────────────────────────
   ŠKOLSKA LEKTIRA — /lektira/ i /lektira/<razred>/
   Stranice pravi scripts/seo/stranice-lektire.cjs pri izradi paketa.
   Učitava se posle style.css i prodavnica.css i koristi iste boje.
   ───────────────────────────────────────────────────────────── */

.lektira { padding-bottom: 3.5rem; }
.lektira .kategorija-uvod { margin-bottom: 1.4rem; }
.lektira h2 {
  font-family: var(--font-naslov);
  color: var(--teget);
  font-size: 1.35rem;
  margin: 0 0 1rem;
}

/* ─── Razredi (čipovi) ─── */
.lektira-razredi {
  display: flex; flex-direction: column; gap: 0.6rem;
  margin: 0 0 2rem;
  padding: 1rem 1.1rem;
  background: var(--belo);
  border: 1px solid var(--linija);
  border-radius: var(--radius);
  box-shadow: var(--senka-xs);
}
.lektira-razredi-grupa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.lektira-razredi-oznaka {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tekst-blagi); min-width: 7.5rem;
}
.lektira-razred-cip {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linija); border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: var(--teget);
  background: var(--pozadina);
  text-decoration: none;
  transition: var(--prelaz);
}
a.lektira-razred-cip:hover { border-color: var(--zlatna); background: var(--krem); }
.lektira-razred-cip.aktivan { background: var(--teget); border-color: var(--teget); color: var(--belo); }

/* ─── Spisak dela ─── */
.lektira-spisak {
  margin: 0 0 2.4rem;
  padding: 1.3rem 1.4rem 1.1rem;
  background: var(--krem);
  border-radius: var(--radius);
  border-left: 4px solid var(--zlatna);
}
.lektira-spisak ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2.2rem; }
.lektira-spisak li { break-inside: avoid; padding: 0.28rem 0; line-height: 1.45; }
.lektira-spisak li a { color: var(--teget); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lektira-spisak li > span:first-child { font-weight: 700; color: var(--tekst); }
.lektira-autor { color: var(--tekst-blagi); font-size: 0.92rem; }
.lektira-status {
  display: inline-block; margin-left: 0.35rem;
  padding: 0 0.5rem; border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; vertical-align: 1px;
  background: var(--linija); color: var(--tekst-blagi);
}
.lektira-status.ima { background: rgba(31, 163, 86, 0.12); color: var(--uspeh); }

/* ─── Delo sa knjigama ─── */
.lektira-delo { margin: 0 0 2.4rem; scroll-margin-top: 90px; }
.lektira-delo h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.lektira-delo-autor { font-family: var(--font); font-size: 0.9rem; font-weight: 600; color: var(--tekst-blagi); }
.lektira-delo-autor a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lektira-delo-autor a:hover { color: var(--teget); }

/* Dugački naslovi antikvarnih izdanja: najviše 3 reda, da kartice budu ujednačene
   (pun naslov ostaje u HTML-u i vidi ga Google). */
.lektira-delo .knjiga-naslov {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden;
}

/* ─── Dela koja nisu na stanju ─── */
.lektira-nema {
  margin: 0 0 2.4rem; padding: 1.3rem 1.4rem;
  background: var(--belo); border: 1px dashed var(--linija); border-radius: var(--radius);
}
.lektira-nema p { color: var(--tekst-blagi); margin: 0 0 0.8rem; line-height: 1.6; }
.lektira-nema p a { color: var(--teget); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lektira-nema ul { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.lektira-nema li { break-inside: avoid; padding: 0.2rem 0; }
.lektira-nema li a { color: inherit; }

/* ─── Pregled razreda (/lektira/) ─── */
.lektira-nivo { margin: 0 0 2.4rem; }
.lektira-kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.lektira-kartica {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 1.1rem 1.2rem;
  background: var(--belo);
  border: 1px solid var(--linija); border-top: 3px solid var(--zlatna);
  border-radius: var(--radius);
  box-shadow: var(--senka);
  color: var(--tekst); text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.lektira-kartica:hover { transform: translateY(-2px); box-shadow: var(--senka-md); }
.lektira-kartica-razred { font-family: var(--font-naslov); font-size: 1.2rem; font-weight: 700; color: var(--teget); }
.lektira-kartica-dela { font-size: 0.86rem; color: var(--tekst-blagi); line-height: 1.5; flex: 1; }
.lektira-kartica-broj { font-size: 0.75rem; font-weight: 800; color: var(--zlatna-tamna); letter-spacing: 0.02em; }

/* ─── Česta pitanja ─── */
.lektira-faq { margin-top: 1rem; max-width: 820px; }
.lektira-faq details {
  border: 1px solid var(--linija); border-radius: var(--radius-sm);
  background: var(--belo); margin-bottom: 0.6rem;
}
.lektira-faq summary {
  cursor: pointer; padding: 0.85rem 1rem;
  font-weight: 700; color: var(--teget);
  list-style: none; position: relative; padding-right: 2.4rem;
}
.lektira-faq summary::-webkit-details-marker { display: none; }
.lektira-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);
}
.lektira-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.lektira-faq details p { margin: 0; padding: 0 1rem 1rem; color: var(--tekst-blagi); line-height: 1.65; }

@media (max-width: 720px) {
  .lektira-spisak ol, .lektira-nema ul { columns: 1; }
  .lektira-razredi-oznaka { min-width: 100%; }
  .lektira-spisak, .lektira-nema { padding: 1.1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lektira-kartica, .lektira-razred-cip, .lektira-faq summary::after { transition: none; }
  .lektira-kartica:hover { transform: none; }
}

/* ─── Tekstovi sa bloga o delima razreda ─── */
.lektira-blog { margin: 0 0 2.4rem; }
.lektira-blog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.lektira-blog li {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--belo); border: 1px solid var(--linija); border-left: 4px solid var(--zlatna);
  border-radius: var(--radius-sm);
}
.lektira-blog li a { font-weight: 700; color: var(--teget); text-decoration: none; }
.lektira-blog li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lektira-blog li span { font-size: 0.88rem; color: var(--tekst-blagi); line-height: 1.55; }