/* ═══════════════════════════════════════════════════════════════
   CLARO CLINIC — Sub-page Styles (pages.css)
   Gebaseerd op Figma MCP extractie nodes 0-5 en 0-211
   Alle tokens uit productie styles.css :root — geen hardcoded waarden
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   SOA-TESTEN: Screening Opties (3-koloms grid)
   Figma node 0-26 / 0-33
   ──────────────────────────────────────────────────────────── */
.screening-section {
  padding: 112px 0; /* §4C ×1.4: 80→112px */
  background: var(--color-cream-100);
}

.screening-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 32px; /* §4C ×1.4: 24→32px */
  margin-top: 0;
}

.screening-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: 40px 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 423px; /* Figma BasisScreeningCard: 412.5px × 1.027 */
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-warm);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-soft);
}
.screening-card.animate-in { opacity: 1; transform: translateY(0); }
.screening-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.screening-card.animate-in:hover { transform: translateY(-4px); }

.screening-card--featured {
  border-color: var(--color-sage-500);
  /* Upgrade C: shadow-featured + inner ring — Double-Bezel principe (soft-skill §4A) */
  box-shadow: var(--shadow-featured), inset 0 0 0 2px rgba(75,110,91,0.12);
  min-height: 456px;       /* Figma UitgebreideScreening: 444px × 1.027 */
  padding-bottom: 58px;    /* Figma protrusion: container=388px, kaart=444px → 56px × 1.027 */
}

/* Rechterkaart (Gericht Onderzoek) eveneens 456px — Figma height 444.5px */
.screening-card:nth-child(3) {
  min-height: 456px;
}

.screening-card-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-sage-500);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 20px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.screening-card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.screening-card-price .price-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
}
.screening-card-price .price-value {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink-900);
}

.screening-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-sage-500);
  margin-top: 8px;
  transition: gap 0.2s;
}
.screening-card-link:hover { gap: 10px; }


/* ────────────────────────────────────────────────────────────
   TARIEVEN: Hero (gecentreerd)
   Figma node 0-217
   ──────────────────────────────────────────────────────────── */
.pricing-hero-section {
  padding: 96px 48px 64px;
  text-align: center;
}
.pricing-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.pricing-hero-title {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 800;
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--color-ink-900);
  margin-bottom: 24px;
}
.pricing-hero-subtitle {
  font-size: 18px; line-height: 28px;
  color: var(--color-ink-700);
  max-width: 620px;
  margin: 0 auto;
}


/* ────────────────────────────────────────────────────────────
   TARIEVEN: Pricing Bento Grid (2-koloms)
   Figma node 0-230 — SectionPricingBentoGrid
   ──────────────────────────────────────────────────────────── */
.pricing-bento-section {
  padding: 0 0 112px; /* §4C ×1.4: 80→112px */
}

.pricing-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px; /* Figma 32px × 1.027 */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}

/* Beide bento-kaarten: witte card met border en shadow */
.bento-card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-warm);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-soft);
}
.bento-card.animate-in { opacity: 1; transform: translateY(0); }
.bento-card:hover { box-shadow: var(--shadow-lg); }

.bento-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 58px 32px 24px; /* Figma y=56 × 1.027 */
  /* geen border-bottom: scheiding bestaat niet in Figma */
}
.bento-card-icon {
  width: 22px; height: 22px; /* Figma 22.5px — geen cirkelcontainer */
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brown-700); /* warm roest/bruin conform Figma */
  flex-shrink: 0;
}
.bento-card-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  color: var(--color-ink-900);
}

.bento-price-list {
  list-style: none;
  padding: 0 0 58px; /* bottom = zelfde als header padding-top */
  margin: 0;
}
.bento-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 25px 18px 25px; /* Figma label-offset 24px × 1.027 */
  font-size: 15px;
  line-height: 24px;
  color: var(--color-ink-700);
  border-bottom: 1px solid var(--border-warm);
}
.bento-price-row:last-child { border-bottom: none; }
/* geen alternerende achtergrond — bestaat niet in Figma */
.bento-price-label { font-weight: 500; color: var(--color-ink-900); }
.bento-price-amount {
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  color: var(--color-sage-500);
}


/* ────────────────────────────────────────────────────────────
   TARIEVEN: Vergoeding & Verzekering info-kaart
   Figma node 0-277 — SectionInsuranceInfoBlock
   ──────────────────────────────────────────────────────────── */
.insurance-section {
  padding: 0 48px 80px;
}

.insurance-card {
  max-width: 700px; /* smaller voor 4 tekstregels */
  margin: 0 auto;
  background: var(--color-peach-200);
  border-radius: var(--radius-card);
  padding: 56px 48px; /* meer hoogte boven en onder */
  display: flex;
  gap: 28px;
  align-items: flex-start;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.insurance-card.animate-in { opacity: 1; transform: translateY(0); }

.insurance-icon {
  width: 48px; height: 48px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brown-700);
  margin-top: 4px;
}
.insurance-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  color: var(--color-ink-900);
  margin-bottom: 12px;
}
.insurance-text {
  font-size: 15px; line-height: 24px;
  color: var(--color-ink-700);
}


/* ────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet (≤1024px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pricing-hero-section { padding: 72px 32px 48px; }
  .pricing-hero-title { font-size: 44px; }
  .pricing-bento-grid { grid-template-columns: 1fr; padding: 0 32px; }
  .screening-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .insurance-section { padding: 0 32px 64px; }
  .insurance-card { padding: 32px; }
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE — Mobile (≤768px)
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pricing-hero-section { padding: 56px 20px 40px; }
  .pricing-hero-title { font-size: 36px; }
  .pricing-bento-grid { padding: 0 20px; }
  .insurance-section { padding: 0 20px 56px; }
  .insurance-card { flex-direction: column; padding: 24px; gap: 16px; }
  .bento-card-header { padding: 24px 24px 20px; }
  .bento-price-row { padding: 16px 24px; }
  .screening-card { padding: 32px 28px 24px; }
}


/* ════════════════════════════════════════════════════════════════
   PERCEPTUELE ANIMATIES — Technieken 1, 3, 5, 6
   ════════════════════════════════════════════════════════════════ */

/* ── Techniek 1: Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-sage-500);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.08s linear;
}

/* ── Techniek 3: Parallax Hero Image ── */
.hero-image {
  overflow: hidden;
}
.hero-image-photo {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ── Techniek 5: FAQ JS Toggle ── */
/* OPMERKING: De FAQ-animatie staat in styles.css via grid-template-rows + .is-open */
/* Hieronder GEEN .faq-body of .faq-item regels — conflict voorkomen */
/* button.faq-summary reset staat al in styles.css */

/* ── Techniek 6: Langere section reveal (0.6s → 0.85s) ── */
.screening-card {
  transition: opacity 0.85s var(--ease-out-expo),
              transform 0.85s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-soft);
}

.bento-card {
  transition: opacity 0.85s var(--ease-out-expo),
              transform 0.85s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-soft);
}

.insurance-card {
  transition: opacity 0.85s var(--ease-out-expo),
              transform 0.85s var(--ease-out-expo);
}

/* .faq-item transition: staat volledig in styles.css — geen override hier */

/* ────────────────────────────────────────────────────────────
   WERKWIJZE.HTML — Team Sectie (Figma node 13-169 t/m 13-209)
   Schaalfactor 1.027 toegepast op alle Figma-afmetingen.
   ──────────────────────────────────────────────────────────── */
.team-section {
  padding: 96px 0;
  background: var(--color-cream-100);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start; /* kaarten groeien naar eigen hoogte — geen forced-equal rows */
  gap: 57px; /* Figma 55.6px × 1.027 */
  margin-top: 56px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 355px; /* Figma 346px × 1.027 */
  min-height: 419px; /* Figma kaart 1+3: 408px × 1.027 */
  margin: 0 auto;
  border: 1px solid var(--border-warm); /* Upgrade 3: materiality — soft-skill §4A */
  border-radius: var(--radius-card);
  padding: 32px 24px;
  background: var(--color-white);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo),
              box-shadow 0.3s var(--ease-out-soft);
}
.team-card.animate-in { opacity: 1; transform: translateY(0); }
/* Upgrade 3: hover — Nielsen H1: feedback op interactie */
.team-card:hover { box-shadow: var(--shadow-lg); }
.team-card.animate-in:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Kaart 2 (Thomas): 33px lager + 33px kleiner conform Figma y-offset */
/* Upgrade C: featured accent — middle card als visueel ankerpunt (soft-skill §4A §4B) */
.team-card:nth-child(2) {
  margin-top: 33px;   /* Figma y-verschil: 32px × 1.027 */
  min-height: 386px;  /* Figma kaart 2: 376px × 1.027 */
  transition-delay: 0.1s;
  border-color: var(--color-sage-500);
  box-shadow: var(--shadow-featured), inset 0 0 0 2px rgba(75,110,91,0.12);
}
.team-card:nth-child(3) { transition-delay: 0.2s; }

/* Foto-container — overflow:hidden clipt de img tot de cirkel */
.team-photo {
  width: 131px;   /* Figma 128px × 1.027 */
  height: 131px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--border-warm);
  margin-bottom: 24px;
  flex-shrink: 0;
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* focus op gezicht */
  display: block;
}

.team-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink-900);
  margin-bottom: 4px;
}

.team-role {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-brown-700);
  margin-bottom: 16px;
}

.team-quote {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-ink-700);
  font-style: italic;
  margin: 0;
  padding: 0;
  border: none;
}

/* Responsive — team grid wordt 1 kolom op mobiel */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Asymmetrie vervalt op mobiel */
  .team-card:nth-child(2) {
    margin-top: 0;
    min-height: unset;
  }
  .team-card { min-height: unset; }
}

/* ────────────────────────────────────────────────────────────
   WERKWIJZE-STAPPEN — Zigzag patroon (Figma node 13-135)
   Stap 1+3: y=208px | Stap 2+4: y=256px (48px lager × 1.027 = 49px)
   Technische noot: connectors staan op even nth-child posities (2,4,6)
   Daardoor zijn de stappen op posities 1,3,5,7 — 
   stap 2 = nth-child(3), stap 4 = nth-child(7)
   ──────────────────────────────────────────────────────────── */
.steps-grid > .step:nth-child(3),
.steps-grid > .step:nth-child(7) {
  margin-top: 49px; /* Figma y-verschil: 48px × 1.027 */
}
@media (max-width: 768px) {
  .steps-grid > .step:nth-child(3),
  .steps-grid > .step:nth-child(7) {
    margin-top: 0; /* zigzag vervalt op mobiel */
  }
}


/* ═══ WERKWIJZE STAPPEN — Sequentiële scroll-animatie ═══════ */
/* Actief op .ww-step en .ww-connector via inline JS-controller */
.ww-step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ww-connector {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Trigger: gezet door werkwijze-steps controller */
.ww-step.is-visible,
.ww-connector.is-visible {
  opacity: 1;
  transform: none;
}