/* We've been using CSS nesting in other areas of the site without issue */
/* Start clean-up for readability improvement */
/* https://caniuse.com/css-nesting */

/* START NESTING CLEANUP - Aisle 7 */
/* Card Groups */
.paragraph--type--card-group {
  /* Adds borders */
  &.add-borders {
    .paragraph--type--card {
      &.card-display--card-full-width.has-image .card-text-wrapper {
        > .card-subtitle:first-child,
        h2,
        h3 {
          padding-top: 1rem;
        }
      }

      &.card-display--card-left-align .card-text-wrapper {
        padding-top: 1rem;
      }

      .card-text-wrapper {
        padding: 0 1.25rem 1rem;
      }

      /* Plus image (exclude full width and left-align) */
      &.has-image:not(.card-display--card-full-width, .card-display--card-left-align) {
        padding-top: 1rem;
      }
    }
  }

  /* Decreases heading size */
  &.decreased {
    .paragraph--type--card .usa-card__heading {
      font-size: 1.125rem;
      line-height: 1.375rem;
    }
  }
}

/* Individual Card Items */
.paragraph--type--card {
  /* Exclude left-align cards, mobile-inline */
  &:not(.card-display--card-left-align) .card-text-wrapper {
    h2,
    h3,
    h4,
    h5,
    h6,
    > .card-subtitle:first-child {
      padding-top: 1rem;
    }
  }
}


.bg-fdic-dark-blue .paragraph--type--card-group {
  .paragraph--type--card {
    background-color: var(--fdic-white); /* Force white background for card when on blue background */

    /* Plus image */
    /* Exclude full width */
    &.has-image:not(.card-display--card-full-width) {
      padding-top: 1rem; /* 16px */
    }
  }
}
/* END NESTING CLEANUP - Aisle 7 */

/* All Displays */
.paragraph--type--card-group h2 {
  margin-block-end: 0;
}

.field--name-field-cards {
  --gap: var(--spacing-lg);

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.field--name-field-cards .field__item {
  overflow: hidden;
  width: 100%;
  margin: var(--gap) 0 0 0;
}

.field--name-field-cards .card-subtitle {
  color: var(--text-accent);
  font-family: var(--font-family-sans-pro);
}

.field--name-field-cards .card-header {
  display: inline;
  color: var(--text-secondary);
  font-family: var(--font-family-sans-pro);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2rem;
}

.field--name-field-cards a {
  text-decoration: none;
}

.field--name-field-cards a:hover {
  text-decoration: underline;
}

/* Left align with image */
/* Reset default p margins, below an h3 title only */
.card-display--card-left-align.has-image h3 + .field--name-field-card-paragraph-body p {
  margin: 0;
}

/* Fix font colors if the background color is white and text is set to white */
.bg-fdic-dark-blue.text-fdic-white .paragraph--type--card-group .paragraph--type--card {
  color: var(--body-text-color);

  a {
    color: var(--fdic-dark-blue);
  }

  a:hover {
    color: var(--fdic-med-blue);
  }
}

/* Border Option */
.paragraph--type--card-group.add-borders .paragraph--type--card {
  border: 1px solid var(--fdic-neutral-020);
}

/* Center Text Option */
.paragraph--type--card-group.center-text .paragraph--type--card .card-text-wrapper {
  text-align: center;
}

/* Image Center Align Display */
.field--name-field-cards .card-display--card-center-align {
  text-align: center;
}

.field--name-field-cards .card-display--card-center-align img {
  height: auto;
  max-width: 5rem; /* Icon types */
  object-fit: contain;
}

/* Image Left Align Display */
.field--name-field-cards .card-display--card-left-align.has-image {
  display: flex;
}

.field--name-field-cards .card-display--card-left-align.has-image .card-thumbnail {
  margin-right: 1rem;
}

.paragraph--type--card-group.add-borders .card-display--card-left-align.has-image .card-thumbnail { /* With borders and img */
  margin: 1rem 0 0 1rem;
}

.field--name-field-cards .card-display--card-left-align img {
  height: auto;
  max-width: 4.5rem;
  object-fit: contain;
}

.field--name-field-cards .card-display--card-left-align .card-text-wrapper {
  flex: 1;
}

/* Full Width Image Display */
.field--name-field-cards .card-display--card-full-width .card-thumbnail {
  overflow: hidden;
  max-height: 12rem;
  width: 100%;
  background-color: var(--surface-secondary);

  img {
    display: block;
    height: 100%;
    min-height: 8.875rem;
    width: 100%;
    object-fit: cover;
    transition: 0.5s ease;
  }
}

.field--name-field-cards .card-display--card-full-width .card-thumbnail img:hover {
  opacity: 0.25;
  transform: scale(1.05);
  transition: 0.5s ease;
}

/* Start specific mobile only */
/* Mobile inline option */
@media screen and (max-width: 30rem) {
  .field--name-field-cards .card-display--card-full-width .card-thumbnail {
    max-height: fit-content;
  }

  .paragraph--type--card.has-image.mobile-inline {
    display: flex;

    .card-text-wrapper {
      flex: 1;
      margin-inline-start: 1.5rem;
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
      padding-top: 0;
    }
  }
}
/* End specific mobile only */

/* Start Tablet/Desktop */
@media print, screen and (min-width: 30rem) {
  .field--name-field-cards {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .field--name-field-cards .field__item {
    display: flex;
    flex-basis: calc(25% - 1.5rem);
    margin: 1.5rem 1.5rem 0 0;

    .paragraph--type--card {
      width: 100%; /* Helps content inside item stretch */
    }
  }

  /* Width unset; defaults to span 4-across */
  .width--unset .field--name-field-cards .field__item {
    &:last-child,
    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  /* Span width of container options */
  .width--span_3_across .field--name-field-cards .paragraph--type--card {
    flex: 1;
  }

  .width--span_3_across .field--name-field-cards .card-display--card-full-width .card-thumbnail img,
  .width--span_2_across .field--name-field-cards .card-display--card-full-width .card-thumbnail img {
    max-height: fit-content;
  }

  .width--span_3_across .field--name-field-cards .field__item {
    flex-basis: calc(calc(100% / 3) - 1.5rem);

    &:last-child,
    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .width--span_2_across .field--name-field-cards .field__item {
    flex-basis: calc(50% - 1.5rem);

    &:last-child,
    &:nth-child(2n) {
      margin-right: 0;
    }
  }
}
/* End Tablet/Desktop */