/* =====================================================
   OLHAPAUTA — ADS.CSS
   Anti vazamento no mobile + reserva de espaço (CLS)
   Alinhado com as classes do seu single.php
===================================================== */

/* ===============================
   BASE
=============================== */
.banner-area{
  display:block;
  width:100%;
  max-width:100%;
  text-align:center;
  overflow:hidden; /* segura iframe teimoso */
}

.banner-area--bottom{ margin-top:24px; }

.ad-slot{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  clear:both;
  overflow:hidden;
  position:relative;
}

/* Respiro do label até o anúncio */
.banner-area .ad-slot{ margin-top:10px; }

/* Adsense ocupa a largura */
.ad-slot ins.adsbygoogle{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}

/* Iframe nunca estoura */
.ad-slot iframe,
.ad-slot ins.adsbygoogle iframe{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
}

/* Às vezes o AdSense cria wrappers internos */
.ad-slot > div{
  max-width:100% !important;
  overflow:hidden;
}

/* ===============================
   RESERVA DE ESPAÇO (CLS)
   A chave é reservar MAIS do que o anúncio costuma precisar
   para ele não "crescer" depois.
=============================== */

/* Mobile: reserve 320px (muitos formatos viram 320/336x280 e similares) */
@media (max-width: 899px){
  .ad-slot--top{ min-height:320px; }
  .ad-slot--multiplex{ min-height:360px; }
  .in-content-ad-container{ min-height:320px; }
  
  /* Home specific ad slots */
  .banner-box-large, 
  .ad-home-topo, 
  .ad-home-entre-editorias, 
  .ad-home-meio, 
  .ad-home-meio2,
  .ad-footer { min-height: 280px; }
}

/* Desktop: reserve um pouco mais também */
@media (min-width: 900px){
  .ad-slot--top{ min-height:360px; }
  .ad-slot--multiplex{ min-height:420px; }
  .in-content-ad-container{ min-height:360px; }

  /* Home specific ad slots */
  .banner-box-large, 
  .ad-home-topo, 
  .ad-home-entre-editorias, 
  .ad-home-meio, 
  .ad-home-meio2,
  .ad-footer { min-height: 280px; }
}

/* Sidebar retângulo */
.ad-slot--sidebar-rect, .ad-sidebar-archive { min-height:600px; }

/* In-article wrapper */
.in-content-ad-container{
  display:block;
  width:100%;
  max-width:100%;
  margin:40px 0;
  text-align:center;
  clear:both;
  overflow:hidden;
}

/* ===============================
   DIVISÓRIA “continua depois da publicidade”
=============================== */
.ad-divider{
  text-align:center;
  font-size:11px;
  letter-spacing:1px;
  color:rgba(15,23,42,0.55);
  margin:0 0 10px;
}

/* =========================
   Cookie banner (CookieYes)
   Se ele estiver empurrando a página, o CLS explode.
   Aqui a gente força ele a ser overlay, sem deslocar layout.
========================= */

/* seletores comuns do CookieYes */
.cky-consent-container,
.cky-consent-bar,
.cky-banner-element{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  top:auto !important;
  z-index:999999 !important;
}

/* garante que o cookie não aumente a largura */
.cky-consent-container *{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* =========================
   Imagem destacada (extra)
========================= */
.entry-image{
  width:100%;
  overflow:hidden;
  border-radius:14px;
}
.entry-image img{
  width:100%;
  height:auto;
  display:block;
}

/* =====================================================
   SKELETONS E PLACEHOLDERS DE ANÚNCIOS (SPRINT 14)
===================================================== */
.op-lazy-ad {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

.op-ad-skeleton {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit; /* herda a min-height do container pai .ad-slot / .ad-home-topo etc. */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f5f9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px dashed rgba(148, 163, 184, 0.3);
}

/* Modo Escuro (caso o tema o suporte via preferência) */
@media (prefers-color-scheme: dark) {
  .op-ad-skeleton {
    background-color: #1e293b;
    border-color: rgba(71, 85, 105, 0.4);
  }
  .op-ad-skeleton-text {
    color: rgba(148, 163, 184, 0.4) !important;
  }
}

.op-ad-skeleton-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(100, 116, 139, 0.5);
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* Efeito Shimmer (Brilho animado de carregamento) */
.op-ad-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.6) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: op-shimmer 2s infinite;
  z-index: 1;
}

/* Shimmer dark mode ajustado */
@media (prefers-color-scheme: dark) {
  .op-ad-skeleton::after {
    background-image: linear-gradient(
      90deg,
      rgba(30, 41, 59, 0) 0%,
      rgba(255, 255, 255, 0.05) 20%,
      rgba(255, 255, 255, 0.1) 60%,
      rgba(30, 41, 59, 0) 100%
    );
  }
}

@keyframes op-shimmer {
  100% {
    transform: translateX(100%);
  }
}