/* Cards nativos dos carrosseis (mi-066).
   As medidas vieram do que o Elementor entregava antes, medido no navegador:
     Categorias  imagem em proporcao natural, titulo Poppins 12px/500 branco
     Top 10      imagem retrato, titulo 14px/500 branco, 10px de folga lateral
     Artigos     imagem 16/9 recortada, titulo 16px/700 rosa, resumo 12px/18px
   Assim o card compacto sai visualmente igual ao que existia. */

/* Seletor com a tag de proposito: uma regra do Elementor devolvia o <a> para
   display:inline, e ai o padding lateral era ignorado e a imagem saia 20px mais
   larga que no layout original. a.mi-card tem especificidade maior e resolve. */
a.mi-card,
.mi-card{
  display:block;
  text-decoration:none;
  color:inherit;
  height:100%;
  box-sizing:border-box
}

.mi-card__img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%
}

/* placeholder quando o post nao tem imagem destacada */
.mi-card__img--vazia{
  background:#141414;
  aspect-ratio:16/9
}

.mi-card__tit{
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-align:center;
  color:#fff;
  margin:0;
  padding:0
}

/* ---------- Categorias ---------- */
.mi-card--cat .mi-card__tit{
  font-size:12px;line-height:12px;font-weight:500;
  padding-top:10px
}

/* ---------- Top 10 / Feiras ----------
   O padding-bottom repoe o respiro que vinha das margens dos widgets do
   Elementor: sem ele o card ficava 26px mais curto que o original. */
.mi-card--prod{padding:0 10px 26px}
.mi-card--prod .mi-card__tit{
  font-size:14px;line-height:14px;font-weight:500;
  padding-top:14px
}

/* ---------- Artigos ---------- */
.mi-card--art{padding:0 10px 30px}
.mi-card--art .mi-card__img{
  aspect-ratio:16/9;
  object-fit:cover
}
.mi-card--art .mi-card__tit{
  font-size:16px;line-height:1.25;font-weight:700;
  color:#FF52B5;
  padding:14px 0 0
}
.mi-card--art .mi-card__res{
  font-family:"Poppins",system-ui,sans-serif;
  font-size:12px;line-height:18px;color:#fff;
  text-align:center;
  margin:8px 0 14px
}

/* estados: o card inteiro e o link, entao o realce e nele */
.mi-card{transition:filter .25s ease}
.mi-card:hover,.mi-card:focus-visible{filter:brightness(1.12)}
.mi-card:focus-visible{outline:3px solid #0080E9;outline-offset:-3px}

/* dentro das faixas do mi-061 os slides ja tem largura fixa inline;
   o card so precisa preencher */
.mi-fx__fita .mi-card{width:100%}

@media (max-width:880px){
  .mi-card--prod,.mi-card--art{padding:0 6px}
  .mi-card--art .mi-card__tit{font-size:15px}
}