/* Market Deeping Clubs & Activities - plugin-owned, scoped stylesheet.
   Deliberately kept OUT of the shared global Additional CSS stylesheet -
   this covers exactly one thing: the text-only defensive fallback shown
   on a directory card in the extremely unlikely case a club's real photo
   AND its generated branded fallback image are both unavailable (see
   MDC_Public::render_card() / MDC_Images::maybe_generate_for_post()).
   Reuses the site's own established brand tokens (--md-cream, --md-green)
   which are already defined globally, read here only, never redefined. */
.md-venuecard-media--textonly {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  box-sizing: border-box;
  gap: 6px;
}
.md-venuecard-placeholder-kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9FE1CB;
}
.md-venuecard-placeholder-name {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--md-cream, #FAF7F0);
}

/* Mobile single-image hero overflow fix - Clubs-scoped only.
   Found and confirmed 25 Aug 2026 while QA-ing the fallback fix above:
   the SHARED global rule `@media(max-width:640px){ .md-place-gallery--1 {
   height:220px; max-width:none; } }` sets a fixed height but never sets
   width:100% - since the base (desktop) rule also carries
   `aspect-ratio:21/9` with no explicit width, the browser derives width
   FROM the fixed 220px height via that ratio (220 * 21/9 = ~513px),
   overflowing any viewport narrower than the box's own generic content
   column (confirmed on a real Place page too - Godsey Lane Coffee showed
   the identical 513px-wide overflow at 320px - so this is a genuine
   pre-existing bug in the shared component, not introduced by Clubs and
   not unique to Clubs; flagged in CLAUDE.md as a separate open item for
   Place/Event singles, deliberately not touched here).

   A first attempt at fixing this (width:100% alone, height:220px left in
   place) DID stop the overflow but broke the artwork's own aspect ratio:
   with width now correctly ~260px but height still forced to 220px, the
   box become ~1.18:1 instead of 21:9, so object-fit:cover cropped away
   roughly half the generated image's own width - cutting the baked-in
   club-name text at both edges on anything but the shortest titles
   (confirmed live on "The Deepings Friendship Club for the Disabled").
   Fixed properly by removing the fixed height instead of adding to it -
   width:100% + height:auto lets the still-active aspect-ratio:21/9 (from
   the base, non-mobile rule) compute height FROM the corrected width, so
   the artwork is never cropped beyond what it was actually composed for. */
@media (max-width: 640px) {
  body.single-md_club .md-place-gallery--1 { width: 100%; height: auto; aspect-ratio: 21 / 9; }
}