/**
 * Ionis Contact Card component styles
 */
.ionis-contact-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
}

/* Narrow cards (e.g. the side rail at tablet widths): label above value and
   let long button text wrap instead of overflowing. */
@container (max-width: 319px) {
  .ionis-contact-card .ionis-contact-field {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .ionis-contact-card__cta .ionis-button,
  .ionis-contact-card__cta .ionis-button span {
    white-space: normal;
  }
}

/* Card variant: department contacts grid */
.ionis-contact-card--card {
  height: 100%;
  padding: 16px;
  background: var(--color-white);
  border-top: 4px solid var(--color-purple);
  border-bottom-right-radius: 50px;
  box-shadow: 4px 4px 10px 0 rgba(45, 57, 64, 0.12);
}

/* Plain variant: items in the contact list side rail */
.ionis-contact-card--plain {
  padding: 24px 0;
}

/* Extra class selector to win over the generic .layout-container headings */
.ionis-contact-card .ionis-contact-card__title {
  margin: 0;
  padding: 0;
  font-size: var(--fs-headingxsm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-gray-dark);
}

.ionis-contact-card .ionis-contact-card__title::after {
  content: none;
}

.ionis-contact-card .ionis-contact-card__description {
  margin: 0;
  font-size: var(--fs-headingxs);
  font-weight: var(--fw-book);
  line-height: 1.4;
  color: var(--color-black);
}

.ionis-contact-card__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Rows carry their own 8px padding; pull the outer edges back in line. */
  margin: -8px 0;
}

@media (min-width: 769px) {
  .ionis-contact-card--card {
    padding: 24px;
  }

  .ionis-contact-card--plain {
    padding: 32px 0;
  }
}