From b7aecf43605c64df0096399b0eb8b40c074d3b2f Mon Sep 17 00:00:00 2001
From: fkakatie <ksexton@adobe.com>
Date: Fri, 26 Jun 2026 22:48:23 -0600
Subject: [PATCH 1/3] feat: wrap dark banner in two-col columns block

---
 tools/import/transform-page.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/tools/import/transform-page.js b/tools/import/transform-page.js
index 24372a5..1e993db 100644
--- a/tools/import/transform-page.js
+++ b/tools/import/transform-page.js
@@ -341,7 +341,7 @@ function carouselBlock($car) {
   return `<div class="carousel">${rows.join("")}</div>`;
 }
 
-// teaser--banner -> default content (heading/text/CTA) for a dedicated dark section
+// teaser--banner -> columns block (heading+text | CTA) for a dedicated dark section
 function bannerSectionContent($t) {
   const h = $t.find(".teaserHeading").first().text().trim();
   const seen = new Set();
@@ -351,9 +351,11 @@ function bannerSectionContent($t) {
     if (t && !/^\d{4}-\d{2}-\d{2}$/.test(t) && !seen.has(t)) { seen.add(t); ps.push(t); }
   });
   const cta = teaserCTA($t);
-  const parts = [`<h2>${h}</h2>`, ...ps.map((p) => `<p>${p}</p>`)];
-  if (cta && cta.text) parts.push(`<p><a href="${cta.href}">${cta.text}</a></p>`);
-  return parts.join("");
+  const textCol = [`<h2>${h}</h2>`, ...ps.map((p) => `<p>${p}</p>`)].join("");
+  if (cta && cta.text) {
+    return `<div class="columns"><div><div>${textCol}</div><div><p><a href="${cta.href}">${cta.text}</a></p></div></div></div>`;
+  }
+  return textCol;
 }
 
 // multimedia / media-youtube slider -> default content:

From 4883bf126165d8209e03bde37c432faca8148207 Mon Sep 17 00:00:00 2001
From: fkakatie <ksexton@adobe.com>
Date: Fri, 26 Jun 2026 22:49:57 -0600
Subject: [PATCH 2/3] feat: add action variant to columns block

---
 blocks/columns/columns.css | 30 ++++++++++++++++++++++++++++++
 blocks/columns/columns.js  | 25 +++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
index 1a9bf59..a7f5f2e 100644
--- a/blocks/columns/columns.css
+++ b/blocks/columns/columns.css
@@ -106,6 +106,36 @@
   }
 }
 
+/* action variant */
+.columns.action .action-wrapper .button {
+  width: 100%;
+}
+
+.columns.action .body-wrapper h1::after,
+.columns.action .body-wrapper h2::after,
+.columns.action .body-wrapper h3::after,
+.columns.action .body-wrapper h4::after,
+.columns.action .body-wrapper h5::after,
+.columns.action .body-wrapper h6::after {
+  content: none;
+}
+
+@media (width >= 600px) {
+  .columns.action > div {
+    display: flex;
+  }
+
+  .columns.action .action-wrapper {
+    flex: 0 0 max-content;
+    align-self: self-end;
+  }
+
+  .columns.action .action-wrapper .button {
+    width: unset;
+    min-width: 200px;
+  }
+}
+
 /* portrait variant */
 .columns.portrait .media-wrapper {
   min-height: unset;
diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js
index aca01ab..8131bc2 100644
--- a/blocks/columns/columns.js
+++ b/blocks/columns/columns.js
@@ -24,6 +24,29 @@ function optimizeImages(block) {
   });
 }
 
+/**
+ * Marks body-only blocks whose last column is links-only with `action` and `action-wrapper`.
+ * @param {Element} block The columns block element
+ */
+function detectAction(block) {
+  const rows = [...block.children];
+  if (!rows.length) return;
+  const matches = rows.every((row) => {
+    const cols = [...row.children];
+    if (cols.some((col) => col.classList.contains('media-wrapper'))) return false;
+    const last = cols[cols.length - 1];
+    return [...last.children].every(
+      (el) => el.tagName === 'P' && el.children.length === 1 && el.firstElementChild.tagName === 'A',
+    );
+  });
+  if (!matches) return;
+  block.classList.add('action');
+  rows.forEach((row) => {
+    const last = row.children[row.children.length - 1];
+    last.classList.replace('body-wrapper', 'action-wrapper');
+  });
+}
+
 /** @param {Element} block */
 export default function decorate(block) {
   [...block.children].forEach((row) => {
@@ -35,6 +58,8 @@ export default function decorate(block) {
     if (row.querySelector('.media-wrapper')) row.dataset.row = 'media';
   });
 
+  detectAction(block);
+
   const colCount = getColCount(block);
   if (colCount && ![...block.classList].some((c) => c.startsWith('cols-'))) {
     block.classList.add(`cols-${colCount}`);

From bf3bc13d81d2fc81701609bf0ac80de6e2f0b1c5 Mon Sep 17 00:00:00 2001
From: fkakatie <ksexton@adobe.com>
Date: Fri, 26 Jun 2026 22:50:19 -0600
Subject: [PATCH 3/3] fix: invert button styles in dark sections

---
 styles/styles.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/styles/styles.css b/styles/styles.css
index c947c8a..a07b268 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -531,6 +531,38 @@ main > .section.dark:has(+ .section.dark) {
   margin-bottom: 0;
 }
 
+main .section.dark a.button.primary,
+main .section.dark button.button.primary {
+  border-color: var(--color-bg);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+main .section.dark a.button.primary:hover,
+main .section.dark a.button.primary:focus-visible,
+main .section.dark button.button.primary:hover,
+main .section.dark button.button.primary:focus-visible {
+  border-color: var(--color-bg-light);
+  background-color: var(--color-bg-light);
+  color: var(--color-muted);
+}
+
+main .section.dark a.button.secondary,
+main .section.dark button.button.secondary {
+  border-color: var(--color-bg);
+  background-color: transparent;
+  color: var(--color-bg);
+}
+
+main .section.dark a.button.secondary:hover,
+main .section.dark a.button.secondary:focus-visible,
+main .section.dark button.button.secondary:hover,
+main .section.dark button.button.secondary:focus-visible {
+  border-color: var(--color-bg-light);
+  background-color: transparent;
+  color: var(--color-bg-light);
+}
+
 @media (width >= 900px) {
   main .section.light,
   main .section.dark {