/* Blog Reset  */
.blog-page p,
.blog-page ul li,
.blog-page a {
  font-size: 18px;
}
.blog-page ul{
    list-style-type: disc;
    padding-left: 40px;
    margin-bottom: 16px;
}
.blog-page ul>li>ul{
    list-style-type: circle;
    padding-left: 40px;
    margin-bottom: 16px;
}

:root { --anchor-offset: 190px; }          
@media (max-width: 768px){
  :root { --anchor-offset: 280px; }
}



.blog-page :is(h1,h2,h3,h4,h5,h6)[id]{
  scroll-margin-top: var(--anchor-offset);
  font-weight: 600;
}
/* dacă ancorele tale sunt pe <section> sau alte blocuri: */
// .blog-page [id]{ scroll-margin-top: var(--anchor-offset); }


.blog-hero { position: relative; overflow: hidden; }
.blog-hero-media { display: block; height: 50vh; min-height: 360px; max-height: 560px; }
.blog-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.blog-hero .breadcrumbs { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2; }

@media (max-width: 1024px) {
  .blog-hero-media { height: 42vh; min-height: 300px; }
  .blog-hero .breadcrumbs { bottom: 16px; }
}

@media (max-width: 640px) {
  .blog-hero-media { height: 38vh; min-height: 240px; }
}
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(0 0 0 / 54%) 2px, #00000000 2px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: fadeOverlay 0s ease 0s forwards;
}


@keyframes fadeOverlay {
  to { opacity: 1; }
}
@media (max-width: 500px) {
.blog-hero::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background-image: radial-gradient(rgb(0 0 0 / 58%) 1px, #00000000 1px);
	  background-size: 3px 3px;
	  pointer-events: none;
	  z-index: 1;
	  opacity: 0;
	  animation: fadeOverlay .3s ease .3s forwards;
	}
}



.blog-safe-top{padding-top:clamp(16px,2.5vw,28px)}
.blog-single{padding-bottom:40px;}
.blog-single-header{margin-bottom:18px}
.blog-title{font-size: 42px;line-height:1.15;margin:0 0 20px; font-weight: 600;}

.blog-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:#64748b;margin-bottom:10px}
.blog-author::before,.blog-date::before,.blog-readtime::before{content:"•";margin:0 8px;color:#cbd5e1}
.blog-meta> :first-child::before{content:"";margin:0}

.blog-badge{
    display: inline-block;
    padding: .25rem 1rem;
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge--hot{background:#ef4444;color:#fff}.badge--new{background:#22c55e;color:#fff}.badge--breaking{background:#f59e0b;color:#111}
.badge--tutorial{background:#0ea5e9;color:#fff}.badge--ai{background:#111827;color:#fff}.badge--wp{background:#21759b;color:#fff}.badge--biz{background:#0f766e;color:#fff}

.blog-intro p{font-size:clamp(17px,1.2vw,19px);line-height:1.75;margin:0 0 40px 0;font-weight:500;color:#0f172a; }

.blog-heroimg{margin:12px 0 16px}
.blog-featured{width:100%;max-width:980px;height:auto;display:block;margin:0;border-radius:14px}

.blog-content p{margin:0 0 16px;line-height:1.8}
.blog-content h2{margin:28px 0 12px;font-size:clamp(20px,2.2vw,26px)}
.blog-content h3{margin:20px 0 8px;font-size:clamp(18px,1.9vw,22px)}
.blog-keypoints{
    margin: 16px 0 20px;
    position: sticky;
    top: 120px;
    background-color: #fffffff5;
    padding: .5rem 0;
    box-shadow: 0px 4px 5px -5px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 4px 5px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 5px -5px rgba(0,0,0,0.75);

}

.blog-keypoints ul {
  padding-left: 15px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
}
.blog-keypoints li a {text-decoration: underline; }

.blog-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 8px}
.blog-gallery img{width:100%;height:auto;border-radius:10px}
@media (max-width:900px){.blog-gallery{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.blog-gallery{grid-template-columns:1fr}}

.blog-cta{
    margin: 28px 0;
    justify-content: center;
    background-color: #e4e1e1;
    padding: 2rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 20px;
    font-weight: 600;
}
.blog-cta-btn{display:inline-block;padding:14px 22px;border-radius:12px;background:#0ea5e9;color:#fff;font-weight:700;text-decoration:none; min-width: 250px;
    display: flex;
    justify-content: center;}

.blog-sources{ padding-top:16px;margin-top:22px; background-color: transparent;}
.blog-source-title{font-weight:700;margin-bottom:6px}
.blog-source-list{margin:0;padding-left:18px}
.blog-source-list li{margin-bottom:6px}

.blog-postnav{display:flex;justify-content:space-between;margin-top:24px;gap:10px}
.blog-postnav a{text-decoration:none;color:#0ea5e9}

.blog-cta-banner{display:block;background:#0ea5e9;color:#fff;text-align:center;padding:22px;border-radius:14px;font-weight:800;text-decoration:none}

.blog-page {
  display: grid;
  grid-template-columns: 3fr 1fr;
  margin-top: 120px;
  gap: 3rem;
}
.blog-keypoints-title {
  margin: 28px 0 12px;
  font-size: clamp(20px, 2.2vw, 26px);
}

.recent-posts-mini{display:flex;flex-direction:column;gap:.65rem}
.recent-posts-mini .item{display:flex;flex-direction:column}
.recent-posts-mini .title{font-weight:600;text-decoration:none}
.recent-posts-mini .title:hover{text-decoration:underline}
.recent-posts-mini .meta{font-size:.9rem;color:#6b7280}
.recent-posts-mini .tag{border:1px solid #e5e7eb;border-radius:.375rem;padding:.05rem .4rem}



.listing-blog-wrap{--gap:20px;--radius:14px;--meta:#6b7280;--badge:#111827;--bg:#fff;--shadow:0 2px 10px rgba(0,0,0,.05); margin-top: 140px;}

.listing-blog-grid{display:grid;gap: 2rem;grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom: 2rem; }
@media (max-width:1200px){.listing-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.listing-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.listing-blog-grid{grid-template-columns:1fr}}

.listing-blog-card{display:flex;flex-direction:column;gap:.65rem;background:var(--bg);border-radius:var(--radius)}
.listing-blog-card__media{position:relative;display:block;border-radius:var(--radius);overflow:hidden}
.listing-blog-card__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transform:translateZ(0)}
.listing-blog-badge{position:absolute;top:.5rem;left:.5rem;padding:.25rem .5rem;font-size:.75rem;font-weight:700;border-radius:.5rem;background:var(--badge);color:#fff;text-transform:uppercase;letter-spacing:.02em}
.listing-blog-badge--ai{background:#7c3aed}
.listing-blog-badge--wp{background:#2563eb}
.listing-blog-badge--new{background:#16a34a}
.listing-blog-badge--breaking{background:#dc2626}
.listing-blog-badge--hot{background:#f59e0b}
.listing-blog-badge--tutorial{background:#0ea5e9}
.listing-blog-badge--biz{background:#111827}

.listing-blog-card__title{margin:0;font-size:17px;line-height:1.35; font-weight: 600;}
.listing-blog-card__title a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.listing-blog-card__meta{font-size:.9rem;color:var(--meta)}
.listing-blog-card__intro p {font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; margin-bottom: 0;}
.listing-blog-card__read{margin-top: auto;
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    color: #338dc7;}
.listing-blog-card__read:hover{text-decoration:underline}

.listing-blog-pagination{display:flex;justify-content:center;margin:24px 0}
.listing-blog-pagination .page-numbers{display:inline-block;margin:0 6px;padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;text-decoration:none}
.listing-blog-pagination .current{background:#111827;color:#fff;border-color:#111827}
.listing-blog-pagination a:hover{background:#f3f4f6}


@media screen and (max-width: 1250px) { 
  .blog-keypoints {
    top: 88px;
  }
}
@media screen and (max-width: 992px) { 
  .blog-page {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) { 
  .blog-cta {
    flex-direction: column;
    text-align: center;
  }
  .blog-keypoints ul {
    grid-template-columns: 1fr;
  }
  .blog-title { 
    font-size: 24px;
  }
  .blog-page, .listing-blog-wrap {
    margin-top: 80px;
  }
  .blog-sidebar {
    margin-bottom: 40px;
  }

}