/* ============================================================
   Graduation (participant program-completion page).
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   ============================================================ */

@layer layout {
  .graduation__banner { display: grid; gap: var(--mea-space-2); justify-items: center;
                        text-align: center; padding: var(--mea-space-8) var(--mea-space-4); }

  .impact, .certificate, .next-steps {
    display: grid; gap: var(--mea-space-4);
    padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl);
  }
  .certificate { justify-items: center; text-align: center; }

  .stat-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mea-space-3); }
  .stat { display: grid; gap: var(--mea-space-1); justify-items: center; text-align: center;
          padding: var(--mea-space-4) var(--mea-space-2); border-radius: var(--mea-radius-lg); }
  @container (max-width: 20rem) { .stat-list { grid-template-columns: 1fr; } }

  .steps { display: grid; gap: var(--mea-space-3); }
  .step { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3); align-items: start; }
}

@layer design {
  .graduation__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-4xl);
                       font-weight: var(--mea-w-black); letter-spacing: var(--mea-ls-tight); color: var(--t-text); }
  .graduation__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .impact, .certificate, .next-steps {
    background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm);
  }
  .impact__title, .next-steps__title {
    font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
    font-weight: var(--mea-w-bold); color: var(--t-text);
  }

  .stat { background: var(--t-bg-recessed); }
  .stat__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold); line-height: var(--mea-lh-tight); }
  .stat--hours .stat__value { color: var(--t-success); }
  .stat--tasks .stat__value { color: var(--t-accent); }
  .stat--days  .stat__value { color: var(--t-warning); }
  .stat__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .stat__sub   { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  .impact__statement { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold);
                       color: var(--t-text-secondary); text-align: center; }

  .certificate__icon { font-size: var(--mea-text-hero); line-height: 1; color: var(--t-accent); }
  .certificate__icon svg { inline-size: 3.25rem; block-size: 3.25rem; display: block; margin-inline: auto; }

  .step__mark { display: inline-flex; align-items: center; justify-content: center;
                inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--mea-radius-circle);
                background: var(--t-success); color: var(--t-accent-text);
                font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); }
  .step__mark svg { inline-size: 0.95rem; block-size: 0.95rem; display: block; }
  .step__text { font-size: var(--mea-text-base); color: var(--t-text-secondary); line-height: var(--mea-lh-normal); }
}