/* ============================================================
   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); }

/* R5-HERO-01: Contact treatment — banner under the title (site.css .banner), the intro
   image moved into it. Clamp guards stored 4:3 uploads from towering at full-bleed. */
.banner img { max-height: 640px; }

/* intro: centred welcome paragraph under the banner */
.stc-intro { padding: 26px 0 10px; }
.stc-intro-text { max-width: 720px; margin: 0 auto; text-align: center; }
/* max-width: none — the wrapper keeps .content, whose site.css 560px p-cap would sit
   flush-left inside this centred 720px column (review catch) */
.stc-intro-text p { font-size: 16px; line-height: 26px; color: var(--ink-soft); max-width: none; }

/* "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;
}

/* optional "Event date" line above the card title; undated cards keep the title's 22px top */
.stc-events .stc-date {
  margin-top: 22px;
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
}
.stc-events .stc-date + .post-title { margin-top: 8px; }

/* rich text (wysiwyg intro + descriptions): paragraph rhythm, lists, visible links */
.stc-events .post-desc > * + * { margin-top: 10px; }
.stc-rich ul, .stc-rich ol { display: inline-block; text-align: left; padding-left: 22px; }
.stc-rich blockquote { font-style: italic; }
/* intro paragraphs carry .content's 24px bottom margin; give lists/quotes the same */
.stc-intro-text > ul, .stc-intro-text > ol, .stc-intro-text > blockquote { margin-bottom: 24px; }
.stc-rich a {
  color: var(--navy);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color .25s ease;
}
.stc-rich a:hover, .stc-rich a:focus-visible { color: var(--teal); }
@media (prefers-reduced-motion: reduce) {
  .stc-rich a { transition: none; }
}

@media (max-width: 900px) {
  .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; }
}