/**
 * Findex Design Ads — Ad Slot Styles (v1.2.0)
 *
 * REWRITTEN to enforce strict max-width discipline:
 *   • All sidebar slots: max-width 300px (sidebar = 320px container)
 *   • All images inside ANY slot: max-width 100%, height: auto
 *   • Object-fit: contain (never stretch or crop creatives)
 *   • Mobile-first: every slot collapses gracefully on narrow screens
 *
 * This file is loaded sitewide. Selectors are scoped to .fda-slot* prefixes
 * so they don't leak into the news content.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. BASE SLOT CONTAINER — applies to ALL slot types
   ─────────────────────────────────────────────────────────────────────── */

.fda-slot {
  display: block;
  position: relative;
  margin: 16px auto;            /* center horizontally, breathing room */
  max-width: 100%;              /* never overflow parent */
  overflow: hidden;             /* clip oversized creatives */
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

/* IMAGES inside any ad — most critical defensive rule.
   Without this, a 1200×628 creative inside a 320px sidebar would either
   blow out the layout or get squashed horizontally. */
.fda-slot img,
.fda-ad-unit img,
.fdam-ad-unit img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Links inside ads — no decoration, full clickable area */
.fda-slot a,
.fda-ad-unit a,
.fdam-ad-unit a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* The "Ad" / "Sponsored" label */
.fdam-ad-label,
.fda-ad-label {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

/* Empty-slot placeholder (debug only) */
.fda-slot-empty {
  min-height: 50px;
}
.fda-slot-empty:empty::before {
  content: "";
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. SLOT FORMATS — per-format dimensions & behaviour
   ─────────────────────────────────────────────────────────────────────── */

/* Leaderboard: stream-column slot (728×90 / 970×90)
   Wraps gracefully if a non-leaderboard creative is placed here — the
   banner stays at its natural size, centered, with subtle padding.
   We do NOT force min-height so a 300×250 doesn't get a giant whitespace
   underneath. */
.fda-slot-leaderboard {
  width: 100%;
  max-width: 970px;
  text-align: center;
  background: transparent;
  padding: 0;
  margin: 16px auto;
}

.fda-slot-leaderboard img {
  max-width: 100%;
  max-height: 250px;       /* hard cap — even a tall creative won't dominate */
  width: auto;             /* preserve original width if smaller than slot */
  height: auto;
  margin: 0 auto;
  display: block;
}

/* Wrapper used by the JS injector for the top-leaderboard slot.
   Adds visual separation from the news stream. */
.fda-feed-top-wrap {
  margin: 0 auto 12px;
  padding: 8px 0;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Native: in-stream / in-article — should LOOK like a news card */
.fda-slot-native {
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 12px;
  min-height: 200px;
}

/* Square / Medium Rectangle: 300×250 — strictly sidebar */
.fda-slot-square {
  width: 100%;
  max-width: 300px;             /* HARD CAP — never wider than sidebar */
  aspect-ratio: 300 / 250;      /* lock the box shape */
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  margin: 14px auto;
}

/* Sidebar slot wrapper variant: tighter spacing */
.fda-slot[data-slot-id="feed_sidebar_top"],
.fda-slot[data-slot-id="feed_sidebar_bottom"] {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* Anchor: mobile sticky bottom */
.fda-slot-anchor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.fda-slot-anchor img {
  max-height: 50px;
  width: auto;
}

/* Anchor close button */
.fda-anchor-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CHART WIDGET CTA — native-styled button slot
   ─────────────────────────────────────────────────────────────────────── */

.fda-chart-cta-wrap {
  margin: 12px 12px 14px;
  padding: 0;
}

.fda-chart-cta-wrap .fda-slot {
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin: 0;
  overflow: visible;
}

.fdam-cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--cta-border, rgba(59, 130, 246, 0.4));
  border-radius: 10px;
  background: var(--cta-bg, linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.12) 100%));
  color: var(--cta-color, #60a5fa);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  outline: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fdam-cta-button:hover {
  background: var(--cta-bg-hover, linear-gradient(135deg, rgba(59,130,246,0.16) 0%, rgba(99,102,241,0.22) 100%));
  border-color: var(--cta-border-hover, rgba(59, 130, 246, 0.7));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  text-decoration: none;
}

.fdam-cta-button:active { transform: translateY(0); }
.fdam-cta-button .fdam-cta-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.fdam-cta-button .fdam-cta-text { overflow: hidden; text-overflow: ellipsis; }
.fdam-cta-button .fdam-cta-arrow { margin-left: 4px; opacity: 0.8; transition: transform 0.15s ease, opacity 0.15s ease; flex-shrink: 0; }
.fdam-cta-button:hover .fdam-cta-arrow { transform: translateX(3px); opacity: 1; }

.fdam-cta-button.fdam-cta-pulse {
  animation: fdam-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes fdam-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12); }
}

.fdam-cta-button.fdam-cta-glow {
  box-shadow: 0 0 16px var(--cta-glow, rgba(59, 130, 246, 0.25));
}

.fda-chart-cta-label {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  color: var(--paper-3, #8c98ad);
  opacity: 0.55;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. MOBILE RESPONSIVE — collapse / hide / resize
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* When sidebar collapses (single column), sidebar slots become full-width
     but still capped at 300px and centered */
  .fda-slot[data-slot-id="feed_sidebar_top"],
  .fda-slot[data-slot-id="feed_sidebar_bottom"] {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .fda-slot-native {
    padding: 10px;
    min-height: 160px;
  }
  .fda-slot-leaderboard {
    min-height: 50px;
    padding: 4px;
  }
  .fda-slot-square {
    max-width: 300px;
    margin: 12px auto;
  }
  .fdam-cta-button {
    font-size: 12.5px;
    padding: 9px 12px;
  }
  /* Always ensure CTA button stays inside its container on mobile */
  .fda-chart-cta-wrap {
    margin: 10px 8px 12px;
  }
  /* Anchor is naturally mobile, but tighten layout */
  .fda-slot-anchor {
    height: 52px;
  }
  .fda-slot-anchor img {
    max-height: 44px;
  }
}

/* Reduced-motion users: no animations */
@media (prefers-reduced-motion: reduce) {
  .fda-slot,
  .fdam-cta-button,
  .fdam-cta-button.fdam-cta-pulse {
    animation: none;
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. ADMIN PREVIEW — for /wp-admin/ pages
   ─────────────────────────────────────────────────────────────────────── */
.fdam-preview {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.fdam-preview img {
  display: block;
  max-width: 100%;
  height: auto;
}