/* House of Bubbles — homepage sections (follows the approved XD) */

/* ---- Hero ---- */
.hob-hero{position:relative;overflow:hidden;background:var(--hob-bg-soft);padding-top:clamp(8.5rem,15vh,11rem);padding-bottom:clamp(3rem,6vw,5rem)}

/* ---- Reviews layout (35/65: tekst links, 2 kolommen rechts) ---- */
.hob-reviews-layout{display:grid;grid-template-columns:35% 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.hob-reviews-intro .hob-section__lead{margin-bottom:0}
.hob-hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hob-hero__title{font-size:var(--hob-h1);line-height:1.06;margin:0 0 1.1rem}
.hob-hero__title em{font-style:italic;font-weight:var(--hob-fw-medium)}
.hob-hero__sub{font-size:1.15rem;max-width:40ch;color:var(--hob-text-muted);margin:0 0 1.8rem}
.hob-hero__cta{display:flex;gap:.85rem;flex-wrap:wrap}
.hob-hero__media{position:relative}
.hob-hero__frame{position:relative;aspect-ratio:4/3;border-radius:var(--hob-radius-card);overflow:hidden;box-shadow:var(--hob-shadow)}
.hob-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.hob-hero__img.is-active{opacity:1}
.hob-sticker{position:absolute;right:-26px;left:auto;bottom:-26px;width:clamp(96px,12vw,160px);height:auto;filter:drop-shadow(0 8px 24px rgba(51,43,34,.35))}
.hob-sticker--spin{animation:hob-spin 20s linear infinite}
@keyframes hob-spin{to{transform:rotate(360deg)}}

/* ---- Logo row ---- */
/* .hob-el-band (elementor-native.css) heeft dezelfde specificiteit (1 klasse)
   en laadt ná dit bestand, dus won die de cascade — deze regel deed
   feitelijk niks. 2-klasse selector zodat 'ie altijd wint, ongeacht laadvolgorde. */
.hob-el-band.hob-logos-section{padding-block:clamp(.75rem,1.5vw,1.25rem)}

/* ---- Split (Successen / Hoe werkt) ---- */
.hob-split__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hob-split__copy p{max-width:48ch;color:var(--hob-text-muted)}
.hob-split__media{display:flex;gap:1.25rem;align-items:flex-start}
.hob-block{display:block;background:var(--hob-champagne);border-radius:var(--hob-radius-card)}
.hob-block--tall{width:52%;aspect-ratio:3/4}
.hob-block--short{width:48%;aspect-ratio:3/4.6;margin-top:2.5rem}
.hob-block--big{width:100%;aspect-ratio:4/3}
.hob-section--champagne .hob-block{background:var(--hob-surface)}

/* ---- Waarom (B-A-A-S badges) ---- */
.hob-why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2.75rem 0}
.hob-badge-item{text-align:center}
.hob-badge{display:inline-flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;
  background:var(--hob-olive);color:var(--hob-ivory);font-size:1.9rem;font-weight:var(--hob-fw-black);
  border:2px solid var(--hob-gold);margin-bottom:1rem}
.hob-badge-item__label{font-size:.98rem;line-height:1.3;margin:0}

/* ---- Hoe werkt (steps) ---- */
.hob-steps{list-style:none;margin:1.75rem 0;padding:0;display:flex;flex-direction:column;gap:1.15rem}
.hob-steps li{position:relative;padding-left:2.1rem}
.hob-steps li::before{content:"";position:absolute;left:0;top:.35em;width:.55rem;height:.55rem;border-right:2px solid var(--hob-olive);border-bottom:2px solid var(--hob-olive);transform:rotate(-45deg)}
.hob-steps strong{display:block;color:var(--hob-espresso)}
.hob-steps span{color:var(--hob-text-muted);font-size:.95rem}
.hob-how__media .hob-block--big{aspect-ratio:1/1}

/* ---- Onze boxen (carousel) ---- */
.hob-boxes__head{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;margin-bottom:2.25rem}
.hob-boxes__intro{max-width:60ch;color:var(--hob-text-muted);margin:.6rem 0 0}
.hob-boxes__nav{display:flex;gap:.6rem;flex:0 0 auto}
.hob-carousel-arrow{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--hob-border);background:transparent;color:var(--hob-espresso);cursor:pointer;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center;transition:var(--hob-ease)}
.hob-boxes__nav .hob-carousel-arrow{border:1.5px solid var(--hob-border) !important} /* 0,2,0 wint van globale button{border:0} */
.hob-boxes__nav .hob-carousel-arrow:hover,.hob-boxes__nav .hob-carousel-arrow:focus{border:1.5px solid var(--hob-olive) !important;background:var(--hob-olive) !important;color:var(--hob-ivory)}
.hob-boxes__track{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;scrollbar-width:none;-ms-overflow-style:none}
.hob-boxes__track::-webkit-scrollbar{display:none}
.hob-box-card{position:relative;flex:0 0 clamp(260px,40%,480px);aspect-ratio:1/1;background:var(--hob-champagne);border-radius:var(--hob-radius-card);scroll-snap-align:start;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:1.75rem;text-decoration:none;transition:transform var(--hob-ease)}
.hob-box-card:hover{transform:translateY(-4px)}
.hob-box-card__title{position:relative;z-index:1;font-size:1.6rem;font-weight:var(--hob-fw-black);color:var(--hob-espresso)}
/* Box met achtergrond-afbeelding: cover + donkere scrim onderaan + witte titel. */
.hob-box-card--img{background-size:cover;background-position:center;background-repeat:no-repeat}
.hob-box-card--img::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to top,rgba(20,17,12,.62),rgba(20,17,12,.05) 55%)}
.hob-box-card--img .hob-box-card__title{color:#fff}

/* Hover-overlay: korte boxinhoud-preview (intro + wat zit erin), schuift boven
   de titel in vanuit een transparante, donkere laag - werkt op zowel de
   champagne-kaarten als de foto-kaarten. */
.hob-box-card__preview{position:relative;z-index:1;width:100%;box-sizing:border-box;margin:0 -1.75rem;padding:0 1.75rem;max-height:0;opacity:0;overflow:hidden;background:rgba(20,17,12,.82);transition:max-height var(--hob-ease),opacity var(--hob-ease),padding-block var(--hob-ease)}
.hob-box-card:hover .hob-box-card__preview,.hob-box-card:focus-visible .hob-box-card__preview{max-height:220px;opacity:1;padding-block:1.1rem;margin-bottom:.5rem}
.hob-box-card__preview-intro{display:block;color:#fff;font-size:.92rem;line-height:1.4;margin:0 0 .6rem}
.hob-box-card__preview-list{display:flex;flex-direction:column;gap:.3rem}
.hob-box-card__preview-list span{color:#fff;font-size:.8rem;opacity:.9}
.hob-box-card__preview-list span::before{content:"\2713 ";opacity:.7}

/* ---- Box-overzicht (Classic/Premium/Prestige met tagline, omschrijving, prijs) ---- */
.hob-boxinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;text-align:left}
.hob-boxinfo-card{position:relative;display:flex;flex-direction:column;background:var(--hob-surface);border:1px solid var(--hob-border);border-radius:var(--hob-radius-card);padding:2rem 1.75rem}
.hob-boxinfo-card--featured{border-color:var(--hob-gold);box-shadow:0 12px 34px rgba(51,43,34,.10)}
.hob-boxinfo-badge{position:absolute;top:-.8rem;left:1.75rem;background:var(--hob-gold);color:#fff;font-size:.7rem;font-weight:var(--hob-fw-bold);letter-spacing:.06em;text-transform:uppercase;padding:.32rem .75rem;border-radius:999px}
.hob-boxinfo-card__title{font-size:1.5rem;margin:0 0 .2rem;color:var(--hob-espresso)}
.hob-boxinfo-card__tag{font-style:italic;font-weight:600;color:var(--hob-olive);margin:0 0 1rem}
.hob-boxinfo-card__desc{color:var(--hob-text-muted);font-size:.95rem;line-height:1.55;margin:0 0 1.1rem}
.hob-boxinfo-card__houseslabel,.hob-boxinfo-card__perfectlabel{font-weight:var(--hob-fw-bold);font-size:.85rem;color:var(--hob-espresso);margin:0 0 .4rem}
.hob-boxinfo-card__houses,.hob-boxinfo-card__perfect{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.hob-boxinfo-card__houses li,.hob-boxinfo-card__perfect li{font-size:.8rem;background:var(--hob-bg-soft);border:1px solid var(--hob-border);border-radius:999px;padding:.26rem .7rem;color:var(--hob-text-muted)}
.hob-boxinfo-card__foot{margin-top:auto;padding-top:.5rem}
.hob-boxinfo-card__price{margin:0 0 1rem;color:var(--hob-espresso)}
.hob-boxinfo-card__price strong{font-size:1.4rem;font-weight:var(--hob-fw-black)}
.hob-boxinfo-card__price small{display:block;color:var(--hob-text-muted);font-weight:400;font-size:.8rem;margin-top:.15rem}
.hob-boxinfo-card .hob-btn{width:100%}
@media(max-width:880px){.hob-boxinfo{grid-template-columns:1fr}}

/* ---- CTA (light split: tekst + pil links, twee blokken rechts) ---- */
.hob-cta{background:var(--hob-bg-soft)}
.hob-cta__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hob-cta__title{font-size:var(--hob-h2);font-weight:var(--hob-fw-black);line-height:1.12;margin:0 0 1rem;color:var(--hob-espresso)}
.hob-cta__title em{font-style:italic;font-weight:var(--hob-fw-medium)}
.hob-cta__copy p{color:var(--hob-text-muted);max-width:44ch;margin:0 0 1.75rem}
.hob-cta__media{display:flex;gap:1.5rem;justify-content:flex-end;align-items:flex-start;min-height:340px}
.hob-cta__media .hob-block{background:var(--hob-champagne);border-radius:var(--hob-radius-card)}
.hob-cta__media .hob-block--short{width:44%;aspect-ratio:3/4;margin-top:4rem}
.hob-cta__media .hob-block--tall{width:44%;aspect-ratio:3/4.6}

/* ---- Responsive ---- */
@media (max-width:880px){
  .hob-hero__inner,.hob-split__inner,.hob-cta__inner{grid-template-columns:1fr}
  .hob-hero__media{order:-1}
  .hob-why__grid{grid-template-columns:repeat(2,1fr);gap:2rem}
  .hob-boxes__head{flex-direction:column}
  .hob-box-card{flex-basis:82%}
  .hob-reviews-layout{grid-template-columns:1fr}
  .hob-cta__media{order:-1;min-height:240px}
  .hob-block--short{margin-top:1.5rem}
}
@media (prefers-reduced-motion: reduce){
  .hob-sticker--spin{animation:none}
  .hob-hero__img{transition:none}
}

/* ===== Generieke binnenpagina-secties ===== */
.hob-bg-licht{background:var(--hob-bg-soft)}
.hob-bg-champagne{background:var(--hob-champagne)}
.hob-hero .hob-eyebrow{color:var(--hob-olive);margin-bottom:.75rem}
.hob-split--rechts .hob-split__media{order:2}

/* Values */
.hob-values .hob-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.25rem}
.hob-value-card{background:var(--hob-surface);border:1px solid var(--hob-border);border-radius:var(--hob-radius-card);padding:1.5rem 1.4rem}
.hob-value-card h3{font-size:1.15rem;margin:0 0 .5rem;color:var(--hob-olive)}
.hob-value-card p{margin:0;color:var(--hob-text-muted);font-size:.95rem;line-height:1.5}

/* Genummerde steps */
.hob-steps--num li{padding-left:0;display:flex;gap:1rem;align-items:flex-start}
.hob-steps--num li::before{display:none}
.hob-step-num{font-weight:var(--hob-fw-black);color:var(--hob-gold);font-size:1.25rem;line-height:1.1;min-width:2.2rem}

/* Founder */
.hob-founder__inner{display:grid;grid-template-columns:40% 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hob-founder__portret .hob-block{display:block;width:100%;aspect-ratio:3/4;background:var(--hob-champagne);border-radius:var(--hob-radius-card)}
.hob-founder__quote{font-size:clamp(1.4rem,1rem + 1.6vw,2rem);line-height:1.25;font-weight:var(--hob-fw-black);margin:.5rem 0 1.25rem;padding:0;border:0}
.hob-founder__quote em{font-style:italic;font-weight:var(--hob-fw-medium)}
.hob-founder__copy p{color:var(--hob-text-muted);max-width:54ch}
.hob-founder__sign{color:var(--hob-espresso) !important;font-weight:600;margin-top:1rem !important}

/* Boxes-carousel zonder kop */
.hob-boxes__bar{display:flex;justify-content:flex-end;margin-bottom:1.5rem}

/* Contact 35/65 + formulier */
.hob-contact__inner{display:grid;grid-template-columns:35% 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.hob-contact-info h3{font-size:1.2rem;margin:0 0 .75rem}
.hob-contact-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.25rem}
.hob-field{display:flex;flex-direction:column;gap:.35rem}
.hob-field label{font-size:.9rem;font-weight:600;color:var(--hob-espresso)}
.hob-field input,.hob-field select,.hob-field textarea{border:1.5px solid var(--hob-border);border-radius:var(--hob-radius);padding:.75rem .9rem;background:var(--hob-surface);font-family:inherit;font-size:1rem;width:100%}
.hob-field input:focus,.hob-field select:focus,.hob-field textarea:focus{outline:none;border-color:var(--hob-olive)}
.hob-field-hint{margin:-.15rem 0 0;font-size:.85rem;color:var(--hob-text-muted)}
.hob-honeypot{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.hob-form-note{font-size:.82rem;color:var(--hob-text-muted);margin:.4rem 0 0}
.hob-form-notice{border-radius:var(--hob-radius);padding:.85rem 1.1rem;margin:0 0 1rem;font-size:.92rem}
.hob-form-notice--ok{background:#eaf2e6;color:#3b5a2f}
.hob-form-notice--error{background:#fbe9e7;color:#8a3324}

@media (max-width:880px){
  .hob-values .hob-value-grid{grid-template-columns:1fr 1fr}
  .hob-founder__inner,.hob-contact__inner{grid-template-columns:1fr}
  .hob-split--rechts .hob-split__media{order:0}
}