/* =====================================================================
   LPS SETUP DISPLAY — SINGLE SHARED SOURCE (Jacob, 18 July 2026)
   ---------------------------------------------------------------------
   The ONE stylesheet for the setup gallery modal, loaded by BOTH the
   website-facing embed (setups-embed.html) AND the booking flow's own
   setup step (by-date / group / service / quote.html). There must be
   exactly one design; do not fork it. Colours, radii, fonts, layout all
   follow the 2026 brand guidelines (bone / ink / terracotta / olive).

   STANDING RULE (DESIGN_PRINCIPLES / DESIGN_SPEC): the booking system and
   the website share this file so the setup display can NEVER drift. If you
   change the setup gallery, change it HERE, once.
   ===================================================================== */

/* Self-contained brand tokens scoped to the modal, so the shared design
   renders identically wherever it's loaded, independent of any host theme. */
.b-modal{
  --bone:#E9E3D6; --boucle:#DAD1C2; --ink:#2C2E26; --terracotta:#B4552B;
  /* text ON terracotta: bone measures 3.84:1 there, under the 4.5 minimum */
  --on-accent:#FAF7F1;
  --rust:#7E3A22; --olive:#6E7255; --danger:#8C3B2E;
  --bg-card:#F1ECE0; --bg-soft:#F0EBDF; --text:#2C2E26;
  --text-muted:rgba(44,46,38,0.76); --text-dim:rgba(44,46,38,0.56);
  --border:rgba(44,46,38,0.18); --highlight:var(--olive);
  --font-display:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-body:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

.b-modal{position:fixed;inset:0;background:rgba(44,46,38,0.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;font-family:var(--font-body)}
.b-modal.open{display:flex;animation:bModalFade .25s ease}
@keyframes bModalFade{from{opacity:0}to{opacity:1}}
.b-modal *{box-sizing:border-box}
.b-modal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;max-width:640px;width:100%;max-height:92vh;overflow:hidden auto;display:flex;flex-direction:column;position:relative;box-shadow:0 30px 80px rgba(50,38,18,0.25)}
.b-modal-close{position:absolute;top:14px;right:14px;background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.25);color:#E9E3D6;font-size:22px;cursor:pointer;width:38px;height:38px;border-radius:50%;z-index:3;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s}
.b-modal-close:hover{background:rgba(0,0,0,0.85)}
.b-modal-head{padding:20px 24px 14px}
.b-modal-head h3{margin:0 0 6px;font-family:var(--font-display);font-size:22px;letter-spacing:-.5px;font-weight:600;color:var(--text)}
.b-modal-head p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.55}
.b-modal-gallery{position:relative;background:#2C2E26;border-radius:8px;overflow:hidden;width:calc(100% - 32px);margin:0 16px;aspect-ratio:3/2;max-height:50vh}
/* Native scroll-snap carousel (images always paint). On TOUCH, scroll-snap-stop
   caps a swipe to one image. On the trackpad the wheel is driven in JS (see the
   gallery script) because browsers don't cap a wheel fling. */
.b-modal-track{display:flex;height:100%;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.b-modal-track::-webkit-scrollbar{display:none}
.b-modal-slide{flex-shrink:0;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;scroll-snap-align:center;scroll-snap-stop:always}
.b-modal-slide-video{display:flex;align-items:center;justify-content:center;background:#000}
.b-modal-slide-video video{width:100%;height:100%;object-fit:contain}
.b-modal-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.25);color:#E9E3D6;width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s}
.b-modal-nav:hover{background:rgba(0,0,0,0.85)}
.b-modal-prev{left:14px}.b-modal-next{right:14px}
.b-modal-counter{position:absolute;top:12px;left:12px;background:rgba(0,0,0,0.7);color:#E9E3D6;padding:6px 14px;border-radius:4px;font-size:12px;font-weight:500;z-index:2}
/* The bottom-right thumbnail strip was removed (Jacob, 20 Jul 2026): navigation
   is the ‹ › arrows + swipe/scroll + the 1/N counter. Hidden here in the single
   source so it's gone from BOTH the booking flow and the website embed. */
.b-modal-thumbs{display:none}
.b-modal.single-img .b-modal-counter,.b-modal.single-img .b-modal-nav{display:none}
.b-modal-examples{padding:18px 24px 22px;margin-top:16px;border-top:1px solid var(--border)}
.b-modal-examples-label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}
.b-modal-examples-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.b-modal-example{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;background:var(--bg-soft);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:border-color .15s}
.b-modal-example:hover{border-color:var(--highlight)}
.b-modal-example-thumb{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.b-modal-example-thumb::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.3)}
.b-modal-example-play{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center}
.b-modal-example-play svg{color:#2C2E26;margin-left:2px}
.b-modal-example-label{padding:10px 13px;font-size:12.5px;font-weight:500;line-height:1.35}
/* The action button: terracotta on the website ("Book this setup"), reused in
   the booking flow as "Select" — same button, different label. */
.b-modal-book{display:flex;justify-content:center;margin:0 24px 22px;padding:13px;background:var(--terracotta);color:var(--on-accent);border:0;border-radius:4px;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s}
.b-modal-book:hover{background:var(--rust);color:var(--on-accent)}
.b-modal-book:disabled{background:rgba(44,46,38,0.14);color:var(--text-dim);cursor:not-allowed}

@media (max-width:720px){
  .b-modal-examples-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding-bottom:6px;scrollbar-width:none}
  .b-modal-examples-list::-webkit-scrollbar{display:none}
  .b-modal-example{flex:0 0 44%;scroll-snap-align:start}
  .b-modal-examples{padding:16px 24px 14px}
  .b-modal-book{margin:0 24px 20px}
  /* phone: swipe IS the navigation — no thumbnail cluster crowding the photo.
     One compact NEXT arrow stays as the "there's more" cue. */
  .b-modal-thumbs{display:none}
  .b-modal-nav{display:none}
  .b-modal-next{display:flex;width:34px;height:34px;font-size:18px;right:10px;background:rgba(0,0,0,0.45)}
}
/* Swipe/scroll NUDGE cue: on open the photo glides left a touch and settles back
   twice — a quiet "there's more" hint. Multi-image only, EVERY width (Jacob, 22 Jul:
   it used to be phone-only, so it never showed on desktop). */
@media (prefers-reduced-motion: no-preference){
  @keyframes bModalNudge{0%{transform:none}30%{transform:translateX(-22px)}55%{transform:none}75%{transform:translateX(-10px)}100%{transform:none}}
  .b-modal.nudge:not(.single-img) .b-modal-slide{animation:bModalNudge 1.6s cubic-bezier(.33,.1,.25,1) .65s 1 both}
}

/* =====================================================================
   SETUP CARDS — shared source (same file, same design as the gallery).
   Verbatim from the website's .setup-b-card; the booking flow adds the
   availability/selection STATES below (the website has no such states).
   ===================================================================== */
.setups-b-gallery{
  --bone:#E9E3D6; --ink:#2C2E26; --terracotta:#B4552B; --rust:#7E3A22; --olive:#6E7255; --danger:#8C3B2E;
  --on-accent:#FAF7F1;
  --bg-card:#F1ECE0; --bg-soft:#F0EBDF; --text:#2C2E26;
  --text-muted:rgba(44,46,38,0.76); --text-dim:rgba(44,46,38,0.56);
  --border:rgba(44,46,38,0.18); --border-soft:rgba(44,46,38,0.11); --highlight:var(--olive);
  --font-display:'Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-body:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;font-family:var(--font-body)
}
.setup-b-card{position:relative;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;color:var(--text);text-decoration:none}
.setup-b-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(50,38,18,0.08)}
.setup-b-card-img{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#2C2E26;position:relative;cursor:pointer}
.setup-b-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.55) 100%)}
.setup-b-card-name{position:absolute;left:16px;right:16px;bottom:34px;z-index:1;font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.3px;margin:0;color:#E9E3D6}
.setup-b-card-cap{position:absolute;left:16px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.85);letter-spacing:.4px;text-transform:uppercase}
.setup-b-card-cap svg{flex-shrink:0;color:#E9E3D6}
.setup-b-card-img > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.setup-b-book-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-top:1px solid var(--border-soft);color:var(--text);font-size:14px;font-weight:500;letter-spacing:.2px;text-decoration:none;background:transparent;transition:background .2s,color .2s}
.setup-b-book-btn::after{content:"\203A";font-size:18px;line-height:1;transition:transform .2s}
.setup-b-card:hover .setup-b-book-btn{background:var(--bg-soft)}
.setup-b-book-btn:hover::after{transform:translateX(3px)}
.setup-b-card-img .setup-b-gallery-badge{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:6px;background:rgba(23,24,20,.60);color:#E9E3D6;font-family:var(--font-body);font-weight:600;font-size:11.5px;line-height:1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;transition:background .2s}
.setup-b-card:hover .setup-b-gallery-badge{background:rgba(180,85,43,.85)}
.setup-b-gallery-badge svg{width:13px;height:13px;display:block}
@media (max-width:880px){ .setups-b-gallery{grid-template-columns:1fr 1fr;gap:14px} }
@media (max-width:540px){
  .setups-b-gallery{grid-template-columns:1fr 1fr;gap:10px}
  .setup-b-card-name{font-size:14px;left:10px;right:10px;bottom:26px}
  .setup-b-card-cap{font-size:9px;left:10px;bottom:10px}
  .setup-b-book-btn{padding:11px 4px;font-size:12.5px}
  .setup-b-card-img .setup-b-gallery-badge{padding:4px 6px;font-size:10px;top:8px;right:8px}
}

/* ---- Booking-flow-only states (availability / selection / waitlist) ---- */
button.setup-b-book-btn{width:100%;border:0;border-top:1px solid var(--border-soft);font-family:inherit;cursor:pointer}
.setup-b-card.selected{border-color:var(--highlight);box-shadow:0 0 0 1px var(--highlight) inset}
.setup-b-card.selected .setup-b-book-btn{color:var(--highlight)}
.setup-b-card.selected .setup-b-book-btn::before{content:"\2713";font-size:14px;font-weight:700;margin-right:2px}
.setup-b-card.unavailable .setup-b-card-img{opacity:.45;filter:grayscale(.5);cursor:default}
.setup-b-card.unavailable:hover{transform:none;box-shadow:none}
.setup-b-card.unavailable:hover .setup-b-book-btn{background:transparent}
.setup-b-card.unavailable .setup-b-gallery-badge{opacity:0}
.setup-unavailable-tag{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 18px;font-size:15px;font-weight:600;letter-spacing:.2px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.75)}
.setup-b-book-btn.check{cursor:default;color:var(--text-dim)}
.setup-b-book-btn.check::after{content:""}
.setup-b-pick-split{display:flex;margin-top:auto}
/* Short single-word labels (Book / Notify) that never wrap — so the split
   row stays ONE line high and matches the single-button cards' footer height.
   A wrapping 2-line split used to make full cards taller than their neighbours,
   leaving an empty bar above the Select/Selected button (Jacob, 22 July 2026). */
.setup-b-pick-split .setup-b-book-btn{flex:1;min-width:0;font-size:13px;padding:14px 8px;color:var(--text-muted);font-weight:500;margin-top:0;white-space:nowrap}
.setup-b-pick-split .setup-b-book-btn:hover{color:var(--text)}
.setup-b-pick-split .see-avail{border-right:1px solid var(--border-soft)}

/* Fully-booked-at-the-chosen-time card — "Option 2A" (Jacob, 22 July 2026).
   The photo stays FULL COLOUR (no washout): a frosted red-dot chip top-left
   states "Fully booked", and a second frosted chip bottom-right answers
   "when is it next free?" (filled by the booking pages from the live
   availability engine; hidden until the lookup lands). Only TIME-blocked
   cards get this treatment — seat-blocked cards keep the dimmed tag above,
   because a different day can't add seats. */
.setup-b-card.fullslot .setup-b-card-img{opacity:1;filter:none}
.setup-fb-chip{position:absolute;top:12px;left:12px;z-index:5;display:inline-flex;align-items:flex-start;gap:6px;max-width:calc(100% - 24px);background:rgba(23,24,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#E9E3D6;font-size:11.5px;font-weight:600;letter-spacing:.04em;line-height:1.3;padding:6px 10px;border-radius:6px;pointer-events:none}
.setup-fb-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--danger,#8C3B2E);flex-shrink:0;margin-top:3px}
.setup-fb-next{position:absolute;right:12px;bottom:12px;z-index:5;display:inline-flex;align-items:center;gap:5px;background:rgba(23,24,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:rgba(233,227,214,.85);font-size:11.5px;font-weight:500;padding:6px 10px;border-radius:6px;max-width:calc(100% - 24px);white-space:nowrap;pointer-events:none}
.setup-fb-next b{font-weight:600;color:#fff;margin-left:3px}
.setup-fb-next[hidden]{display:none}
/* Raise the name + capacity so the bottom-right chip has clear space. */
.setup-b-card.fullslot .setup-b-card-name{bottom:52px}
.setup-b-card.fullslot .setup-b-card-cap{bottom:32px}

/* Too-small-for-the-mic-count card (Jacob, 22 July 2026) — same full-colour +
   red-dot chip treatment as the fully-booked card, so the setup grid reads as
   ONE style. The room simply can't fit the chosen mic count, so there's no
   "next free" recovery (a different day won't add seats): a single "Too small"
   chip top-left + the "Not enough seats" footer. Placed AFTER the .unavailable
   dim rule so it wins (equal specificity, later source). */
.setup-b-card.seatblock .setup-b-card-img{opacity:1;filter:none}
@media (max-width:540px){
  .setup-fb-chip{font-size:10px;padding:5px 8px;top:8px;left:8px}
  /* Narrow cards: the chip becomes a full-width strip at the photo's foot,
     and the name/capacity lift fully clear of it. */
  .setup-fb-next{font-size:10px;padding:5px 8px;left:8px;right:8px;bottom:8px;max-width:none;justify-content:center}
  .setup-b-card.fullslot .setup-b-card-name{bottom:52px}
  .setup-b-card.fullslot .setup-b-card-cap{bottom:36px}
}

/* ---- Tabs + placeholder (used by the embed's Podcast/Content Creator switch;
   the booking flow has no tabs, so these are inert there) ---- */
.setups-b-tabs{--bg-soft:#F0EBDF;--border:rgba(44,46,38,0.18);--text-muted:rgba(44,46,38,0.76);--text:#2C2E26;--bg:#E9E3D6;display:inline-flex;background:var(--bg-soft);border:1px solid var(--border);border-radius:4px;padding:3px;margin-bottom:32px;align-self:flex-start;font-family:'Bricolage Grotesque',-apple-system,system-ui,sans-serif}
.setups-b-tab{padding:9px 18px;background:transparent;color:var(--text-muted);font-size:13px;font-weight:500;border-radius:4px;transition:all .2s;border:0;cursor:pointer;font-family:inherit}
.setups-b-tabs .setups-b-tab.active{background:var(--text);color:var(--bg)}
.setups-b-tab:hover:not(.active){color:var(--text)}
.setups-b-placeholder{--bg-soft:#F0EBDF;--text-dim:rgba(44,46,38,0.56);--text:#2C2E26;padding:60px 32px;text-align:center;font-size:14px;color:var(--text-dim);font-style:italic;background:var(--bg-soft);border-radius:8px;line-height:1.65;grid-column:1/-1;font-family:'Bricolage Grotesque',-apple-system,system-ui,sans-serif}
.setups-b-placeholder strong{display:block;color:var(--text);font-style:normal;font-weight:500;margin-bottom:4px;font-size:15px}