@use "../../tokens/color" as *;
@use "../../tokens/font" as *;
@use "../../tokens/spacing" as *;
@use "../../base/mixins";

.iati-card {
  box-shadow: 0 4px 5px $color-grey-20;
  background-color: white;
  border-top: $border-width solid $color-teal-90;
  padding: $padding-block;
  display: flex;
  flex-direction: column;

  & :first-child {
    margin-top: 0;
  }

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

  &__title {
    margin: 0;
    font-family: $font-stack-heading;
    font-weight: $font-weight-heading;
    font-size: 1.2rem;
  }

  &__subtitle {
    color: $color-teal-90;
    font-family: $font-stack-heading;
    font-weight: $font-weight-heading;
    font-size: 0.8rem;
    margin: 0;
    text-transform: uppercase;
  }

  &__menu {
    @include mixins.unstyled-list();

    li,
    a {
      line-height: 1.2;
    }

    a {
      text-decoration: none;
      display: block;
      padding: 0.6em 0;

      &.current {
        font-weight: $font-weight-body-strong;
      }
    }
  }
}

.iati-card-gallery {
  --min-card-width: 300px;

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: $padding-block;

  & > * {
    flex: 1;
    min-width: var(--min-card-width);
  }
}