/* Local review draft: photo-card treatment for Lessons 9-18. */
.topic-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.topic-card{padding:0;overflow:hidden;display:flex;flex-direction:column;color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.topic-card:hover{transform:translateY(-4px);border-color:#b8cbd5;box-shadow:0 16px 35px rgba(16,47,73,.12)}
.topic-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.topic-card-body{display:flex;flex:1;flex-direction:column;padding:22px}
.topic-card>.lesson-number{margin:22px 22px 0;align-self:flex-start}
.topic-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.topic-target{color:var(--muted);font-size:.78rem;font-weight:700;text-align:right}
.topic-card h2{margin:16px 0 7px;font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1.2rem;line-height:1.55}
.topic-card .topic-en{margin:0 0 20px;color:var(--muted);font-family:Georgia,serif;font-size:.94rem;line-height:1.45}
.topic-thumbnail{position:relative;aspect-ratio:16/9;overflow:hidden;background:#d9e5e9}
.topic-thumbnail::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(10,31,48,.52));pointer-events:none}
.topic-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.topic-card:hover .topic-thumbnail img{transform:scale(1.035)}
.topic-thumbnail .lesson-number{position:absolute;z-index:1;left:14px;top:14px;margin:0;background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(10,31,48,.18)}
@media(max-width:620px){.topic-grid{gap:16px}.topic-card-body{padding:18px}.topic-card h2{font-size:1.08rem}.topic-thumbnail{aspect-ratio:3/2}.topic-card:hover{transform:none}}

/* Published image-only cards with level-specific numbering. */
.topic-card.has-thumbnail{border:0;border-radius:18px;background:#2c241d;box-shadow:0 8px 22px rgba(25,49,67,.12)}
.topic-card.has-thumbnail .topic-thumbnail{aspect-ratio:16/9}
.topic-card.has-thumbnail .topic-thumbnail::after{display:none}
.topic-card.has-thumbnail .lesson-number{left:16px;top:16px;display:inline-flex;align-items:center;min-height:50px;padding:8px 17px;border:3px solid #fff;border-radius:11px;color:#fff;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:950;line-height:1;box-shadow:0 4px 13px rgba(0,0,0,.28)}
.topic-card.level-beginner .lesson-number{background:#b44a21}
.topic-card.level-intermediate .lesson-number{background:#176b87}
.topic-card.level-advanced .lesson-number{background:#123a5a}
@media(max-width:620px){.topic-card.has-thumbnail .topic-thumbnail{aspect-ratio:16/9}.topic-card.has-thumbnail .lesson-number{left:10px;top:10px;min-height:44px;padding:7px 13px;border-width:2px}}

/* Group the public index by level instead of creation order. */
.topic-grid{display:block}
.level-group{margin:0 0 42px}
.level-group-heading{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;padding:0 2px 10px;border-bottom:3px solid #d9e5e9}
.level-group-heading h2{margin:0;color:var(--navy);font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:1.65rem;line-height:1.3}
.level-group-heading span{color:var(--muted);font-size:.9rem;font-weight:750}
.level-group-beginner .level-group-heading{border-color:#d98969}
.level-group-intermediate .level-group-heading{border-color:#62a9bd}
.level-group-advanced .level-group-heading{border-color:#527895}
.level-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:980px){.level-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.level-group{margin-bottom:32px}.level-group-heading h2{font-size:1.4rem}.level-group-grid{grid-template-columns:1fr;gap:16px}}