/* =========================================================
   YARPP — Related Posts (Cards)
   ========================================================= */

.yarpp-related{
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(0,0,0,0.10);
}

/* Heading */
.yarpp-related h3,
.yarpp-related h4,
.yarpp-related .yarpp-related-title{
  margin: 0 0 .6rem 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: #111;
}

/* =========================================================
   List reset + grid
   ========================================================= */

.yarpp-related ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .75rem;
}

/* Mobile: 1 column */
@media (max-width: 767px){
  .yarpp-related ul{
    grid-template-columns: 1fr;
    gap: .4rem;
  }
}

/* =========================================================
   Card styling
   ========================================================= */

.yarpp-related li{
  margin: 0 !important;
  padding: 0 !important; /* padding moved to link */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 0 !important;
  background: #fff;
  line-height: 1.25;
}

/* =========================================================
   Link styling (clean editorial hover effect)
   ========================================================= */

.yarpp-related li a{
  display: block;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.82);
  text-decoration: none !important;
  font-weight: 500;
  line-height: 1.25;
  transition: color .15s ease,
              background .15s ease,
              padding-left .15s ease;
}

/* Hover = subtle accent wash + slight indent */
.yarpp-related li a:hover{
  color: var(--ast-global-color-0) !important;
  background: color-mix(in srgb, var(--ast-global-color-0) 6%, transparent);
  padding-left: 0.4rem;
}

/* Last item border refinement */
.yarpp-related li:last-child a{
  border-bottom-color: rgba(0,0,0,0.04);
}

/* YARPP Heading — Match Nearby Photos exactly */
.yarpp-related h3,
.yarpp-related h4,
.yarpp-related .yarpp-related-title{
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  margin: 0 0 .55rem 0 !important;
  color: #111;
}

.yarpp-related li a{
  font-size: 0.8rem;
  font-weight: 450;
}