Merge branch 'main' into gnav

# Conflicts:
#	express/styles/styles.css

express/blocks/ax-columns/ax-columns.css

@@ -31,7 +31,7 @@
   gap: 40px;
 }
 
-.ax-columns:not(.extra-wide):first-child {
+.ax-columns:not(.extra-wide):first-child:not(:empty) {
   padding-top: 60px;
 }
 
@@ -625,7 +625,7 @@
   width: 46%;
 }
 
-.ax-columns.columns.color > div {
+.ax-columns.color > div {
   padding: 80px 0 0 0;
   gap: 15px;
 }

express/blocks/ax-columns/ax-columns.js

@@ -28,6 +28,14 @@ import {
 
 const { createTag, getMetadata } = await import(`${getLibs()}/utils/utils.js`);
 
+function replaceHyphensInText(area) {
+  [...area.querySelectorAll('h1, h2, h3, h4, h5, h6')]
+    .filter((header) => header.textContent.includes('-'))
+    .forEach((header) => {
+      header.textContent = header.textContent.replace(/-/g, '\u2011');
+    });
+}
+
 function transformToVideoColumn(cell, aTag, block) {
   const parent = cell.parentElement;
   const title = aTag.textContent.trim();
@@ -153,7 +161,30 @@ const handleVideos = (cell, a, block, thumbnail) => {
   });
 };
 
+const extractProperties = (block) => {
+  const allProperties = {};
+  const rows = Array.from(block.querySelectorAll(':scope > div')).slice(0, 3);
+
+  rows.forEach((row) => {
+    const content = row.innerText.trim();
+    if (content.includes('linear-gradient')) {
+      allProperties['card-gradient'] = content;
+      row.remove();
+    } else if (content.includes('text-color')) {
+      allProperties['card-text-color'] = content.replace(/text-color\(|\)/g, '');
+      row.remove();
+    } else if (content.includes('background-color')) {
+      allProperties['background-color'] = content.replace(/background-color\(|\)/g, '');
+      row.remove();
+    }
+  });
+
+  return allProperties;
+};
+
 export default async function decorate(block) {
+  if (document.body.dataset.device === 'mobile') replaceHyphensInText(block);
+  const colorProperties = extractProperties(block);
   splitAndAddVariantsWithDash(block);
   decorateSocialIcons(block);
   decorateButtonsDeprecated(block, 'button-xxl');
@@ -182,6 +213,15 @@ export default async function decorate(block) {
       const aTag = cell.querySelector('a');
       const pics = cell.querySelectorAll(':scope picture');
 
+      // apply custom gradient and text color to all columns cards
+      const parent = cell.parentElement;
+      if (colorProperties['card-gradient']) {
+        parent.style.background = colorProperties['card-gradient'];
+      }
+      if (colorProperties['card-text-color']) {
+        parent.style.color = colorProperties['card-text-color'];
+      }
+
       if (cellNum === 0 && isNumberedList) {
         // add number to first cell
         let num = rowNum + 1;
@@ -298,11 +338,14 @@ export default async function decorate(block) {
     );
   }
 
+  // add custom background color to columns-highlight-container
+  const sectionContainer = block.closest('.section');
+  if (sectionContainer && colorProperties['background-color']) {
+    sectionContainer.style.background = colorProperties['background-color'];
+  }
+
   // invert buttons in regular columns inside columns-highlight-container
-  if (
-    block.closest('.section.columns-highlight-container')
-    && !block.classList.contains('highlight')
-  ) {
+  if (sectionContainer && !block.classList.contains('highlight')) {
     block.querySelectorAll('a.button, a.con-button').forEach((button) => {
       button.classList.add('dark');
     });

express/blocks/banner/banner.css

@@ -110,7 +110,8 @@ main .banner h2 {
   border-radius: 12px;
 }
 
-.banner .standout-container strong {
+.banner .standout-container em {
+  font-style: normal;
   background: linear-gradient(180deg, #FF4DD2 20%, #FF993B 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

express/blocks/browse-by-category/browse-by-category.css

@@ -15,6 +15,7 @@ main .browse-by-category .carousel-container .carousel-platform {
 main .browse-by-category.card .carousel-container .carousel-platform {
   gap: 14px;
   margin: 6px 0 0 0;
+  padding-left: 20px;
 }
 
 main .browse-by-category .carousel-container .button.carousel-arrow {

express/blocks/cards/cards.css

@@ -0,0 +1,195 @@
+main .section:has(.card) {
+  background-color: #F1F3F4;
+  padding-top: 80px;
+}
+
+main .section:has(.cards.highlight) {
+  padding-top: 60px;
+  padding-left: 15px;
+  padding-bottom: 120px;
+  padding-right: 15px;
+}
+
+main .section:has(.card) > div > h2:first-of-type {
+  margin-top: 80px;
+}
+
+main .section:has(.card) .content {
+  margin: auto;
+  max-width: 375px;
+  padding: 0;
+}
+
+main .section:has(.cards.highlight) {
+  background: var(--gradient-highlight-vertical);
+}
+
+main .section .cards {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 56px auto;
+  max-width: 375px;
+}
+
+main .section .cards .card {
+  background-color: #FFF;
+  width: 100%;
+  margin: 0 auto 16px auto;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+main .section .cards .card .card-image {
+  box-sizing: border-box;
+  border-radius: 20px 20px 0 0;
+  min-height: 136px;
+}
+
+main .section .cards .card .card-image img {
+  border-radius: 20px 20px 0 0;
+}
+
+
+main .section .cards .card .card-content {
+  padding: 32px 32px 8px 32px;
+  color: #232323;
+}
+
+main .section .cards .card .card-content h2 {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+main .section .cards .card .card-content p {
+  margin-top: 0;
+}
+
+main .section .cards .card .card-content ul {
+  text-align: left;
+}
+
+main .section .cards.dark .card {
+  background-color: #000;
+}
+
+main .section .cards a.card {
+  text-decoration: none;
+}
+
+main .section .cards.dark .card .card-content {
+  color: #FFF;
+}
+
+main .section .cards.dark .card .card-image {
+  background-color: #343434;
+}
+
+main .section .cards.large {
+  gap: 32px;
+}
+
+main .section .cards.large .card {
+  margin: 0 auto;
+}
+
+main .section .cards.large .card .card-content {
+  padding: 32px 32px 8px 32px;
+}
+
+main .section .cards.large .card .card-content h2 {
+  text-align: left;
+  font-size: 1.375rem;
+  line-height: 1.1;
+  margin-bottom: 32px;
+}
+
+main .section .cards.large .card .card-content p,
+main .section .cards.large .card .card-content li {
+ text-align: left;
+  font-size: 1.125rem;
+}
+
+@media (min-width: 600px) {
+  main .section .cards .card {
+    width: 344px;
+  }
+}
+
+@media (min-width:900px) {
+  main .section:has(.card) .content {
+    max-width: 830px;
+  }
+
+  main .section .cards {
+    max-width: 1024px;
+    width: unset;
+    margin: 80px auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  main .section .cards .card {
+    width: 248px;
+    margin-right: 32px;
+    background-color: #FFF;
+    box-shadow: 0 4px 8px 2px rgba(102, 102, 102, 0.1);
+    margin: 0 20px 32px 20px;
+  }
+
+  main .section .cards .card .card-image {
+    background-color: #F1F3F4;
+  }
+
+  main .section .cards .card .card-content {
+    padding: 16px 16px 8px 16px;
+  }
+
+  main .section .cards .card .card-content h2 {
+    text-align: center;
+    font-size: 1.25rem;
+    line-height: 1.2;
+    margin-bottom: 8px;
+  }
+
+  main .section .cards .card .card-content p,
+  main .section .cards .card .card-content li {
+    font-size: 0.9rem;
+  }
+
+  main .section .cards.large {
+    flex-wrap: wrap;
+    gap: 40px;
+    width: 724px;
+  }
+
+  main .section .cards.large .card {
+    width: 342px;
+  }
+
+  main .section .cards.featured .card:first-of-type {
+    width: 724px;
+    flex-direction: row;
+  }
+
+  main .section .cards.featured .card:first-of-type .card-image {
+    border-top-left-radius: 20px;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 20px;
+    min-height: unset;
+    min-width: 342px;
+  }
+
+  main .section .cards.featured .card:first-of-type .card-content {
+    padding: 32px 40px 8px 40px;
+    min-height: 294px;
+  }
+}
+
+@media (min-width:1200px) {
+  main .section:has(.card) .content {
+    max-width: unset;
+  }
+}

express/blocks/cards/cards.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-unresolved
+import { getLibs } from '../../scripts/utils.js';
+import { decorateButtonsDeprecated } from '../../scripts/utils/decorate.js';
+
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+/**
+ * @param {HTMLDivElement} $block
+ */
+export default function decorate($block) {
+  decorateButtonsDeprecated($block);
+  $block.querySelectorAll(':scope>div').forEach(($card) => {
+    $card.classList.add('card');
+    const $cardDivs = [...$card.children];
+    $cardDivs.forEach(($div) => {
+      if ($div.querySelector('img')) {
+        $div.classList.add('card-image');
+      } else {
+        $div.classList.add('card-content');
+      }
+      const $a = $div.querySelector('a');
+      if ($a && $a.textContent.trim().startsWith('https://')) {
+        const $wrapper = createTag('a', { href: $a.href, class: 'card' });
+        $a.remove();
+        $wrapper.innerHTML = $card.innerHTML;
+        $block.replaceChild($wrapper, $card);
+      }
+    });
+  });
+}