/* /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;
  }
}

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