/* Cards for the landing pages: grade cards on the root page, unit cards on each grade page. Load after theme.css. */

/* root page: one card per grade */
.grade-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* a second list under the grades (Math Facts on the root page) gets the same gap the cards have */
.grade-list + .grade-list{margin-top:16px}
.grade-card{display:grid;gap:8px;align-content:start;height:100%;padding:20px;border-radius:14px;text-decoration:none;color:inherit;
  background:var(--sheet);border:1px solid rgba(170,205,255,.25);transition:background .15s,transform .15s}
.grade-card:hover{background:var(--sheet2);transform:translateY(-2px)}
.grade-card h2{font:800 26px/1.05 var(--display);margin:0}
.grade-card p{margin:0;color:var(--dim)}
.grade-card .go{font:700 13px/1 var(--mono);color:var(--gold);margin-top:6px}

/* grade page: one card per unit, with Learn and Play links (and a Study guide link where there is one), or "Coming soon" */
.unit-list{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.unit-card{display:grid;gap:8px;align-content:start;height:100%;padding:20px;border-radius:14px;
  background:var(--sheet);border:1px solid rgba(170,205,255,.25)}
.unit-card h2{font:800 26px/1.05 var(--display);margin:0}
.unit-card h2 small{display:block;font:700 15px/1.3 var(--body);color:var(--dim);margin-top:4px}
.unit-card p{margin:0;color:var(--dim)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.links a{font:700 13px/1 var(--mono);text-decoration:none;padding:10px 14px;border-radius:999px;transition:background .15s}
.links .play{color:#1a1300;background:var(--gold)}
.links .play:hover{background:#ffd866}
.links .learn{color:var(--cyan);border:1.5px solid rgba(127,227,255,.55)}
.links .learn:hover{background:rgba(127,227,255,.12)}
/* a printable study guide for the unit (unitN/study.html), where there is one */
.links .study{color:var(--chalk);border:1.5px dashed rgba(243,246,251,.5)}
.links .study:hover{background:rgba(243,246,251,.1)}
.unit-card.soon{background:transparent;border-style:dashed}
.unit-card.soon h2{color:var(--dim)}
.unit-card .tag{font:700 13px/1 var(--mono);color:var(--dim);margin-top:8px}