/* ============================================================
   BOOK PAGE
   Scoped to .bk-. Leans on the shared primitives in site.css
   for the shell, buttons, eyebrows and the .pgf__ form fields.

   Three things are bookable here and they work differently, so each
   gets its own ground and its own layout logic; someone landing
   mid-page should know which one they are in without reading:
     1. live online classes  → deep green, a timetable, no photos
     2. private events       → cream, photographic occasion tiles
     3. corporate yoga       → sand, one image and a formats list
   The request form serves 2 and 3; the section buttons preselect
   the matching option on the way in (see assets/book.js).
   ============================================================ */

/* ---------- hero ---------- */
.bk-hero{
  position:relative;
  padding-block:clamp(52px,7vw,92px) clamp(56px,7vw,96px);
  background:var(--sand);
  overflow:hidden;
}
.bk-hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.bk-hero__copy{display:flex;flex-direction:column;align-items:flex-start;max-width:36ch}
.bk-hero__copy .eyebrow{margin-bottom:18px}
.bk-hero__copy h1{font-size:clamp(3.1rem,7vw,5.4rem)}
.bk-hero__copy .lead{max-width:44ch;margin-top:clamp(16px,2vw,22px);font-size:clamp(1.02rem,1.5vw,1.12rem)}

/* The offer, given the weight it earns. It was a .8rem pill before,
   which put the single most persuasive fact on the page below the
   size of the body copy around it. */
.bk-offer{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:clamp(22px,2.8vw,30px);padding-top:clamp(20px,2.4vw,26px);
  border-top:2px solid var(--terracotta);align-self:stretch;
}
.bk-offer__big{
  font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.02em;
  font-size:clamp(1.9rem,3.2vw,2.6rem);color:var(--green-deep);
}
.bk-offer__small{font-size:.95rem;line-height:1.5;color:var(--ink-soft)}

.bk-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,34px)}
.bk-hero__cta .btn{padding:17px 28px;font-size:.95rem}
.bk-hero__cta .btn--ghost{padding:16px 28px;border-width:1.5px}

.bk-hero__figure{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.bk-hero__figure img{width:100%;height:100%;object-fit:cover}
.bk-hero__sprig{
  position:absolute;right:-38px;top:-46px;width:clamp(130px,15vw,210px);
  opacity:.5;pointer-events:none;z-index:0;
}

/* ---------- the chooser ----------
   The page's table of contents, sitting at the foot of the hero.
   Rules rather than cards: it is wayfinding, and three bordered
   boxes here would read as the same weight as the sections they
   point at. */
.bk-choose{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(44px,5.5vw,76px);
  border-top:1px solid var(--sand-deep);
}
.bk-choose__item{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,34px) clamp(20px,2.4vw,28px);
  border-left:1px solid var(--sand-deep);
  transition:background-color .35s var(--ease);
}
.bk-choose__item:first-child{border-left:0;padding-left:0}
.bk-choose__item:hover{background:rgba(250,246,240,.6)}
.bk-choose__item:first-child:hover{padding-left:clamp(20px,2.4vw,34px);margin-left:calc(-1 * clamp(20px,2.4vw,34px))}
.bk-choose__label{font-size:.78rem;letter-spacing:.04em;color:var(--terracotta)}
.bk-choose__name{
  font-family:var(--serif);font-size:clamp(1.7rem,2.4vw,2.15rem);font-weight:400;
  line-height:1.15;letter-spacing:-.015em;color:var(--green-deep);margin-top:8px;
}
.bk-choose__line{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin-top:10px;max-width:34ch}
.bk-choose__go{
  margin-top:auto;padding-top:18px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.92rem;color:var(--green-deep);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.bk-choose__go svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.bk-choose__item:hover .bk-choose__go svg{transform:translateX(3px)}

/* ---------- shared section head ----------
   Used by the private and corporate sections so the two read as
   siblings. The green week has its own because it inverts. */
.bk-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(18px,3vw,56px);align-items:end;
  margin-bottom:clamp(34px,4.2vw,58px);
}
.bk-head .eyebrow{color:var(--terracotta);margin-bottom:14px}
.bk-head h2{max-width:15ch}
.bk-head p{font-size:1rem;line-height:1.7;color:var(--ink-soft);max-width:46ch}

/* ---------- section foot ----------
   One line of plain speech and the action it leads to. */
.bk-sectfoot{
  display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;
  margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid var(--sand-deep);
}
.bk-sectfoot p{font-size:.98rem;line-height:1.65;color:var(--ink-soft);max-width:54ch}
.bk-sectfoot p a{color:var(--green-deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bk-sectfoot p a:hover{color:var(--terracotta-deep)}
.bk-sectfoot .btn{padding:17px 28px;font-size:.95rem;flex:none}

/* ============================================================
   THE WEEK
   Full-bleed deep green. This is the one thing on the page that
   people came to see, so it gets the whole width, the darkest
   ground and the largest non-heading type.
   ============================================================ */
/* Both of these are jump targets, from this page's own buttons and from
   /live-online-yoga-classes/. The nav is fixed, so without the margin an
   anchored landing puts the section heading underneath it. */
.bk-week{
  background:var(--green-deep);color:var(--cream);
  padding-block:clamp(56px,7vw,104px);
  scroll-margin-top:84px;
}
.bk-week__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(18px,3vw,56px);align-items:end;
  margin-bottom:clamp(32px,4vw,52px);
}
.bk-week__head .eyebrow{color:var(--green-mist);margin-bottom:14px}
.bk-week__head h2{color:var(--cream);max-width:15ch}
.bk-week__head p{color:var(--cream-soft);font-size:1rem;line-height:1.65;max-width:42ch}

/* ---------- the four slots ---------- */
.bk-slots{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}
.bk-slot{
  display:flex;flex-direction:column;
  border:1px solid rgba(190,203,198,.32);border-radius:18px;
  padding:clamp(20px,2.1vw,28px);
  color:var(--cream);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.bk-slot:hover,.bk-slot:focus-within{
  background:rgba(250,246,240,.08);border-color:var(--green-mist);
}
.bk-slot:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.bk-slot__day{font-size:.82rem;letter-spacing:.06em;color:var(--green-mist);margin-bottom:6px}
.bk-slot__time{
  font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.1rem,2.9vw,2.9rem);color:var(--cream);
}
.bk-slot__name{
  font-size:1.02rem;font-weight:500;line-height:1.35;color:var(--cream);
  margin-top:14px;
}
.bk-slot__meta{font-size:.88rem;line-height:1.55;color:var(--cream-soft);margin-top:6px;margin-bottom:clamp(20px,2.4vw,28px)}
.bk-slot__go{
  /* auto keeps the four buttons on one line however the meta wraps */
  margin-top:auto;align-self:stretch;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--cream);color:var(--green-deep);
  border-radius:11px;padding:13px 18px;font-size:.9rem;line-height:1.2;
  transition:background-color .3s var(--ease);
}
.bk-slot__go{text-decoration:none}
.bk-slot__go svg{width:17px;height:17px;transition:transform .35s var(--ease)}
.bk-slot:hover .bk-slot__go{background:#fff}
.bk-slot:hover .bk-slot__go svg{transform:translateX(3px)}

/* The dates a slot offers once the script has run. Replaces the single
   button, so it keeps the same margin-top:auto trick and sits on the
   same line across all four cards however the meta above it wraps. */
.bk-slot__dates{
  margin:auto 0 0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:7px;
}
.bk-slot__date{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(190,203,198,.38);border-radius:11px;
  padding:11px 14px;font-size:.9rem;line-height:1.2;
  color:var(--cream);text-decoration:none;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.bk-slot__date::after{content:"$15";font-size:.82rem;color:var(--green-mist)}
.bk-slot__date:hover,.bk-slot__date:focus-visible{
  background:rgba(250,246,240,.1);border-color:var(--green-mist);
}
.bk-slot__date:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
/* The soonest one is the one most people want, so it is the solid one. */
.bk-slot__date.is-next{
  background:var(--cream);border-color:var(--cream);color:var(--green-deep);
}
.bk-slot__date.is-next::after{color:var(--green-deep);opacity:.65}
.bk-slot__date.is-next:hover,.bk-slot__date.is-next:focus-visible{background:#fff}

/* ---------- rates line under the slots ---------- */
.bk-rates{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  margin-top:clamp(22px,2.6vw,30px);padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid rgba(190,203,198,.26);
  font-size:.98rem;line-height:1.6;color:var(--cream-soft);
}
.bk-rates strong{color:var(--cream);font-weight:500}
.bk-rates a{
  color:var(--cream);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.bk-rates a:hover{color:var(--green-mist)}

/* ---------- the "new here" panel ----------
   A cream panel on the green ground, holding the one plain next
   step for someone who has not practised with Julia before. It
   used to frame a third-party booking embed; the panel earned its
   keep as a resting place in the section, so it stayed when the
   embed went. */
.bk-embed{
  margin-top:clamp(28px,3.4vw,44px);
  background:var(--cream);border-radius:var(--radius);
  padding:clamp(22px,2.8vw,36px);
}
.bk-embed__head{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;justify-content:space-between;
  margin-bottom:clamp(16px,2vw,22px);
}
.bk-embed__title{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,1.85rem);font-weight:400;line-height:1.2;color:var(--green-deep)}
.bk-embed__note{font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.bk-embed__note a{
  color:var(--green-deep);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.bk-embed__note a:hover{color:var(--terracotta-deep)}
.bk-embed__frame{
  min-height:320px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  text-align:center;
  border-radius:14px;background:#fff;border:1px solid var(--sand-deep);
  padding:clamp(24px,3vw,44px);
}
.bk-embed__frame iframe{width:100%;border:0;display:block}
.bk-embed__framenote{font-size:.95rem;line-height:1.6;color:var(--ink-soft);max-width:44ch}
.bk-embed__frame .btn{padding:17px 28px;font-size:.95rem}

/* ============================================================
   2. PRIVATE EVENTS
   Cream ground, photographs doing the work. Tiles are image plus
   type with no frame: the live section is already a grid of
   bordered boxes, and repeating that here would flatten the two
   into one long run of cards.
   ============================================================ */
.bk-private{background:var(--cream);padding-block:clamp(64px,8vw,112px);scroll-margin-top:84px}

.bk-occ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,30px)}
.bk-occ__item{display:flex;flex-direction:column;align-items:flex-start}
/* <picture> is the flex/grid item where one is used for a WebP source;
   without this it shrinks to its content instead of filling the column. */
.bk-occ__item picture{display:block;width:100%;align-self:stretch}
.bk-occ__img{
  /* Every source here is landscape with the people in the lower half.
     A portrait crop cut straight to sky, so the tiles run at the
     photographs' own proportions instead. */
  /* height:auto is required; without it the img's own height attribute
     wins and aspect-ratio never applies. */
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius);
}
.bk-occ__name{
  font-family:var(--serif);font-size:clamp(1.55rem,2.1vw,1.95rem);font-weight:500;
  line-height:1.15;letter-spacing:-.01em;color:var(--green-deep);margin-top:18px;
}
.bk-occ__line{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin-top:8px}
.bk-occ__item:hover .bk-occ__name{color:var(--terracotta-deep)}
.bk-occ__item:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px}

/* ============================================================
   3. CORPORATE
   Sand ground and a different logic again: one photograph held
   against a list of formats, so the section reads as editorial
   rather than as a fourth grid of tiles.
   ============================================================ */
.bk-corp{background:var(--sand);padding-block:clamp(64px,8vw,112px);scroll-margin-top:84px}
.bk-corp__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4vw,64px);align-items:start;
}
.bk-corp__pic{display:block;min-width:0}
.bk-corp__img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius)}

.bk-formats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bk-format{padding:clamp(18px,2.2vw,26px) 0;border-top:1px solid var(--sand-deep)}
.bk-format:first-child{padding-top:0;border-top:0}
.bk-format__name{
  font-family:var(--serif);font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:500;
  line-height:1.2;letter-spacing:-.01em;color:var(--green-deep);
}
.bk-format__line{font-size:.95rem;line-height:1.65;color:var(--ink-soft);margin-top:8px;max-width:48ch}
.bk-format__go{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:.92rem;color:var(--green-deep);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.bk-format__go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.bk-format__go:hover{color:var(--terracotta-deep)}
.bk-format__go:hover svg{transform:translateX(3px)}

/* ============================================================
   THE REQUEST FORM
   Serves both of the sections above. The form is the only raised
   surface on the page, and the three steps beside it answer the
   question people actually have at this point: what happens after
   I press send.
   ============================================================ */
.bk-req{background:var(--cream);padding-block:clamp(64px,8vw,112px);scroll-margin-top:84px}
.bk-req__grid{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,4.5vw,72px);align-items:start;
}
.bk-req__aside{position:sticky;top:104px;display:flex;flex-direction:column}
.bk-req__aside .eyebrow{margin-bottom:14px}
.bk-req__aside h2{max-width:13ch}
.bk-req__aside .lead{margin-top:16px;max-width:40ch}

/* ---------- form ---------- */
.bk-form{
  background:#fff;border-radius:var(--radius);
  padding:clamp(26px,3.4vw,52px);
  box-shadow:0 30px 60px -44px rgba(52,56,55,.5);
}
.bk-form__title{
  font-family:var(--serif);font-size:clamp(1.8rem,2.6vw,2.3rem);font-weight:400;
  line-height:1.15;letter-spacing:-.015em;color:var(--green-deep);
}
.bk-form__sub{font-size:.98rem;line-height:1.6;color:var(--ink-soft);margin-top:10px;max-width:52ch}
.bk-form__head{margin-bottom:clamp(26px,3.2vw,38px)}
.bk-form__submit{width:100%;justify-content:center;padding:18px 28px;font-size:.98rem}
.bk-form__actions{display:flex;flex-direction:column;gap:14px;margin-top:clamp(22px,2.6vw,30px)}
.bk-form__actions .pgf__foot{margin-top:0;font-size:.88rem}
.bk-form__actions .pgf__foot a{color:var(--green-deep);text-decoration:underline;text-underline-offset:4px}

/* ---------- what happens next ----------
   A real sequence, so the numbering earns its place. */
.bk-next{list-style:none;margin:clamp(30px,3.4vw,42px) 0 0;padding:0;display:flex;flex-direction:column}
.bk-step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--sand-deep);
}
.bk-step__num{
  font-family:var(--serif);font-size:1.9rem;font-weight:500;line-height:1.15;
  color:var(--terracotta);min-width:1.6em;
}
.bk-step h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
/* Scoped to the body, not `.bk-step p`; that would outrank .bk-step__num
   and flatten the numeral back to body size. */
.bk-step__body p{font-size:.95rem;line-height:1.65;color:var(--ink-soft);margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .bk-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-occ{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
  .bk-req__grid{grid-template-columns:1fr;gap:clamp(30px,4vw,44px)}
  .bk-req__aside{position:static}
  .bk-req__aside h2{max-width:none}
  .bk-next{max-width:760px}
}
@media (max-width:899px){
  .bk-hero__inner{grid-template-columns:1fr}
  /* Copy first on a phone. The photo used to lead, which pushed the
     headline and both buttons below the fold. */
  .bk-hero__figure{aspect-ratio:16/10;margin-top:clamp(28px,6vw,40px)}
  .bk-hero__copy{max-width:none}
  .bk-week__head,.bk-head{grid-template-columns:1fr;align-items:start}
  .bk-head h2{max-width:none}
  /* Rules between the three become rules above them once they stack. */
  .bk-choose{grid-template-columns:1fr;border-top:0}
  .bk-choose__item,.bk-choose__item:first-child{
    border-left:0;border-top:1px solid var(--sand-deep);
    padding-left:0;padding-right:0;
  }
  .bk-choose__item:hover,.bk-choose__item:first-child:hover{background:none;margin-left:0;padding-left:0}
  .bk-choose__line{max-width:none}
  .bk-corp__grid{grid-template-columns:1fr}
  .bk-corp__img{aspect-ratio:16/10}
  .bk-sectfoot .btn{width:100%;justify-content:center}
}
@media (max-width:599px){
  .bk-slots{grid-template-columns:1fr}
  .bk-occ{grid-template-columns:1fr;max-width:460px}
  .bk-hero__cta .btn{width:100%;justify-content:center}
}

/* Cards lift and arrows slide; nobody who has asked not to be moved
   needs either to understand the page. */
@media (prefers-reduced-motion:reduce){
  .bk-slot:hover,.bk-slot:focus-visible{transform:none}
  .bk-slot:hover .bk-slot__go svg,
  .bk-choose__item:hover .bk-choose__go svg,
  .bk-format__go:hover svg{transform:none}
}