/* ==========================================================================
   Related Posts Module
   ========================================================================== */

.madgi-related__heading {
  margin-bottom: 3rem;
  font-size: 20px;
}

.madgi-related__grid {
  display: grid;
  gap: 4rem;
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Card ---- */

.madgi-related__card {
  color: inherit;
  display: block;
  text-decoration: none;
}

.madgi-related__card-image {
  margin-bottom: 1rem;
  overflow: hidden;
  width: 100%;
  transition: opacity 0.3s ease;
}
.madgi-related__card-image:hover {
  opacity: 0.8;
}

.madgi-related__card-image img {
  display: block;
  height: auto;
  width: 100%;
}

.madgi-related__card-no-image {
  aspect-ratio: 16 / 9;
  background: #e0e0e0;
  width: 100%;
}

.madgi-related__card-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 14px;
}

.madgi-related__card-term {
  color: #707070;
  margin: 0;
  font-size: 14px;
}

/* ==========================================================================
   Tablet  (≤ 980px)
   ========================================================================== */

@media (max-width: 980px) {
  .madgi-related__grid {
    /* grid-template-columns: repeat(2, 1fr); */
  }
}

/* ==========================================================================
   Mobile  (≤ 767px)
   ========================================================================== */

@media (max-width: 767px) {
  .madgi-related__grid {
    display: flex;
    grid-template-columns: unset;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .madgi-related__grid.is-dragging {
    scroll-snap-type: none;
  }

  .madgi-related__grid::-webkit-scrollbar {
    display: none;
  }

  .madgi-related__card,
  .madgi-related__card * {
    -webkit-user-drag: none;
  }

  .madgi-related__card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  .madgi-related__grid.is-dragging .madgi-related__card {
    cursor: grabbing;
    cursor: -webkit-grabbing;
  }

  .madgi-related__card-image img {
    pointer-events: none;
    -webkit-user-drag: none;
  }
}

/* ==========================================================================
   VB canvas — placeholder skeleton cards
   ========================================================================== */

.madgi-related__card--placeholder .madgi-related__card-no-image {
  background: #d8d8d8;
}

.madgi-related__card-title--placeholder,
.madgi-related__card-term--placeholder {
  background: #d8d8d8;
  border-radius: 2px;
  height: 1em;
  width: 70%;
}

.madgi-related__card-term--placeholder {
  width: 45%;
}