/* ==========================================================================
   Booking family (f-booking.css): /host and /team-bonding-activities
   Loaded after /redesign.css and /css/pages.css. Page-scoped extras only: the
   /host hero that holds the wizard, the /host sponsorship models, and the Ads
   landing page's hero and activity cards (moved here from its inline <style>).
   The wizard itself is styled by pages.css; nothing here touches it.
   ========================================================================== */

/* ---------- /host: the enquiry is the hero ----------
   Intro top left, the wizard right from the first screen, the reassurance under
   the intro (sticky beside the longer steps). One column below 960px, in source
   order: intro, wizard, reassurance. */
.bk-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,104px);align-items:start}
/* both columns sit on the first baseline, so "Book a workshop" and "The enquiry" line up */
.bk-intro{grid-column:1;grid-row:1;align-self:baseline}
.bk-form{grid-column:2;grid-row:1/span 2;min-width:0;align-self:baseline}
.bk-side{grid-column:1;grid-row:2;position:sticky;top:calc(var(--hd) + 40px);display:flex;flex-direction:column;gap:22px;margin-top:clamp(40px,4.4vw,64px)}
/* the H1 shares the first screen with the form, so it runs a step under display size */
.bk .ph-h{font-size:clamp(2.6rem,5vw,5.25rem)}
.bk .ph-lede{max-width:28em}
/* the form's own caption: label left, a quiet serif title right */
.bk-cap{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.bk-cap .label{margin:0}
.bk-cap-h{font:italic 400 clamp(1.4rem,1.7vw,1.65rem)/1.15 var(--serif-t);letter-spacing:-.005em;color:var(--ink)}

/* sponsorship models (night chapter): the cost line sits on each column's foot */
.bk-tiers .col{display:flex;flex-direction:column}
.bk-tiers .col-t{font-size:clamp(1.9rem,2.7vw,2.6rem)}
.bk-tiers .bk-cost{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);font:400 var(--fs-title)/1.15 var(--serif-t);letter-spacing:-.008em;color:var(--fg1,var(--ink))}
.bk-tiers .col>p:not(.col-k):not(.bk-cost){margin-bottom:clamp(32px,3.4vw,48px)}
.bk-cost span{display:block;margin-top:8px;font:400 var(--fs-small)/1.5 var(--sans);letter-spacing:0;color:var(--fg2)}
.bk-note{margin-top:clamp(56px,6vw,96px)}

/* ---------- /team-bonding-activities: hero ---------- */
/* the clients line: a hairline, then the names set like the homepage's partner names */
.lp-who{max-width:36em;margin-top:clamp(24px,2.6vw,32px);padding-top:18px;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.6;color:var(--fg2);text-wrap:pretty}
.lp-who b{font:italic 400 1.3em/1 var(--serif-t);color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  html.js:not(.is-ready) .ph .lp-who{opacity:0;transform:translateY(16px)}
}
html.is-ready .ph .lp-who{transition:opacity 1s var(--ease) .14s,transform 1.1s var(--ease) .14s}
html.js:not(.rd) .ph .lp-who{animation:failsafe .6s ease 2s forwards}
/* the photo keeps its own 4:3 frame; its caption sits under it, not on it */
.lp-shot figure{overflow:visible;background:none}
.lp-img{display:block;overflow:hidden;background:#d9d2c6}
.lp-shot figcaption,.act-media figcaption{margin-top:12px;font-size:var(--fs-label);line-height:1.4;letter-spacing:.02em;color:var(--fg2)}

/* ---------- /team-bonding-activities: activity cards ----------
   Two wide, three narrow, two wide on a six-column grid; no boxes, the photo
   leads, a hairline fact line, and the pick button on each card's foot (the
   inline script reads [data-pick], data-note and data-name only). */
.acts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(64px,6.4vw,104px) clamp(24px,3vw,48px)}
.act{grid-column:span 2;display:flex;flex-direction:column;min-width:0}
.act.wide{grid-column:span 3}
.act-media img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#d9d2c6}
.act.wide .act-media img{aspect-ratio:3/2}
.act-body{display:flex;flex-direction:column;flex:1;min-width:0;margin-top:clamp(20px,2vw,28px)}
.act h3{font:400 clamp(1.75rem,2.5vw,2.5rem)/1.04 var(--serif-t);letter-spacing:-.015em;text-wrap:balance}
.act-body>p{max-width:34em;margin-top:12px;font-size:var(--fs-small);line-height:1.6;color:var(--fg2);text-wrap:pretty}
.act-facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin:22px 0 28px;padding-top:16px;border-top:1px solid var(--rule)}
.act-facts li{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-small);line-height:1.35;color:var(--fg2)}
.act-facts li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.act-facts li:nth-child(2)::before{background:var(--blue)}

/* pick buttons: an ink outline that fills from below (the homepage pill's motion) */
.act-pick,.act-classes button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.7em;border:1px solid var(--ink);border-radius:999px;font:500 var(--fs-small)/1.2 var(--sans);color:var(--ink);text-align:center;transition:color .45s var(--ease),border-color .3s}
.act-pick::before,.act-classes button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ink);transform:translateY(101%);transition:transform .55s var(--ease)}
.act-pick:is(:hover,:focus-visible),.act-classes button:is(:hover,:focus-visible){color:var(--paper)}
.act-pick:is(:hover,:focus-visible)::before,.act-classes button:is(:hover,:focus-visible)::before{transform:none}
.act-pick:active,.act-classes button:active{transform:scale(.98)}
.act-pick:focus-visible,.act-classes button:focus-visible{outline-color:var(--ink)}
.act-pick{align-self:flex-start;margin-top:auto;min-height:52px;padding:0 1.5em}
.act-pick .ic{transition:transform .5s var(--ease)}
.act-pick:is(:hover,:focus-visible) .ic{transform:translateY(3px)}
/* six classes on the fitness card: a 3 x 2 set of smaller pills on a lighter outline */
.act-classes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto}
.act-classes button{min-height:44px;padding:8px 10px;border-color:var(--rule)}
.act-classes button:hover{border-color:var(--ink)}

/* "Something else in mind?": the one night panel, the catch-all */
.act-custom{justify-content:center;padding:clamp(32px,4.4vw,72px);background:var(--night);color:var(--paper);--fg1:var(--paper);--fg2:var(--paper-2);--rule:var(--line-d)}
.act-custom .act-body{flex:0 1 auto;margin-top:0}
.act-custom h3{font-size:clamp(2.1rem,3.4vw,3.4rem);line-height:1}
.act-custom .act-body>p{margin-top:16px;margin-bottom:clamp(28px,3vw,40px);font-size:var(--fs-body);max-width:28em}
.act-custom .act-pick{margin-top:0;border-color:var(--paper);background:var(--paper);color:var(--ink)}
.act-custom .act-pick::before{background:var(--amber)}
.act-custom .act-pick:is(:hover,:focus-visible){color:var(--ink)}
.act-custom .act-pick:focus-visible{outline-color:var(--paper)}

/* the pick buttons scroll the wizard to the top of the screen: it fades in without the
   reveal's rise, so the first jump lands exactly under the header */
html.js .book .wizard.rv{transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .act,.act.wide{grid-column:auto}
  .act.wide .act-media img{aspect-ratio:4/3}
  .act.act-custom{grid-column:1/-1}
}
/* tablet: the catch-all spans the grid, so it reads as a band: title left, offer right */
@media (min-width:761px) and (max-width:1100px){
  .act-custom .act-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,5vw,64px);align-items:start}
  .act-custom h3{grid-column:1;grid-row:1/span 2}
  .act-custom .act-body>p,.act-custom .act-pick{grid-column:2}
  .act-custom .act-pick{justify-self:start}
  .act-custom .act-body>p{margin-top:.4em}
}
@media (max-width:960px){
  .bk-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:clamp(40px,7vw,64px)}
  .bk-intro,.bk-form,.bk-side{grid-column:1;grid-row:auto}
  .bk-side{position:static;margin-top:0}
  .bk-side .ticks{max-width:36em}
}
@media (max-width:760px){
  .bk-cap{margin-bottom:0;border-bottom:0;padding-bottom:16px}
  .acts{grid-template-columns:minmax(0,1fr);row-gap:72px}
  .act-pick{align-self:stretch}
  .act-classes{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the catch-all goes edge to edge and closes the chapter, straight onto the form's ground */
  .act-custom{margin-inline:calc(var(--gutter) * -1);padding:64px var(--gutter)}
  .lp-acts{padding-bottom:0}
}

/* ---------- Reduced motion and print ---------- */
@media (prefers-reduced-motion:reduce){
  .ph .lp-who{opacity:1;transform:none}
}
@media print{
  .ph .lp-who{opacity:1!important;transform:none!important}
  .bk-side{position:static!important}
  .act{break-inside:avoid;page-break-inside:avoid}
}