/* Sold ad areas. Linked only when the editora configured an area, so editoras without one keep their CSS. */
.ad-area { display: grid; justify-items: center; gap: .5rem; overflow: hidden; }
.ad-area[hidden], .ad-area-box[hidden] { display: none; }
.ad-area-label { font-size: .65rem; font-weight: 700; letter-spacing: .12em; color: #64748b; }
.ad-area-reservation {
  position: relative; width: min(100%, var(--ad-desktop-width)); height: var(--ad-desktop-min-height); overflow: hidden;
}
.ad-area-box { display: block; width: 100%; height: 100%; }
.ad-area-box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ad-area[data-ad-format] .ad-area-reservation { height: auto; aspect-ratio: var(--ad-ratio); }
.ad-area[data-ad-format]:has([data-ad-fallback-position]:not([hidden])) .ad-area-reservation {
  aspect-ratio: auto; width: min(100%, var(--fallback-desktop-width)); height: var(--fallback-desktop-min-height);
}
.ad-area[data-ad-effect] .ad-area-box:not([hidden]) { animation: ad-fade var(--ad-transition) ease-out; }
.ad-area[data-ad-effect="slide"] .ad-area-box:not([hidden]) { animation-name: ad-slide; }
@keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ad-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.ad-area-pause {
  position: absolute; right: .5rem; bottom: .5rem; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 1px solid #fff; border-radius: 50%;
  background: var(--journal-primary, #292568); color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .ad-area-reservation:hover .ad-area-pause { opacity: 1; pointer-events: auto; }
}
.ad-area-pause:focus-visible { opacity: 1; pointer-events: auto; }
.ad-area-pause:focus-visible { outline: 3px solid var(--accent, #ffa500); outline-offset: 2px; }
.ad-area-icon-play, .ad-area-pause[aria-pressed='true'] .ad-area-icon-pause { display: none; }
.ad-area-pause[aria-pressed='true'] .ad-area-icon-play { display: initial; }
@media (prefers-reduced-motion: reduce) {
  .ad-area[data-ad-effect] .ad-area-box:not([hidden]) { animation: none; }
}
@media (max-width: 767px) {
  .ad-area-reservation { width: min(100%, var(--ad-mobile-width)); height: var(--ad-mobile-min-height); }
  .ad-area[data-ad-format]:has([data-ad-fallback-position]:not([hidden])) .ad-area-reservation {
    width: min(100%, var(--fallback-mobile-width)); height: var(--fallback-mobile-min-height);
  }
}
/* An area with nothing to show leaves no wrapper, no reserved column and no padding behind it. */
.journal-feed-ad:has(> .ad-area[hidden]), .journal-sidebar:has(> .ad-area[hidden]) { display: none; }
article.journal-article .body:has(> .journal-sidebar > .ad-area[hidden]) { position: static; min-height: 0; max-width: 48rem; margin-inline: auto; }