/* ==========================================
   JETPACK RELATED POSTS
   Senior Healthcare Planning
   ========================================== */

#jp-relatedposts {
  width: 100%;
  max-width: 1220px;
  margin: 50px auto 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box;
}

/* Section heading */
#jp-relatedposts h3.jp-relatedposts-headline {
  display: block !important;
  width: 100%;
  margin: 0 0 24px !important;
  padding: 0 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: #082F55;
}

#jp-relatedposts h3.jp-relatedposts-headline em {
  font-style: normal;
  font-weight: 700;
}

/* Related article grid */
#jp-relatedposts .jp-relatedposts-items {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

/* Individual card */
#jp-relatedposts .jp-relatedposts-post {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  overflow: hidden;

  box-shadow: 0 4px 18px rgba(8, 47, 85, 0.08);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;

  float: none !important;

  /* Remove Jetpack dimming */
  opacity: 1 !important;
}

/* Specifically override Jetpack visual-card opacity */
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
  opacity: 1 !important;
}

/* Card hover */
#jp-relatedposts .jp-relatedposts-post:hover,
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:hover {
  opacity: 1 !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(8, 47, 85, 0.12);
}

/* Featured image */
#jp-relatedposts .jp-relatedposts-post img.jp-relatedposts-post-img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

/* Card title */
#jp-relatedposts .jp-relatedposts-post-title {
  margin: 0 !important;
  padding: 20px 20px 8px !important;
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

#jp-relatedposts .jp-relatedposts-post-title a {
  color: #082F55 !important;
  text-decoration: none !important;
}

#jp-relatedposts .jp-relatedposts-post-title a:hover {
  color: #0F7C78 !important;
}

/* Date / context */
#jp-relatedposts .jp-relatedposts-post-context,
#jp-relatedposts .jp-relatedposts-post-date {
  margin: 0 !important;
  padding: 0 20px 20px !important;
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  font-size: 13px !important;
  line-height: 1.5;
  color: #8A8F98 !important;
}

/* Tablet */
@media (min-width: 640px) {

  #jp-relatedposts {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #jp-relatedposts .jp-relatedposts-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

/* Desktop */
@media (min-width: 900px) {

  #jp-relatedposts {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  #jp-relatedposts .jp-relatedposts-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
  }
}