/* ============================================================================
   STILURI PENTRU BLOCURILE DIN ARTICOLE
   ============================================================================
   Toate regulile sunt limitate la .blog-content, ca sa nu atinga restul
   site-ului. Articolele vechi, scrise doar cu <p> si <h2>, raman neschimbate:
   clasele de mai jos se aplica doar daca articolul le foloseste.

   Generatorul AI (includes/product-blog.php) e instruit sa scrie articolele
   folosind exact clasele de aici. Daca modifici numele unei clase, schimba-l
   si in promptul din pbg_generate_article().
   ========================================================================== */

.blog-content {
  --ba-primary:      #1757C2;
  --ba-primary-mid:  #2563EB;
  --ba-primary-lt:   #3B82F6;
  --ba-border:       #E2E8F0;
  --ba-text:         #1E293B;
  --ba-muted:        #64748B;
  --ba-heat:         #DC2626;
  --ba-heat-bg:      #FEF2F2;
  --ba-heat-brd:     #FECACA;
  --ba-cool:         #0284C7;
  --ba-cool-bg:      #F0F9FF;
  --ba-cool-brd:     #BAE6FD;
}

/* ── CUPRINS ─────────────────────────────────────────────────────────── */
.blog-content .toc {
  background: #EFF6FF;
  border-left: 4px solid var(--ba-primary-lt);
  border-radius: 0 8px 8px 0;
  padding: 20px 22px;
  margin: 24px 0 32px;
}
.blog-content .toc h4 {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--ba-primary); margin: 0 0 10px;
}
.blog-content .toc ol { padding-left: 18px; margin: 0; }
.blog-content .toc li { margin-bottom: 6px; font-size: 15px; }
.blog-content .toc a { text-decoration: none; color: var(--ba-primary-mid); }
.blog-content .toc a:hover { text-decoration: underline; }

/* Titlurile devin tinte de ancora fara sa fie acoperite de headerul fix */
.blog-content h2[id],
.blog-content h3[id] { scroll-margin-top: 90px; }

/* ── CASETE ──────────────────────────────────────────────────────────── */
.blog-content .box-tip,
.blog-content .box-warning,
.blog-content .box-info,
.blog-content .box-dark {
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 14.5px;
  line-height: 1.65;
}
.blog-content .box-tip     { background: #DCFCE7; border: 1px solid #86EFAC; }
.blog-content .box-tip strong { color: #166534; }
.blog-content .box-warning { background: #FEF3C7; border: 1px solid #F59E0B; }
.blog-content .box-warning strong { color: #92400E; }
.blog-content .box-info    { background: #EFF6FF; border: 1px solid var(--ba-primary-lt); }
.blog-content .box-info strong { color: var(--ba-primary); }
.blog-content .box-dark    { background: #0F172A; color: #E2E8F0; border-radius: 10px; padding: 18px 22px; }
.blog-content .box-dark strong { color: #93C5FD; }
.blog-content .box-tip p:last-child,
.blog-content .box-warning p:last-child,
.blog-content .box-info p:last-child,
.blog-content .box-dark p:last-child { margin-bottom: 0; }

/* ── COMPARATIE PE DOUA COLOANE ──────────────────────────────────────── */
.blog-content .mode-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0;
}
.blog-content .mode-a,
.blog-content .mode-b { border-radius: 10px; padding: 20px 18px; }
.blog-content .mode-a { background: var(--ba-heat-bg); border: 2px solid var(--ba-heat-brd); }
.blog-content .mode-b { background: var(--ba-cool-bg); border: 2px solid var(--ba-cool-brd); }
.blog-content .mode-icon { font-size: 32px; margin-bottom: 8px; line-height: 1; }
.blog-content .mode-a .mode-title { font-size: 16px; font-weight: 700; color: var(--ba-heat); margin-bottom: 6px; }
.blog-content .mode-b .mode-title { font-size: 16px; font-weight: 700; color: var(--ba-cool); margin-bottom: 6px; }
.blog-content .mode-a p,
.blog-content .mode-b p { font-size: 13.5px; color: var(--ba-muted); margin: 0; line-height: 1.5; }

/* ── CARDURI DE CARACTERISTICI ───────────────────────────────────────── */
.blog-content .indicator-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0;
}
.blog-content .indicator-card {
  border-radius: 10px; padding: 16px 18px;
  border: 1px solid var(--ba-border); background: #F8FAFC;
}
.blog-content .ic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.blog-content .ic-icon { font-size: 20px; flex-shrink: 0; }
.blog-content .ic-title { font-size: 14.5px; font-weight: 700; color: var(--ba-primary); }
.blog-content .indicator-card p { font-size: 13.5px; color: var(--ba-muted); margin: 0; line-height: 1.5; }

/* ── TABEL ───────────────────────────────────────────────────────────── */
.blog-content .table-wrap { margin: 20px 0; }
.blog-content .table-wrap table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  border-radius: 8px; overflow: hidden;
}
.blog-content .table-wrap thead { background: #0F172A; color: #fff; }
.blog-content .table-wrap th { padding: 11px 14px; text-align: left; font-weight: 600; }
.blog-content .table-wrap td { padding: 10px 14px; border-bottom: 1px solid var(--ba-border); }
.blog-content .table-wrap tr:last-child td { border-bottom: none; }
.blog-content .table-wrap tr:nth-child(even) td { background: #F8FAFC; }

/* ── CARD PRODUS ─────────────────────────────────────────────────────── */
.blog-content .prod-card {
  background: #F8FAFC; border: 2px solid #CBD5E1; border-radius: 12px;
  padding: 22px 20px; margin: 26px 0; display: flex; flex-direction: column;
}
.blog-content .prod-label {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 12px; margin-bottom: 10px;
  width: fit-content; background: var(--ba-primary); color: #fff;
}
.blog-content .prod-card h3 { font-size: 16px; color: var(--ba-primary); margin: 0 0 8px; line-height: 1.4; }
.blog-content .prod-card p  { font-size: 13.5px; color: var(--ba-muted); margin-bottom: 14px; }
.blog-content .prod-card ul { font-size: 13.5px; margin-bottom: 16px; }
.blog-content .prod-card li { margin-bottom: 6px; }
.blog-content .btn-prod {
  display: inline-block; background: var(--ba-primary); color: #fff !important;
  font-weight: 700; font-size: 13.5px; padding: 11px 20px;
  border-radius: 6px; text-decoration: none; text-align: center; width: fit-content;
}
.blog-content .btn-prod:hover { background: var(--ba-primary-mid); color: #fff !important; }

/* ── INTREBARI FRECVENTE ─────────────────────────────────────────────── */
.blog-content .faq { margin: 18px 0; }
.blog-content .faq details {
  border: 1px solid var(--ba-border); border-radius: 8px;
  margin-bottom: 10px; overflow: hidden;
}
.blog-content .faq summary {
  padding: 14px 16px; font-weight: 600; cursor: pointer; font-size: 15px;
  background: #F8FAFC; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.blog-content .faq summary::-webkit-details-marker { display: none; }
.blog-content .faq summary::after {
  content: '+'; font-size: 20px; color: var(--ba-primary);
  flex-shrink: 0; margin-left: 10px;
}
.blog-content .faq details[open] summary::after { content: '\2212'; }
.blog-content .faq details[open] summary { background: #EFF6FF; color: var(--ba-primary); }
.blog-content .faq-body {
  padding: 12px 16px 14px; font-size: 15px;
  border-top: 1px solid var(--ba-border);
}
.blog-content .faq-body p:last-child { margin-bottom: 0; }

/* ── MOBIL ───────────────────────────────────────────────────────────── */
@media (max-width: 580px) {
  .blog-content .mode-compare,
  .blog-content .indicator-grid { grid-template-columns: 1fr; }
}

/* Tabelele devin liste pe telefon (folosesc data-label de pe fiecare celula) */
@media (max-width: 640px) {
  .blog-content .table-wrap table,
  .blog-content .table-wrap thead,
  .blog-content .table-wrap tbody,
  .blog-content .table-wrap th,
  .blog-content .table-wrap td,
  .blog-content .table-wrap tr { display: block; }
  .blog-content .table-wrap thead { display: none; }
  .blog-content .table-wrap tr {
    border: 1px solid var(--ba-border); border-radius: 8px;
    margin-bottom: 12px; overflow: hidden;
  }
  .blog-content .table-wrap tr:nth-child(even) td { background: transparent; }
  .blog-content .table-wrap td {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; text-align: right; padding: 10px 14px;
    border-bottom: 1px solid var(--ba-border);
  }
  .blog-content .table-wrap td:last-child { border-bottom: none; }
  .blog-content .table-wrap td::before {
    content: attr(data-label); font-weight: 700; color: var(--ba-text);
    text-align: left; flex-shrink: 0; max-width: 45%;
  }
}

/* ============================================================================
   IMAGINEA ARTICOLULUI - INCADRARE COMPLETA
   ============================================================================
   Articolele generate din produse folosesc poza produsului. Regula veche era
   object-fit: cover, care taie din imagine ca sa umple toata latimea - la o
   poza de produs se pierdeau marginile si uneori o parte din produs.
   Aici trecem pe contain: se vede toata imaginea, fara decupare.

   Selectorul .blog-post .blog-post-image are specificitate mai mare decat
   regulile din style.css, ca sa nu fie nevoie de !important.
   ========================================================================== */

.blog-post .blog-post-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 560px;
  margin: 0 auto 26px;
  object-fit: contain;      /* nimic nu se mai taie din imagine */
  object-position: center;
  background: #fff;         /* pozele de produs au de obicei fundal alb */
  border: 1px solid #E8EDF3;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .blog-post .blog-post-image {
    max-height: 380px;
    padding: 10px;
    border-radius: 12px;
  }
}

/* Aceeasi logica pentru miniaturile din listele de articole: inaltimea ramane
   fixa, ca sa nu sara randurile din grila, dar imaginea nu mai e decupata. */
.blog-grid .blog-card img,
.blog-card img {
  object-fit: contain;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}