/* Single event — the intro row from tribe-events/single-event.php.

   Image left (capped at 420px), date / Register button / TEC's Details meta
   right, description full width beneath. Stacks under 783px, the same
   breakpoint the title band uses. The image is never cropped: event artwork
   carries its own text, and a crop cuts it off (the reason posts.css refuses
   to crop post cards too). */

/* inc/events.php hands TEC the theme font through .tribe-common/.tribe-events,
   but the single view's wrapper is neither, so the description fell back to
   TEC's Helvetica stack. */
.tribe-events-single { --tec-font-family-sans-serif: var(--rain-font); }

.rain-event-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin: 32px 0 36px;
}

/* TEC's "This event has passed" notice sat flush against the title band. */
.tribe-events-single .tribe-events-notices { margin-top: 28px; }
.tribe-events-single .tribe-events-notices + #tribe-events-header + div .rain-event-intro { margin-top: 20px; }
.rain-event-intro.has-image {
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: start;
}

.rain-event-intro__media { margin: 0; }
.rain-event-intro__media a { display: block; }
.rain-event-intro__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rain-radius);
}
.rain-event-intro__media a:focus-visible { outline: 3px solid var(--rain-accent); outline-offset: 3px; }
.rain-event-intro__media a:hover img { opacity: .92; }

.rain-event-intro__info { min-width: 0; }

/* TEC sets the schedule small and grey; here it is the first thing read. */
.rain-event-intro .tribe-events-schedule { margin: 0 0 18px; }
.rain-event-intro .tribe-events-schedule > div,
.rain-event-intro .tribe-events-schedule h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--rain-h-color);
  font-weight: var(--rain-h-weight);
}
.rain-event-intro .tribe-events-cost { display: block; margin-top: 4px; }

.rain-event-intro__cta { margin: 0 0 24px; }

/* TEC's meta floats its groups into columns sized for a full-width row. In
   the narrower info column they stack instead. */
.rain-event-intro .tribe-events-event-meta {
  margin: 0;
  border: 0;
  background: none;
}
/* TEC draws a page-wide rule above the meta with a :before, and here that
   line ran straight across the event image. */
.rain-event-intro .tribe-events-event-meta::before { content: none; }
.rain-event-intro .tribe-events-event-meta .tribe-events-meta-group {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 18px;
}
.rain-event-intro .tribe-events-single-section-title { margin-top: 0; }

@media (max-width: 782px) {
  .rain-event-intro.has-image { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .rain-event-intro__media { max-width: 420px; }
}