/* ===========================
   BLOG-TESTE (Itemid=272) – CSS COMPLETO ATUALIZADO
   =========================== */

/* ================== Card básico ================== */
body.itemid-272 .blog-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 16px;
  margin-bottom: 24px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* ================== Imagem topo ================== */
body.itemid-272 .blog-card .blog-intro-image {
  width: 100%;
  aspect-ratio: 1000 / 417;
  object-fit: cover;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin: 0; /* remove margem invisível */
  padding: 0; /* remove padding interno */
}

/* ================== Título ================== */
body.itemid-272 .blog-card .entry-title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: #f36b21;
  text-transform: uppercase;
  margin-bottom: 12px;
}

body.itemid-272 .blog-card .entry-title a {
  text-decoration: none;
  color: #f36b21;
}

body.itemid-272 .blog-card .entry-title a:hover {
  color: #d85f1d;
}

/* ================== Categoria e Data ================== */
body.itemid-272 .blog-card .blog-info {
  font-size: 14px;
  margin-bottom: 16px;
  color: #555;
}

body.itemid-272 .blog-card .blog-info .label {
  color: #f36b21;
  font-weight: 700;
}

body.itemid-272 .blog-card .blog-info .divider {
  margin: 0 6px;
  color: #999;
}

/* ================== Resumo ================== */
body.itemid-272 .blog-card .blog-introtext {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ================== Read More ================== */
body.itemid-272 .blog-card p.readmore a {
  color: #f36b21;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.itemid-272 .blog-card p.readmore a::after {
  content: "→";
  transition: transform .15s ease;
}

body.itemid-272 .blog-card p.readmore a:hover {
  text-decoration: underline;
}

body.itemid-272 .blog-card p.readmore a:hover::after {
  transform: translateX(3px);
}

/* ================== Mobile ================== */
@media (max-width: 640px){
  body.itemid-272 .blog-card .blog-intro-image {
    height: 260px !important;
    aspect-ratio: auto;
  }
}