/* /ads/googleads/ads.css */

/* CLS-FIX (2026-04-25): reservar espaço suficiente ANTES do AdSense expandir
   o slot para a altura real do ad. Sem isso, o conteúdo embaixo é empurrado
   quando o ad chega, gerando CLS de ~0.3+. As alturas abaixo correspondem
   aos formatos típicos do AdSense responsive (300x250, 728x90). */

.ad-slot {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 12px auto;
  text-align: center;
  min-height: 280px; /* espaço típico de um square 300x250 + label */
  overflow: hidden;
  contain: layout;
}

ins.adsbygoogle.ad-slot {
  display: block;
}

.ad-slot--responsive {
  width: 100%;
}

.ad-slot--tight {
  margin: 6px auto;
}

.ad-slot--spaced {
  margin: 20px auto;
}

.ad-slot--header-banner {
  margin: 12px auto 0;
  /* Reserva 90px (728x90 leaderboard) + margem segura para banners maiores. */
  min-height: 100px;
}

@media (min-width: 768px) {
  .ad-slot--header-banner {
    /* Desktop: leaderboard ou large rectangle */
    min-height: 120px;
  }
}

.ad-slot--header-square {
  margin: 12px auto 0;
  min-height: 280px;
}

.ad-slot--below-tool,
.ad-slot--below-result {
  margin: 18px auto;
  min-height: 280px; /* square responsive */
}

.ad-slot--bottom-page {
  margin: 30px auto;
  min-height: 280px;
}

.ad-slot-preview {
  min-height: 60px;
  padding: 8px 12px;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #f8fafc, #f8fafc 12px, #eef2f7 12px, #eef2f7 24px);
  color: #334155;
  font-family: Arial, sans-serif;
}

.ad-slot-preview__title {
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.2;
}

.ad-slot-preview__meta {
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}

.ad-slot-preview__eyebrow,
.ad-slot-preview__title,
.ad-slot-preview__meta {
  display: block;
}

.ad-slot-preview__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}

.ad-slot-preview__title {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.3;
}

.ad-slot-preview__meta {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

/* === Wrapper full-bleed du banner ad injecté après le hero === */
/* Casse le .container parent pour occuper 100% de la viewport.
   Même technique que .cal-year-hero (width:100vw + margin négative).
   L'ad lui-même prend toute la largeur du wrapper (pas de max-width interne). */
.banner-ad-after-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 24px;
  padding: 0;
  background: #f1f5f9;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  box-sizing: border-box;
  contain: layout;
}

/* Ad slot prend toute la largeur du wrapper full-bleed.
   AdSense responsive (data-ad-format="horizontal" + full-width-responsive)
   adapte le format au slot. */
.banner-ad-after-hero .ad-slot {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  .banner-ad-after-hero {
    margin-bottom: 16px;
  }
}

/* SSOT unifie (Mai/2026) : le slot header_banner est emis dans header.php juste
   apres le subheader contextuel (ou apres le header s'il n'y a pas de subheader).
   Une seule classe pour toutes les pages : .banner-ad-below-header.
   Les anciennes classes .banner-ad-after-hero / .banner-ad-after-header restent
   styled au cas ou un handler legacy emettrait encore avec ces classes. */
.banner-ad-below-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Bump 27.4.2.0 (B.7.7 pitfall 1 atualizado, contrato 43): margin-top EXTERNO 40px
     (era 28px) descola do header fixo. Pitfall 1 do contrato 43 case study sabermeuip
     mostra 40px como valor canonico (margin FORA do bg cinza, nao padding DENTRO).
     Padding interno (14px 0) = respiro do ad dentro do bg cinza. margin-bottom 24px. */
  margin-top: 40px;
  margin-bottom: 24px;
  padding: 0;
  background: transparent; /* sem faixa: o ad flutua centrado, sem retangulo cinza no dark nem faixa apagada no claro */
  text-align: center;
  box-sizing: border-box;
  contain: layout;
}
.banner-ad-below-header .ad-slot {
  width: 100%;
  max-width: none;
  margin: 0;
}
@media (max-width: 768px) {
  .banner-ad-below-header {
    /* Bump 27.4.2.0 (B.7.3 atualizado): mobile = 40px (mesmo desktop), nao reduz mais.
       Antes mobile era 20px : pitfall 4 do contrato 43 mostra que header continua
       fixed em mobile, entao respiro mobile precisa ser igual ou maior que desktop. */
    margin-top: 40px;
    margin-bottom: 16px;
    padding: 0;
  }
}

/* 2026-06-21 : top banner = DEUX <ins> alternes par media query.
   DESKTOP (>=768) = responsive horizontal ; MOBILE (<=767) = FIXE 320x100.
   Aligne au standard ecosysteme. Le wrapper .banner-ad-below-header garde le
   full-bleed (100vw) + respiro (margin-top 40 / margin-bottom 24-16) defini
   ci-dessus : on ne touche qu'a la visibilite des deux <ins>. */
.joe-top-ad--mobile { display: none; }
.joe-top-ad--desktop { display: block; }

@media (max-width: 767px) {
  /* Mobile : ad FIXE 320x100 centre. Le wrapper est deja full-bleed lateral
     (width:100vw, padding lateral 0) -> l'ad 320 n'est jamais coupe a droite
     meme sur un ecran ~320-360px. */
  .joe-top-ad--desktop { display: none !important; }
  .joe-top-ad--mobile {
    display: inline-block !important;
    width: 320px;
    min-width: 320px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    margin: 0 auto;
  }
  /* Preview (noads): placeholder du top banner en 320x100 FIXE en mobile. Preview seulement. */
  .banner-ad-below-header .ad-slot-preview,
  .banner-ad-below-header [data-ad-preview] {
    width: 320px !important;
    max-width: 320px !important;
    min-height: 100px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media print {
  .ad-slot,
  .banner-ad-after-hero,
  .banner-ad-after-header,
  .banner-ad-below-header {
    display: none !important;
  }
}

/* Pub entre les mois du calendrier annuel : MOBILE-ONLY (desktop hors grille). */
.joe-cal-mobile-ad { display: none; }
@media (max-width: 767px) {
  .joe-cal-mobile-ad {
    display: block;
    grid-column: 1 / -1;
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin: 6px 0 10px;
    min-height: 100px;
  }
  .joe-cal-mobile-ad ins.adsbygoogle,
  .joe-cal-mobile-ad .ad-slot { margin-left: auto; margin-right: auto; }
  /* Preview (noads): placeholder no tamanho FIXO real 320x100 (nao responsivo). So preview. */
  .joe-cal-mobile-ad .ad-slot-preview,
  .joe-cal-mobile-ad [data-ad-preview] {
    width: 320px !important;
    max-width: 320px !important;
    min-height: 100px !important;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   INDICATEUR "Publicité" OBLIGATOIRE sur chaque emplacement d'ad (gris discret).
   La sidebar utilise <small class="cdp-ad-label"> (ne pas dupliquer ici).
   ============================================================ */
.banner-ad-below-header::before,
.joe-cal-mobile-ad::before {
  content: 'Publicidade';
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.4;
}
body.dark-mode .banner-ad-below-header::before,
body.dark-mode .joe-cal-mobile-ad::before { color: #9ca3af; }

/* ============================================================
   NO-FILL : on masque le conteneur quand AdSense repond SANS annonce
   (data-ad-status="unfilled" seulement APRES la reponse -> une annonce lente ne se
   replie jamais ; pendant le chargement l'attribut n'existe pas). Masquer le conteneur
   enleve le ::before "Publicite" + l'espace vide. Echec sur : si le script ne charge pas,
   rien n'est masque. Single-ins direct ; top banner (dual) par device. 2026-06-22. ============================================================ */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.joe-cal-mobile-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }
@media (min-width: 768px) {
  .banner-ad-below-header:has(.joe-top-ad--desktop[data-ad-status="unfilled"]) { display: none !important; }
}
@media (max-width: 767px) {
  .banner-ad-below-header:has(.joe-top-ad--mobile[data-ad-status="unfilled"]) { display: none !important; }
}