/* CG Hero CSS — MU Plugin (v2.4.x)
   - Corrige warning do Chrome (View Transitions) relacionado a overflow em img/video/canvas
   - Corrige avatar “vazando” fora do círculo (recorte garantido via wrapper + overflow:hidden)
   - Mantém o layout atual do hero
*/

/* 0) Mitigação do warning do Chrome:
   Como este CSS só carrega em single de post (MU enqueue), é seguro aplicar aqui.
   Isso garante que *mídia* não fique com overflow: visible (computed).
*/
body.single-post img,
body.single-post video,
body.single-post canvas{
  overflow: clip !important;
}
@supports not (overflow: clip){
  body.single-post img,
  body.single-post video,
  body.single-post canvas{
    overflow: hidden !important;
  }
}

/* Wrapper vermelho opcional */
.cg-hero-full{
  background:#B4202A;
  padding:20px 0;
}
.cg-hero-full__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;
}

.cg-scope{
  --cg-radius:12px; --cg-border:#E8E8E8; --cg-card:#FBFBFB; --cg-accent:#B4202A;
  --lede-bg:#F7F7F8; --lede-bd:#EDEDED;
  --cg-pad:18px; --cg-gap:18px;
  --cg-left:56%; --cg-right:44%;
  --deck-max:540px;
  --avatar:76px; --avatar-m:76px;
  --img-min-h:380px;
  --img-radius:12px;
  --floater-offset:0px;
}

/* Card + Grid */
.cg-scope .entry-header.cg-hero{
  background:var(--cg-card)!important;
  border:1px solid var(--cg-border)!important;
  border-radius:var(--cg-radius)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.03)!important;
  padding:var(--cg-pad)!important;
  display:grid; gap:var(--cg-gap);
  grid-template-columns: minmax(340px,var(--cg-left)) minmax(300px,var(--cg-right));
  grid-template-areas:
    "cats  media"
    "title media"
    "deck  media"
    "meta  media";
  align-items:stretch;
}

@media (max-width:980px){
  .cg-scope .entry-header.cg-hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "cats" "title" "deck" "media" "meta";
  }
}

/* Áreas */
.cg-hero-cats{grid-area:cats;}
.cg-hero-title{grid-area:title;}
.cg-deck{grid-area:deck;}
.cg-hero-media{grid-area:media;}
.cg-hero-meta{grid-area:meta;}

.cg-scope .post-categories{display:flex;gap:8px;flex-wrap:wrap;}
.cg-scope .post-categories a{
  display:inline-flex!important;align-items:center!important;padding:4px 10px!important;border-radius:999px!important;
  background:var(--cg-accent)!important;border:1px solid var(--cg-accent)!important;color:#fff!important;
  font-weight:700!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.06em!important;
  text-decoration:none!important;
}

/* Título */
.cg-scope .entry-title{
  font-family:'DM Sans',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-weight:700!important;font-size:clamp(28px,3vw,36px)!important;line-height:1.10!important;
  letter-spacing:-.012em!important;margin:.20em 0 .10em!important;position:relative!important;
}
.cg-scope .entry-title::after{
  content:""!important;display:block!important;width:56px!important;height:3px!important;margin-top:10px!important;
  border-radius:2px!important;opacity:.75!important;background:linear-gradient(90deg,var(--cg-accent),#d96a72)!important;
}

/* Deck */
.cg-scope .cg-deck{
  background:var(--lede-bg)!important;border:1px solid var(--lede-bd)!important;border-radius:14px!important;
  padding:16px 18px!important;box-shadow:0 1px 0 rgba(0,0,0,.03)!important;color:#171717!important;
  line-height:1.62!important;font-size:clamp(17px,1.9vw,19px)!important;font-weight:500!important;
  max-width:var(--deck-max)!important;
}
.cg-scope .cg-deck p{margin:0!important;}

/* Meta */
.cg-hero-meta{display:flex;align-items:center;gap:16px;margin-top:10px;}
.cg-author-name{font-weight:600;display:flex;align-items:center;gap:6px;}
.cg-author-prefix{color:#444;font-weight:500;}
.cg-author-name a{text-decoration:none;}
.cg-meta-dates{font-size:13px;color:#666;margin-top:2px;}

@media (max-width:980px){
  .cg-hero-meta{width:100%!important;justify-content:center!important;text-align:center!important;flex-direction:column!important;}
  .cg-hero-meta .cg-author-texts{display:flex!important;flex-direction:column!important;align-items:center!important;margin:0 auto!important;}
  .cg-hero-meta .cg-author-name{display:flex!important;justify-content:center!important;gap:6px!important;width:100%!important;}
  .cg-hero-meta .cg-meta-dates{text-align:center!important;width:100%!important;}
}

/* =========================
   AVATAR — correção do “vazamento”
   Recorte circular garantido no WRAPPER (overflow:hidden).
   ========================= */

/* Wrapper do avatar (desktop) */
.cg-author-photo,
.cg-author-floater{
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  overflow: hidden;              /* <- recorte real */
  flex: 0 0 auto;

  border:2px solid var(--cg-accent);
  outline:5px solid #fff;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* Ajuste mobile */
@media (max-width:980px){
  .cg-author-photo,
  .cg-author-floater{
    width: var(--avatar-m);
    height: var(--avatar-m);
  }
}

/* IMG do avatar: só preenche o wrapper */
.cg-author-photo img,
.cg-author-floater img,
.cg-author-photo-img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:50%!important;
}

/* =========================
   HERO MEDIA (imagem do post)
   ========================= */
.cg-hero-media{
  position:relative;

  /* Por padrão, NÃO deixar visible (evita vazamento + combina com radius) */
  overflow:hidden;

  border-radius:var(--img-radius)!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  display:flex;
  align-items:stretch;
  min-height:var(--img-min-h)!important;
}

/* Se você realmente usa floater-border (avatar “saindo” pra fora da mídia),
   aí sim liberamos o overflow no wrapper — mas a imagem em si continua “clipada”
   por causa da regra global (body.single-post img { overflow: clip }).
*/
.cg-hero-media.floater-border{
  overflow:visible;
}

/* Imagem do post */
.cg-hero-media.fit-contain .wp-post-image{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:inherit!important;
  display:block!important;
}
.cg-hero-media.fit-cover .wp-post-image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:inherit!important;
  display:block!important;
}

@media (max-width:980px){
  .cg-hero-media{min-height:unset!important;}
  .cg-hero-media.fit-cover .wp-post-image{height:auto!important;}
}

/* Floater (avatar sobre a imagem) */
.cg-author-floater{
  display:none;
  position:absolute;
  left:50%;
  transform:translateX(-50%)!important;
  z-index:2;
}

/* Mantém compatibilidade com seus modos */
.cg-hero-media.floater-inside .cg-author-floater{bottom:10px;}
.cg-hero-media.floater-border .cg-author-floater{bottom:calc((var(--avatar-m) / -2) + var(--floater-offset));}
.cg-hero-media.floater-off .cg-author-floater{display:none;}

@media (max-width:980px){
  .cg-author-floater{display:block;}
  .cg-hero-meta .cg-author-photo{display:none;}
  .cg-hero-meta{margin-top:calc((var(--avatar-m) / 2) + 16px)!important;}
}