@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

// Grid-based "column" card group layouts.
.o-card-group {
  > h2 {
    margin-bottom: math.div(30px, $base-font-size-px) + rem;
  }

  &--column-2 &__cards {
    grid-template-columns: 1fr 1fr;
  }

  &--column-3 &__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));

    // Convert to 2-column layout at small screen sizes;
    @include respond-to-max($bp-lg-min) {
      grid-template-columns: 1fr 1fr;
    }
  }

  &__cards {
    display: grid;
    column-gap: math.div(20px, $base-font-size-px) + em;
    row-gap: math.div(20px, $base-font-size-px) + em;

    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      // Make sure cards are stacked at mobile size.
      grid-template-columns: 100% !important;
    }
  }

  &--bg-green {
    padding: math.div(30px, $base-font-size-px) + em;
    background: var(--green-20);
  }
}

// Hack for Edge/IE to convert grid to a floated block layout.
// See https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
// Necessitated because of https://stackoverflow.com/questions/46743722/items-in-css-grid-in-ie-superimposed-on-each-other

/* stylelint-disable selector-type-no-unknown */
_:-ms-lang(x),
.o-card-group__cards {
  display: block;

  .m-card {
    display: block;
    float: left;
    margin-bottom: 10px;
  }
}

_:-ms-lang(x),
.o-card-group--column-2 {
  .o-card-group__cards .m-card {
    width: 48%;
    margin-right: 2%;
  }
  .o-card-group__cards .m-card:last-child {
    margin-right: 0;
  }
}

_:-ms-lang(x),
.o-card-group--column-3 {
  .o-card-group__cards .m-card {
    width: 32%;
    margin-right: 1%;
  }
  .o-card-group__cards .m-card:last-child {
    margin-right: 0;
  }
}

_:-ms-lang(x),
.o-card-group::after {
  content: '';
  display: table;
  clear: both;
}
/* stylelint-enable selector-type-no-unknown */

/* stylelint-disable no-duplicate-selectors */
// Grid-based "count" card group layouts.
.o-card-group {
  /* stylelint-enable no-duplicate-selectors */
  // Name the card grid areas.
  &--count-2,
  &--count-3,
  &--count-4 {
    .m-card:nth-of-type(1) {
      grid-area: card1;
    }

    .m-card:nth-of-type(2) {
      grid-area: card2;
    }

    .m-card:nth-of-type(3) {
      grid-area: card3;
    }

    .m-card:nth-of-type(4) {
      grid-area: card4;
    }
  }

  &--count-2 &__cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'card1 card2';
  }

  &--count-3 &__cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'card1 card2'
      'card1 card3';

    // We have to reach inside the m-card here unfortunately to
    // center the content of the first card and increase the heading.
    .m-card:nth-of-type(1) {
      h3 {
        @include heading-2;
      }

      > a {
        justify-content: center;
      }
    }
  }

  &--count-4 &__cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'card1 card2'
      'card3 card4';
  }

  // Flexbox-based "flow" card group layout.
  &--flow {
    .o-card-group__cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
}

// Tablet only.
@include respond-to-range($bp-sm-min, $bp-sm-max) {
  .o-card-group {
    &--count-3 &__cards {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 'card1 card1' 'card2 card3';
    }
  }
}

// Mobile only.
@include respond-to-max($bp-xs-max) {
  .o-card-group {
    &--count-2 &__cards {
      grid-template-columns: 1fr;
      grid-template-areas: 'card1' 'card2';
    }
    &--count-3 &__cards {
      grid-template-columns: 1fr;
      grid-template-areas: 'card1' 'card2' 'card3';
    }
    &--count-4 &__cards {
      grid-template-columns: 1fr;
      grid-template-areas: 'card1' 'card2' 'card3' 'card4';
    }
    &--flow {
      .o-card-group__cards {
        display: block;
        .m-card {
          width: 100%;
          margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
        }
      }
    }
  }
}