/* ==========================================================================
   AGREEMENT SINGLE
   ========================================================================== */

.agreement-single {
  background: #fff;
}

.agreement-single__header {
  padding: 56px 0 80px;
}

.agreement-single__title {
  margin: 0;

  color: var(--pm-color-primary);

  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

  .agreement-single__header {
    padding: 40px 0 56px;
  }

}

/* ==========================================================================
   AGREEMENTS ARCHIVE
   ========================================================================== */

.agreements-archive {
  background: #fff;
}

.agreements-archive__section {
  padding: 56px 0 80px;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.agreements-archive__header {
  max-width: 820px;

  margin: 0 auto 48px;

  text-align: center;
}

.agreements-archive__title {
  margin: 0;

  color: var(--pm-color-primary);

  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
}

.agreements-archive__separator {
  width: 100px;
  height: 2px;

  margin: 20px auto;

  background: var(--pm-color-primary);
}

.agreements-archive__intro {
  margin: 0;

  color: var(--pm-color-text);

  font-size: 17px;
  line-height: 1.65;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.agreements-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 28px;
}


/* ==========================================================================
   CARD
   ========================================================================== */

.agreement-card {
  min-width: 0;
}

.agreement-card__link {
  display: flex;

  height: 100%;

  flex-direction: column;

  overflow: hidden;

  border: 1px solid #dfe8eb;
  border-radius: 18px;

  background: #fff;

  color: inherit;

  text-decoration: none;

  box-shadow:
    0 8px 24px rgb(0 0 0 / 5%);

  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.agreement-card__link:hover,
.agreement-card__link:focus-visible {
  border-color: rgb(0 171 183 / 30%);

  box-shadow:
    0 12px 32px rgb(0 0 0 / 8%);

  transform: translateY(-3px);
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.agreement-card__image-wrapper {
  display: flex;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  align-items: center;
  justify-content: center;

  padding: 24px;

  background: #fff;
}

.agreement-card__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition: transform 250ms ease;
}

.agreement-card__link:hover
.agreement-card__image {
  transform: scale(1.025);
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.agreement-card__content {
  display: flex;

  min-height: 160px;
  padding: 22px 24px;

  flex: 1;
  flex-direction: column;

  border-top: 1px solid #edf1f2;
}

.agreement-card__title {
  margin: 0;

  color: #34495e;

  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.agreement-card__description {
  margin: 10px 0 0;

  color: var(--pm-color-text);

  font-size: 15px;
  line-height: 1.6;
}

.agreement-card__action {
  display: inline-flex;

  margin-top: auto;
  padding-top: 20px;

  align-items: center;

  gap: 8px;

  color: var(--pm-color-primary);

  font-size: 15px;
  font-weight: 700;

  transition: gap 180ms ease;
}

.agreement-card__link:hover
.agreement-card__action {
  gap: 12px;
}


/* ==========================================================================
   EMPTY
   ========================================================================== */

.agreements-archive__empty {
  margin: 0;

  color: var(--pm-color-text);

  font-size: 17px;

  text-align: center;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 950px) {

  .agreements-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 24px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

  .agreements-archive__section {
    padding: 40px 0 56px;
  }

  .agreements-archive__header {
    margin-bottom: 32px;
  }

  .agreements-grid {
    grid-template-columns: 1fr;

    gap: 22px;
  }

  .agreement-card__content {
    min-height: auto;
  }

}