/* ─────────────────────────────────────────
   Particulieren — functional token assignments
   Warm palette, same token names as corporate.
───────────────────────────────────────── */

/* Light theme (default) */
:root,
[data-theme="light"] {
  --fg-default: var(--brown-900);
  --fg-muted: var(--brown-700);
  --fg-inverse: var(--brown-50);

  --bg-default: var(--brown-50);
  --bg-muted: var(--brown-100);
  --bg-raised: white;
  --bg-inverse: var(--brown-950);

  --brand: var(--gold-warm-500);
  --brand-muted: var(--gold-warm-300);

  --border: color-mix(in oklch, var(--_brown) 20%, white);
  --border-muted: color-mix(in oklch, var(--_brown) 8%, white);
}

/* Dark theme — TODO: flesh out when needed */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* --fg-default:  var(--brown-50);
    --fg-muted:    var(--brown-100);
    --fg-inverse:  var(--brown-900);

    --bg-default:  var(--brown-950);
    --bg-muted:    var(--brown-900);
    --bg-raised:   color-mix(in oklch, var(--_brown) 90%, white 10%);
    --bg-inverse:  var(--brown-50);

    --brand:       var(--gold-warm-300);
    --brand-muted: color-mix(in oklch, var(--_gold-warm) 60%, white);

    --border:       color-mix(in oklch, var(--_brown) 40%, white);
    --border-muted: color-mix(in oklch, var(--_brown) 25%, white); */
  }
}

[data-theme="dark"] {
  /* --fg-default:  var(--brown-50);
  --fg-muted:    var(--brown-100);
  --fg-inverse:  var(--brown-900);

  --bg-default:  var(--brown-950);
  --bg-muted:    var(--brown-900);
  --bg-raised:   color-mix(in oklch, var(--_brown) 90%, white 10%);
  --bg-inverse:  var(--brown-50);

  --brand:       var(--gold-warm-300);
  --brand-muted: color-mix(in oklch, var(--_gold-warm) 60%, white);

  --border:       color-mix(in oklch, var(--_brown) 40%, white);
  --border-muted: color-mix(in oklch, var(--_brown) 25%, white); */
}

/* ─────────────────────────────────────────
   Navigation — transparent over dark hero
   (same pattern as corporate)
───────────────────────────────────────── */
.nav-logo {
  color: var(--fg-inverse);
}
.nav-links a {
  color: color-mix(in oklch, var(--fg-inverse) 80%, transparent);
}
.nav-links a:hover {
  color: var(--fg-inverse);
}

.nav-cta {
  border: 1px solid color-mix(in oklch, var(--fg-inverse) 40%, transparent);
  color: var(--fg-inverse) !important;
}
.nav-cta:hover {
  background: color-mix(in oklch, var(--fg-inverse) 12%, transparent);
}

nav.scrolled {
  background: color-mix(in oklch, var(--bg-default) 92%, transparent);
}
nav.scrolled .nav-logo {
  color: var(--fg-default);
}
nav.scrolled .nav-links a {
  color: var(--fg-muted);
}
nav.scrolled .nav-links a:hover {
  color: var(--fg-default);
}
nav.scrolled .nav-cta {
  border-color: var(--brand);
  color: var(--brand) !important;
}
nav.scrolled .nav-cta:hover {
  background: var(--brand);
  color: var(--bg-default) !important;
}

/* ─────────────────────────────────────────
   Hero — dark block (like corporate)
───────────────────────────────────────── */
.hero {
  height: 70vh;
  background: var(--bg-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* padding: 8rem 2rem 6rem; */
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 60%, color-mix(in oklch, var(--brand) 10%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 30%, color-mix(in oklch, var(--brand) 5%, transparent) 0%, transparent 60%);
  pointer-events: none;
}

.hero-inner {
  max-width: 660px;
  position: relative;
  z-index: 1;
  animation: fadeUp 1s ease both;
}

.hero h1 {
  color: var(--fg-inverse);
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: italic;
  color: var(--brand-muted);
}

.hero-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: color-mix(in oklch, var(--fg-inverse) 65%, transparent);
  margin-bottom: 2.5rem;
}

/* ─────────────────────────────────────────
   Intro — full-bleed split met parallax
───────────────────────────────────────── */
.intro {
  position: relative;
  background: var(--bg-muted);
  overflow: hidden;
  min-height: 520px;
}

.intro .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}

.intro-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.intro-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + var(--gap-md));
  right: 0;
  overflow: hidden;
}

.intro-visual-bg {
  position: absolute;
  inset: -50% 0 -10% 0;
  background: url("images/trance-journey.jpg") left bottom / cover no-repeat;
  will-change: transform;
}

@media screen and (max-width: 768px) {
  .intro {
    padding-top: 0;
    padding-bottom: 0;
  }
  .intro .container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .intro-visual {
    position: relative;
    left: auto;
    right: auto;
    margin-left: calc(var(--gap-lg) * -1);
    margin-right: calc(var(--gap-lg) * -1);
    height: 320px;
    order: -1;
  }

  .intro-text {
    padding: var(--gap-xxl) 0;
  }
}

/* ─────────────────────────────────────────
   Aanbod — card grid with top border accent
───────────────────────────────────────── */
.aanbod {
  background: var(--bg-default);
}

.aanbod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md);
  margin-top: 3.5rem;
}

/* ─────────────────────────────────────────
   Over Dagmar
───────────────────────────────────────── */
.dagmar {
  background: var(--bg-muted);
}

.dagmar-inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: center;
}

.dagmar-visual {
  background: var(--bg-default);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .dagmar-visual {
    max-height: 40vh;
  }
}

.dagmar-placeholder {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-align: center;
  font-style: italic;
}

.dagmar-visual::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to top, color-mix(in oklch, var(--fg-default) 6%, transparent), transparent);
}

.dagmar-text .section-body {
  margin-bottom: 1.2rem;
}
.section-intro {
  font-size: 1.5em;
  font-family: var(--font-serif);
  font-style: italic;
  margin-bottom: 1em;
}

/* ─────────────────────────────────────────
   Testimonial — dark block (like corporate)
───────────────────────────────────────── */
.testimonial {
  --testimonial-bottom-padding: 6rem;
  padding: 6rem 0 2rem 0;
  background: var(--bg-inverse);
  text-align: center;
  background-size: 40px 40px;
  background-attachment: fixed;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 2 L38 20 L20 38 L2 20 Z' fill='none' stroke='rgba(160,112,74,0.15)' stroke-width='0.75'/%3E%3C/svg%3E");
}

.testimonial .container {
  padding: 0;
  margin: 0 auto;
}

.testimonial .section-header {
  margin-bottom: 2.5rem;
}

.testimonial .divider {
  margin: 1rem auto;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: color-mix(in oklch, var(--fg-inverse) 85%, transparent);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 1.5rem;
}

.testimonial-attribution {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.slider {
  position: relative;
  user-select: none;
}

.slider-viewport {
  overflow: hidden;
  padding-bottom: 4rem;
}

.slider-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.slider-slide {
  min-width: 100%;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: calc(50% - var(--testimonial-bottom-padding));
  transform: translateY(-50%);
  background: none;
  border: none;
  color: color-mix(in oklch, var(--fg-inverse) 40%, transparent);
  cursor: pointer;
  padding: 0 0.75rem;
  transition: color 0.2s;
  z-index: 1;
}

.slider-prev {
  left: 0;
}
.slider-next {
  right: 0;
}

.slider-prev:hover,
.slider-next:hover {
  color: var(--brand);
}

.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--fg-inverse) 25%, transparent);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.slider-dot.active {
  background: var(--brand);
}

/* ─────────────────────────────────────────
   Contact
───────────────────────────────────────── */
.contact {
  background: var(--bg-default);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}

.contact-info .section-body {
  margin-bottom: 1rem;
}

/* ─────────────────────────────────────────
   Hipsy CTA
───────────────────────────────────────── */
.hipsy {
  background: var(--bg-subtle);
  text-align: center;
  padding-top: 0;
}

.hipsy-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hipsy-inner .divider {
  margin: 0 auto;
}

/* ─────────────────────────────────────────
   Footer
───────────────────────────────────────── */
footer {
  background: var(--bg-inverse);
  color: color-mix(in oklch, var(--fg-inverse) 50%, transparent);
}

/* ─────────────────────────────────────────
   Responsive
───────────────────────────────────────── */
@media (max-width: 768px) {
  .dagmar-inner,
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}