/* beach-club.html: page-scoped rules. Loaded after css/style.css.

   Photography leads. Real photographs keep their full component size.
   The one photograph still to come, the rock pool, has no empty slot on
   the page (taken out on 15 September 2026): when it arrives it goes in
   Pool and beach as a small secondary figure with .bc-slot, where an HTML
   comment marks the place. The Living Room slot is filled by the
   photograph in Private events. */

/* Opening: property/pool-floats-dog-wide.jpg, two people on striped floats
   (a different view from the homepage hero). The dog that walked the deck
   was edited out on 23 September 2026 at the club's request; the file name
   stays so the live photo spot keeps loading it. The hero shows about two
   thirds of the photograph's height up to 1495px wide and less beyond; from
   1496px the anchor moves up to 42% so both heads stay whole down to the 4:1
   band. On phones (560px block below) the band is a slice of the width,
   anchored right so both heads stay whole. */
.hero__media img { object-position: 50% 50%; }
@media (min-width: 1496px) {
  .hero__media img { object-position: 50% 42%; }
}

/* Grounds. The review (page 14) asks this page for warm cream and pale
   cement only, so Beach beds and What's On sit on a pale cement field
   instead of the shared lagoon and blush fields: the .field--cement plaster
   texture on a lighter ground, halfway between cream and cement, with the
   texture a little softer. The Club House keeps the full cement field. */
.field--cement.bc-pale { background-color: #E7E0D8; }
.field--cement.bc-pale::before { opacity: .1; }

/* The Club House: a wide Club House photograph (2fr) beside the
   courtyard photograph (1fr). */
.bc-media-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }

/* Small secondary slot: 3:2, capped width, inside a body column. */
.bc-slot { max-width: 320px; margin-top: 28px; }
/* Beside the Club House photograph the courtyard photograph takes the row's full height. */
.bc-media-row > .frame--45 { aspect-ratio: auto; height: 100%; }

/* Beach beds: the photograph sits under its heading, as the slot did. */
#beach-beds .intro__aside .frame { margin-top: 28px; }

/* Button rows and the Food and Drink link inside intro bodies. */
.bc-actions { margin-top: 24px; }
.bc-more { margin: 16px 0 0; }

/* What's On: the View calendar link needs room above it. */
.calendar-link { margin-top: 24px; }

/* The closing Reservations block is centred, so its button row and
   help line centre with the heading. */
.reserve .reserve__actions { justify-content: center; }
.reserve .reserve__note { max-width: 52ch; margin: 20px auto 0; text-align: center; }

@media (max-width: 560px) {
  .hero__media img { object-position: 100% 50%; }
  .bc-media-row { grid-template-columns: 1fr; }
  .bc-media-row > .frame--45 { height: auto; aspect-ratio: 3 / 2; }
}

/* Private events: spaces and capacities (club's events brochure, 23 Sep 2026) */
.spaces { margin: 20px 0 16px; border-top: 1px solid var(--line); }
.spaces__row { display: grid; grid-template-columns: 1.4fr .8fr 1.4fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.spaces__row dt { font-weight: 500; color: var(--ink); }
.spaces__row dd { margin: 0; color: var(--ink-soft); }
.spaces__row--total dt, .spaces__row--total dd { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .spaces__row { grid-template-columns: 1fr 1fr; }
  .spaces__row dt { grid-column: 1 / -1; }
}

/* Brochure download under the opening buttons (club, 23 Sep 2026) */
.hero__brochure { margin-top: 16px; }