From af52048ede231aa1e1516e3bf1cd3d7795d963c2 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Thu, 3 Oct 2024 16:47:49 -0600
Subject: [PATCH 1/2] fix(shs-5876): start refactoring vertical button cards to
 use other styles

---
 .../vertical-button-card.html.twig            |  9 +++-
 .../components/_vertical-button-card.scss     | 49 ++++---------------
 2 files changed, 16 insertions(+), 42 deletions(-)

diff --git a/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig b/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig
index f3e0d5d3cb..9aed1d605b 100644
--- a/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig
+++ b/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig
@@ -23,12 +23,17 @@
         {% if description %}
           <div class="hb-card__description">{{ description }}</div>
         {% endif %}
+
+        {% if button %}
+          {% set link = button.field_hs_postcard_link[0] %}
+          <a href="{{ link['#url'].toString() }}" class="hs-button">{{ link['#title'] }}</a>
+        {% endif %}
       </div>
     {% endif %}
 
-    {% if button %}
+    {# {% if button %}
       {% set link = button.field_hs_postcard_link[0] %}
       <a href="{{ link['#url'].toString() }}" class="hs-button">{{ link['#title'] }}</a>
-    {% endif %}
+    {% endif %} #}
   </div>
 </div>
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss
index e28b67f9f5..a5536f96ac 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss
@@ -2,14 +2,9 @@
   position: relative;
 
   .hb-card__graphics {
-    &, .hb-raised-cards & {
-      margin-bottom: hb-calculate-rems(32px);
-    }
-
     img {
       width: 100%;
     }
-
   }
 
   .hb-card__title:only-child {
@@ -50,6 +45,10 @@
 
     .hb-card__graphics {
       padding: hb-calculate-rems(24px) hb-spacing-width('sm') 0;
+
+      &, .hb-raised-cards & {
+        margin-bottom: hb-calculate-rems(32px);
+      }
     }
 
     .hb-card__content {
@@ -91,21 +90,8 @@
   @include hb-colorful {
     .hb-card__graphics {
       &, .hb-raised-cards & {
-        margin-top: -40%;
-
-        @include grid-media('md') {
-          .paragraph--type--hs-collection .item-per-row--2 & {
-            margin-top: -50%;
-          }
-
-          .paragraph--type--hs-collection .item-per-row--3 & {
-            margin-top: -65%;
-          }
-
-          .paragraph--type--hs-collection .item-per-row--4 & {
-            margin-top: -75%;
-          }
-        }
+        padding: 0 hb-calculate-rems(36px);
+        margin-bottom: hb-calculate-rems(-20px);
       }
     }
 
@@ -113,14 +99,11 @@
       color: var(--palette--secondary);
     }
 
-    .hb-card__content-wrapper {
-      padding: hb-calculate-rems(32px) hb-calculate-rems(36px);
+    .hb-card__content {
+      padding: hb-calculate-rems(62px) hb-calculate-rems(36px) hb-calculate-rems(32px);
       border: 2px solid var(--palette--tertiary-highlight);
       box-shadow: hb-calculate-rems(1px) hb-calculate-rems(7.5px) hb-calculate-rems(35px) color-mix(in srgb, var(--palette--black) 10%, transparent);
-
-      @include hb-themes(('airy', 'colorful')) {
-        background-color: var(--palette--white);
-      }
+      background-color: var(--palette--white);
 
       .hb-raised-cards--uniform-height & {
         height: 100%;
@@ -128,20 +111,6 @@
         flex-direction: column;
         justify-content: flex-start;
       }
-
-      .hb-card__content {
-        padding: 0;
-      }
-    }
-
-    &:has(.hb-card__graphics) {
-      padding-top: 40%;
-
-      .paragraph--type--hs-collection .item-per-row--2 &,
-      .paragraph--type--hs-collection .item-per-row--3 &,
-      .paragraph--type--hs-collection .item-per-row--4 & {
-        padding-top: 30%;
-      }
     }
 
     &:has(.hb-card__description) {

From 3dbda4f1a57f17b4290355c7ab536bc2634213f6 Mon Sep 17 00:00:00 2001
From: Mari Nez <mariannuar@gmail.com>
Date: Mon, 7 Oct 2024 11:03:28 -0600
Subject: [PATCH 2/2] fix(shs-5876): refactoring vertical button cards to use
 other styles

---
 .../vertical-button-card.html.twig            |  7 +--
 .../components/_vertical-button-card.scss     | 44 +++++++++++++++----
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig b/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig
index 9aed1d605b..997892b50c 100644
--- a/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig
+++ b/docroot/modules/humsci/hs_layouts/patterns/vertical-button-card/vertical-button-card.html.twig
@@ -8,7 +8,7 @@
       </div>
     {% endif %}
 
-    {% if title or description %}
+    {% if title or description or button %}
       <div class="hb-card__content">
         {% if title %}
           <div class="hb-card__title">
@@ -30,10 +30,5 @@
         {% endif %}
       </div>
     {% endif %}
-
-    {# {% if button %}
-      {% set link = button.field_hs_postcard_link[0] %}
-      <a href="{{ link['#url'].toString() }}" class="hs-button">{{ link['#title'] }}</a>
-    {% endif %} #}
   </div>
 </div>
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss
index a5536f96ac..25196e0841 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-button-card.scss
@@ -53,16 +53,26 @@
 
     .hb-card__content {
       padding: hb-calculate-rems(32px) hb-spacing-width('sm');
+      flex-grow: 1;
+
+      &:has(.hs-button) {
+        padding-bottom: 0;
+
+        .hb-card__description {
+          margin-bottom: hb-calculate-rems(16px);
+        }
+      }
     }
 
     .hs-button {
       @include hb-secondary-button;
 
       position: relative;
-      width: 100%;
       border-width: 0;
       border-top-width: 2px;
       margin-top: auto;
+      margin-left: hb-calculate-rems(-24px);
+      margin-right: hb-calculate-rems(-24px);
 
       // Warbler color pairing override.
       .ht-pairing-warbler & {
@@ -79,19 +89,13 @@
         padding-top: 0;
       }
     }
-
-    &:has(.hs-button) {
-      .hb-card__content {
-        padding-bottom: hb-calculate-rems(16px);
-      }
-    }
   }
 
   @include hb-colorful {
     .hb-card__graphics {
       &, .hb-raised-cards & {
         padding: 0 hb-calculate-rems(36px);
-        margin-bottom: hb-calculate-rems(-20px);
+        margin-bottom: hb-calculate-rems(-40px);
       }
     }
 
@@ -100,7 +104,7 @@
     }
 
     .hb-card__content {
-      padding: hb-calculate-rems(62px) hb-calculate-rems(36px) hb-calculate-rems(32px);
+      padding: hb-calculate-rems(32px) hb-calculate-rems(36px);
       border: 2px solid var(--palette--tertiary-highlight);
       box-shadow: hb-calculate-rems(1px) hb-calculate-rems(7.5px) hb-calculate-rems(35px) color-mix(in srgb, var(--palette--black) 10%, transparent);
       background-color: var(--palette--white);
@@ -111,6 +115,28 @@
         flex-direction: column;
         justify-content: flex-start;
       }
+
+      .hb-raised-cards & {
+        padding: hb-calculate-rems(32px) hb-calculate-rems(36px);
+      }
+    }
+
+    &:has(.hb-card__graphics) {
+      .hb-card__content {
+        padding-top: hb-calculate-rems(62px);
+
+        .hb-raised-cards & {
+          padding-top: hb-calculate-rems(62px);
+        }
+      }
+    }
+
+    .hb-card__content-wrapper {
+      .hb-raised-cards--uniform-height & {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+      }
     }
 
     &:has(.hb-card__description) {