/* ======================
   BLOG — PÁGINA DE ARTIGO
   Paleta: #2E3F5B (ink), #25BACF (accent), #F8F9FA (bg)
   Escopo: .post-page
   ====================== */

.post-page{
  background:#F8F9FA;
  padding:60px 100px;
}
.post-container{ margin:0 auto; }

/* Cabeçalho do post */
.post-hero{
  background:#fff;
  border:1px solid rgba(37,186,207,.18);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:28px;
  margin-bottom:28px;
  position:relative;
  overflow: hidden;
}
.post-hero::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, #25BACF, #2E3F5B);
  border-top-left-radius:18px; border-top-right-radius:18px;
}

/* Meta (data e tags) */
.post-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.meta-left, .meta-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.post-tags{ display:flex; gap:10px; list-style:none; padding:0; margin:0; }
.post-tags a{ color:#2E3F5B; text-decoration:none; border-bottom:1px dashed rgba(46,63,91,.35); }
.post-tags a:hover{ color:#25BACF; border-color:#25BACF; }

/* Ícones */
.icon{ display:inline-flex; align-items:center; justify-content:center; }
.svg-icon{ width:18px; height:18px; color:#25BACF; flex:0 0 auto; }

/* Título e lead */
.post-title{
  font-family:'Poppins', sans-serif;
  color:#2E3F5B;
  font-weight:700;
  line-height:1.15;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  text-align:center;
  margin:12px auto 10px;
  max-width: 900px;
}
.post-lead{
  color:#4A4A4A;
  font-size:1.06rem;
  line-height:1.75;
  text-align:center;
  max-width: 880px;
  margin:0 auto;
}

/* Capa */
.post-cover{
  margin: 18px 0 6px;
}
.post-cover img{
  width:100%; height:auto; display:block;
  aspect-ratio: 16/9; object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.post-cover figcaption{
  font-size:.875rem; color:#6b7280; margin-top:8px; text-align:center;
}

/* Conteúdo */
.post-content{
  color:#333; font-size:1.025rem; line-height:1.85;
  max-width: 880px; margin: 12px auto 28px;
}
.post-content h2, .post-content h3{
  color:#2E3F5B; font-weight:700; line-height:1.25;
  margin:22px 0 10px;
}
.post-content h2{ font-size:1.6rem; }
.post-content h3{ font-size:1.25rem; }
.post-content p{ margin: 12px 0; }
.post-content a{ color:#25BACF; text-decoration:underline; }

.post-content .checklist{
  list-style:none; padding:0; margin:10px 0 16px;
}
.post-content .checklist li{
  position:relative; padding-left:28px; margin:8px 0;
}
.post-content .checklist li::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:16px; height:16px; border-radius:4px;
  border:2px solid #25BACF;
  box-shadow: inset 0 0 0 4px rgba(37,186,207,.2);
}

.post-content blockquote{
  margin:18px 0; padding:14px 16px;
  border-left:4px solid #25BACF;
  background:#fff;
  border-radius:8px;
  color:#2E3F5B; font-weight:600;
}

.post-media{
  margin:18px 0 8px;
}
.post-media img{
  width:100%; height:auto; display:block; border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
}
.post-media figcaption{
  font-size:.875rem; color:#6b7280; margin-top:6px;
}

/* Rodapé do post */
.post-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; max-width:880px; margin:0 auto 10px;
}
.post-cta{
  background:#2E3F5B; color:#F8F9FA; text-decoration:none;
  padding:10px 16px; border-radius:10px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  transition: transform .2s ease;
}
.post-cta:hover{ transform: translateY(-2px); background:#25BACF; color:#0E1A2B; }

.post-share{ display:flex; gap:10px; }
.post-share .share{
  display:inline-flex; padding:8px 12px; border-radius:8px;
  text-decoration:none; font-weight:600; border:1px solid rgba(37,186,207,.35);
  color:#2E3F5B; background:#fff;
}
.post-share .share:hover{ border-color:#25BACF; color:#25BACF; }

/* Acessibilidade */
.post-page :where(a, button, .post-cta, .share):focus-visible{
  outline:2px solid #25BACF; outline-offset:2px; border-radius:8px;
}

/* Quebras */
@media (min-width:1920px){
  .post-page{ padding:60px 300px; }
}
@media (max-width:1024px){
  .post-container{ max-width: 920px; }
}
@media (max-width:768px){
  .post-page{ padding:32px 20px; }
  .post-meta{ flex-direction:column; align-items:flex-start; gap:8px; }
  .post-footer{ flex-direction:column; align-items:stretch; }
}
@media (max-width:480px){
  .post-page{ padding:28px 14px; }
  .post-hero{ padding:22px; }
  .post-cta, .post-share .share{ width:100%; justify-content:center; }
}
@media (max-width:360px){
  .post-page{ padding:24px 12px; }
}