// ==========================================================================
// Card Grid Block
// Flexible grid layout with image cards and icon cards
//
// OVERRIDE PATTERN:
// This block customizes child components via descendant selectors.
// Never create component modifiers for block-specific styling.
//
// ✓  .b-testimonials .c-card { ... }
// ✗  .c-card--testimonial { ... }
// ==========================================================================

.b-card-grid {
  &__row {
    display: grid;
    gap: $card-grid-gap;
    grid-template-columns: 1fr;
    // @include media-breakpoint-down(md) {
    //   gap: 2.5rem;
    // }
    &--2 {
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    &--3 {
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    &--4 {
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    &--2-1 {
      @include media-breakpoint-up(md) {
        grid-template-columns: 2fr 1fr;
      }
    }
    &--1-2 {
      @include media-breakpoint-up(md) {
        grid-template-columns: 1fr 2fr;
      }
    }
    &--3-2 {
      @include media-breakpoint-up(md) {
        grid-template-columns: 3fr 2fr;
      }
    }
    &--2-3 {
      @include media-breakpoint-up(md) {
        grid-template-columns: 2fr 3fr;
      }
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
  }

  &__row--equal-height {
    .c-image-card__media {
      flex: 1;
      aspect-ratio: unset;
    }

    .c-image-card__image {
      aspect-ratio: unset;
    }
  }

  // Use link-dynamic underline behavior for icon-card title links in card-grid only.
  .c-icon-card__title--link .c-icon-card__title-text {
    @include dynamic-underline-hover(
      $color: currentColor,
      $thickness: 2px,
      $offset: 0.3em
    );
  }

  // Trigger underline from the link interaction, but keep underline width to text.
  .c-icon-card__title--link:hover .c-icon-card__title-text::after,
  .c-icon-card__title--link:focus-visible .c-icon-card__title-text::after {
    transform: scaleX(1);
  }

  // Same text-only dynamic underline behavior for image-card links in card-grid.
  .c-image-card__link .c-image-card__title-text {
    @include dynamic-underline-hover(
      $color: currentColor,
      $thickness: 2.5px,
      $offset: 0.3em
    );
  }

  .c-image-card__link:hover .c-image-card__title-text::after,
  .c-image-card__link:focus-visible .c-image-card__title-text::after {
    transform: scaleX(1);
  }
}

.b-card-grid__subtitle {
  font-size: $font-size-lg;
  font-weight: $font-weight-semibold;
  color: $color-text-muted;
  margin: #{-$spacer} 0 $spacer * 1.5;
}

.b-card-grid__body {
  margin-bottom: $spacer * 2;

  p:last-child {
    margin-bottom: 0;
  }
}