/* Six learning areas; deliberately scoped away from city/map geometry and gameplay. */
.games-page .games-type-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.games-page .games-type-tiles .games-type-tile { min-width:0; min-height:220px; width:auto; }
.games-page .games-type-tiles .games-type-tile.is-all { grid-column:1/-1; justify-self:start; min-height:0; padding:12px 22px; display:block; }
.games-page .games-type-tile .games-type-copy strong { font-size:1.35rem; }
.games-page .games-type-tile .games-type-copy small { font-size:.95rem; line-height:1.5; }
.games-page .games-type-foot { flex-wrap:wrap; gap:8px; }
.games-page .games-featured-link,.games-page .games-featured-card-main,.games-page .games-featured-card-copy { min-width:0; }
.games-page .games-featured-card-meta { width:auto; }
.games-page .learning-legacy-note { padding:14px 18px; border-left:4px solid #543098; background:#eee7f8; color:#382064; }
.learning-categories-page .games-hero { padding:42px 0; }
.learning-categories-page .games-frame { width:min(1380px,calc(100% - 40px)); max-width:1380px; margin-inline:auto; }
.learning-categories-page h1 { margin:12px 0; color:#24183f; font-size:clamp(2rem,4vw,3.2rem); line-height:1.15; }
.learning-categories-page h1 em { color:#543098; font-style:normal; }
.learning-categories-page .games-hero p { max-width:75ch; }
.learning-hub { padding-block:32px 52px; }
.learning-hub-heading h2 { margin:0 0 8px; font-size:clamp(1.5rem,3vw,2rem); }
.learning-hub-heading p,.learning-hub-note { color:#645b73; line-height:1.6; max-width:90ch; }
.learning-age-links { display:flex; flex-wrap:wrap; gap:10px; margin-block:22px 14px; }
.learning-age-links a { border:2px solid #d9cbe9; border-radius:10px; background:#fff; color:#543098; font-weight:700; padding:12px 20px; text-decoration:none; }
.learning-age-links a[aria-current],.learning-age-links a:hover { color:#fff; background:#543098; border-color:#543098; }
.learning-hub-counts { color:#645b73; margin-block:18px; }
.learning-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.learning-category-card { display:flex; flex-direction:column; min-width:0; padding:26px; border:2px solid #d9cbe9; border-radius:16px; background:#fff; color:#24183f; text-decoration:none; box-shadow:0 8px 24px #3820640a; transition:background .18s,border-color .18s,transform .18s; }
.learning-category-icon { font-size:2.4rem; line-height:1.3; }
.learning-category-card h3 { font-size:1.5rem; margin:12px 0 8px; color:inherit; }
.learning-category-card p { color:inherit; line-height:1.55; margin:0 0 18px; }
.learning-category-path { font-size:.88rem; opacity:.9; }
.learning-category-path strong { display:block; margin-bottom:5px; }
.learning-category-counts { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.learning-category-counts span { border:1px solid currentColor; border-radius:7px; padding:5px 9px; font-size:.85rem; }
.learning-category-cta { display:block; margin-top:20px; font-weight:700; }
.learning-category-card:hover { background:#543098; border-color:#543098; color:#fff; transform:translateY(-3px); }
.learning-category-card:focus-visible,.learning-age-links a:focus-visible { outline:3px solid #251242; outline-offset:4px; }
.learning-hub-note { margin-top:24px; }
@media(max-width:1000px) { .games-page .games-type-tiles,.learning-category-grid,.games-page .games-featured-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .games-page .games-level-ladder { grid-template-columns:minmax(0,1fr); } .games-page .games-level-ladder ol { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .games-page .games-type-tiles,.learning-category-grid,.games-page .games-featured-grid,.games-page .games-level-ladder ol { grid-template-columns:minmax(0,1fr); } .games-page .games-filter-group:not(.games-type-filter-group) .games-filter-tabs { flex-wrap:wrap; overflow:visible; } .learning-categories-page .games-frame { width:calc(100% - 28px); } .learning-category-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .learning-category-card { transition:none; } .learning-category-card:hover { transform:none; } }