{% scope_css %}

/* --- NEW CSS for the main container (Desktop styles >= 1000px) --- */
.info-cards__container {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; /* 20px gap between cards on desktop */
}

.info-cards__entry {
    /* Forces each card to take up exactly 50% of the container width minus half the gap */
    flex: 1 1 calc(50% - 10px); 
    display: flex;
    flex-direction: column;
    border: 2px solid #000; 
    border-radius: 12px; 
    padding: 40px;
    margin-bottom: 0; 
  position: relative;
}

}

/* --- Mobile Styles: Cards Stack Vertically Under 1000px --- */
@media (max-width: 999px) {
    .info-cards__container {
        /* On mobile, stack them naturally (flex-direction: column is default) */
        gap: 20px; /* Maintain vertical gap on mobile */
    }
    
    .info-cards__entry {
        /* Make each card take up the full available width */
        flex: 1 1 100%; 
        width: 100%;
    }

    /* Adjust padding for inner content on mobile if necessary */
    .info-cards__inner > *:not(.info-cards__row),
    .info-cards__inner .hs-richtext,
    .info-cards__inner p {
        padding-right: 20px; /* Reduced padding for mobile screens */
    }
}


/* --- END NEW CSS --- */


.info-cards__header {
  font: "degular-display";
  display: flex;
  font-weight: 500;
  justify-content: space-between;
  align-items: center;
  line-height: inherit;
  letter-spacing: inherit;
  margin-bottom: 15px; 
}

.info-cards__header h3 {
  margin: 0; 
  padding: 0;
}

.info-cards__description-static {
  Padding-bottom: 10px; 
}

.info-cards__inner {
  padding-bottom: 20px;
}

/* Original padding for standard screens (over 1000px) - handled by media query above now */
@media (min-width: 1000px) {
    .info-cards__inner > *:not(.info-cards__row),
    .info-cards__inner .hs-richtext,
    .info-cards__inner p {
        padding-right: 80px; 
    }
}

/* Color modifier class for light backgrounds (overrides default to white if needed) */
.info-cards-color-light .info-cards__entry {
  border: 2px solid rgba(255,255,255,0.9);
}
.info-cards-color-light * {
  color: #fff !important;
}

/* Container for the new layout row using modern flexbox (the 70/30 split inside the card) */
.info-cards__row {
  display: flex;
  justify-content: space-between;
  gap: 0px; 
  margin-top: 1rem;
  margin-bottom: 0rem;
  flex-wrap: wrap; 
}

.info-cards__column {
  /* Default mobile behavior for the inner columns: stack vertically (100% width) */
  flex-basis: 100%; 
  width: 100%;
}

/* THE FIX FOR FIELD A & B STAYING NEXT TO EACH OTHER */
.info-cards__richtext-wrapper {
  width: 100%;
  display: flex; 
  flex-wrap: wrap; 
  gap: 25px; 
}

.info-cards__richtext-wrapper .hs-richtext {
    flex: 1 1 calc(50% - 12.5px); 
    padding-right: 0 !important; 
    margin-bottom: 0;
}

@media (min-width: 768px) {
  .info-cards__column--70 {
    flex-basis: 70%;
    width: 70%;
  }

  .info-cards__column--30 {
    flex-basis: 30%;
    width: 30%;
    align-self: flex-end;
    text-align: right;
  }
}

/* --- BUTTON STYLING (Updated) --- */

/* Wrapper for the button link/div */
.info-cards__button-link-wrapper {
    text-decoration: none; 
    display: inline-block;
    cursor: pointer;
  margin-top: auto;
  position: absolute;
  bottom: 40px;   /* aligns with existing 40px padding */
  right: 40px;    /* keeps your original right alignment */
}

.info-cards__inner {
    flex-grow: 1;
}


/* The inner DIV that gets the visual styling */
.info-cards__button-link {
    display: block;
    padding: 5px 10px;
    background-color: transparent; 
    border: 1px solid #000; 
    border-radius: 4px; 
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Styling the paragraph tag inside the button link */
.info-cards__button-link p {
    color: #000 !important; 
    font-size: 16px !important; 
    margin: 0 !important; 
    padding: 0 !important;
    line-height: normal !important;
}

/* >>> New Hover Styling <<< */
.info-cards__button-link-wrapper:hover .info-cards__button-link {
    background-color: #000;   
}

.info-cards__button-link-wrapper:hover .info-cards__button-link p {
    color: #fff !important;             
}
/* --- Mobile Styles: Cards Stack Vertically Under 1000px --- */
@media (max-width: 999px) {
    .info-cards__container {
        /* Force vertical stacking */
        flex-direction: column; 
        gap: 20px;
    }
    
    .info-cards__entry {
        /* Override the 50% desktop width to 100% */
        flex: 1 1 100% !important; 
        width: 100% !important;
        /* Reset padding for smaller screens if it feels too cramped */
        padding: 30px 20px; 
    }

    /* Ensure the button doesn't overlap text on small heights */
    .info-cards__button-link-wrapper {
        position: relative; /* Switch from absolute to relative */
        bottom: 0;
        right: 0;
        margin-top: 20px;
        align-self: flex-start; /* Aligns button to the left on mobile */
    }

    /* Fix for the internal 70/30 split to also stack on mobile */
    .info-cards__column--70,
    .info-cards__column--30 {
        flex-basis: 100% !important;
        width: 100% !important;
        text-align: left !important;
    }
}

{% endscope_css %}