/* =============================================================================
   pages.css — page-specific layouts and components.
   Most rules are global class selectors (no body-class scoping needed because
   class names don't conflict between page types). Some are scoped via .page-X
   body classes where genuinely needed.
   ============================================================================= */

@layer pages {

  /* ===========================================================================
     Symptom / dimension grid (home, clinical hub, audience landers)
     =========================================================================== */
  .dimension-grid,
  .symptom-grid {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: 1fr;
    margin-top: var(--s-lg);
  }
  @media (min-width: 48em) {
    .dimension-grid { grid-template-columns: 1fr 1fr; }
    .symptom-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .dimension-card,
  .symptom-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-xl);
    box-shadow: var(--sh-sm);
  }
  .dimension-card h3,
  .symptom-card h3 { color: var(--c-primary); margin-bottom: var(--s-sm); }

  /* ===========================================================================
     .page-quiz (zelfreflectie)
     Quiz uses the [hidden] attribute (set by quiz.js) for step visibility,
     not a CSS class — so no .quiz-step.is-active rule needed.
     =========================================================================== */
  .page-quiz #quiz-form { max-width: 720px; }

  .quiz-progress {
    margin-block: var(--s-lg);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    position: relative;
    padding-bottom: var(--s-sm);
  }
  .quiz-progress::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 4px;
    background: var(--c-border-light);
    border-radius: var(--r-pill);
  }
  .quiz-progress::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    height: 4px;
    width: var(--progress, 0%);
    background: var(--c-accent);
    border-radius: var(--r-pill);
    z-index: 1;
    transition: width var(--dur) var(--ease-out);
  }

  .quiz-step {
    border: 0;
    padding: 0;
    margin: 0 0 var(--s-xl) 0;
  }
  .quiz-step legend {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    font-size: var(--fs-xl);
    line-height: var(--lh-tight);
    margin-bottom: var(--s-lg);
    padding: 0;
  }

  .quiz-option {
    display: flex;
    gap: var(--s-md);
    padding: var(--s-md) var(--s-lg);
    background: var(--c-surface);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    box-shadow: var(--sh-sm);
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
    align-items: flex-start;
    margin-bottom: var(--s-sm);
  }
  .quiz-option:hover {
    background: var(--c-accent-light);
    box-shadow: var(--sh-md);
  }
  .quiz-option:has(input:checked) {
    background: var(--c-accent-light);
    border-color: var(--c-primary);
    border-width: 2px;
    padding: calc(var(--s-md) - 1px) calc(var(--s-lg) - 1px); /* compensate for the +1px border to avoid content jump */
  }
  .quiz-option input { margin-top: 4px; accent-color: var(--c-primary); }
  .quiz-option span { flex: 1; line-height: var(--lh-base); }

  .quiz-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--s-md);
    margin-top: var(--s-xl);
  }
  .quiz-actions > button:only-child { margin-inline-start: auto; }

  /* ===========================================================================
     .page-profile-result (jouw-inzichten)
     =========================================================================== */
  .page-profile-result #empty-state,
  .page-profile-result #result {
    max-width: 720px;
  }

  .profile-card { padding-block: var(--s-lg); }
  .profile-card__icon { font-size: 3rem; line-height: 1; margin-bottom: var(--s-md); }
  .profile-card__description { font-size: var(--fs-md); }

  .profile-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-sm);
    list-style: none;
    padding: 0;
    margin-top: var(--s-md);
  }
  .profile-traits li {
    padding: var(--s-xs) var(--s-md);
    background: var(--c-accent-light);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--c-primary);
    font-weight: var(--fw-medium);
  }

  /* ===========================================================================
     .page-recommendations (jouw-oefeningen)
     =========================================================================== */
  .recommendation-list {
    display: grid;
    gap: var(--s-md);
    list-style: none;
    padding: 0;
    margin-top: var(--s-lg);
    grid-template-columns: 1fr;
  }
  @media (min-width: 48em) {
    .recommendation-list { grid-template-columns: 1fr 1fr; }
  }
  .recommendation-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    padding: var(--s-lg);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition:
      box-shadow var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out);
  }
  .recommendation-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-hover);
  }
  .recommendation-card h3 { margin: 0; font-size: var(--fs-lg); }
  .recommendation-card h3 a { color: var(--c-primary); text-decoration: none; }
  .recommendation-card h3 a:hover { color: var(--c-accent-hover); text-decoration: underline; }
  .recommendation-card p { color: var(--c-text-soft); font-size: var(--fs-sm); }
  .card-meta {
    display: flex;
    gap: var(--s-xs);
    flex-wrap: wrap;
    margin-top: auto;
  }

  /* ===========================================================================
     .page-exercise-library (alle-oefeningen)
     =========================================================================== */
  .exercise-category + .exercise-category { margin-top: var(--s-2xl); }
  .exercise-category h2 { margin-bottom: var(--s-lg); }

  .exercise-list {
    display: grid;
    gap: var(--s-md);
    list-style: none;
    padding: 0;
    grid-template-columns: 1fr;
  }
  @media (min-width: 48em) {
    .exercise-list { grid-template-columns: 1fr 1fr; }
  }
  @media (min-width: 80em) {
    .exercise-list { grid-template-columns: 1fr 1fr 1fr; }
  }

  .exercise-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    padding: var(--s-lg);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition:
      box-shadow var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out);
  }
  .exercise-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-hover);
  }
  /* Density exception: at 3-column grid width, reinstate a hairline border so
     27 floating cards don't read as confetti. Shadow continues to do the lift. */
  @media (min-width: 80em) {
    .exercise-card {
      border: 1px solid var(--c-hairline-soft);
    }
  }
  .exercise-card h3 { margin: 0; font-size: var(--fs-lg); }
  .exercise-card h3 a { color: var(--c-primary); text-decoration: none; }
  .exercise-card p { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* ===========================================================================
     .page-exercise (oefening detail)
     =========================================================================== */
  .exercise-layout {
    display: grid;
    gap: var(--s-xl);
    grid-template-columns: 1fr;
    margin-top: var(--s-lg);
  }
  @media (min-width: 62em) {
    .exercise-layout {
      grid-template-columns: minmax(0, 1fr) 280px;
      align-items: start;
    }
  }
  .exercise-layout section + section { margin-top: var(--s-xl); }

  .exercise-sidebar { display: grid; gap: var(--s-md); }
  .exercise-sidebar .card h3 { font-size: var(--fs-md); margin-bottom: var(--s-sm); }
  .exercise-sidebar p { font-size: var(--fs-sm); line-height: var(--lh-base); }
  .exercise-sidebar p + p { margin-top: var(--s-sm); }

  .exercise-meta {
    display: flex;
    gap: var(--s-sm);
    flex-wrap: wrap;
    margin-top: var(--s-md);
  }
  .exercise-howto { padding-left: 1.5em; }
  .exercise-howto li { margin-bottom: var(--s-md); line-height: var(--lh-loose); }
  .exercise-coaching-questions {
    background: var(--c-accent-light);
    border-radius: var(--r-md);
    padding: var(--s-lg);
    margin-top: var(--s-md);
    list-style: none;
  }
  .exercise-coaching-questions li {
    padding-inline-start: 1.5em;
    position: relative;
    margin-bottom: var(--s-md);
    line-height: var(--lh-loose);
  }
  .exercise-coaching-questions li::before {
    content: "?";
    position: absolute;
    inset-inline-start: 0;
    color: var(--c-accent);
    font-weight: var(--fw-bold);
  }
  .exercise-evidence-base {
    font-style: italic;
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    margin-top: var(--s-md);
  }

  /* ===========================================================================
     .page-blog-article + .page-clinical-article (article layout)
     =========================================================================== */
  .article-header {
    max-width: var(--w-reading);
    margin-bottom: var(--s-xl);
  }
  .article-header h1 { margin-bottom: var(--s-md); }

  .article-meta {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--s-sm);
  }

  .article-body {
    max-width: var(--w-reading);
  }
  .article-body h2 { margin-top: var(--s-2xl); margin-bottom: var(--s-md); }
  .article-body h3 { margin-top: var(--s-xl); margin-bottom: var(--s-sm); }
  .article-body p + p { margin-top: var(--s-md); }
  .article-body ul,
  .article-body ol { margin-top: var(--s-sm); }
  .article-body li { line-height: var(--lh-loose); }
  .article-body blockquote {
    margin: var(--s-xl) 0;
    padding: var(--s-md) var(--s-lg);
    border-left: 3px solid var(--c-accent);
    color: var(--c-text-soft);
    font-style: italic;
  }

  .article-list {
    display: grid;
    gap: var(--s-md);
    list-style: none;
    padding: 0;
    margin-top: var(--s-lg);
  }
  .article-list a {
    display: block;
    padding: var(--s-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .article-list a:hover {
    border-color: var(--c-accent-medium);
    background: var(--c-surface-hover);
  }
  .article-list h3 { margin: 0 0 var(--s-xs) 0; color: var(--c-primary); font-size: var(--fs-lg); }
  .article-list p { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* Hub list (alternative listing pattern used on some indices) */
  .hub-list {
    display: grid;
    gap: var(--s-md);
    list-style: none;
    padding: 0;
    margin-top: var(--s-lg);
  }
  .hub-list a {
    display: block;
    padding: var(--s-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  .hub-list a:hover {
    border-color: var(--c-accent-medium);
    background: var(--c-surface-hover);
  }
  .hub-list h3 { margin: 0 0 var(--s-xs) 0; color: var(--c-primary); font-size: var(--fs-lg); }
  .hub-list p { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* ===========================================================================
     FAQ grid (home, audience landers, hubs)
     =========================================================================== */
  .faq-grid {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: 1fr;
    margin-top: var(--s-lg);
  }
  @media (min-width: 48em) {
    .faq-grid { grid-template-columns: 1fr 1fr; }
  }
  .faq-item h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--s-sm);
  }
  .faq-item p { color: var(--c-text-soft); }

  /* ===========================================================================
     Pricing cards (professionele-hulp)
     =========================================================================== */
  .pricing-grid {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: 1fr;
    margin-top: var(--s-lg);
  }
  @media (min-width: 48em) {
    .pricing-grid { grid-template-columns: 1fr 1fr; }
  }
  .pricing-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-xl);
    box-shadow: var(--sh-sm);
  }
  .pricing-card h3 { color: var(--c-primary); margin-bottom: var(--s-sm); }
  .pricing-amount {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    color: var(--c-accent);
    margin-bottom: var(--s-md);
  }

  /* ===========================================================================
     Contact cards (professionele-hulp CTA block)
     =========================================================================== */
  .contact-grid {
    display: grid;
    gap: var(--s-lg);
    grid-template-columns: 1fr;
    margin-top: var(--s-lg);
  }
  @media (min-width: 48em) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
  }
  .contact-card {
    background: var(--c-surface);
    border-radius: var(--r-lg);
    padding: var(--s-lg);
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    box-shadow: var(--sh-sm);
  }
  .contact-card h3 { color: var(--c-primary); margin-bottom: 0; font-size: var(--fs-lg); }
  .contact-card .btn { margin-top: auto; }

  /* ===========================================================================
     Numbered list (used on audience landers etc.)
     =========================================================================== */
  .numbered-list { padding-left: 1.5em; }
  .numbered-list li {
    margin-bottom: var(--s-md);
    line-height: var(--lh-loose);
    padding-left: var(--s-sm);
  }

  /* ===========================================================================
     Audience-lander lead + CTA
     =========================================================================== */
  .audience-lead {
    font-size: var(--fs-md);
    color: var(--c-text-soft);
    line-height: var(--lh-loose);
    max-width: 68ch;
    margin-top: var(--s-md);
  }
  .audience-cta { margin-top: var(--s-2xl); }

  /* ===========================================================================
     Margin utilities (carried over for ported content compatibility)
     =========================================================================== */
  .mt-sm  { margin-top: var(--s-sm); }
  .mt-md  { margin-top: var(--s-md); }
  .mt-lg  { margin-top: var(--s-lg); }
  .mt-xl  { margin-top: var(--s-xl); }
  .mt-2xl { margin-top: var(--s-2xl); }
  .mt-3xl { margin-top: var(--s-3xl); }
}