/* Final related-project, Ghostle, and homepage cover corrections */
.learn-more {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate !important;
  width: 100% !important;
  margin: clamp(52px, 7vw, 92px) 0 0 !important;
  padding: clamp(44px, 6vw, 76px) var(--site-gutter, 32px) clamp(58px, 7vw, 92px) !important;
  border-top: 1px solid rgba(61, 51, 44, 0.16) !important;
  background: var(--page-bg, #f8f4f0) !important;
  pointer-events: auto !important;
}

.learn-more__inner {
  width: min(100%, 1220px) !important;
  margin: 0 auto !important;
}

.learn-more__title {
  margin: 0 0 clamp(24px, 3vw, 34px) !important;
  color: var(--brown, #3d332c) !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.learn-more__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  position: relative !important;
  z-index: 2 !important;
}

.learn-more-card {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

.learn-more-card__link {
  display: flex !important;
  height: 100% !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--brown, #3d332c) !important;
  color: var(--cream, #faf5ed) !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(61, 51, 44, 0.1) !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.learn-more-card__link:hover,
.learn-more-card__link:focus-visible {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(61, 51, 44, 0.16) !important;
  outline: none !important;
}

.learn-more-card__link:focus-visible {
  box-shadow: 0 0 0 3px var(--royal-blue, #173f93), 0 14px 30px rgba(61, 51, 44, 0.16) !important;
}

.learn-more-card__cover {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  background: #eee7de !important;
  pointer-events: none !important;
}

.learn-more-card__content {
  display: flex !important;
  min-height: 84px !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px !important;
  pointer-events: none !important;
}

.learn-more-card__title {
  margin: 0 !important;
  color: inherit !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.learn-more-card__action {
  color: inherit !important;
  font-size: 0.67rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.78 !important;
  text-transform: uppercase !important;
}

/* Display both supplied Ghostle boards at their natural proportions. */
.final-work-showcase--ghostle {
  overflow: visible !important;
}

.ghostle-board-gallery {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.5vw, 34px) !important;
  width: min(100%, 1220px) !important;
  margin: 0 auto !important;
  align-items: start !important;
}

.ghostle-board-gallery__item {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ghostle-board-gallery__item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: none !important;
  filter: none !important;
}

/* Keep the square Juneteenth artwork fully visible in the 4:3 homepage card. */
.page-home .project-card__link[href="progeny-health.html"] .project-card__cover,
body:not(.page-home) .project-card__link[href="progeny-health.html"] .project-card__cover {
  object-fit: contain !important;
  object-position: center !important;
  background: #faeef7 !important;
}

/* Also prevent cropping when Progeny is recommended in Learn More. */
.learn-more-card__link[href="progeny-health.html"] .learn-more-card__cover {
  object-fit: contain !important;
  object-position: center !important;
  background: #faeef7 !important;
}

@media (max-width: 920px) {
  .learn-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .ghostle-board-gallery {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .learn-more {
    padding-inline: 16px !important;
  }

  .learn-more__grid {
    grid-template-columns: 1fr !important;
  }

  .learn-more-card__content {
    min-height: 72px !important;
  }
}