/* ============================================================
   Behandelingen — La Belle Beauté
   Overzicht (filterbar + kaarten) en detail (2-koloms + stappen
   + sticky booking-kaart). Laadt alleen op behandeling-pagina's.
   ============================================================ */

/* ---------- Filterbar ---------- */
.filterbar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,4vw,50px); }
.filter {
  font-family:     var(--ff-sans);
  font-weight:     500;
  font-size:       .74rem;
  letter-spacing:  .16em;
  text-transform:  uppercase;
  padding:         .7em 1.4em;
  border:          1px solid var(--line-cream);
  border-radius:   40px;
  color:           var(--taupe);
  background:      transparent;
  cursor:          pointer;
  transition:      .4s var(--ease);
}
.filter:hover { border-color:var(--gold); color:var(--black); }
.filter.active { background:var(--black); color:var(--cream); border-color:var(--black); }

/* ---------- Kaartgrid ---------- */
.bh-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); }
@media(max-width:860px){ .bh-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .bh-grid{ grid-template-columns:1fr; } }

.bh-card {
  background:      var(--white);
  border:         1px solid var(--line-cream);
  border-radius:  var(--radius);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  transition:     transform .5s var(--ease), box-shadow .5s var(--ease);
}
.bh-card.is-hidden { display:none; }
.bh-card:hover { transform:translateY(-5px); box-shadow:0 26px 54px -30px rgba(35,31,32,.45); }
.bh-card__img { display:block; aspect-ratio:4/3; overflow:hidden; }
.bh-img { display:block; width:100%; height:100%; background-size:cover; background-position:center; transition:transform .7s var(--ease); }
.bh-card:hover .bh-img { transform:scale(1.05); }
.bh-card__body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.bh-card__cat { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.85em; }
.bh-card h3 { font-size:1.5rem; color:var(--black); margin-bottom:.4em; }
.bh-card p { font-size:.92rem; color:var(--taupe); margin-bottom:1.3em; flex:1; }
.bh-card__meta {
  display:        flex;
  gap:            22px;
  font-size:      .82rem;
  color:          var(--taupe);
  border-top:     1px solid var(--line-cream);
  padding-top:    14px;
  margin:         auto 0 16px;
}
.bh-card__meta b { color:var(--black); font-weight:500; }
.bh-card__link {
  display:         inline-flex;
  align-items:     center;
  gap:             .6em;
  font-weight:     500;
  font-size:       .74rem;
  letter-spacing:  .18em;
  text-transform:  uppercase;
  color:           var(--copper);
}
.bh-card__link .arr { transition:transform .45s var(--ease); }
.bh-card:hover .bh-card__link .arr { transform:translateX(4px); }

/* ---------- Detail: meta-strook in de hero ---------- */
.detail-meta { display:flex; flex-wrap:wrap; gap:34px; margin-top:2.2em; }
.detail-meta .m { display:flex; flex-direction:column; gap:5px; }
.detail-meta .k { font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.detail-meta .v { font-size:1.1rem; color:var(--white); }

/* ---------- Detail: 2-koloms ---------- */
.detail { display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(34px,5vw,64px); align-items:start; }
@media(max-width:880px){ .detail{ grid-template-columns:1fr; } }
.detail__img {
  display:        block;
  width:          100%;
  aspect-ratio:   16/10;
  object-fit:     cover;
  border-radius:  var(--radius);
  border:         1px solid rgba(35,31,32,.10);
  box-shadow:     0 20px 50px rgba(35,31,32,.12);
  margin-bottom:  clamp(30px,4vw,46px);
}
.detail__main h2 { font-family:var(--ff-display); font-weight:500; font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--black); margin:1.6em 0 .55em; }
.detail__main h2:first-of-type { margin-top:0; }
.detail__main > p { color:var(--taupe); line-height:1.85; margin-bottom:1.1em; max-width:60ch; }

/* ---------- Detail: stappen (CSS-counter) ---------- */
.steps { counter-reset:step; margin-top:.6em; }
.step { display:flex; gap:22px; padding:20px 0; border-top:1px solid var(--line-cream); }
.step:first-child { border-top:none; }
.step__n { counter-increment:step; font-family:var(--ff-display); font-size:1.7rem; color:var(--gold); min-width:1.7em; line-height:1.1; }
.step__n::before { content:counter(step,decimal-leading-zero); }
.step__b h3 { font-size:1.18rem; color:var(--black); margin-bottom:.25em; }
.step__b p { font-size:.94rem; color:var(--taupe); margin:0; max-width:52ch; }

/* ---------- Detail: sticky booking-kaart ---------- */
.booking { position:sticky; top:96px; background:var(--white); border:1px solid var(--line-cream); border-radius:var(--radius); padding:clamp(26px,3vw,34px); }
.booking h3 { font-size:1.5rem; color:var(--black); margin-bottom:1.1em; }
.booking__rows { display:flex; flex-direction:column; margin-bottom:1.4em; }
.booking__row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line-cream); font-size:.92rem; }
.booking__row:first-child { border-top:none; }
.booking__row .k { color:var(--taupe); }
.booking__row .v { color:var(--black); font-weight:500; text-align:right; }
.booking__sub { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.9em; }
.booking .tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1.6em; }
.tag { font-size:.74rem; padding:.42em .95em; border:1px solid var(--line-cream); border-radius:40px; color:var(--taupe); }
.booking__cta { display:flex; flex-direction:column; gap:10px; }
.booking__cta .btn { width:100%; }