/* =========================================================
   HELP-VIVO · Blog — komponente sadržaja (za generisane članke)
   Koristi se u blog/clanak.php; AI sme da koristi ove klase.
   ========================================================= */

/* Istaknuti boks (savet / napomena / poziv na akciju) */
.post__content .bc-note{
  background:#eef6fb; border:1px solid #cfe6f5; border-left:4px solid #71BADA;
  border-radius:12px; padding:14px 18px; margin:20px 0; color:#1f2a37;
}
.post__content .bc-note strong{ color:#0B1F3E; }
.post__content .bc-note.bc-warn{ background:#fff8ec; border-color:#fde68a; border-left-color:#f59e0b; color:#92591f; }

/* Kartice jedna pored druge */
.post__content .bc-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0;
}
.post__content .bc-card{
  background:#fff; border:1px solid #e9eef4; border-radius:14px;
  padding:16px 18px; box-shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 18px rgba(16,24,40,.05);
}
.post__content .bc-card h3{ margin:0 0 8px; color:#0B1F3E; font-size:1.05rem; }
.post__content .bc-card p:last-child{ margin-bottom:0; }

/* "Da" / "Ne" liste sa ikonicama */
.post__content .bc-do,
.post__content .bc-dont{ list-style:none; padding:0; margin:14px 0; }
.post__content .bc-do li,
.post__content .bc-dont li{ position:relative; padding:7px 0 7px 30px; line-height:1.5; }
.post__content .bc-do li::before{
  content:"✓"; position:absolute; left:0; top:6px; color:#16a34a; font-weight:800;
}
.post__content .bc-dont li::before{
  content:"✕"; position:absolute; left:0; top:6px; color:#dc2626; font-weight:800;
}

/* "tip" varijanta boksa (zeleno, pozitivan savet) */
.post__content .bc-note.bc-tip{ background:#ecfdf3; border-color:#a7e8c8; border-left-color:#16a34a; color:#065f46; }
.post__content .bc-note.bc-tip strong{ color:#065f46; }

/* Koraci 1-2-3 (numerisana lista) */
.post__content .bc-steps{ list-style:none; counter-reset:bcstep; padding:0; margin:20px 0; }
.post__content .bc-steps > li{ position:relative; padding:3px 0 18px 54px; }
.post__content .bc-steps > li::before{
  counter-increment:bcstep; content:counter(bcstep);
  position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  background:linear-gradient(180deg,#84c4e4,#5aa9cf); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.post__content .bc-steps > li:not(:last-child)::after{
  content:""; position:absolute; left:16px; top:38px; bottom:2px; width:2px; background:#dbe7f0;
}
.post__content .bc-steps > li strong{ color:#0B1F3E; display:block; margin-bottom:2px; }

/* Tabela (poređenja, pregledi) */
.post__content table{
  width:100%; border-collapse:collapse; margin:20px 0; font-size:.95rem;
  border:1px solid #e9eef4; border-radius:12px; overflow:hidden;
}
.post__content thead th{ background:#0B1F3E; color:#fff; text-align:left; padding:11px 13px; font-size:.82rem; letter-spacing:.02em; }
.post__content tbody td{ padding:11px 13px; border-top:1px solid #eef2f6; vertical-align:top; }
.post__content tbody tr:nth-child(even){ background:#f8fafc; }

/* Citat / izjava */
.post__content .bc-quote{
  margin:22px 0; padding:8px 0 8px 22px; border-left:4px solid #71BADA;
  font-size:1.12rem; font-style:italic; color:#334155;
}

@media (max-width:680px){
  .post__content .bc-grid{ grid-template-columns:1fr; }
  .post__content table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* =========================================================
   DNO ČLANKA — FAQ akordeon, tagovi, CTA, autor/share
   ========================================================= */

/* FAQ akordeon */
.post__content .post__faq{ margin-top:36px; }
.post__content .post__faq > h2{ margin-bottom:16px; }
.post__content .post__faqItem{
  border:1px solid #e9eef4; border-radius:14px; margin:0 0 10px; background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.03); overflow:hidden; transition:box-shadow .15s, border-color .15s;
}
.post__content .post__faqItem[open]{ box-shadow:0 8px 22px rgba(16,24,40,.08); border-color:#cfe6f5; }
.post__content .post__faqItem > summary{
  list-style:none; cursor:pointer; padding:15px 50px 15px 18px; position:relative;
  font-weight:700; color:#0B1F3E; font-size:1.02rem; user-select:none;
}
.post__content .post__faqItem > summary::-webkit-details-marker{ display:none; }
.post__content .post__faqItem > summary::after{
  content:"+"; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  width:27px; height:27px; border-radius:50%; background:#eef6fb; color:#3f8fc0;
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; font-weight:700;
  transition:background .15s, color .15s;
}
.post__content .post__faqItem[open] > summary::after{ content:"−"; background:#71BADA; color:#fff; }
.post__content .post__faqItem > div{ padding:2px 18px 16px; color:#475569; line-height:1.65; }

/* Tagovi — pilule */
.post__content .post__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; }
.post__content .post__tag{
  background:#f1f5f9; color:#475569; text-decoration:none; font-size:.84rem; font-weight:600;
  padding:6px 13px; border-radius:999px; transition:background .15s, color .15s;
}
.post__content .post__tag:hover{ background:#71BADA; color:#fff; }

/* CTA — fiks kontrasta + senka */
.post__content .post__cta{ box-shadow:0 16px 36px rgba(11,31,62,.22); }
.post__content .post__cta strong,
.post__content .post__cta p{ color:#fff; }
.post__content .post__cta p{ opacity:.9; }

/* Autor + share */
.post__content .post__divider{ border:0; border-top:1px solid #eef2f6; margin:32px 0 22px; }
.post__content .post__author{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.post__content .post__authorAvatar{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,#84c4e4,#5aa9cf); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.92rem;
  box-shadow:0 6px 14px rgba(113,186,218,.35);
}
.post__content .post__authorMeta{ display:flex; flex-direction:column; gap:3px; }
.post__content .post__authorName{ color:#0B1F3E; font-size:1rem; }
.post__content .post__authorRole{ color:#94a3b8; font-size:.86rem; }
.post__content .post__share{ display:flex; gap:8px; margin-top:8px; }
.post__content .post__btn{
  border:1px solid #e2e8f0; background:#fff; color:#0B1F3E; border-radius:999px;
  padding:8px 16px; font-weight:600; font-size:.86rem; cursor:pointer; transition:border-color .15s, color .15s, transform .12s;
}
.post__content .post__btn:hover{ border-color:#71BADA; color:#3f8fc0; transform:translateY(-1px); }