/* container (full-width grey background behind the related-pages block) */
.card-related-page-container {
  padding: 3rem 0rem 3rem 0rem;
  position: relative;
  .row {
    margin: 0;
    .h5 {
      padding: 0;
    }
  }
}

.card-related-page-container:after {
  content: "";
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  top: 0;
  background-color: #fff;
  z-index: -1;
}

body .card-related-page p {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

@media (min-width: 992px) {
  .card-related-page-container {
    padding: 4rem 0rem;
  }
}

@media (min-width: 1200px) {
  .card-related-page-container {
    padding: 2rem 0rem 4rem 0rem;
  }
}

/*------------------- SISSA card design -------------------*/
/* The card is a <div class="card full-link-card"> (accessible full-link
   pattern), so selectors use .card, not a.card. */

.card-related-page.card-wrapper {
  padding: 0;
}

.card-related-page.card-wrapper .phantom-card {
  transition: 0.2s ease;
  display: flex;
  align-items: end;
}

.card-related-page.card-wrapper .phantom-card .card-body {
  width: 100%;
  padding: 1.5rem 1.5rem 5.25rem 1.5rem;
}

.card-related-page.card-wrapper .phantom-card .card-body .card-text {
  color: #262626;
}

/* corner-arrow icon: hidden until the card is hovered */
.card-related-page.card-wrapper .icon-container {
  display: flex;
  visibility: hidden;
  aspect-ratio: 1;
  /* TODO(sissa): tie this to the primary color (was 4 stacked values). */
  background-color: var(--main-accent-color);
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
}

.card-related-page.card-wrapper .icon-container svg {
  width: auto;
  height: 25px;
}

.card-related-page.card-wrapper .icon-container svg path {
  stroke: #fff;
}

/* borders between cards */
.card-related-page.card-wrapper .card {
  border: 1px solid rgb(0, 0, 0);
  border-bottom: 0px solid rgb(0, 0, 0);
  border-top: 4px solid var(--accent);
}

.phantom-related-list li:last-child .card {
  border-bottom: 1px solid rgb(0, 0, 0);
}

/* both first and last */
.phantom-related-list li:first-child:last-child .card {
  border-bottom: 1px solid rgb(0, 0, 0);
}

@media (min-width: 992px) {
  .card-related-page.card-wrapper .card {
    border: 1px solid rgb(0, 0, 0);
    border-right: 0px solid rgb(0, 0, 0);
  border-top: 4px solid var(--accent);

  }

  .phantom-related-list li:last-child .card {
    border-right: 1px solid rgb(0, 0, 0);
  }

  /* both first and last */
  .phantom-related-list li:first-child:last-child .card {
    border-right: 1px solid rgb(0, 0, 0);
  }
}

/* hover: reveal the corner arrow */
.card-related-page.card-wrapper .card:hover {
  background-color: #f8f8f5;
}

.card-related-page.card-wrapper .card:hover .icon-container {
  visibility: visible;
}