/* =============================================================
   AD SYSTEM — INDEX
   -------------------------------------------------------------
   Token surface + component index for in-card ads on Explore.

   Mirrors the tokenization pattern used by static/css/report/
   components.css: every ad layout reads from var(--ad-*) here
   (filled inline per render) and var(--...) from
   static/css/tokens/* (one-way, never written).

   Paired with:
     static/css/ad/layouts.css   — 8 brand-color layouts + house ads
     static/js/ad-designs.js     — registry + HSL bucket router

   BUCKET ROUTING (documented here, implemented in ad-designs.js)
     LIGHT  L >= 70      fg = black      designs: v2, v6, v7
     MID    40 <= L < 70 fg = white      designs: v3
     DARK   L < 40  OR   fg = white      designs: v1, v4, v5, v8
            saturation < 12%

   Per-event layout override:
     EventAd.layout_override (1..8) wins over bucket pick.

   Colors: no raw hex in this file except token fallbacks.
   ============================================================= */

.ep-ad-event {
  /* Brand color of the event — set inline on the element by ad-designs.js.
     Fallbacks are neutral grey so the card still renders if no brand hex. */
  --ad-brand: var(--ink);
  /* Foreground/text color chosen by the server for contrast. */
  --ad-fg: var(--white);

  /* Card geometry — matches the explore slot footprint (135px tall card). */
  --ad-radius: 0;
  --ad-border: 1px solid rgba(0, 0, 0, 0.12);
  --ad-pad-x: 18px;
  --ad-pad-y: 12px;

  /* Overlay tints derived from --ad-fg via color-mix so every layout
     stays monochrome-on-brand regardless of the brand hue. */
  --ad-fg-08: color-mix(in srgb, var(--ad-fg) 8%, transparent);
  --ad-fg-12: color-mix(in srgb, var(--ad-fg) 12%, transparent);
  --ad-fg-18: color-mix(in srgb, var(--ad-fg) 18%, transparent);
  --ad-fg-22: color-mix(in srgb, var(--ad-fg) 22%, transparent);
  --ad-fg-25: color-mix(in srgb, var(--ad-fg) 25%, transparent);
  --ad-fg-28: color-mix(in srgb, var(--ad-fg) 28%, transparent);
  --ad-fg-50: color-mix(in srgb, var(--ad-fg) 50%, transparent);
  --ad-fg-80: color-mix(in srgb, var(--ad-fg) 80%, transparent);

  display: block;
  position: relative;
  overflow: hidden;
  border: var(--ad-border);
  border-radius: var(--ad-radius);
  text-decoration: none;
  color: var(--ad-fg);
  background: var(--ad-brand);
  height: 135px;
  /* Reset the legacy `.ep-ad { line-height: 0 }` (which existed for the
     old image-only ad slot) so text rows in event layouts don't collapse
     on top of each other. */
  line-height: 1.35;
}

.ep-ad-event .ep-ad-event-inner {
  position: relative;
  z-index: 1;
  padding: var(--ad-pad-y) var(--ad-pad-x);
}

.ep-ad-event .ep-ad-event-title {
  color: var(--ad-fg);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 4px;
}

.ep-ad-event .ep-ad-event-meta {
  color: var(--ad-fg);
  opacity: 0.9;
  font-size: 13px;
  margin-bottom: 2px;
}

.ep-ad-event .ep-ad-event-org {
  color: var(--ad-fg);
  opacity: 0.7;
  font-size: 13px;
  margin-bottom: 6px;
}

.ep-ad-event .ep-ad-event-cta {
  display: inline-block;
  background: var(--ad-fg);
  color: var(--ad-brand);
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}