/* Local Spotlight ad slot (js/spotlight.js). Self-contained: brand colors are
   hardcoded so the slot looks the same on any page, whatever that page's tokens. */
.spotlight { grid-column: 1 / -1; font-family: 'Barlow', sans-serif; color: #fff; }
.spotlight[hidden] { display: none; }

.spotlight-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.spotlight-label { font-family: 'Barlow Condensed', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.spotlight-kind { font-family: 'Barlow Condensed', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.18rem 0.5rem; border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.spotlight-kind.kind-sponsor { border-color: #e8832a; color: #e8832a; }
.spotlight-kind.kind-referral { border-color: #7ab648; color: #7ab648; }
.spotlight-dots { margin-left: auto; display: flex; gap: 0.35rem; }
.spotlight-dots button { width: 22px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.spotlight-dots button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); background: rgba(255,255,255,0.22); transition: background 0.2s; }
.spotlight-dots button[aria-selected="true"]::after { background: #3dbfbf; }
.spotlight-dots button:focus-visible { outline: 2px solid #3dbfbf; outline-offset: 1px; }

.spotlight-card {
  --sp-accent: #3dbfbf;
  display: grid; grid-template-columns: 112px 1fr auto; gap: 1.25rem; align-items: center;
  padding: 0.9rem 1.25rem 0.9rem 0.9rem;
  background: #0d1b2a; border: 1px solid rgba(61,191,191,0.14); border-left: 3px solid var(--sp-accent);
  text-decoration: none; color: inherit;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition: background 0.2s;
  animation: spotlight-in 0.35s ease;
}
.spotlight-card[hidden] { display: none; }
.spotlight-card:hover { background: #122b42; }
@keyframes spotlight-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .spotlight-card { animation: none; } }

.spotlight-img { width: 112px; height: 112px; background: #ece6dc; overflow: hidden; display: block; }
.spotlight-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spotlight-img-mark { display: flex; align-items: center; justify-content: center; background: #080f18; }
.spotlight-img-mark svg { width: 56px; height: 56px; }

.spotlight-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.spotlight-sponsor { font-family: 'Barlow Condensed', sans-serif; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-accent); }
.spotlight-headline { font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.spotlight-body { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.78); max-width: 70ch; }
.spotlight-cta { font-family: 'Barlow Condensed', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; padding: 0.7rem 1.1rem; background: var(--sp-accent); color: #080f18; }

@media (max-width: 700px) {
  .spotlight-card { grid-template-columns: 84px 1fr; gap: 0.9rem; padding: 0.8rem; }
  .spotlight-img { width: 84px; height: 84px; }
  .spotlight-headline { font-size: 1.12rem; }
  .spotlight-body { font-size: 0.85rem; }
  .spotlight-cta { grid-column: 1 / -1; text-align: center; }
}