/* Kahiki — Eventos Privados (Barcelona & Mataró)
   Loaded on top of the venue's own assets/css/style.css, which already defines the design
   tokens (--ink, --accent, --cream…) and every component we reuse as-is: .hero, .section,
   .slider, .faq, .fact-list, .reserva-step (form fields), .reserva-form__msg, .hp-field,
   .fab-stack, .lightbox, .site-header / .main-nav / .burger, .footer__*. This file only adds
   the handful of components specific to this page. */

/* Video slide inside the reused .slider gallery — plays muted+looped as soon as it scrolls into
   view (wired in eventos-privados.js), so it reads as real motion in the gallery instead of a
   static "photo" with a play button bolted on. The small button toggles sound. */
.slider__slide--video video{ width:100%; height:100%; object-fit:cover; }
.slider__slide--video__sound{
  position:absolute; bottom:10px; right:10px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:rgba(9,6,3,.55); backdrop-filter:blur(2px); border:1px solid rgba(244,232,206,.3);
  color:var(--cream); display:flex; align-items:center; justify-content:center; font-size:.95rem; cursor:pointer;
}
.slider__slide--video__badge{
  position:absolute; top:10px; left:10px; z-index:3; background:rgba(9,6,3,.55); color:var(--cream);
  font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .55rem; border-radius:100px;
  border:1px solid rgba(244,232,206,.25); pointer-events:none;
}

/* Photo/video count badge overlaid on the gallery section header */
.gallery-count{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem; font-size:.78rem;
  color:var(--bamboo); background:rgba(202,161,92,.1); border:1px solid rgba(202,161,92,.3);
  padding:.35rem .8rem; border-radius:100px;
}

/* Quick-nav chip strip under the hero — jump straight to the section you care about */
.quicknav{
  display:flex; gap:.6rem; overflow-x:auto; padding:1.6rem 0 .2rem; margin:0; list-style:none;
  scrollbar-width:none; -ms-overflow-style:none;
}
.quicknav::-webkit-scrollbar{ display:none; }
.quicknav li{ flex:0 0 auto; }
.quicknav a{
  display:block; white-space:nowrap; font-size:.8rem; color:var(--cream-dim); text-decoration:none;
  background:rgba(244,232,206,.06); border:1px solid rgba(244,232,206,.16); border-radius:100px;
  padding:.55rem 1.1rem; transition:all 180ms ease;
}
.quicknav a:hover{ border-color:var(--accent); color:var(--cream); }

/* Trust badges — the direct-booking equivalent of Privateaser's "servicio gratuito / cero
   recargos / respuesta rápida" reassurance strip, now that there's no marketplace in between. */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; margin:2rem 0 0; padding:1.3rem 1.5rem;
  background:rgba(244,232,206,.04); border:1px dashed rgba(202,161,92,.3); border-radius:16px;
  justify-content:center;
}
.trust-strip li{ display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--cream-dim); }
.trust-strip li span{ font-size:1.15rem; line-height:1; }
.trust-strip li strong{ color:var(--cream); }

/* Quick-facts strip under the hero intro (aforo, privatización, presupuesto, horario) */
.stat-strip{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.6rem 0 0; padding:0; list-style:none; }
.stat-strip li{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.25); border-radius:12px;
  padding:.7rem 1rem; font-size:.78rem; color:var(--cream-dim); min-width:120px;
}
.stat-strip li strong{ display:block; font-family:'Bungee'; font-size:1rem; color:var(--accent); margin-bottom:.15rem; }

/* Space option cards */
.spaces-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; margin-top:2.2rem; }
.space-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.25); border-radius:var(--radius);
  padding:1.6rem; display:flex; flex-direction:column; gap:.7rem; transition:border-color 200ms ease, transform 200ms ease;
}
.space-card:hover{ border-color:rgba(202,161,92,.5); transform:translateY(-3px); }
.space-card:hover .space-card__img img{ transform:scale(1.08); }
.space-card--full{ border-color:rgba(143,206,62,.4); background:linear-gradient(160deg, var(--ink-2), var(--ink-3)); }
.space-card__img{
  position:relative; margin:-1.6rem -1.6rem 0; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
}
/* Real HTML badge (language-specific text lives in the page, not in CSS content) */
.space-card__badge{
  position:absolute; top:.7rem; right:.7rem; z-index:1; background:var(--accent); color:#12210a;
  font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:.3rem .6rem; border-radius:100px;
}
.space-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.space-card__img::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,6,3,0) 55%, var(--ink-2) 100%); }
.space-card__cap{ font-family:'Bungee'; font-size:1.5rem; color:var(--accent); line-height:1; }
.space-card__cap small{ display:block; font-family:'Jost'; font-size:.68rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-dim); margin-top:.35rem; }
.space-card h3{ margin:0; font-size:1.15rem; color:var(--cream); font-family:'Bungee'; }
.space-card p{ font-size:.85rem; line-height:1.55; color:var(--cream-dim); margin:0; flex:1; }
.space-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.space-card__tags li{
  font-size:.68rem; padding:.3rem .6rem; border-radius:100px; background:rgba(244,232,206,.08);
  color:var(--cream-dim); border:1px solid rgba(244,232,206,.12);
}
.space-card .btn{ margin-top:.3rem; width:100%; justify-content:center; }

/* Generic chip lists (ambiente, actividades, equipamiento, perfecto-para) */
.chip-list{ display:flex; flex-wrap:wrap; gap:.55rem; margin:1.1rem 0 0; padding:0; list-style:none; }
.chip-list li{
  font-size:.8rem; padding:.5rem .95rem; border-radius:100px; background:var(--ink-2);
  border:1px solid rgba(202,161,92,.25); color:var(--cream-dim);
}
.chip-list--accent li{ color:var(--cream); }

.info-block{ margin-top:2.6rem; }
.info-block h3{ font-family:'Bungee'; font-size:1rem; color:var(--bamboo); margin:0 0 .3rem; }
.info-block__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2.2rem 2.6rem; margin-top:1.6rem; }

/* Select fields inside the reused .reserva-step form styling (which only defines input/textarea) */
.reserva-step select{
  background:var(--ink); border:1px solid rgba(244,232,206,.2); border-radius:8px; padding:.65rem .7rem;
  color:var(--cream); font-size:.92rem; font-family:inherit; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23cfc0a1' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:right .8rem center;
}
.reserva-step select:focus{ outline:none; border-color:var(--accent); }
.reserva-step .reserva-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:560px){ .reserva-step .reserva-row{ grid-template-columns:1fr; } }

/* Reviews / social proof */
.rating-summary{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin:1.2rem 0 0; }
.rating-summary__score{ font-family:'Bungee'; font-size:2.2rem; color:var(--accent); line-height:1; }
.rating-summary__stars{ color:var(--accent); font-size:1.1rem; letter-spacing:.1em; }
.rating-summary__count{ font-size:.78rem; color:var(--cream-dim); }
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; margin-top:2.2rem; }
.review-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.25); border-radius:var(--radius);
  padding:1.5rem; display:flex; flex-direction:column; gap:.7rem;
}
.review-card__stars{ color:var(--accent); font-size:.85rem; letter-spacing:.08em; }
.review-card p{ font-size:.87rem; line-height:1.6; color:var(--cream); margin:0; flex:1; }
.review-card__meta{ font-size:.74rem; color:var(--cream-dim); display:flex; justify-content:space-between; gap:.6rem; border-top:1px dashed rgba(244,232,206,.14); padding-top:.7rem; }
.review-card__meta strong{ color:var(--bamboo); }

/* Menu teaser ribbon — reassures that pricing is the same normal menu, nothing marked up for events */
.menu-teaser{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:2.4rem; padding:1.2rem 1.5rem; background:var(--ink-2); border:1px solid rgba(202,161,92,.25);
  border-radius:16px;
}
.menu-teaser p{ margin:0; font-size:.85rem; color:var(--cream-dim); }
.menu-teaser strong{ color:var(--cream); }

/* Sticky mobile CTA bar — appears once the hero has scrolled past, hidden again near the form */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:150; display:none;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(18,13,9,.92); backdrop-filter:blur(6px); border-top:1px solid rgba(202,161,92,.25);
  transform:translateY(100%); transition:transform 260ms ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; justify-content:center; }
@media (max-width:760px){ .sticky-cta{ display:block; } }

.eventos-form-card{
  background:var(--ink-2); border:1px solid rgba(202,161,92,.3); border-radius:24px;
  padding:2.2rem clamp(1.4rem,4vw,2.6rem); max-width:640px; margin:2.4rem auto 0;
  box-shadow:var(--shadow);
}
.eventos-form-card .reserva-step{ display:block; }
.eventos-form-card .reserva-step[hidden]{ display:none; }

/* Reused-but-overridden: on this page the "success" panel sits inline, not in a modal */
.reserva-step--success .reserva-success-check{ margin-top:.4rem; }

/* Lightbox video (the shared .lightbox/.lightbox__close/.is-open shell is defined in style.css
   for the image case; this just mirrors its sizing for the <video> we add on this page) */
.lightbox video{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }

/* Party-size stepper label wrapper, so it sits like the other form fields */
.reserva-step .party-field{ display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; color:var(--cream-dim); margin-bottom:.9rem; }
.reserva-step .party-field .reserva-stepper{ margin-bottom:0; }