/* Reuse the ordinary listing's dimensions, typography and responsive layout. */
.highlighted-show.event-card {
  position: relative;
  isolation: isolate;
  display: flex;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
/* A faint wash extends into the gutter without moving any card content. */
.highlighted-show::before {
  content: '';
  position: absolute;
  inset: -10px -10px 0;
  z-index: -1;
  border-radius: 5px;
  background: #eeebf7;
}
.listing-venue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 9px;
}
.listing-venue a {
  color: var(--blue);
  font-weight: 700;
}
.listing-note {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}
.recommendations {
  border-top: 1px solid var(--line);
  padding-top: 38px;
  padding-bottom: 72px;
}
.recommendations .section-heading { margin-bottom: 34px; }
.recommendations h2 { font-size: clamp(36px, 4.5vw, 54px); }
.recommendation-reason {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 0 0 14px;
}
@media (max-width: 720px) {
  .recommendations { padding-top: 28px; padding-bottom: 48px; }
  .recommendations .section-heading { align-items: baseline; gap: 14px; }
  .recommendations .section-heading h2 { font-size: 36px; }
  .recommendations .section-heading > .text-button { white-space: nowrap; }
}
.show-placement:not([hidden]), #recommendation-list { display: contents; }