/* Parent and teacher topic pages (built by scripts/build-topic-pages.mjs). Uses shop.css for the header, footer, and sample card. */
.topic{padding-block:8px 64px}
.topic-crumbs{font-size:13px;color:var(--muted);margin:0 0 22px}
.topic-crumbs a{text-decoration:underline;text-underline-offset:3px}
.topic-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr);gap:clamp(28px,5vw,64px);align-items:center;margin-bottom:46px}
.topic .eyebrow{font-size:13px;letter-spacing:2px;font-weight:800;color:#41592e;margin:0 0 14px}
.topic h1{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(36px,5.6vw,58px);line-height:1.05;margin:0 0 18px;letter-spacing:-.5px}
.topic h1 em{font-style:normal;color:#6c8b3f}
.topic-lead{font-size:18px;line-height:1.7;color:#3b4a4f;margin:0 0 26px;max-width:560px}
.topic-actions{display:flex;flex-wrap:wrap;gap:12px}
.topic-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:8px;font-weight:700;font-size:15px}
.topic-primary{background:var(--navy);color:#fff}
.topic-secondary{border:1.5px solid var(--navy)}
.topic-card{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.topic-card .preview-card{width:100%;max-width:290px}
.topic-card figcaption{font-size:12.5px;color:var(--muted);text-align:center}
.topic-objects{font-size:30px;letter-spacing:6px;margin:0 0 10px}
.topic-tiles{display:flex;gap:8px;justify-content:center;margin:6px 0 4px}
.topic-tiles span{width:54px;height:54px;display:grid;place-items:center;border-radius:12px;background:#fff;border:2px solid #cfe0f2;box-shadow:0 4px 0 #cfe0f2;font:600 34px/1 'Fredoka',sans-serif;color:#4d8fc9}
.topic-body{max-width:760px}
.topic-body section{margin:0 0 30px}
.topic-body h2,.topic-related h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(22px,3vw,28px);line-height:1.2;margin:0 0 10px}
.topic-body p,.topic-body li{font-size:16.5px;line-height:1.75;color:#33434a}
.topic-body p{margin:0 0 12px}
.topic-body ul{margin:0;padding-left:22px}
.topic-body li{margin-bottom:8px}
.topic-faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;padding:0 18px}
.topic-faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style-position:outside}
.topic-faq details p{margin:0 0 16px}
.topic-related{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.topic-related div{display:flex;flex-wrap:wrap;gap:10px}
.topic-related a{padding:11px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14.5px}
.topic-related a:hover{border-color:var(--navy)}
@media(max-width:760px){.topic-hero{grid-template-columns:1fr}.topic-card{order:2}.topic-lead{font-size:16.5px}.topic-actions a{flex:1 1 100%}}