/* Activities-style cards across the Elementary Music Classroom. */
.elementary-ui main :is(.classroom-grid,.lessons-grid,.quiz-grid,.games-grid){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card){display:flex;flex-direction:column;min-height:100%;overflow:hidden;background:white;border:1px solid #d9e9e1;border-radius:18px;color:#111827;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card):hover{transform:translateY(-4px);border-color:#b5dec6;box-shadow:0 15px 28px #16653412}
.elementary-ui main :is(.classroom-card>.image-wrap,.lesson-card>.lesson-image,.quiz-card>.quiz-image,.game-card>.game-image){height:165px;padding:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#edf9f2,#f8fcfa);margin:0}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:14px}
.elementary-ui main :is(.card-content,.lesson-content,.quiz-content,.game-content){display:flex;flex-direction:column;flex:1;padding:16px}
.elementary-ui main :is(.icon-box,.lesson-icon,.quiz-icon,.game-icon){width:38px;height:38px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;border-radius:11px;background:#e4f7ed;color:#166534;font-size:15px}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) h3{margin:0 0 6px;color:#166534;font-size:18px}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) p{margin:0 0 16px;color:#64748b;font-size:13px;line-height:1.65}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) :is(.open-btn,.play-btn){display:inline-flex;align-items:center;justify-content:center;gap:7px;width:fit-content;align-self:flex-start;margin-top:auto;padding:10px 14px;border-radius:8px;background:#166534;color:#fff;font-size:13px;font-weight:600}
.elementary-ui main :is(.quiz-bottom,.game-bottom){margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.elementary-ui main .lesson-tags{margin:0 0 14px}
@media(max-width:1100px){.elementary-ui main :is(.classroom-grid,.lessons-grid,.quiz-grid,.games-grid){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.elementary-ui main :is(.classroom-grid,.lessons-grid,.quiz-grid,.games-grid){grid-template-columns:1fr}}
/* Match the actual compact sizing in assets/activities.css. */
.elementary-ui main :is(.classroom-grid,.lessons-grid,.quiz-grid,.games-grid){grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),260px));gap:16px;align-items:stretch}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card){min-width:0;border-radius:16px}
.elementary-ui main :is(.classroom-card>.image-wrap,.lesson-card>.lesson-image,.quiz-card>.quiz-image,.game-card>.game-image){height:140px;padding:14px}
.elementary-ui main :is(.card-content,.lesson-content,.quiz-content,.game-content){padding:15px;gap:0}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) h3{font-size:17px;line-height:1.4}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) p{font-size:14px;line-height:1.65}
.elementary-ui main :is(.icon-box,.lesson-icon,.quiz-icon,.game-icon){width:32px;height:32px;margin-bottom:9px;font-size:14px}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) :is(.open-btn,.play-btn){font-size:12px;padding:9px 12px}
@media(max-width:520px){.elementary-ui main :is(.classroom-grid,.lessons-grid,.quiz-grid,.games-grid){grid-template-columns:minmax(0,1fr)}.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card){max-width:340px;width:100%}}
/* Classroom card artwork fills its thumbnail area edge to edge. */
.elementary-ui main :is(.classroom-card>.image-wrap,.lesson-card>.lesson-image,.quiz-card>.quiz-image,.game-card>.game-image){padding:0;overflow:hidden}
.elementary-ui main :is(.classroom-card,.lesson-card,.quiz-card,.game-card) img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;border-radius:0}