.lesson-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 880px) { .lesson-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1300px) { .lesson-grid { grid-template-columns: 1fr 1fr 1fr; } }
.lesson-card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:22px 22px 28px; transition: box-shadow .25s ease, transform .25s ease; position:relative; overflow:hidden; }
.lesson-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background: linear-gradient(90deg, var(--brown-dark), var(--brown)); }
.lesson-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.lesson-title { font-size:1.15rem; font-weight:700; margin:4px 0 14px; }
.meta { display:grid; grid-template-columns: 86px 1fr; gap:10px 16px; }
.meta dd { margin:0; }
.date-list { display:flex; flex-wrap:wrap; gap:10px; }
.date-pill { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color: var(--brown-dark); background:#fff; border:1px solid var(--brown-dark); padding:7px 14px; border-radius:999px; transition:.2s; }
.date-pill .dot { width:7px; height:7px; background: var(--brown-dark); border-radius:50%; transition:.2s; }
.date-pill:hover { background:#f8f1ea; color: var(--brown); border-color: var(--brown); transform: translateY(-1px); }
.date-pill:hover .dot { background: var(--brown); }
.hr { border:0; border-top:1px dashed var(--border); margin:15px 0; }
.small { color: var(--muted); }