/* About page (/about/). Every value comes from tokens.css; the page itself uses the .tlg-body base from site.css. */
.ab-hero { padding: var(--tlg-space-12) var(--tlg-space-8) var(--tlg-space-10); border-bottom: var(--tlg-border-width) solid var(--tlg-border); background: var(--tlg-surface); text-align: center; }
.ab-hero h1 { max-width: 760px; margin: 0 auto var(--tlg-space-3) !important; font-size: var(--tlg-text-3xl); line-height: 1.2; text-wrap: balance; }
.ab-hero p { max-width: 620px; margin: 0 auto !important; color: var(--tlg-text-muted); font-size: var(--tlg-text-lg); text-wrap: pretty; }

.ab-body { max-width: 980px; margin: 0 auto; padding: var(--tlg-space-10) var(--tlg-space-8) var(--tlg-space-16); }
.ab-section { margin-bottom: var(--tlg-space-12); }
.ab-section > h2 { margin-bottom: var(--tlg-space-5) !important; font-size: var(--tlg-text-2xl); }
.ab-muted { color: var(--tlg-text-muted); font-weight: normal; }

/* What's here: four cards (two per row on mid widths), each with a real thumbnail and a count from data/activities.json (filled by the build). */
.ab-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tlg-space-5); }
.ab-card { overflow: hidden; border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-1); }
.ab-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tlg-surface-2); }
.ab-card-text { padding: var(--tlg-space-4); }
.ab-card h3 { font-size: var(--tlg-text-xl); }
.ab-count { margin: var(--tlg-space-1) 0 var(--tlg-space-2) !important; color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }
.ab-count b { font-size: var(--tlg-text-xl); }
.ab-card p:last-child { color: var(--tlg-text-muted); }

/* For teachers: three numbered steps and one primary button. */
.ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tlg-space-5); margin-bottom: var(--tlg-space-6) !important; }
.ab-steps li { display: flex; gap: var(--tlg-space-3); align-items: flex-start; padding: var(--tlg-space-4); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); }
.ab-step-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--tlg-radius-full); color: var(--tlg-on-solid); background: var(--tlg-primary); font-weight: var(--tlg-weight-bold); }
.ab-steps h3 { margin-bottom: var(--tlg-space-1) !important; font-size: var(--tlg-text-lg); }
.ab-steps p { color: var(--tlg-text-muted); }
.ab-cta { max-width: none; text-align: center; }
.ab-cta .tlg-btn { padding: 0 var(--tlg-space-8); font-size: var(--tlg-text-lg); }

.ab-who { max-width: 720px; }
.ab-who p { color: var(--tlg-text-muted); font-size: var(--tlg-text-lg); }
.ab-who p + p { margin-top: var(--tlg-space-4) !important; }
.ab-who strong { color: var(--tlg-text); }

/* Suggestion box (signed-in teachers only). */
.ab-suggest { max-width: 720px; padding: var(--tlg-space-6); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); }
.ab-suggest > h2 { margin-bottom: var(--tlg-space-2) !important; }
.ab-suggest-out { margin-top: var(--tlg-space-4) !important; padding: var(--tlg-space-3) var(--tlg-space-4); border-radius: var(--tlg-radius-sm); background: var(--tlg-surface-2); font-weight: var(--tlg-weight-bold); }
.ab-suggest-out[hidden], .ab-form[hidden] { display: none; }
.ab-form { display: grid; gap: var(--tlg-space-2); margin-top: var(--tlg-space-4); }
.ab-form label { font-weight: var(--tlg-weight-bold); }
.ab-form textarea, .ab-form input { width: 100%; min-height: var(--tlg-tap); padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-bg); font: inherit; }
.ab-form textarea { resize: vertical; }
.ab-count-line { margin-top: calc(-1 * var(--tlg-space-1)) !important; color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); text-align: right; }
.ab-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-3); margin-top: var(--tlg-space-2); }
.ab-form-status { color: var(--tlg-text-muted); }

.ab-support { max-width: none; padding-top: var(--tlg-space-6); border-top: var(--tlg-border-width) solid var(--tlg-border); color: var(--tlg-text-muted); text-align: center; }

@media (max-width: 1100px) {
  .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ab-cards, .ab-steps { grid-template-columns: 1fr; }
  .ab-cards { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .ab-hero { padding: var(--tlg-space-8) var(--tlg-space-4); }
  .ab-hero h1 { font-size: var(--tlg-text-2xl); }
  .ab-body { padding: var(--tlg-space-8) var(--tlg-space-4) var(--tlg-space-12); }
  .ab-suggest { padding: var(--tlg-space-4); }
}