/**
 * AdSense Responsive CSS v1.0
 * 
 * Resolve problemas de CLS, overflow e responsividade dos anúncios.
 * Aplicado ANTES do JavaScript para garantir que os containers
 * já tenham dimensões reservadas quando os anúncios carregam.
 * 
 * Problemas resolvidos:
 * 1. CLS (Cumulative Layout Shift) — min-height reservada por breakpoint
 * 2. Overflow no mobile — max-width: 100% e overflow: hidden
 * 3. Anúncios cortados — padding e box-sizing corretos
 * 4. Transição suave — opacity e max-height com transition
 */

/* ================================================================
   BASE: Todos os wrappers de anúncio
   ================================================================ */
.adsense-wrapper {
  overflow: hidden !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  /* Transição suave para evitar CLS abrupto */
  transition: opacity 0.3s ease, max-height 0.4s ease, min-height 0.3s ease !important;
}

/* Garantir que iframes do AdSense nunca vazem */
.adsense-wrapper ins.adsbygoogle,
.adsense-wrapper iframe {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ================================================================
   CLS PREVENTION: Min-heights por tipo de slot
   ================================================================ */

/* Slots de TOPO (leaderboard) — Mobile */
@media (max-width: 767px) {
  /* Topo slots: reservar 100px (tamanho típico 320x100 mobile banner) */
  .adsense-wrapper[data-slot-type="topo"],
  .ff-ad-slot,
  .vehicle-ad-slot {
    min-height: 100px;
  }
  
  /* Lateral slots: não exibir no mobile (ou exibir como inline) */
  .adsense-wrapper[data-slot-type="lateral"] {
    min-height: 250px; /* 300x250 medium rectangle */
  }
  
  /* Rodapé slots */
  .adsense-wrapper[data-slot-type="rodape"] {
    min-height: 100px;
  }
  
  /* Fix genérico para qualquer wrapper sem tipo definido */
  .adsense-wrapper:not([data-slot-type]) {
    min-height: 100px;
  }
}

/* Slots de TOPO (leaderboard) — Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .adsense-wrapper[data-slot-type="topo"],
  .ff-ad-slot,
  .vehicle-ad-slot {
    min-height: 90px; /* 728x90 leaderboard */
  }
  
  .adsense-wrapper[data-slot-type="lateral"] {
    min-height: 250px;
  }
}

/* Slots de TOPO (leaderboard) — Desktop */
@media (min-width: 1024px) {
  .adsense-wrapper[data-slot-type="topo"],
  .ff-ad-slot,
  .vehicle-ad-slot {
    min-height: 90px; /* 728x90 leaderboard */
  }
  
  .adsense-wrapper[data-slot-type="lateral"] {
    min-height: 600px; /* 300x600 half page ou 160x600 skyscraper */
  }
}

/* ================================================================
   MOBILE OVERFLOW FIX
   ================================================================ */
@media (max-width: 767px) {
  /* Prevenir scroll horizontal causado por anúncios */
  .adsense-wrapper,
  .ff-ad-slot,
  .vehicle-ad-slot {
    max-width: 100vw !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Forçar anúncios a respeitar a largura do container */
  .adsense-wrapper ins.adsbygoogle,
  .ff-ad-slot ins.adsbygoogle,
  .vehicle-ad-slot ins.adsbygoogle {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Iframes do Google não podem vazar */
  .adsense-wrapper iframe,
  .ff-ad-slot iframe,
  .vehicle-ad-slot iframe {
    max-width: 100% !important;
  }
  
  /* Container pai não pode ter padding que force overflow */
  #root .container {
    overflow-x: hidden;
  }
}

/* ================================================================
   ESTADO: Wrapper colapsado (ad unfilled ou timeout)
   ================================================================ */
.adsense-wrapper[data-ad-managed="collapsed"],
.adsense-wrapper[data-adsense-fix="collapsed"] {
  opacity: 0 !important;
  max-height: 0px !important;
  min-height: 0px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: opacity 0.3s ease, max-height 0.3s ease !important;
}

/* ================================================================
   ESTADO: Wrapper com ad carregado
   ================================================================ */
.adsense-wrapper[data-ad-managed="ok"],
.adsense-wrapper[data-ad-managed="restored"] {
  min-height: auto !important;
}

/* ================================================================
   LABEL "Anúncio" — Estilo consistente
   ================================================================ */
.adsense-wrapper .ad-label,
.ff-ad-slot .ff-ad-label,
.vehicle-ad-slot .ad-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 4px;
  text-align: center;
}