/* ============================================================
   solo-travel-club.css — Solo Travel Club page (Gold Coast).
   Shared chrome/type/buttons come from /site.css; the club-event tiles reuse
   the journal's .post-grid/.post classes with the events pages' centred-card
   treatment (duplicated locally so this page never depends on events.css).
   ============================================================ */

/* image captions (match the site's 12px photo-credit line) */
.stc-cap {
  display: block; padding-top: 10px;
  font-size: 12px; line-height: 16px; letter-spacing: -0.02em; color: var(--cap);
}
.stc-cap .dot { color: var(--teal); }

/* intro: image beside the welcome paragraph */
.stc-intro { padding: 26px 0 10px; }
.stc-intro-grid { align-items: center; gap: 48px; }
.stc-intro-media img { aspect-ratio: 600 / 430; }
.stc-intro-text p { font-size: 16px; line-height: 26px; color: var(--ink-soft); max-width: 560px; }

/* "Our Gatherings" text & image block (image right) */
.stc-gather { padding: 64px 0 24px; }
.stc-gather-grid { align-items: center; gap: 48px; }
.stc-gather-media img { aspect-ratio: 600 / 430; }
.stc-gather-text .serif-title { margin-bottom: 12px; }
.stc-lead { font-size: 18px; line-height: 26px; letter-spacing: -0.02em; color: var(--ink-soft); }

/* club-event tile sections (white "Upcoming", sand "Past") — events-page card look */
.stc-events { padding: 88px 0 110px; }
.stc-events.events-past { padding: 46px 0 92px; }
.stc-events .serif-title { text-align: center; margin-bottom: 22px; }
.stc-events .post-grid {
  max-width: 1232px;
  margin: 0 auto;
  gap: 48px 40px;
}
.stc-events .post { text-align: center; }
.stc-events .post-title { margin: 22px 0 8px; }
.stc-events .post-desc {
  font-size: 15px; line-height: 22px; letter-spacing: -0.02em;
  color: #404040;
  max-width: 352px; margin: 0 auto;
}

@media (max-width: 900px) {
  .stc-intro-grid, .stc-gather-grid { gap: 28px; }
  .stc-gather { padding: 44px 0 12px; }
  .stc-events { padding: 64px 0 70px; }
  .stc-events.events-past { padding: 40px 0 70px; }
}
@media (max-width: 560px) {
  .stc-events .post-desc { max-width: none; }
}