annoucments

src/colossiansStudy.tsx

@@ -1639,6 +1639,15 @@ export function ColossiansStudySectionPage({ content }: Props) {
 
   return (
     <main className="study-section-page" aria-label={section.title}>
+      {section.announcement && (
+        <div className="study-lesson-announcement-banner" role="alert">
+          <span className="study-lesson-announcement-icon" aria-hidden="true">📢</span>
+          <div className="study-lesson-announcement-body">
+            <strong className="study-lesson-announcement-label">Announcement</strong>
+            <p className="study-lesson-announcement-text">{section.announcement}</p>
+          </div>
+        </div>
+      )}
       <section className="section-study-classroom" onContextMenu={handleLessonContentContextMenu}>
         <div className="section-inner study-classroom-shell">
           <div className="study-classroom-main">
@@ -1648,13 +1657,6 @@ export function ColossiansStudySectionPage({ content }: Props) {
             <p className="study-detail-reference">{section.reference}</p>
             <p className="study-detail-summary">{section.summary}</p>
 
-            {section.announcement && (
-              <article className="study-class-block" style={{ backgroundColor: '#1c1b17', border: '1px solid #3f3b2f' }}>
-                <h2>Lesson Announcement</h2>
-                <p className="study-detail-copy">{section.announcement}</p>
-              </article>
-            )}
-
             {lessonAudioEmbedUrl && (
               <article className="study-class-block">
                 <h2>Lesson Audio</h2>
@@ -1679,7 +1681,13 @@ export function ColossiansStudySectionPage({ content }: Props) {
 
             <article className="study-class-block">
               <h2>Instructor Commentary</h2>
-              <p className="study-detail-copy">{section.commentary}</p>
+              {section.commentary.split(/\n{2,}/).map((para, i) => (
+                <p key={i} className="study-detail-copy">
+                  {para.split('\n').map((line, j, arr) => (
+                    j < arr.length - 1 ? <>{line}<br /></> : line
+                  ))}
+                </p>
+              ))}
             </article>
 
             <article className="study-class-block">