/* eResonate — sponsor-slot.css
   The presenting-sponsor placement on WatchParty and Backstage. One component,
   two rooms; see sponsor-slot.js for what it is and why it is unsold.

   The note colour is the point of the bottom row. A sold sponsorship puts money
   in the artist's and the venue's pockets and is written in --money, the green
   this product uses for exactly that. A house ad puts none there, so it is
   written in --text-muted. Same row, same type, different truth. */

.spon-band {
  padding: 2.4rem 0 0.4rem;
}
.spon-band .spon-slot { max-width: 620px; margin: 0 auto; }

.spon-a {
  display: block;
  border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-bottom: 0;
  line-height: 0;                       /* kill the inline-image gap */
  background: var(--bg-dark);
}
.spon-a:hover { border-color: var(--border-accent); }
.spon-img { width: 100%; height: auto; display: block; }

.spon-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  padding: 0.7rem 0.95rem 0.8rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg, 20px) var(--radius-lg, 20px);
  background: var(--bg-card);
}
.spon-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.15rem 0.42rem;
}
.spon-brand {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem; font-weight: 700;
  color: var(--text);
}
.spon-note {
  flex: 1 1 100%;
  font-size: 0.7rem;
  color: var(--money);
}
/* A house ad earns the room nothing, so its note must not be drawn in the
   colour reserved for money reaching the artist. */
.spon-note.house { color: var(--text-muted); }

@media (max-width: 620px) {
  .spon-band { padding-top: 1.6rem; }
  .spon-note { font-size: 0.65rem; }
}