Studies: add a cover image setting, used as the backdrop of the featured study card on the homepage; v2.36.0

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/AdminPage.tsx

@@ -6001,6 +6001,13 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
                             <label htmlFor={`study-description-${activeStudy.id}`}>Description</label>
                             <textarea id={`study-description-${activeStudy.id}`} rows={3} value={activeStudy.description} placeholder="Brief description for the study hub card" onChange={e => updateStudyProgram(activeStudy.id, 'description', e.target.value)} />
                           </div>
+                          <div className="admin-field">
+                            <label htmlFor={`study-image-${activeStudy.id}`}>Cover Image URL</label>
+                            <input id={`study-image-${activeStudy.id}`} type="text" value={activeStudy.imageUrl ?? ''} placeholder="/uploads/study-cover.jpg" onChange={e => updateStudyProgram(activeStudy.id, 'imageUrl', e.target.value)} />
+                            {renderImageAssetSelector(activeStudy.imageUrl ?? '', value => updateStudyProgram(activeStudy.id, 'imageUrl', value), `study-image-${activeStudy.id}-asset`)}
+                            {renderImagePreview(activeStudy.imageUrl ?? '', `${activeStudy.title || 'Study'} cover`)}
+                            <p className="admin-field-help">Shown as the backdrop of this study&rsquo;s featured card on the homepage. A wide or square image works best.</p>
+                          </div>
                           <div className="admin-field">
                             <label htmlFor={`study-home-eyebrow-${activeStudy.id}`}>Homepage Card Eyebrow</label>
                             <input id={`study-home-eyebrow-${activeStudy.id}`} type="text" value={activeStudy.homepageEyebrow ?? ''} placeholder="New Study" onChange={e => updateStudyProgram(activeStudy.id, 'homepageEyebrow', e.target.value)} />