/* ============================================================================
 * banner-slots.css — uniform framework for OFFICIAL affiliate banner slots.
 *
 * WIRING (how to fill a slot when the official banner files arrive):
 *
 *   1. Inside the empty div.banner-slot, place the official creative:
 *
 *        <a class="banner-link" href="<affiliate link>" target="_blank"
 *           rel="nofollow sponsored noopener">
 *          <img src="assets/banners/<brand>-<size>.png" width="..." height="..."
 *               alt="<Brand> official banner" loading="lazy">
 *        </a>
 *        <span class="banner-ad-label">AD</span>
 *
 *      Use ONLY official partner-provided banner files — never placeholders,
 *      homemade SVG/CSS cards, or invented bonus text.
 *
 *   2. On that slot change data-status from "pending" to "live".
 *
 *   3. Remove aria-hidden="true" from the slot (screen readers must reach
 *      the live banner; keep the alt text on the <img> meaningful).
 *
 * Pending slots stay invisible to visitors: display:none !important until
 * data-status="live" is set.
 * ============================================================================ */

.banner-slot {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0e1322;
  margin: 0 auto;
}

.banner-300x250 {
  width: min(300px, 100%);
  aspect-ratio: 300 / 250;
}

.banner-728x90 {
  width: min(728px, 100%);
  aspect-ratio: 728 / 90;
}

/* Hidden while no official banner is installed — never show a placeholder. */
.banner-slot[data-status="pending"] {
  display: none !important;
}

/* Flip data-status to "live" (and drop aria-hidden) to reveal the banner. */
.banner-slot[data-status="live"] {
  display: block;
}

.banner-slot .banner-link {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Identical disclosure tag for every live banner slot. */
.banner-ad-label {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 6px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}