Q&A: pinned questions are featured on the home page, home cards link to the full answer, newest answer first; v2.22.1

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

src/App.css

@@ -1349,6 +1349,17 @@
   margin: 0;
 }
 
+.qa-callout-more {
+  margin-top: auto;
+  font-size: 0.85rem;
+  color: var(--brand-gold);
+  text-decoration: none;
+}
+
+.qa-callout-more:hover {
+  text-decoration: underline;
+}
+
 /* ── Home Jump Section ── */
 /* ── Truth For Life Widget ── */
 .section-tfl {

src/App.tsx

@@ -1260,6 +1260,7 @@ function HomepageQACallout() {
               <p className="qa-callout-question">"{q.question}"</p>
               <p className="qa-callout-answer">{q.answer.length > 220 ? q.answer.slice(0, 220).trimEnd() + '…' : q.answer}</p>
               {q.firstName && <p className="qa-callout-from">— {q.firstName}</p>}
+              <Link to={`/questions#qa-${q.id}`} className="qa-callout-more">Read the full answer →</Link>
             </div>
           ))}
         </div>

src/components/QuestionsAdmin.tsx

@@ -195,7 +195,7 @@ export function QuestionsAdmin({ questions, onChange }: Props) {
     <section className="admin-panel-section" aria-label="Questions and answers">
       <div className="admin-panel-head">
         <h2>Bible Questions &amp; Answers</h2>
-        <p>Work through questions from the top: write an answer, set a topic, and publish. Published answers appear on the public Q&amp;A page right away.</p>
+        <p>Work through questions from the top: write an answer, set a topic, and publish. Published answers appear on the public Q&amp;A page right away. Pinned questions show first there and are featured on the home page.</p>
       </div>
 
       <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12, alignItems: 'center' }}>
@@ -350,7 +350,7 @@ export function QuestionsAdmin({ questions, onChange }: Props) {
                     <button type="button" className="btn-admin-ghost" onClick={saveFields} disabled={busy || !dirty}>Save draft</button>
                   </>
                 )}
-                <button type="button" className="btn-admin-ghost" onClick={togglePin} disabled={busy}>{selected.pinned ? 'Unpin' : 'Pin to top'}</button>
+                <button type="button" className="btn-admin-ghost" onClick={togglePin} disabled={busy} title="Pinned questions show first on the Q&A page and are featured on the home page">{selected.pinned ? 'Unpin' : 'Pin & feature'}</button>
                 <button type="button" className="btn-admin-remove" onClick={() => remove([selected.id])} disabled={busy}>Delete</button>
                 {dirty && <span className="admin-stats-note">Unsaved changes</span>}
               </div>