/* See ./cards-icon.md for design notes and the Figma design-lock table. */

.cards-icon {
  /* SM defaults - mobile-first (Figma 21090:33059) */
  --ci-pad-block: var(--ll-space-9);       /* 40 */
  --ci-heading-gap: var(--ll-space-8);     /* 32 */
  --ci-card-gap: var(--ll-space-5);        /* 16 */
  --ci-card-pad: var(--ll-space-5);        /* 16 */
  --ci-card-inner-gap: var(--ll-space-4);  /* 12 */
  --ci-copy-gap: var(--ll-space-3);        /* 8 */
  --ci-badge-size: 48px;
  --ci-glyph-size: 32px;

  display: flex;
  flex-direction: column;
  gap: var(--ci-heading-gap);
  padding-block: var(--ci-pad-block);
  background: var(--ll-color-bg-default);
}

.cards-icon__heading {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);

  /* Figma heading is Medium at every breakpoint; LL h5 defaults to semibold. */
  font-weight: var(--ds-font-weight-medium);
}

.cards-icon__list {
  display: flex;
  flex-direction: column;
  gap: var(--ci-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards-icon__card {
  display: flex;
  flex-direction: column;
  gap: var(--ci-card-inner-gap);
  align-items: flex-start;
  padding: var(--ci-card-pad);
  border-radius: var(--ll-radius-card);
  background: var(--ll-color-bg-default);
  box-shadow: var(--ll-shadow-resting);
}

.cards-icon__icon-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--ci-badge-size);
  height: var(--ci-badge-size);
  border-radius: var(--ll-radius-full);
  background: var(--ll-color-highlight-brand-light);
}

.cards-icon .cards-icon__icon {
  display: inline-flex;
  width: var(--ci-glyph-size);
  height: var(--ci-glyph-size);
  flex: none;
  background-color: currentcolor;
  color: var(--ll-color-text-secondary);
  mask: var(--cards-icon-icon-url) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--cards-icon-icon-url) center / contain no-repeat;
}

.cards-icon__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ci-copy-gap);
}

.cards-icon__title {
  margin: 0;
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-h7-family);
  font-size: var(--ll-text-h7-size);
  line-height: var(--ll-text-h7-line-height);
  letter-spacing: var(--ll-text-h7-letter-spacing);

  /* Figma card title is SemiBold; LL h7/h6 default to medium. */
  font-weight: var(--ds-font-weight-semibold);
}

.cards-icon__desc {
  /* Figma paints the description at opacity-80 over Content/secondary. */
  color: color-mix(in srgb, var(--ll-color-text-secondary) 80%, transparent);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
}

.cards-icon__desc p {
  margin: 0;
}

@media (width >= 768px) {
  .cards-icon {
    /* MD/LG/XL values (Figma 21066:5816 / 20981:22386) */
    --ci-pad-block: var(--ll-space-13);     /* 64 */
    --ci-heading-gap: var(--ll-space-11);   /* 48 */
    --ci-card-gap: var(--ll-space-8);       /* 32 */
    --ci-card-pad: var(--ll-space-7);       /* 24 */
    --ci-card-inner-gap: var(--ll-space-5); /* 16 */
    --ci-badge-size: 56px;
    --ci-glyph-size: 40px;
  }

  .cards-icon__heading {
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
    text-align: center;
  }

  .cards-icon__title {
    font-size: var(--ll-text-h6-size);
    line-height: var(--ll-text-h6-line-height);
    letter-spacing: var(--ll-text-h6-letter-spacing);
  }

  .cards-icon__desc {
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }
}

@media (width >= 1024px) {
  .cards-icon__list {
    flex-direction: row;
    align-items: stretch;
  }

  .cards-icon__card {
    flex: 1 1 0;
    min-width: 0;
  }

  .cards-icon__desc {
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
    letter-spacing: var(--ll-text-body-base-letter-spacing);
  }
}