/* Interactive Card Group */
.paragraph--type--interactive-card-group {
  margin-block-start: 2em;
  margin-block-end: 2em;
  display: flex;
  flex-flow: row wrap;
  gap: 1.5em;
}
.paragraph--type--interactive-card-group .interactive-card {
  flex: 1;
  margin-block-start: 0;
}

/* Interactive Card */
.interactive-card {
  display: block;
  min-width: 300px;
  width: 100%;
  padding: 0px;
  border-radius: 8px;
  border: 1px 0px 0px 0px;
  opacity: 0px;
  text-decoration: none;
  color: var(--body-text-color);
  margin-block-start: 2em;
}

.interactive-card:hover {
  color: var(--body-text-color);

  .interactive-card--line-top {
    opacity: 100%;
  }

  .interactive-card--line-bottom {
    opacity: 0%;
  }

  .interactive-card--content {
    padding-bottom: 0;
    padding-top: 1.5em;
  }

  .interactive-card--background-image {
    transform: rotate(0deg);
  }
}

.interactive-card[href] {
  cursor: pointer;
}

.interactive-card--inner {
  padding: 40px;
  overflow: hidden;
  position: relative;
}

/* Content */
.interactive-card--line-top,
.interactive-card--line-bottom {
  width: 100%;
  border: 1px 0px 0px 0px;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.interactive-card--line-top {
  opacity: 0%;
}

.interactive-card--line-bottom {
  opacity: 100%;
}

.interactive-card--content {
  padding-bottom: 1.5em;
  transition-property: padding;
  transition-duration: 300ms;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.interactive-card--content--heading {
  font-family: var(--heading-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.01em;
  text-align: left;
}

.interactive-card--content--body > * {
  font-family: "Source Sans 3";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}

.interactive-card--content--body p:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Gold */
.interactive-card--background-color--gold {
  background: linear-gradient(132.82deg, #E0BD67 0%, #EEDBAA 33%, #E0BD67 75%, #CB9D2A 100%);
  border: 1px solid var(----fdic-brass, #A48923);

  .interactive-card--line-top,
  .interactive-card--line-bottom {
    border-bottom: 1px solid var(----fdic-gold, #7F7141);
  }

  .interactive-card--content--body > * {
    font-weight: 500;
  }
}

/* Blue */
.interactive-card--background-color--blue {
  background: linear-gradient(132.82deg, #0A4B70 0%, #0D6496 33%, #0A4B70 75%, #00243D 100%);
  border: none;
  color: var(--fdic-white);

  .interactive-card--line-top,
  .interactive-card--line-bottom {
    border-bottom: 1px solid var(----fdic-tan, #B7AC83);
  }

  .interactive-card--content--heading {
    font-family: var(--heading-family);
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.01em;
    text-align: left;
  }

  .interactive-card--content--body > * {
    color: #EBD49B;
  }
}

.interactive-card.interactive-card--background-color--blue:hover {
  color: var(--fdic-white);
}

/* Image */
.interactive-card--background-image {
  position: absolute;
  width: 280px;
  height: 280px;
  right: -32px;
  bottom: -156px;
  background-repeat: no-repeat;
  transform: rotate(-15deg);
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.interactive-card--background-image.executive_branch_seal {
  background-image: url('/themes/custom/fdic_theme/images/svg-icons/seal-executive-branch.svg');
}

.interactive-card--background-image.fdic_seal {
  background-image: url('/themes/custom/fdic_theme/images/svg-icons/seal-fdic.svg');
}