/* =========================================================
   LINKED BUTTON PANEL
   Foundation 6 compatible
   ========================================================= */

.linked-button-panel {
  width: 100%;
}

.linked-button-panel__list {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

/* =========================================================
   BUTTON ROW
   ========================================================= */

.linked-button {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  min-height: 7rem;
  padding: 1.35rem 1.5rem;
  color: #1f2937;
  text-decoration: none;
  border-bottom: none !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.linked-button + .linked-button {
  border-top: 1px solid #e5e7eb;
}

.linked-button:hover,
.linked-button:focus {
  background: linear-gradient(
    to right,
    #ffffff 0,
    #ffffff 90px,
    #f7f9fc 130px,
    #f7f9fc 100%
  );
}

.linked-button.inactive:hover, .linked-button.inactive:focus {
	background: transparent !important;
	cursor: default !important;
	pointer-events: none !important;
}

.linked-button {
  transition:
    background 250ms ease,
    border-color 180ms ease;
}

.linked-button:focus-visible {
  outline: 3px solid #005ea8;
  outline-offset: -3px;
}


/* =========================================================
   ICON
   ========================================================= */

.linked-button__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: #efe7fb;
  color: #7b3fc6;
  font-size: 1.6rem;
  line-height: 1;
  transform-origin: center center;
  will-change: transform;
}

.linked-button:hover .linked-button__icon,
.linked-button:focus .linked-button__icon {
  animation: icon-circle-pulse 450ms cubic-bezier(.22,.61,.36,1);
}

@keyframes icon-circle-pulse {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.15);
    /*filter: brightness(1.05);*/
  }

  100% {
    transform: scale(1);
  }
}

/* optional color variations */
.linked-button__icon--green {
  background: #e1f5ed;
  color: #20865f;
}

.linked-button__icon--orange {
  background: #fff0e3;
  color: #d96b00;
}

.linked-button__icon--yellow {
  background: #f9ecb2;
  color: #be8a00;
}

.linked-button__icon--blue {
  background: #ecf0fa;
  color: #436fcd;
}

.linked-button__icon--grey {
  background: #f1f1f1;
  color: #585b61;
}

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

.linked-button__content {
  flex: 1 1 auto;
  min-width: 0;
}

.linked-button__title {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #111827;
}

.linked-button__teaser {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 400 !important;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #4b5563;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* =========================================================
   CHEVRON
   ========================================================= */

.linked-button__chevron {
  flex: 0 0 auto;
  color: #5f6b7a;
  transition: transform 180ms ease;
}

.linked-button:hover .linked-button__chevron,
.linked-button:focus .linked-button__chevron {
  transform: translateX(0.25rem);
}

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

@media screen and (max-width: 39.9375em) {
  .linked-button {
    gap: 1rem;
    padding: 1.15rem;
    min-height: auto;
  }

  .linked-button__icon {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.35rem;
  }

  .linked-button__title {
    font-size: 1rem;
  }

  .linked-button__teaser {
    font-size: 0.9rem;
  }
}