/* Jirung Morning Wellness (/club/) only. Loaded by build.py on that page, so it adds nothing to the others.
   Six parts in the owner's order: cover, free, Nature Walk, schedule card, booking, membership. Large photographs of
   Jirung's own places, few words, square corners, spacing instead of lines, nothing that follows the scroll. */

/* 1. Cover: the full screen, only the date and the name, set low like a film title. */
.hero--club .hero__photo { height: clamp(34rem, 88svh, 58rem); }
.hero--club .hero__photo::after { background: linear-gradient(to top, oklch(0.16 0.03 266 / 0.78), oklch(0.16 0.03 266 / 0) 50%); }
.club-cover { display: grid; gap: var(--s0); }
.club-cover__date { font-family: var(--sans-ui); font-weight: 500; font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); line-height: 1.3; color: var(--on-dark); font-variant-numeric: lining-nums; }
.hero--club .hero__title .display { max-width: none; font-size: clamp(2.75rem, 1rem + 5.4vw, 6.5rem); line-height: 1; }

/* 2. Free and about 20 places: words alone, a large heading and its one line. */
.club-free { padding-top: var(--section); }
.club-free__words { display: grid; gap: var(--s1); align-content: center; }
.club-free--teaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.club-free--teaser .club-free__words { grid-column: 1 / span 6; }
.club-free__teaser.film { grid-column: 7 / -1; justify-self: center; margin: 0; width: auto; height: min(88svh, 58rem); min-height: 0; aspect-ratio: 9 / 16; }
.club-free__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.75rem, 1rem + 5vw, 6rem); line-height: 1.05; color: var(--kram); }
:lang(th) .club-free__title { line-height: 1.25; }
.club-free__seats { font-family: var(--sans-ui); font-weight: 500; font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); line-height: 1.4; color: var(--ink); }

/* 3. Nature Walk: the forest road on the left, the words on the right, both still. */
.club-walk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.club-walk__photo { grid-column: 1 / span 5; grid-row: 1; aspect-ratio: 4 / 5; }
.club-walk__text { grid-column: 7 / -1; grid-row: 1; display: grid; gap: var(--s2); }
.club-walk__title { margin: 0; display: grid; gap: var(--s-1); font-family: var(--serif); font-weight: 300; font-size: clamp(2.5rem, 1rem + 3.4vw, 4.5rem); line-height: 1.05; color: var(--kram); }
.club-walk__sub { display: grid; gap: var(--s1); }
.club-walk__min { display: block; font-family: var(--sans-ui); font-weight: 500; font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem); line-height: 1.3; color: var(--ink); }
.club-walk__when { display: block; font-family: var(--sans-ui); font-size: var(--s2); line-height: 1.4; color: var(--ink); }
.club-walk__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); font-family: var(--sans-ui); font-size: var(--s1); line-height: 1.5; color: var(--ink-body); }

/* 4. The schedule: one printed card on the lake, grouped by class. */
.club-schedule { position: relative; isolation: isolate; padding-block: var(--section); padding-inline: var(--gutter); }
.club-schedule__ground { position: absolute; inset: 0; z-index: -1; margin: 0; }
.club-schedule__ground img { width: 100%; height: 100%; object-fit: cover; }
.club-sheet { max-width: 44rem; margin-inline: auto; padding: clamp(var(--s3), 5vw, var(--s6)); background: var(--paper); display: grid; gap: var(--s6); }
.club-sheet__title { margin: 0; text-align: center; font-family: var(--serif); font-weight: 300; font-size: clamp(2.25rem, 1rem + 2.6vw, 3.5rem); line-height: 1.15; color: var(--kram); }
.club-sheet__group { display: grid; gap: var(--s1); }
.club-sheet__class { margin: 0; text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1rem + 1.4vw, 2.25rem); line-height: 1.15; color: var(--ink); }
.club-sheet__about { text-align: center; font-family: var(--sans-ui); font-size: var(--s1); line-height: 1.5; color: var(--kram-soft); margin-bottom: var(--s0); }
.club-sheet__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.club-sheet__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); font-family: var(--sans-ui); font-size: var(--s1); line-height: 1.4; color: var(--ink); }
.club-sheet__day { display: grid; gap: 2px; }
.club-sheet__who { color: var(--kram-soft); }
.club-sheet__time { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

.club__trailer { display: block; width: 100%; max-height: 80vh; margin-top: var(--s3); background: var(--ink); }

/* The booking closes the schedule card: the one place on the page to book. */
.club-sheet__book { display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.club-call { font-family: var(--sans-ui); font-size: var(--s1); line-height: 1.5; color: var(--ink-body); }
.club-call a { display: inline-block; padding-block: 0.4em; color: var(--kram); font-weight: 500; }

/* 5. The place: the owner's heading and line, three photographs of equal height inside the margins, each named. */
.club-places__head { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.club-places__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2.25rem, 1rem + 2.6vw, 3.5rem); line-height: 1.2; color: var(--kram); }
.club-places__lede { font-family: var(--sans-ui); font-size: var(--s2); line-height: 1.5; color: var(--ink); max-width: 34em; }
.club-places__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.club-places__shot { margin: 0; display: grid; gap: var(--s1); }
.club-places__shot .media { aspect-ratio: 4 / 5; }
.club-places__name { font-family: var(--serif); font-weight: 400; font-size: var(--s2); line-height: 1.3; color: var(--ink); }

@media (max-width: 899px) {
  .hero--club .hero__photo { height: clamp(26rem, 72svh, 40rem); }
  .club-walk__photo, .club-walk__text { grid-column: 1 / -1; }
  .club-walk__text { grid-row: 1; }
  .club-walk__photo { grid-row: 2; margin-top: var(--s4); }
  .club-walk__photo { aspect-ratio: 4 / 3; }
}
/* Phones (owner, 12 Nov, after Aman and Six Senses on a phone): the free line and the walk as calm centred blocks,
   a medium serif title and one quieter serif line under it, the walk points as one short passage. */
@media (max-width: 899px) {
  .club-free__words, .club-walk__text { text-align: center; justify-items: center; }
  .club-free__words { gap: var(--s-1); }
  .club-free--teaser { display: block; }
  .club-free__teaser.film { width: 100%; max-width: 26rem; height: auto; margin: var(--s4) auto 0; }
  .club-free__title, .club-walk__title { font-weight: 400; font-size: 1.75rem; line-height: 1.3; color: var(--ink); }
  :lang(th) .club-free__title { line-height: 1.4; }
  .club-free__seats, .club-walk__sub { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.5; color: var(--kram-soft); }
  .club-walk__sub { display: block; }
  .club-walk__min, .club-walk__when { display: inline; font: inherit; color: inherit; }
  .club-walk__text { gap: var(--s-1); }
  .club-walk__points { margin-top: var(--s1); gap: 0; font-size: var(--s1); line-height: 1.75; color: var(--ink); }
  .club-walk { padding-top: var(--s4); }
  .club-places__head { text-align: center; justify-items: center; gap: var(--s-1); }
  .club-places__title { font-weight: 400; font-size: 1.75rem; color: var(--ink); }
  .club-places__lede { font-family: var(--serif); font-size: 1.25rem; color: var(--kram-soft); }
  .club-places__row { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .club-places__name { text-align: center; font-size: 1.25rem; }
}
@media (max-width: 599px) {
  .club-schedule { padding-inline: 0; padding-block: var(--s4); background: var(--mist); }
  .club-schedule__ground { display: none; }
  .club-sheet { background: transparent; }
  .club-sheet { padding: var(--s4) var(--s2); }
}

/* main.js lifts the home film's buttons (and the cover title) above the cookie bar, measured from the first .film on
   the page. Here the film is the teaser further down, so that lift would push the cover title off screen: not here. */
html[data-page="club"] body:has(.consent:not([hidden])) :is(.hero__title, .film__controls) { transform: none; }