From a1368be5f04402459425bc9ebfeefabccc2c5018 Mon Sep 17 00:00:00 2001
From: Charity Helms <chelms@adobe.com>
Date: Tue, 28 Apr 2026 07:25:25 -0400
Subject: [PATCH] new style for when 1 paragraph

---
 blocks/overview/overview.css | 38 +++++++++++--------------
 blocks/overview/overview.js  | 55 ++++++++++++++++++++++++++++++++++--
 templates/mayura/mayura.css  |  3 +-
 3 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/blocks/overview/overview.css b/blocks/overview/overview.css
index e8843ef..a9f47b2 100644
--- a/blocks/overview/overview.css
+++ b/blocks/overview/overview.css
@@ -4,35 +4,29 @@
 }
 
 .overview .overview-title {
-  color: var(--text-color);
-  font-size: 21px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 30px;
-  letter-spacing: -0.6px;
   margin-bottom: var(--spacing-xs);
 }
 
 .overview .overview-para,
 .overview .overview-hiddenPara {
-  color: var(--text-color);
-  font-size: var(--body-font-size-s);
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: -0.5px;
-}
-
-.overview .overview-hiddenPara {
-  margin-top: 1rem;
+  font-size: var(--body-font-size-m);
+  line-height: 1.4;
 }
 
 .overview .overview-readMore {
-  margin-top: 1rem;
-  font-size: var(--body-font-size-s);
-  font-weight: 600;
-  color: #54565b;
+  font-size: var(--body-font-size-m);
+  color: var(--text-red-color);
+  font-weight: 500;
   cursor: pointer;
-  background-color: transparent !important;
-  padding: 0;
-  width: max-content;
 }
+
+/* Inline read more inside single truncated paragraph */
+.overview .overview-para .overview-readMore {
+  display: inline;
+  margin-left: 0;
+  user-select: none;
+}
+
+.overview .overview-para--expanded .overview-readMore {
+  margin-left: 0.25em;
+}
\ No newline at end of file
diff --git a/blocks/overview/overview.js b/blocks/overview/overview.js
index f45d991..37e5224 100644
--- a/blocks/overview/overview.js
+++ b/blocks/overview/overview.js
@@ -1,3 +1,9 @@
+const WORD_LIMIT = 34;
+
+function splitWords(text) {
+  return text.trim().split(/\s+/).filter(Boolean);
+}
+
 export default function decorate(block) {
   block.id = 'overview';
   const heading = block.querySelector('h2');
@@ -7,8 +13,53 @@ export default function decorate(block) {
   if (heading) heading.classList.add('overview-title');
   if (paragraphs[0]) paragraphs[0].classList.add('overview-para');
 
-  // If there's more than one paragraph, create hidden container and button
-  if (paragraphs.length > 1) {
+  // Single paragraph: truncate to first WORD_LIMIT words with inline Read more / Read less
+  if (paragraphs.length === 1 && paragraphs[0]) {
+    const p = paragraphs[0];
+    const words = splitWords(p.textContent);
+    if (words.length > WORD_LIMIT) {
+      const fullText = words.join(' ');
+      const truncatedText = words.slice(0, WORD_LIMIT).join(' ');
+      p.textContent = '';
+
+      const textSpan = document.createElement('span');
+      textSpan.className = 'overview-paraText';
+
+      const ellipsisSpan = document.createElement('span');
+      ellipsisSpan.className = 'overview-ellipsis';
+      ellipsisSpan.textContent = '... ';
+
+      const readMoreBtn = document.createElement('span');
+      readMoreBtn.className = 'overview-readMore';
+      readMoreBtn.setAttribute('role', 'button');
+      readMoreBtn.tabIndex = 0;
+      readMoreBtn.textContent = 'Read more';
+
+      let expanded = false;
+      const sync = () => {
+        textSpan.textContent = expanded ? fullText : truncatedText;
+        ellipsisSpan.hidden = expanded;
+        readMoreBtn.textContent = expanded ? 'Read less' : 'Read more';
+        p.classList.toggle('overview-para--expanded', expanded);
+      };
+
+      const toggle = () => {
+        expanded = !expanded;
+        sync();
+      };
+
+      readMoreBtn.addEventListener('click', toggle);
+      readMoreBtn.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          toggle();
+        }
+      });
+
+      p.append(textSpan, ellipsisSpan, readMoreBtn);
+      sync();
+    }
+  } else if (paragraphs.length > 1) {
     // Create the hidden container
     const hiddenWrapper = document.createElement('div');
     hiddenWrapper.classList.add('overview-hiddenPara');
diff --git a/templates/mayura/mayura.css b/templates/mayura/mayura.css
index 39a1aa8..640a3cd 100644
--- a/templates/mayura/mayura.css
+++ b/templates/mayura/mayura.css
@@ -167,7 +167,8 @@ body {
 
 .mayura main .cards-container h2, 
 .mayura main .cards-icon-container h2, 
-.mayura main .tabs-container h2 {
+.mayura main .tabs-container h2,
+.mayura main .overview-container h2 {
     text-align: center;
     font-style: normal; 
     font-weight: 700;