/* PowerShare 2 - "What's on nearby" tile (js/features/whats-on.js)
   Ticketmaster event listings + a council-meetings fallback block, restated
   on the design tokens in css/tokens.css. Mobile-first; no raw hex. */

.whats-on-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.whats-on-item {
  display: flex;
  gap: var(--space-3);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3);
}

.whats-on-img {
  flex-shrink: 0;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--colour-surface-alt);
}

.whats-on-item-body {
  flex: 1;
  min-width: 0;
}

.whats-on-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.whats-on-date {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.whats-on-chip-free,
.whats-on-chip-price {
  font-size: var(--text-xs);
}

.whats-on-chip-free {
  background: var(--colour-success-bg);
  color: var(--colour-success);
}

.whats-on-chip-price {
  background: var(--colour-surface-alt);
  color: var(--colour-text-muted);
}

.whats-on-name {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--colour-text);
  line-height: var(--leading-body);
}

.whats-on-venue {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

/* The one primary action link under the list / state blocks */
.whats-on-more {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.whats-on-more a {
  color: var(--colour-link);
  font-weight: 600;
}

.whats-on-council {
  background: var(--colour-surface-alt);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.whats-on-council-heading {
  margin: 0 0 var(--space-1);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--colour-text);
}

.whats-on-council-body {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  line-height: var(--leading-body);
}