Fix cta mode decoration

Author: alexcarol

eds/blocks/call-to-action/call-to-action.js

@@ -4,9 +4,10 @@ import { div } from '../../scripts/dom-helpers.js';
 function decorateBlockSectionMode(block) {
   block.classList.forEach((className) => {
     if (className.startsWith('calcite-mode-')) {
+      const mode = className.split('-')[2];
       block.closest('.section')
         .classList
-        .add(className);
+        .add(className, mode);
     }
   });
 }

eds/styles/styles.css

@@ -32,7 +32,7 @@
   --esri-ui-opacity97-inverse: rgb(255 255 255/ 97%);
 
   /* icon filters */
-  --image-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(10%) saturate(19%) hue-rotate(330deg) brightness(93%) contrast(91%); 
+  --image-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(10%) saturate(19%) hue-rotate(330deg) brightness(93%) contrast(91%);
   --image-icon-filter-brand: brightness(0) saturate(100%) invert(30%) sepia(98%) saturate(1143%) hue-rotate(177deg) brightness(95%) contrast(101%);
 
   -webkit-font-smoothing: antialiased;
@@ -334,6 +334,11 @@ main {
     color: var(--calcite-ui-text-1);
   }
 
+  .section.dark {
+    background-color: var(--calcite-ui-foreground-1);
+    color: var(--calcite-ui-text-1);
+  }
+
   .video-iframe-box {
     align-items: center;
     background-color: var(--esri-ui-opacity80);
@@ -523,4 +528,4 @@ main {
 
 .padding-trailer-6 {
 	padding-block-end: 9rem;
-}
+}