/* House of Bubbles — front-end components (reviews, FAQ, logo marquee).
   Uses theme design tokens with safe fallbacks. */

/* ---- Logo marquee (scrolling, pauses on hover) ---- */
.hob-logos{overflow:hidden;width:100%;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hob-logos__track{display:flex;align-items:center;width:max-content;
  animation:hob-marquee 64s linear infinite}
.hob-logos:hover .hob-logos__track{animation-play-state:paused}
/* Gelijke hoogte per logo; margin-right (geen flex-gap) zodat -50% exact op de
   helft uitkomt -> echt naadloze loop, ongeacht logobreedtes. */
.hob-logo-item{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  margin-right:clamp(2.5rem,5vw,5rem)}
.hob-logo-item img{height:116px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:opacity .28s}
.hob-logo-item img:hover{opacity:1}
/* Per-logo correcties: sommige aangeleverde PNG's hebben veel witruimte
   rond het beeldmerk, dus bij een gelijke canvashoogte oogt het logo zelf
   veel kleiner dan bij een "vollere" PNG (klantvraag ronde 3, 31-7 voor
   Nyetimber; herhaalde zich 5-8 bij 3 nieuw aangeleverde logo's - zie
   ink-bbox-metingen in de commit; op klantvraag 5-8 nogmaals x2). */
.hob-logo--nyetimber img{height:230px}
.hob-logo--bernardus img{height:190px}
.hob-logo--chateau-la-coste img{height:156px}
.hob-logo--alta-alella img{height:140px}
@keyframes hob-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 2x sneller op mobiel (klantvraag ronde 3, 31-7). */
@media (max-width:680px){.hob-logos__track{animation-duration:32s}}

/* ---- Reviews ---- */
.hob-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(1rem,2vw,1.5rem)}
.hob-review{position:relative;margin:0;background:var(--hob-surface,#FAF9F6);
  border:1px solid var(--hob-border,#E2DED3);border-radius:var(--hob-radius-card,20px);
  padding:1.75rem 1.5rem 1.25rem}
.hob-review__mark{position:absolute;top:.1rem;left:1rem;font-size:3rem;line-height:1;
  color:var(--hob-gold,#C1A46D);font-family:Georgia,"Times New Roman",serif}
.hob-review__quote{margin:1.25rem 0 1rem;color:var(--hob-text,#332B22);font-size:1.0625rem;line-height:1.55}
.hob-review__quote p{margin:0}
.hob-review__meta{display:flex;flex-direction:column;gap:2px}
.hob-review__title{font-weight:700;color:var(--hob-espresso,#332B22)}
.hob-review__company{font-size:.875rem;color:var(--hob-text-muted,#6B6457)}
.hob-review__name{font-size:.875rem;font-weight:var(--hob-fw-bold,700);color:var(--hob-espresso,#332B22)}

/* Twee tegengesteld scrollende kolommen */
.hob-reviews--cols{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-height:620px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.hob-revcol{overflow:hidden}
.hob-revcol__track{display:flex;flex-direction:column;gap:1.25rem;will-change:transform}
.hob-revcol--up .hob-revcol__track{animation:hob-vscroll-up 34s linear infinite}
.hob-revcol--down .hob-revcol__track{animation:hob-vscroll-down 34s linear infinite}
.hob-reviews--cols:hover .hob-revcol__track,
.hob-reviews--cols.is-paused .hob-revcol__track{animation-play-state:paused}
@keyframes hob-vscroll-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes hob-vscroll-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (max-width:640px){.hob-reviews--cols{grid-template-columns:1fr;max-height:560px}}

/* ---- FAQ (multiple open via <details>) ---- */
.hob-faq{max-width:780px;margin-inline:auto}
.hob-faq__item{border-bottom:1px solid var(--hob-border,#E2DED3)}
.hob-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem .25rem;font-weight:700;color:var(--hob-espresso,#332B22);font-size:1.0625rem}
.hob-faq__q::-webkit-details-marker{display:none}
.hob-faq__chevron{flex:0 0 auto;width:.7rem;height:.7rem;border-right:2px solid var(--hob-olive,#6C673F);
  border-bottom:2px solid var(--hob-olive,#6C673F);transform:rotate(45deg);transition:transform .28s}
.hob-faq__item[open] .hob-faq__chevron{transform:rotate(-135deg)}
.hob-faq__a{padding:0 .25rem 1.1rem;color:var(--hob-text,#332B22);line-height:1.6}
.hob-faq__a p{margin:0 0 .5rem}

@media (prefers-reduced-motion: reduce){
  /* De marquee/kolommen herhalen hun inhoud (6x resp. 2x) om de animatie naadloos
     te laten lopen. Zonder animatie tonen site.js alleen de eerste, unieke set -
     anders oogt de logorij "kapot" (herhaalde logo's) en de reviewsectie
     absurd lang (dubbele reviews, klantfeedback 3-8). Hier alleen de layout-kant:
     wrap i.p.v. één lange rij, en de hoogteclip/mask eraf zodra site.js de
     duplicaten al verwijderd heeft (anders klopt de mask-uitfade niet meer). */
  .hob-logos__track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .hob-faq__chevron{transition:none}
  .hob-revcol__track{animation:none}
  .hob-reviews--cols{max-height:none;overflow:visible;-webkit-mask-image:none;mask-image:none}
}

/* ---- Audience-gate: particulier/zakelijk popup bij "Onze boxen" ---- */
.hob-audiencegate{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:1.5rem;
  background:rgba(51,43,34,.94);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.hob-audiencegate.is-open{display:flex}
.hob-audiencegate__box{background:var(--hob-ivory,#F2F2F2);color:var(--hob-espresso,#332B22);border-radius:var(--hob-radius-card,20px);
  padding:2.5rem 2rem;max-width:420px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.hob-audiencegate__box h2{font-size:1.5rem;margin:0 0 .5rem}
.hob-audiencegate__box p{color:var(--hob-text-muted,#6B6457);margin:0 0 1.5rem}
.hob-audiencegate__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}