/**
 * clickable-cards (Figma 1093:7998)
 */
@layer modules {
  .m-clickable-cards {
    padding-block: var(--section-padding-y);
  }

  .m-clickable-cards--spacing-joined {
    padding-block-start: 0;
  }

  .m-clickable-cards--bg-band {
    background: var(--picus-gradient-down-light-blue);
  }

  .m-clickable-cards--bg-band-top {
    background: var(--contact-band-top);
  }

  .m-clickable-cards .section-header :is(h1, h2, h3, h4, h5, h6) {
    text-transform: capitalize;
  }

  .m-clickable-cards .section-header > :is(h1, h2, h3, h4, h5, h6) {
    white-space: pre-line;
  }

  .m-clickable-cards .section-header + .m-clickable-cards__grid {
    margin-block-start: var(--clickable-cards-gap);
  }

  .m-clickable-cards__grid {
    gap: var(--clickable-cards-grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .m-clickable-cards__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--clickable-cards-card-gap);
    min-inline-size: 0;
    padding: calc(var(--clickable-cards-padding-top) - var(--clickable-cards-border-width))
      calc(var(--clickable-cards-padding-x) - var(--clickable-cards-border-width))
      calc(var(--clickable-cards-padding-bottom) - var(--clickable-cards-border-width));
    background: var(--clickable-cards-bg);
    border: var(--clickable-cards-border-width) solid var(--clickable-cards-border);
    border-radius: var(--clickable-cards-radius);
    transition: border-color var(--picus-transition-snap);
  }

  .m-clickable-cards__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--clickable-cards-stack-gap);
  }

  .m-clickable-cards__icon {
    display: flex;
    justify-content: center;
    inline-size: var(--fa-slot-width);
    block-size: var(--fa-slot-height);
    padding-block-start: var(--fa-slot-em-top);
    color: var(--clickable-cards-icon-color);
  }

  .m-clickable-cards__icon svg,
  .m-clickable-cards__icon .icon-slot {
    display: block;
    flex: none;
  }

  .m-clickable-cards__title {
    margin: 0;
    font-size: var(--type-h4-size);
    font-weight: var(--clickable-cards-title-weight);
    line-height: var(--type-h4-lh);
    color: var(--picus-foreground);
    white-space: pre-line;
  }

  .m-clickable-cards__link {
    color: inherit;
    text-decoration: none;
  }

  .m-clickable-cards__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .m-clickable-cards__body {
    color: var(--clickable-cards-body-color);
  }

  .m-clickable-cards__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    inline-size: var(--clickable-cards-arrow-width);
    block-size: var(--clickable-cards-arrow-height);
    color: var(--clickable-cards-arrow-color);
  }

  .m-clickable-cards__arrow svg {
    display: block;
    inline-size: var(--clickable-cards-arrow-size);
    block-size: var(--clickable-cards-arrow-size);
  }

  .m-clickable-cards__arrow-hover {
    display: none;
  }

  .m-clickable-cards__card:hover,
  .m-clickable-cards__card:focus-within {
    border-color: var(--clickable-cards-border-hover);
  }

  .m-clickable-cards__card:hover .m-clickable-cards__arrow,
  .m-clickable-cards__card:focus-within .m-clickable-cards__arrow {
    color: var(--clickable-cards-arrow-hover);
  }

  .m-clickable-cards__card:hover .m-clickable-cards__arrow-default,
  .m-clickable-cards__card:focus-within .m-clickable-cards__arrow-default {
    display: none;
  }

  .m-clickable-cards__card:hover .m-clickable-cards__arrow-hover,
  .m-clickable-cards__card:focus-within .m-clickable-cards__arrow-hover {
    display: block;
  }

  /* The ring goes on the card, where the link's area is; without :has() the link keeps its own ring. */
  @supports selector(:has(a)) {
    .m-clickable-cards__card:has(.m-clickable-cards__link:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }

    .m-clickable-cards__link:focus-visible {
      outline: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .m-clickable-cards__card {
      transition: none;
    }
  }

  @media (max-width: 767px) {
    .m-clickable-cards {
      padding-block: var(--section-padding-y-mobile);
    }

    .m-clickable-cards--spacing-joined {
      padding-block-start: 0;
    }
  }
}