/*
 * Whisper Dames — frontend (editorial-luxe).
 * Neemt de huisstijl van de site over via Elementor's global CSS-variabelen,
 * met warme fallbacks. Alles is gescoped onder .wd-*.
 */
.wd-single, .wd-archive, .wd-grid, .wd-stickybar {
    --wd-gold:      var(--e-global-color-accent,  #b88a6a);
    --wd-ink:       var(--e-global-color-primary, #211d19);
    --wd-text:      var(--e-global-color-text,    #423b34);
    --wd-muted:     color-mix(in srgb, var(--wd-text) 60%, transparent);
    --wd-line:      color-mix(in srgb, var(--wd-ink) 13%, transparent);
    --wd-goldline:  color-mix(in srgb, var(--wd-gold) 42%, transparent);
    --wd-surface:   #fff;
    --wd-cream:     color-mix(in srgb, var(--wd-gold) 7%, #fff);
    --wd-cream2:    color-mix(in srgb, var(--wd-gold) 12%, #fff);
    --wd-gold-deep: color-mix(in srgb, var(--wd-gold) 78%, #3a2313);
    --wd-wa:        #23c15e;
    --wd-serif:     var(--e-global-typography-primary-font-family, "Playfair Display", Georgia, serif);
    --wd-sans:      var(--e-global-typography-text-font-family, inherit);
    --wd-r:         14px;
    --wd-r-lg:      22px;
    --wd-shadow:    0 22px 60px -30px color-mix(in srgb, var(--wd-ink) 60%, transparent);
    --wd-shadow-sm: 0 10px 30px -18px color-mix(in srgb, var(--wd-ink) 55%, transparent);
    --wd-maxw:      1180px;
    --wd-ease:      cubic-bezier(.22, .61, .36, 1);
}

.wd-single, .wd-archive { max-width: var(--wd-maxw); margin: 0 auto; padding: 28px 20px 72px; font-family: var(--wd-sans); color: var(--wd-text); }
.wd-single *, .wd-archive * { box-sizing: border-box; }
.wd-single :is(a):focus-visible, .wd-archive :is(a, button):focus-visible { outline: 2px solid var(--wd-gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Eyebrow / kop-ritme ---------- */
.wd-single .wd-eyebrow, .wd-archive .wd-eyebrow, .wd-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-family: var(--wd-sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wd-gold-deep); }
.wd-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--wd-goldline); }

.wd-section-title { font-family: var(--wd-serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; color: var(--wd-ink); margin: 0 0 22px; padding-bottom: 14px; position: relative; font-weight: 600; }
.wd-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px; background: var(--wd-gold); }
.wd-body h2, .wd-related h2 { font-family: var(--wd-serif); }

/* ---------- Kruimelpad ---------- */
.wd-breadcrumb { font-size: 12.5px; color: var(--wd-muted); margin-bottom: 26px; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; letter-spacing: .01em; }
.wd-breadcrumb a { color: var(--wd-muted); text-decoration: none; transition: color .18s var(--wd-ease); }
.wd-breadcrumb a:hover { color: var(--wd-gold); }
.wd-breadcrumb span[aria-current] { color: var(--wd-ink); }

/* ---------- Hero ---------- */
.wd-hero { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: 44px; align-items: start; }
.wd-hero__media { position: relative; border-radius: var(--wd-r-lg); overflow: hidden; background: var(--wd-cream2); box-shadow: var(--wd-shadow); }
.wd-hero__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-gold) 30%, transparent); pointer-events: none; }
.wd-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.wd-hero__count { position: absolute; bottom: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--wd-ink) 78%, transparent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 7px 13px; border-radius: 40px; backdrop-filter: blur(4px); }

.wd-hero__info { padding-top: 6px; }
.wd-name { font-family: var(--wd-serif); font-size: clamp(38px, 5.2vw, 60px); line-height: 1.03; margin: 0 0 18px; color: var(--wd-ink); font-weight: 600; letter-spacing: -.01em; }
.wd-age { color: var(--wd-gold); font-weight: 400; white-space: nowrap; }
.wd-age::before { content: "· "; color: color-mix(in srgb, var(--wd-ink) 30%, transparent); }

.wd-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 24px; }
.wd-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 11px; border: 1px solid var(--wd-goldline); border-radius: 40px; background: var(--wd-cream); font-size: 12.5px; font-weight: 600; color: var(--wd-ink); letter-spacing: .01em; }
.wd-badge svg { width: 15px; height: 15px; color: var(--wd-gold); flex: none; }

.wd-quickfacts { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.wd-quickfacts li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--wd-line); border-radius: var(--wd-r); background: var(--wd-surface); transition: border-color .2s var(--wd-ease), transform .2s var(--wd-ease); }
.wd-quickfacts li:hover { border-color: var(--wd-goldline); transform: translateY(-2px); }
.wd-qf__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--wd-muted); font-weight: 600; }
.wd-qf__v { font-family: var(--wd-serif); font-size: 20px; font-weight: 600; color: var(--wd-ink); line-height: 1.1; }

.wd-trust { list-style: none; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--wd-line); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--wd-text); font-weight: 500; }
.wd-trust li { position: relative; padding-left: 23px; }
.wd-trust li::before { content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px; background: var(--wd-gold); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- CTA-knoppen ---------- */
.wd-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.wd-cta--stack { flex-direction: column; }
.wd-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 0 24px; border: 0; border-radius: var(--wd-r); font-family: var(--wd-sans); font-weight: 600; font-size: 16px; text-decoration: none; line-height: 1; letter-spacing: .01em; cursor: pointer; transition: transform .18s var(--wd-ease), box-shadow .18s var(--wd-ease), filter .18s var(--wd-ease); }
.wd-btn:hover { transform: translateY(-2px); }
.wd-btn:active { transform: translateY(0); }
.wd-btn--call  { flex: 1 1 auto; background: linear-gradient(135deg, var(--wd-gold), var(--wd-gold-deep)); color: #fff; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--wd-gold) 75%, transparent); }
.wd-btn--call:hover { box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--wd-gold) 85%, transparent); }
.wd-btn--wa    { background: var(--wd-wa); color: #fff; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--wd-wa) 75%, transparent); }
.wd-btn--book  { background: var(--wd-ink); color: #fff; }
.wd-cta--stack .wd-btn { width: 100%; }
.wd-ico { display: inline-flex; }
.wd-ico svg { width: 19px; height: 19px; }

/* ---------- Body-layout ---------- */
.wd-body { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 56px; margin-top: 64px; align-items: start; }
.wd-body h2 { font-size: clamp(21px, 2.4vw, 27px); color: var(--wd-ink); margin: 0 0 20px; padding-bottom: 13px; position: relative; font-weight: 600; }
.wd-body h2::after, .wd-aside__lead::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--wd-gold); }
.wd-about { margin-bottom: 52px; }
.wd-prose { line-height: 1.78; font-size: 17px; color: var(--wd-text); max-width: 68ch; }
.wd-prose p { margin: 0 0 1.1em; }
.wd-prose :is(strong, b) { color: var(--wd-ink); }

/* ---------- Kenmerken (spec-grid) ---------- */
.wd-details__list { margin: 0; display: grid; grid-template-columns: 1fr; }
.wd-details__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--wd-line); }
.wd-details__row:last-child { border-bottom: 0; }
.wd-details__row dt { color: var(--wd-muted); margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.wd-details__row dd { margin: 0; font-weight: 600; color: var(--wd-ink); text-align: right; font-size: 15.5px; }

/* ---------- Diensten ---------- */
.wd-services { margin-top: 40px; }
.wd-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.wd-tags a { display: inline-block; padding: 8px 15px; border: 1px solid var(--wd-line); border-radius: 40px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--wd-text); background: var(--wd-surface); transition: all .18s var(--wd-ease); }
.wd-tags a:hover { border-color: var(--wd-gold); color: var(--wd-gold-deep); background: var(--wd-cream); transform: translateY(-1px); }

/* ---------- Boekingskaart (aside, sticky) ---------- */
.wd-book { position: sticky; top: 100px; z-index: 20; padding: 26px 24px; border-radius: var(--wd-r-lg); background: linear-gradient(180deg, var(--wd-cream2), var(--wd-cream)); border: 1px solid var(--wd-goldline); box-shadow: var(--wd-shadow-sm); margin-bottom: 40px; }
.wd-book::before { content: ""; display: block; width: 40px; height: 3px; background: var(--wd-gold); border-radius: 3px; margin-bottom: 16px; }
.wd-single .wd-book__lead, .wd-book__lead { font-family: var(--wd-serif); font-size: clamp(23px, 2.3vw, 27px); line-height: 1.2; color: var(--wd-ink); margin: 0 0 7px; font-weight: 600; }
.wd-book__sub { margin: 0 0 18px; font-size: 13.5px; color: var(--wd-muted); line-height: 1.5; }
.wd-book .wd-cta { margin-bottom: 14px; }
.wd-book__note { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--wd-muted); }
.wd-book__note svg { width: 14px; height: 14px; color: var(--wd-gold); flex: none; }
/* fallback wanneer template nog oude class gebruikt */
.wd-aside__cta { position: sticky; top: 100px; z-index: 20; margin-bottom: 40px; padding: 26px 24px; border-radius: var(--wd-r-lg); border: 1px solid var(--wd-goldline); background: linear-gradient(180deg, var(--wd-cream2), var(--wd-cream)); box-shadow: var(--wd-shadow-sm); }
.wd-aside__lead { margin: 0 0 16px; padding-bottom: 12px; position: relative; font-family: var(--wd-serif); font-size: 20px; color: var(--wd-ink); font-weight: 600; }

/* ---------- Galerij ---------- */
.wd-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wd-gallery__item { display: block; position: relative; border-radius: var(--wd-r); overflow: hidden; aspect-ratio: 3 / 4; background: var(--wd-cream2); box-shadow: var(--wd-shadow-sm); }
.wd-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--wd-ease); }
.wd-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--wd-ink) 55%, transparent)); opacity: 0; transition: opacity .3s var(--wd-ease); }
.wd-gallery__item:hover img { transform: scale(1.06); }
.wd-gallery__item:hover::after { opacity: 1; }

/* ---------- Kaart-grid (feed / archief / verwant) ---------- */
.wd-grid { display: grid; gap: 22px; }
.wd-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wd-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wd-cols-4 { grid-template-columns: repeat(4, 1fr); }
.wd-cols-5 { grid-template-columns: repeat(5, 1fr); }
.wd-card { display: block; text-decoration: none; color: inherit; }
.wd-card__media { display: block; position: relative; border-radius: var(--wd-r); overflow: hidden; aspect-ratio: 1 / 1; background: var(--wd-cream2); box-shadow: var(--wd-shadow-sm); }
.wd-card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wd-gold) 0%, transparent); transition: box-shadow .25s var(--wd-ease); border-radius: inherit; }
.wd-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--wd-ease); }
.wd-card:hover .wd-card__img { transform: scale(1.05); }
.wd-card:hover .wd-card__media::after { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wd-gold) 55%, transparent); }
.wd-card__name { display: block; margin-top: 13px; font-family: var(--wd-serif); font-size: 18px; font-weight: 600; color: var(--wd-ink); text-align: center; transition: color .18s var(--wd-ease); }
.wd-card:hover .wd-card__name { color: var(--wd-gold-deep); }

.wd-related { max-width: var(--wd-maxw); margin: 80px auto 0; padding-top: 44px; border-top: 1px solid var(--wd-line); }
.wd-related h2 { font-family: var(--wd-serif); font-size: clamp(24px, 3vw, 32px); color: var(--wd-ink); margin: 0 0 30px; text-align: center; font-weight: 600; }

/* ---------- Archief ---------- */
.wd-archive__head { text-align: center; margin-bottom: 44px; }
.wd-archive__head h1 { font-family: var(--wd-serif); font-size: clamp(32px, 4.4vw, 52px); color: var(--wd-ink); margin: 0 0 14px; font-weight: 600; }
.wd-archive__intro { max-width: 720px; margin: 0 auto; color: var(--wd-muted); line-height: 1.65; font-size: 16px; }
.wd-pagination { margin-top: 48px; text-align: center; }
.wd-pagination .page-numbers { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; padding: 0 14px; margin: 0 3px; border: 1px solid var(--wd-line); border-radius: 10px; text-decoration: none; color: var(--wd-text); transition: all .18s var(--wd-ease); }
.wd-pagination .page-numbers:hover { border-color: var(--wd-gold); color: var(--wd-gold-deep); }
.wd-pagination .current { background: var(--wd-gold); color: #fff; border-color: var(--wd-gold); }
.wd-empty { text-align: center; color: var(--wd-muted); padding: 70px 0; font-size: 16px; }

/* ---------- Vaste CTA-balk (mobiel) ---------- */
.wd-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--wd-surface) 88%, transparent); border-top: 1px solid var(--wd-goldline); box-shadow: 0 -8px 30px -12px color-mix(in srgb, var(--wd-ink) 45%, transparent); backdrop-filter: blur(10px); }
.wd-stickybar__name { font-family: var(--wd-serif); font-weight: 600; color: var(--wd-ink); font-size: 16px; white-space: nowrap; }
.wd-cta--compact { gap: 9px; }
.wd-cta--compact .wd-btn { min-height: 46px; padding: 0 18px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .wd-cols-4, .wd-cols-5 { grid-template-columns: repeat(3, 1fr); }
    .wd-body { gap: 40px; }
}
@media (max-width: 900px) {
    .wd-hero { grid-template-columns: 1fr; gap: 28px; }
    .wd-hero__img { aspect-ratio: 3 / 4; max-height: 74vh; }
    .wd-body { grid-template-columns: 1fr; gap: 44px; }
    .wd-book, .wd-aside__cta { position: static; }
}
@media (max-width: 640px) {
    .wd-single, .wd-archive { padding: 20px 16px 104px; }
    .wd-cols-3, .wd-cols-4, .wd-cols-5 { grid-template-columns: repeat(2, 1fr); }
    .wd-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .wd-stickybar { display: flex; }
    .wd-stickybar .wd-btn--book { display: none; }
    .wd-cta .wd-btn { flex: 1 1 auto; }
    .wd-quickfacts { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Toegankelijkheid ---------- */
@media (prefers-reduced-motion: reduce) {
    .wd-single *, .wd-archive *, .wd-grid *, .wd-stickybar * { transition: none !important; }
    .wd-card:hover .wd-card__img, .wd-gallery__item:hover img, .wd-btn:hover, .wd-quickfacts li:hover { transform: none !important; }
}