/*
-------------------------------------------------------------------------------------------------------------------------
CTA CARD - SIMPLE TWO COLUMN - On one side: Heading, body copy and on other: button aligned 
- - Style the button according to global requirements
*/

.card-cta-simple {
  --pagewidthsize: calc(100vw-4rem); /* should be in globals when used */
  --cnrradius: 2rem; /* should be in globals when used */
  display:flex;
  align-items:center;
  gap:4rem;
  flex-direction:row;
  width: var(--pagewidthsize);
  padding: 4rem;
  margin: 0 auto;
  border-radius: var(--cnrradius);
  background-color: #e6edf3;
}

.card-cta-simple-content-text {
  display:flex;
  flex-direction:column;
  align-items:left;
}
.card-cta-simple-content-button {
  display:flex;
  flex-direction:row;
  align-items:center;
  background-color: pink;
}

.card-cta-simple h3 { /* custom styling for heading */
    color:grey;
}
.card-cta-simple p { /* custom styling for body text */
  color:blue;
}


/*
-------------------------------------------------------------------------------------------------------------------------
IMAGE CARD TYPE ONE - Simple Picture + Heading - STYLE A & B: A: Image fills bottom, heading on top and B: vice-versa.
IMAGE CARD TYPE TWO - Breakdance "Image Box" - - Picture + Heading + Text + Link - STYLE A & B: A - Image fills bottom, heading on top and B - vice-versa.
Theme - Light or Dark :: Modify to suit
*/

.cards {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  width: 100%;
}
.cards > * {
    --cnrradius: 2rem;
    max-width: 25%;
    border-radius: var(--cnrradius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cards img {
    object-fit: contain !important;
    height: auto;
}

/* target the p tag after the h tag */
.cards :is(h1,h2,h3,h4) + p {
    flex: 1;
    font-size: 1.2em;
    text-align: left;
    font-weight: 400;
    padding: 2rem 2rem 1rem;
}

/* NB: The link text/Arrow is based on Project card link and uses same variables! */

.cards .button-text-arrow {  /* NB set variables if you copy to another project */
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 1.2em;
  padding: 2rem;
  font-weight: 700;
  transition: gap var(--transition-duration) calc(.25 * var(--transition-duration)) ease;
  }
  
.cards .light .button-text-arrow {  
  color: #50809a !important;
  }
.cards .dark .button-text-arrow {  
  color: #68a3c3 !important;
  }  
      
.cards .button-text-arrow:hover {
  gap: 0;
  transition: gap var(--transition-duration) calc(.25 * var(--transition-duration)) ease;
  }
  
.cards .light .button-text-arrow:hover { /*brighten the colors for dark background */
  color: #a2c52a !important;
  }
  
.cards .dark .button-text-arrow:hover {
  color: #c1e83b !important;
  }  

.button-text-arrow::after {
  content: '→';
  font-weight: 700;
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity 0.3s, transform .3s;
  }

.button-text-arrow:hover::after {
  opacity: 1;
  transform: translateX(0.5rem);
  }

  /* Card Theme - Dark or Light  */
  
  .light {
    color:#50809a;
    background-color: white;
  }
  
  .light h4 {
    font-size: 2em;
    text-align: left;
    font-weight: 700;
    padding: 2rem 2rem 1rem;
  }
  
  .light p {
    font-size: 1.2em;
    text-align: left;
    font-weight: 700;
    padding: 2rem 2rem;
  }
  
  .dark {
    color:#C7C7C7;
    background-color: #2D2D2F;
  }
  
  .dark h4 {
    font-size: 2em;
    text-align: left;
    font-weight: 700;
    padding: 2rem 2rem 1rem;
  }
  
  .dark p {
    font-size: 1.2em;
    text-align: left;
    font-weight: 700;
    padding: 2rem 2rem 1rem;
  }