/* Blogul pe Bootstrap 5 (views/view_blog_v2.php): prima pagina, categoria,
   eticheta si articolul. Peste ae-lista.css (culorile --l*, .l-box),
   ae-cos.css (.c-h1), ae-cont.css (.k-box) si ae-pagina.css (.pg-txt, textul
   articolului). Mobil intai. Clase proprii: prefix b-. */

.b-head { margin: 4px 0 14px; }
.b-head .c-h1 { margin-bottom: 4px; }

/* categoriile: banda de pastile, derulabila pe telefon */
.b-cats { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 18px; padding: 0 12px 4px; }
.b-cats::-webkit-scrollbar { display: none; }
.b-cats a { white-space: nowrap; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--ll); background: #fff;
  color: var(--ln); font-weight: 600; font-size: 14px; text-decoration: none; }
.b-cats a:hover { border-color: var(--lb); color: var(--lb); }
.b-cats a[aria-current="page"] { background: var(--ln); border-color: var(--ln); color: #fff; }

/* cardul de articol */
.b-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .b-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }

.b-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ll); border-radius: 14px; overflow: hidden;
  transition: box-shadow .15s, transform .15s; }
.b-card:hover { box-shadow: 0 10px 28px rgba(12, 29, 46, .1); transform: translateY(-2px); }
.b-img { display: block; aspect-ratio: 16 / 9; background: var(--ls); overflow: hidden; }
/* multe poze sunt infografice: sus e titlul lor, deci se taie de jos */
.b-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.b-img-gol { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #b4c2d0; font-size: 40px; }
.b-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 18px; }
.b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--lm); margin: 0 0 8px; }
.b-meta .ico { vertical-align: -2px; }
.b-cat { font-weight: 650; color: var(--lb); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.b-cat:hover { text-decoration: underline; }
.b-t { font-size: 17px; line-height: 1.35; font-weight: 700; margin: 0 0 8px; }
.b-t a { color: var(--ln); text-decoration: none; }
.b-t a:hover { color: var(--lb); }
.b-ex { color: #4a5b6d; font-size: 14.5px; line-height: 1.55; margin: 0; }
.b-mai { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 650; color: var(--lb); text-decoration: none; }
.b-mai:hover { gap: 10px; }

/* cel mai nou articol, mare, pe prima pagina */
.b-card-mare { margin-bottom: 22px; }
.b-t-mare { font-size: clamp(1.25rem, 2.6vw, 1.7rem); line-height: 1.25; }
@media (min-width: 768px) {
  .b-card-mare { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .b-card-mare .b-img { aspect-ratio: auto; min-height: 320px; }
  .b-card-mare .b-body { justify-content: center; padding: 28px 32px; }
  .b-card-mare .b-ex { font-size: 15.5px; }
}

.b-gol { text-align: center; padding: 32px 18px; }
.b .l-pag { margin-top: 26px; }

/* articolul */
.b-art { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 992px) { .b-art { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; } }
.b-main { min-width: 0; }
.b-art-head { margin: 4px 0 18px; }
.b-art-head .c-h1 { font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.25; margin-bottom: 10px; }
.b-lead { font-size: 18px; color: #4a5b6d; margin: 0; }
.b-poza { display: block; width: 100%; border-radius: 14px; margin-bottom: 18px; }

.b-txt { font-size: 17px; line-height: 1.7; }
.b-txt figure { margin: 18px 0; }
.b-txt figure img { display: block; margin: 0 auto; }
.b-txt figcaption { font-size: 14px !important; color: var(--lm) !important; text-align: center; margin-top: 6px; }
.b-txt :is(h2, h3) { margin: 28px 0 10px !important; }

.b-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.b-tags a { padding: 5px 12px; border-radius: 999px; background: var(--ls); color: var(--ln); font-size: 14px; text-decoration: none; }
.b-tags a:hover { background: #e1eaf3; color: var(--lb); }

.b-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--ll); }
.b-share > span { font-weight: 650; margin-right: 6px; }
.b-share a, .b-share button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px;
  font-weight: 600; text-decoration: none; border: 1px solid var(--ll); background: #fff; color: var(--ln); }
.b-share svg { width: 18px; height: 18px; }
.b-share .b-fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.b-share .b-wa { background: #1fa855; border-color: #1fa855; color: #fff; }
.b-copy .ico { display: none; }
.b-copy.b-ok { border-color: #1fa855; color: #12753a; }
.b-copy.b-ok .ico { display: inline-block; }

/* coloana din dreapta; pe telefon vine sub articol */
@media (min-width: 992px) { .b-side { position: sticky; top: calc(var(--aes-h, 108px) + 16px); } }
.b-cta { background: linear-gradient(160deg, #f2f8ff, #fff 70%); }
.b-cta-t { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 16px; margin: 0 0 6px; }
.b-cta-t .ico { color: var(--lb); font-size: 20px; }
.b-cta p:not(.b-cta-t) { color: #4a5b6d; font-size: 14px; margin: 0 0 14px; }
.b-cta .btn { height: 44px; border-radius: 10px; font-weight: 650; display: flex; align-items: center; justify-content: center; }
.b-cta-l { display: block; text-align: center; margin-top: 10px; font-size: 14px; }

.b-sim h2 { font-size: 15px; font-weight: 750; margin: 0 0 10px; }
.b-sim-a { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; color: var(--ln);
  text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.35; border-top: 1px solid var(--ls); }
.b-sim-a:first-of-type { border-top: 0; }
.b-sim-a:hover { color: var(--lb); }
.b-sim-a img, .b-sim-a .b-img-gol { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--ls); font-size: 22px; }

/* comentariile, sub articol */
.b-com { margin-top: 22px; }
.b-com h2 { font-size: 18px; font-weight: 750; margin: 0 0 12px; }
.b-com h2 span { color: var(--lm); font-weight: 600; }
.b-com-i { padding: 12px 0; border-top: 1px solid var(--ls); }
.b-com-i:first-of-type { border-top: 0; padding-top: 0; }
.b-com-cap { margin: 0 0 4px; font-size: 14px; }
.b-com-cap time { color: var(--lm); margin-left: 8px; }
.b-com-t { margin: 0; color: #34475a; overflow-wrap: break-word; }
.b-com-f { margin-top: 14px; }
.b-com-i + .b-com-f, .b-com-i + .b-com-login { border-top: 1px solid var(--ll); padding-top: 16px; }
.b-com-f .form-label { font-weight: 650; }
.b-com-f textarea { border-radius: 10px; }
.b-com-n { font-size: 13px; color: var(--lm); margin: 6px 0 12px; }
.b-com-msg { padding: 10px 12px; border-radius: 10px; background: #fff4e5; color: #8a4b00; font-size: 14px; }
.b-com-msg.b-ok { background: #e8f7ee; color: #12753a; }
.b-com-f .btn { height: 44px; border-radius: 10px; font-weight: 650; padding: 0 20px; }
.b-com-login { margin: 0; color: #4a5b6d; }
.b-com-login a { font-weight: 650; }

/* autorul: pe card, sub titlul articolului si caseta "Despre autor" */
.b-av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--ln); color: #fff; font-weight: 700; letter-spacing: .02em; }
.b-av-ae { background: var(--ls); color: var(--lb); }
.b-av-s { width: 26px; height: 26px; font-size: 11px; }
.b-av-m { width: 44px; height: 44px; font-size: 16px; }
.b-av-l { width: 72px; height: 72px; font-size: 24px; }
.b-av-ae.b-av-s .ico { font-size: 14px; }
.b-av-ae.b-av-m .ico { font-size: 22px; }

.b-by { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--ln); }
.b-by a { color: var(--ln); text-decoration: none; }
.b-by a:hover { color: var(--lb); text-decoration: underline; }
.b-card-mare .b-by { margin-top: 18px; }


.b-autor { display: flex; gap: 18px; align-items: flex-start; margin-top: 22px; }
.b-autor h2 { font-size: 19px; font-weight: 750; margin: 0; }
.b-autor h2 a { color: var(--ln); text-decoration: none; }
.b-autor h2 a:hover { color: var(--lb); }
.b-autor p { margin: 0 0 8px; color: #4a5b6d; font-size: 15px; }
.b-autor .b-autor-k { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--lb); margin-bottom: 2px; }
.b-autor .b-autor-f { font-size: 14px; color: var(--lm); margin-bottom: 10px; }
.b-autor .b-mai { margin-top: 4px; }
@media (max-width: 575px) { .b-autor { flex-direction: column; gap: 12px; } }

/* cuprinsul, din h2-urile articolului (ae_blog_ancore) */
.b-toc { padding: 0; }
.b-toc summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-weight: 750; cursor: pointer; list-style: none; }
.b-toc summary::-webkit-details-marker { display: none; }
.b-toc summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--lm); border-bottom: 2px solid var(--lm);
  transform: rotate(45deg); transition: transform .15s; }
.b-toc[open] summary::after { transform: rotate(-135deg); }
.b-toc summary span { font-weight: 500; font-size: 13px; color: var(--lm); }
.b-toc ol { margin: 0; padding: 0 18px 14px 40px; columns: 2 260px; column-gap: 32px; }
.b-toc li { margin-bottom: 6px; break-inside: avoid; color: var(--lm); font-size: 15px; }
.b-toc a { color: var(--ln); text-decoration: none; }
.b-toc a:hover { color: var(--lb); text-decoration: underline; }
.b-txt h2[id] { scroll-margin-top: calc(var(--aes-h, 108px) + 16px); }

/* "Piesele din articol": categoriile alese din admin (blog_postare_magazin) */
.b-mag { margin-top: 18px; border-color: #cfe3f7; background: linear-gradient(160deg, #f2f8ff, #fff 60%); }
.b-mag h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 750; margin: 0 0 12px; }
.b-mag h2 .ico { color: var(--lb); }
.b-mag-g { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.b-mag-a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ll); border-radius: 12px; background: #fff;
  color: var(--ln); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.b-mag-a:hover { border-color: var(--lb); box-shadow: 0 6px 18px rgba(0, 124, 227, .12); color: var(--ln); }
.b-mag-a > .ico { margin-left: auto; color: var(--lb); flex: none; }
.b-mag-i { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--ls); color: var(--lb); font-size: 20px; }
.b-mag-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.b-mag-t b { font-weight: 700; }
.b-mag-t small { color: var(--lm); font-size: 13px; }
.b-mag-n { margin: 10px 0 0; font-size: 13.5px; color: var(--lm); }