/* =============================================================================
   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.
     =========================================================================== */
  /* #quiz-form inherits the 70ch reading cap from its .prose parent — no
     duplicate max-width needed. Center the column on wide screens so it does
     not lean left of the main area. */
  @media (min-width: 80em) {
    .page-quiz .prose { margin-inline: auto; }
  }

  /* Thin filled progress bar at the top of the form. */
  .quiz-progress {
    height: 3px;
    background: var(--c-border-light);
    border-radius: 2px;
    margin: var(--s-lg) 0 var(--s-xl);
    overflow: hidden;
  }
  .quiz-progress > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--c-accent);
    border-radius: 2px;
    transition: width var(--dur) var(--ease-out);
  }

  /* Each step is an <article class="quiz-step card">. The .card class
     supplies background/radius/shadow; .quiz-step bumps the padding and
     adds vertical rhythm to the bottom of the card. */
  .quiz-step.card {
    padding: var(--s-2xl);
    margin: 0 0 var(--s-xl);
  }

  .quiz-question {
    font-family: var(--font-heading);
    color: var(--c-primary);
    font-size: var(--fs-2xl);
    line-height: var(--lh-tight);
    margin: 0;
  }

  .quiz-coach {
    margin: var(--s-md) 0 var(--s-xl);
    color: var(--c-text-soft);
    font-size: var(--fs-sm);
    font-style: italic;
  }

  .quiz-options {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .quiz-options li + li .quiz-option {
    border-top: 1px solid var(--c-hairline-soft);
  }

  .quiz-option {
    display: flex;
    align-items: flex-start;
    gap: var(--s-md);
    padding: var(--s-md);
    margin: 0 calc(var(--s-md) * -1);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }
  .quiz-option:hover { background: var(--c-accent-light); }
  .quiz-option:has(input:checked) { background: var(--c-accent-light); }
  .quiz-option:has(input:focus-visible) {
    outline: 2px solid var(--c-focus-ring);
    outline-offset: 2px;
  }
  .quiz-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .quiz-option__marker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
    color: var(--c-accent);
    min-width: 1.5em;
    margin-top: 4px;
    flex-shrink: 0;
  }
  .quiz-option:has(input:checked) .quiz-option__marker {
    color: var(--c-primary);
  }
  .quiz-option__text {
    flex: 1;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
  }

  .quiz-actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-md);
    margin-top: var(--s-xl);
  }

  /* ===========================================================================
     .page-profile-result (jouw-inzichten)
     =========================================================================== */
  /* #empty-state and #result inherit the 70ch reading cap from .prose — no
     duplicate max-width needed. Center the column on wide screens. */
  @media (min-width: 80em) {
    .page-profile-result .prose { margin-inline: auto; }
  }

  .profile-card { padding-block: var(--s-lg); }
  .profile-card__description { font-size: var(--fs-md); line-height: 1.65; }
  .profile-card__description p { margin: 0 0 var(--s-md); }
  .profile-card__description p:last-child { margin-bottom: 0; }

  .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);
  }

  .profile-kicker {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-secondary);
    margin: 0 0 var(--s-sm);
  }
  .profile-kicker__num {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: var(--fw-bold);
    font-size: 1rem;
    color: var(--c-primary);
    margin-right: 0.35rem;
    letter-spacing: 0;
  }

  .profile-anchor {
    margin: var(--s-md) 0 var(--s-xl);
    padding: var(--s-md) var(--s-lg);
    background: var(--c-surface);
    border-left: 2px solid var(--c-tertiary);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .profile-anchor em {
    display: block;
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: var(--fw-bold);
    color: var(--c-primary);
    font-size: var(--fs-base);
    line-height: 1.45;
    margin-bottom: var(--s-sm);
  }
  .profile-anchor a {
    color: var(--c-secondary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }
  .profile-anchor a:hover { color: var(--c-primary); }
  .profile-anchor__meta {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .section-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin: var(--s-lg) 0 var(--s-sm);
  }

  /* ===========================================================================
     .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; }
  }
  @media (min-width: 80em) {
    .recommendation-list { grid-template-columns: 1fr 1fr 1fr; }
  }
  .recommendation-card {
    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 > a {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    padding: var(--s-lg);
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
  }
  .recommendation-card > a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
  }
  .recommendation-card h3 { margin: 0; font-size: var(--fs-lg); color: var(--c-primary); }
  .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 {
    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 > a {
    display: flex;
    flex-direction: column;
    gap: var(--s-sm);
    padding: var(--s-lg);
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
  }
  .exercise-card > a:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
  }
  .exercise-card h3 { margin: 0; font-size: var(--fs-lg); color: var(--c-primary); }
  .exercise-card p { color: var(--c-text-soft); font-size: var(--fs-sm); }

  /* ===========================================================================
     .page-exercise (oefening detail)
     =========================================================================== */
  /* When an oefening page wraps its content in <article class="prose">, the
     70ch reading cap collapses the body column to ~50ch once the 280px
     sidebar is subtracted. Let the prose breathe to container width on these
     pages — .article-header keeps its own --w-reading cap for the lede. */
  .prose:has(.exercise-layout) { max-width: var(--w-container); }
  .exercise-layout .article-body { max-width: none; }

  .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);
    min-width: 0;
  }
  .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;
  }

  /* Two-column reader layout — article + sticky rail at >=87.5em (1400px).
     Below the breakpoint the rail is hidden and the article reads as before.
     At the breakpoint we also widen the article column from 70ch to 76ch now
     that the layout has earned the horizontal room. */
  .article-layout {
    display: grid;
    gap: var(--s-2xl);
    grid-template-columns: 1fr;
  }
  @media (min-width: 87.5em) {
    .article-layout {
      grid-template-columns: minmax(0, 76ch) minmax(220px, 260px);
      align-items: start;
    }
    .article-layout .article-body,
    .article-layout .article-header { max-width: 76ch; }
  }

  .article-rail { display: none; }
  @media (min-width: 87.5em) {
    .article-rail {
      display: grid;
      gap: var(--s-md);
      position: sticky;
      top: var(--s-lg);
      font-size: var(--fs-sm);
    }
    .article-rail__label {
      font-size: var(--fs-xs);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      color: var(--c-text-muted);
      margin: 0 0 var(--s-xs) var(--s-md);
    }
    .article-rail__toc {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .article-rail__toc a {
      display: block;
      padding: var(--s-xs) 0 var(--s-xs) var(--s-md);
      color: var(--c-text-soft);
      text-decoration: none;
      border-left: 2px solid var(--c-hairline-soft);
      line-height: 1.4;
      transition: color var(--dur-fast) var(--ease), border-left-color var(--dur-fast) var(--ease);
    }
    .article-rail__toc a:hover,
    .article-rail__toc a:focus-visible {
      color: var(--c-primary);
      border-left-color: var(--c-accent);
    }
    .article-rail__cta {
      margin-top: var(--s-lg);
      padding: var(--s-md);
      background: var(--c-accent-light);
      border-radius: var(--r-md);
    }
    .article-rail__cta p {
      margin: 0 0 var(--s-sm) 0;
      color: var(--c-text-soft);
      font-size: var(--fs-sm);
      line-height: var(--lh-base);
    }
    .article-rail__cta .btn { width: 100%; }
  }

  .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);
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin-top: var(--s-lg);
  }
  @media (min-width: 48em) {
    .hub-list { grid-template-columns: 1fr 1fr; }
  }
  .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);
  }

  /* ===========================================================================
     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); }
}