/* Publicidade editorial: os espaços só existem quando o helper entrega uma campanha. */
.ad-slot {
  --ad-max-width: 970px;
  --ad-mobile-max-width: 320px;
  --ad-max-height: 250px;
  --ad-surface: rgba(242, 241, 237, .78);

  box-sizing: border-box;
  width: 100%;
  max-width: 1460px;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: clamp(30px, 4.5vw, 64px) auto;
  padding: 13px 16px 16px;
  overflow: clip;
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--ad-surface) 12%,
    var(--ad-surface) 88%,
    transparent 100%
  );
  color: #6f6e69;
  text-align: center;
}

.ad-slot[hidden],
.ad-slot.ad-slot--empty,
.ad-slot:not([data-ad-id]),
.ad-slot[data-ad-id=""],
.ad-slot:not([data-ad-position]),
.ad-slot[data-ad-position=""] {
  display: none !important;
}

.ad-slot:not(:has(.ad-creative[src]:not([src=""]))) { display: none !important; }

.ad-label {
  width: min(100%, var(--ad-max-width));
  display: block;
  color: #777670;
  font: 700 9px/1.2 "Open Sans", Arial, sans-serif;
  letter-spacing: .14em;
  text-align: left;
  text-transform: uppercase;
}

.ad-link {
  width: min(100%, var(--ad-max-width));
  max-width: 100%;
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.ad-link picture {
  width: 100%;
  max-width: 100%;
  display: block;
}

.ad-creative {
  width: 100%;
  max-width: 100%;
  max-height: var(--ad-max-height);
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  transition: opacity .2s ease;
}

.ad-link:hover .ad-creative { opacity: .94; }

.ad-link:focus-visible {
  outline: 3px solid #c9152f;
  outline-offset: 4px;
}

/* Leaderboards editoriais dentro de matérias e seções estreitas. */
.ad-slot--leaderboard,
.ad-slot--conteudo-728,
[data-ad-position*="leaderboard"],
[data-ad-position*="conteudo-728"] {
  --ad-max-width: 728px;
  --ad-max-height: 250px;
}

/* Billboard de topo ou de passagem entre grandes blocos da home. */
.ad-slot--topo,
.ad-slot--billboard,
[data-ad-position^="topo"],
[data-ad-position*="billboard"] {
  --ad-max-width: 970px;
  --ad-max-height: 250px;
}

/*
 * Rail 160 x 600: permanece desligado fora das internas e em viewports que
 * não ofereçam uma calha real ao redor do eixo editorial de 1320 px.
 */
.ad-slot--lateral,
.ad-slot--lateral-esquerda,
.ad-slot--lateral-direita,
.ad-slot--rail,
[data-ad-position*="lateral"] {
  display: none;
}

@media (min-width: 1840px) and (min-height: 900px) {
  body.ee-public .ad-slot--rail,
  body.ee-public [data-ad-position="lateral_esquerda"] {
    --ad-max-width: 160px;
    --ad-max-height: 600px;

    position: fixed;
    z-index: 20;
    display: grid;
    /* A calha começa depois do cabeçalho, do menu editorial e do plantão. */
    top: 260px;
    left: max(10px, calc(50vw - 910px));
    width: 160px;
    height: auto;
    max-width: 160px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
  }

  body.ee-public [data-ad-position="lateral_direita"] {
    right: max(10px, calc(50vw - 910px));
    left: auto;
  }

  body.ee-public .ad-slot--rail .ad-label,
  body.ee-public [data-ad-position*="lateral"] .ad-label {
    width: 160px;
    margin-bottom: 5px;
  }

  body.ee-public .ad-slot--rail .ad-link,
  body.ee-public [data-ad-position*="lateral"] .ad-link {
    width: 160px;
  }
}

/*
 * O hambúrguer continua disponível em monitores largos, justamente onde os
 * rails podem existir. Ao abrir o drawer, retire as duas calhas fixas da cena
 * para que nenhuma peça apareça sob o menu ou através do overlay translúcido.
 */
body.ee-public:has(.mobile-drawer.open) [data-ad-position="lateral_esquerda"],
body.ee-public:has(.mobile-drawer.open) [data-ad-position="lateral_direita"] {
  display: none;
}

@media (max-width: 760px) {
  .ad-slot {
    --ad-max-width: var(--ad-mobile-max-width);
    --ad-max-height: 280px;

    width: 100%;
    max-width: 100%;
    gap: 6px;
    margin: 30px auto;
    padding: 10px max(0px, calc((100% - 320px) / 2)) 12px;
    background: linear-gradient(
      90deg,
      transparent 0,
      var(--ad-surface) 5%,
      var(--ad-surface) 95%,
      transparent 100%
    );
  }

  .ad-label,
  .ad-link {
    width: min(100%, var(--ad-mobile-max-width));
  }

  .ad-creative {
    width: auto;
    max-width: 100%;
    max-height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ad-creative { transition: none; }
}

@media print {
  .ad-slot { display: none !important; }
}