/* Jamming.Live Ad Manager: the right rail (desktop) and the inline destinations (tablet and phone).
   Loaded only on the six target pages and only while at least one ad is eligible. Builds on the jl-auth.css tokens.

   Layout contract (docs/requirements/ad-manager-2026-10-30.md section 2):
   - 1024px and wider: the page content is the left column and the occupied destinations are stacked 1, 2, 3 in a 300px right rail.
   - Narrower (tablet and phone): the rail is hidden and each destination appears BETWEEN content sections in numbered order.
   - A destination with no eligible ad has no markup. With none at all the wrapper is a plain block (the page's normal full-width layout). */

.ad-layout { display: block; }
.ad-layout [hidden] { display: none !important; }
.ad-main { min-width: 0; }
.ad-rail { display: none; }
.ad-inline { display: block; width: min(100% - 32px, 420px); margin: 28px auto; }
.dc-wrap .ad-inline, .bl-wrap .ad-inline, .pg-about .ad-inline { width: min(100%, 420px); }
.bl-wrap .ad-inline { margin: 20px auto; }

.ad-slot { min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; text-align: center; }
.ad-slot .ad-label { margin: 0 0 8px; font-size: 0.68rem; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* One steady size per destination: every ad of the destination shares one grid cell, so the box follows the tallest and never jumps
   when the ad rotates. Only the displayed ad is visible (also before the script runs); the others are aria-hidden and inert. */
.ad-stage { display: grid; }
.ad-item { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-width: 0; }
.ad-item:not(.is-active) { visibility: hidden; opacity: 0; }
.ad-item.is-active { opacity: 1; transition: opacity 0.35s ease; }
.ad-link { display: block; min-width: 0; border-radius: 8px; }
.ad-link:focus-visible { outline-offset: 3px; }
/* The whole artwork is always readable: scaled down to fit, never cropped, stretched or distorted, and never scaled up (the frame is at most the
   picture's own width). The width and shape come from the markup, so a picture that has not loaded yet already holds its space (no layout shift). */
.ad-frame { display: block; position: relative; width: min(100%, var(--ad-w, 100%)); aspect-ratio: var(--ad-r, 4 / 5); max-height: 560px; margin: 0 auto; }
.ad-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }

.ad-bar { display: flex; justify-content: center; margin-top: 8px; }
.ad-pause { min-height: 32px; padding: 4px 12px; border-radius: 8px; border: 1px solid #4d535b; background: var(--panel-2); color: var(--ink); font: inherit; font-size: 0.82rem; cursor: pointer; }
.ad-pause:hover { border-color: #fff; color: #fff; }
.ad-slot:not(.is-ready) .ad-bar { display: none; }

@media (min-width: 1024px) {
  .ad-layout.has-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(16px, 2vw, 32px);
    align-items: start;
    padding-right: clamp(16px, 3vw, 48px);
  }
  .ad-layout.has-rail > .ad-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(20px, 3vw, 40px) 0 32px;
  }
  .ad-layout.has-rail .ad-inline { display: none; }
  /* Discover's page already has its own side padding. */
  .dc-main .ad-layout.has-rail { padding-right: 0; }
}

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

/* Not every target page loads a global screen-reader-only rule. */
.ad-slot .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }