.blogpost-hero{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center 35%;
  overflow: hidden;
}
.blogpost-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(31,111,67,.22), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.78) 100%);
}
.blogpost-hero-inner{
  position: relative;
  z-index: 2;
  padding: 70px 0 56px;
  color: #fff;
}
.blogpost-hero h1{
  margin: 10px 0 0;
  font-weight: 900;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.1;
}
.blogpost-hero .hero-sub{
  margin: 10px 0 0;
  max-width: 820px;
  color: rgba(255,255,255,.88);
  line-height: 1.7;
  font-size: 1.03rem;
}

/* Wrapper */
.blogpost-wrap{
  background:#f8f9fb;
  padding: 0 0 80px;
}
.blogpost-wrap .container{
  max-width: clamp(980px, 92vw, 1180px);
}

/* Header card (sobrepondo hero) */
.blogpost-header{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding: 22px 22px;
  margin-top: -44px;
  box-shadow: 0 20px 55px rgba(0,0,0,.14);
  position: relative;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:nowrap; /* impede quebrar linha */
}
.blogpost-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  color:#6b7280;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  gap:12px;
}
.blogpost-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(31,111,67,.10);
  color:#1f6f43;
  border:1px solid rgba(31,111,67,.14);
  font-weight: 900;
  text-decoration:none;
}
.blogpost-chip:hover{
  background: rgba(31,111,67,.14);
  color:#1f6f43;
}
.blogpost-meta .dot{
  opacity:.55;
}
.blogpost-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:0;
}
.blogpost-action{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color:#111827;
  text-decoration:none;
  font-weight: 800;
  font-size: 13px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blogpost-action:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  border-color: rgba(31,111,67,.25);
}
.blogpost-action i{ color: var(--bs-primary); }

.blogpost-content{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:32px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);

  font-size:16.5px;
  line-height:1.7;
  color:#374151;
}

/* Espaçamento entre blocos menor */
.blogpost-content > * + *{
  margin-top:16px;
}

/* Parágrafos */
.blogpost-content p{
  margin:0;
  line-height:1.7;
}

/* Títulos */
.blogpost-content h2{
  font-size:26px;
  margin-top:28px;
  margin-bottom:12px;
}

.blogpost-content h3{
  font-size:21px;
  margin-top:24px;
  margin-bottom:10px;
}

/* Listas */
.blogpost-content ul,
.blogpost-content ol{
  margin:8px 0;
  padding-left:22px;
}

.blogpost-content li{
  margin-bottom:6px;
}

/* Imagens */
.blogpost-content img{
  margin:22px auto;
  border-radius:14px;
}

/* GALERIA (thumbs) */
.blog-gallery{
  margin-top: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding: 20px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
}
.blog-gallery-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.blog-gallery-title{
  margin:0;
  font-weight:900;
  color:#111827;
  font-size: 18px;
}
.blog-gallery-sub{
  margin:0;
  color:#6b7280;
  font-weight:700;
  font-size: 13px;
}
.blog-gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.blog-gallery-item{
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  outline: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-gallery-item:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.blog-gallery-item img{
  width:100%;
  height: 140px;
  display:block;
  object-fit: cover;
  object-position: 50% 20%;
  filter: blur(14px);
  transform: scale(1.05);
  transition: filter .35s ease, transform .6s ease;
}
.blog-gallery-item img.is-loaded{
  filter: blur(0);
  transform: scale(1);
}
.blog-gallery-item:hover img.is-loaded{
  transform: scale(1.06);
}
.blog-gallery-item::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.38));
  pointer-events:none;
}
.blog-gallery-cap{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 12px;
  line-height: 1.25;
  text-shadow: 0 8px 18px rgba(0,0,0,.55);
}

/* CTA */
.blogpost-cta{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(135deg, #1f6f43 0%, #0f3b26 100%);
  color:#fff;
}
.blogpost-cta-inner{
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.blogpost-cta h3{
  margin:0;
  font-weight: 900;
  font-size: 1.1rem;
}
.blogpost-cta p{
  margin: 6px 0 0;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
  max-width: 520px;
}
.blogpost-cta .cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Relacionados */
.related-wrap{
  margin-top: 20px;
}
.related-title{
  margin: 18px 0 12px;
  font-weight: 900;
  color:#111827;
  font-size: 18px;
}
.related-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.rel-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: transform .35s ease, box-shadow .35s ease;
  text-decoration:none;
  color: inherit;
  display:block;
}
.rel-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(0,0,0,.14);
}
.rel-thumb{
  height: 150px;
  overflow:hidden;
  background:#0b1220;
  position: relative;
}
.rel-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: 50% 20%;
  filter: blur(14px);
  transform: scale(1.05);
  transition: filter .35s ease, transform .6s ease;
}
.rel-thumb img.is-loaded{
  filter: blur(0);
  transform: scale(1);
}
.rel-card:hover .rel-thumb img.is-loaded{
  transform: scale(1.08);
}
.rel-thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.40));
}
.rel-body{
  padding: 14px;
}
.rel-body h4{
  margin:0 0 6px;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.25;
  color:#111827;
}
.rel-body p{
  margin:0 0 10px;
  color:#6b7280;
  font-size: 13.5px;
  line-height: 1.55;
}
.rel-more{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color: var(--bs-primary);
  text-decoration:none;
  transition: gap .25s ease;
}
.rel-more i{
  font-size:12px;
  transition: transform .25s ease;
}
.rel-card:hover .rel-more{ gap:12px; }
.rel-card:hover .rel-more i{ transform: translateX(4px); }

/* ===============================
   LIGHTBOX (PADRÃO TREINAMENTOS)
   - ✅ agora mostra: Título do artigo + legenda
================================ */

.treinamento-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}
.treinamento-lightbox.active{
  display: flex;
}
.lightbox-content{
  position: relative;
  max-width: min(980px, 92vw);
  width: 100%;
  text-align: center;
}
.lightbox-close{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
}
.lightbox-close:hover{
  transform: scale(1.04);
  background: rgba(17,24,39,.72);
}
.lightbox-content img{
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  animation: zoomIn .25s ease;
}
.lightbox-title{
  margin-top: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #e5e7eb;
}
.lightbox-title strong{
  display:block;
  font-size:1.15rem;
  font-weight:900;
  color:#fff;
}
.lightbox-title span{
  display:block;
  margin-top:4px;
  color:#d1d5db;
  font-size:.95rem;
  opacity:.9;
}

.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  cursor: pointer;
  opacity: .9;
  user-select: none;
  transition: .2s;
}
.lightbox-nav:hover{
  background: rgba(17,24,39,.68);
  transform: translateY(-50%) scale(1.04);
}
.lightbox-prev{ left: -72px; }
.lightbox-next{ right: -72px; }

@keyframes zoomIn{
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 991px){
  .blogpost-hero{ min-height: 360px; }
  .blogpost-header{ margin-top: -26px; }
  .related-grid{ grid-template-columns: 1fr; }
  .rel-thumb{ height: 220px; }

  .blog-gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-gallery-item img{ height: 160px; }

  .lightbox-prev{ left: 10px; }
  .lightbox-next{ right: 10px; }
}
/* imagens dentro do HTML do editor (Quill) */
.blogpost-content img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* se o usuário colocou style="width:..." no HTML */
.blogpost-content img[style]{
  max-width: 100% !important;
  height: auto !important;
}

/* vídeos/iframes também costumam estourar */
.blogpost-content iframe,
.blogpost-content video{
  max-width: 100%;
}
	
/* =========================
   GRID POST + SIDEBAR
========================= */
.blogpost-grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items:start;
  margin-top: 18px;
}

/* sidebar */
.blogpost-sidebar{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
  position: sticky;
  top: 18px;
}

.side-title{
  margin:0 0 10px;
  font-weight:900;
  font-size:16px;
  color:#111827;
}

.side-card + .side-card{
  margin-top:14px;
}

.side-search form{
  display:flex;
  gap:10px;
}
.side-search input{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  padding:11px 12px;
}
.side-search input:focus{
  border-color: rgba(31,111,67,.45);
  box-shadow: 0 0 0 .2rem rgba(31,111,67,.12);
}

/* lista de últimos */
.side-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.recent-post-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-decoration:none;
  padding:8px;
  border-radius:12px;
  transition: background .25s ease, transform .25s ease;
}

.recent-post-item:hover{
  background: rgba(31,111,67,.06);
  transform: translateY(-2px);
}

.recent-thumb{
  width:72px;
  height:56px;
  flex-shrink:0;
  border-radius:10px;
  overflow:hidden;
  background:#0b1220;
  border:1px solid rgba(0,0,0,.08);
}
.recent-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position: 50% 20%;
  filter: blur(12px);
  transform: scale(1.06);
  transition: filter .3s ease, transform .45s ease;
}
.recent-thumb img.is-loaded{
  filter: blur(0);
  transform: scale(1);
}
.recent-post-item:hover .recent-thumb img.is-loaded{
  transform: scale(1.05);
}

.recent-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.recent-title{
  font-size:13.5px;
  font-weight:800;
  color:#111827;
  line-height:1.3;
}
.recent-date{
  font-size:12px;
  color:#6b7280;
  font-weight:600;
}

/* responsivo */
@media (max-width: 991px){
  .blogpost-grid{ grid-template-columns: 1fr; }
  .blogpost-sidebar{ position: static; }
}
.blogpost-sidebar{
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}