/* WebJIVE — ARHP News listing cards.
   Gives the News grid the same card anatomy as Rural Perspectives: equal-height
   cards, one consistent gutter, and the read-more pinned to the card foot.
   Scoped to .wj-card-grid so no other Divi blog module is touched. */

/* The News row was 784px while the blog row is 1140px, which squeezed the
   cards to 233px. Match the blog so the three columns read the same. */
.et_pb_section .et_pb_row:has(> .et_pb_column > .et_pb_blog_0.news) {
  width: 80%;
  max-width: 1140px;
}

.wj-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}

/* Divi hides cards until salvattore has built its columns; we build the grid in
   CSS instead, so make sure they stay visible. */
.et_pb_blog_grid .wj-card-grid .et_pb_post { opacity: 1; }

.wj-card-grid .et_pb_post {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;              /* the grid gap owns all spacing now */
  padding: 24px;
  box-sizing: border-box;
}

.wj-card-grid .et_pb_post .entry-title {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 8px;
}

.wj-card-grid .et_pb_post .post-meta { margin-bottom: 12px; }

/* Excerpt takes the slack so every read-more lands on the same baseline. */
.wj-card-grid .et_pb_post .post-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.wj-card-grid .et_pb_post .post-content-inner { flex: 1 1 auto; }
.wj-card-grid .et_pb_post .post-content-inner p { margin-bottom: 0; }
.wj-card-grid .et_pb_post .more-link { margin-top: 16px; align-self: flex-start; }

@media (max-width: 980px) {
  .wj-card-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .et_pb_section .et_pb_row:has(> .et_pb_column > .et_pb_blog_0.news) { width: 90%; }
}
@media (max-width: 640px) {
  .wj-card-grid { grid-template-columns: 1fr; }
}

/* ── Begin Your Journey teasers ────────────────────────────────────────────
   Divi lays these two et_pb_posts modules out with CSS multi-column
   (column-count:3). A card tall enough to matter — one with a featured image —
   gets fragmented across a column boundary and visually overlaps its
   neighbour. Drop the multi-column and use the same grid as the News listing. */
.et_pb_posts:has(> .wj-card-grid) {
  column-count: 1 !important;
  columns: auto !important;
  column-gap: normal !important;
}
.et_pb_posts .wj-card-grid > .et_pb_post {
  float: none;
  width: auto;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.et_pb_posts .wj-card-grid .entry-featured-image-url {
  display: block;
  margin-bottom: 16px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.et_pb_posts .wj-card-grid .entry-featured-image-url img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Cards without a featured image keep the same top edge as those with one. */
.et_pb_posts .wj-card-grid > .et_pb_post:not(:has(.entry-featured-image-url))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  background: rgba(90, 63, 110, .06);
}

/* Teaser excerpts vary from one line to a full paragraph; clamp them so the two
   teaser blocks on the page stay a similar height. */
.et_pb_posts .wj-card-grid .post-content-inner p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0;
}
.et_pb_posts .wj-card-grid .post-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.et_pb_posts .wj-card-grid .post-content-inner { flex: 1 1 auto; }
.et_pb_posts .wj-card-grid .more-link { margin-top: 16px; align-self: flex-start; }

/* ══ Our Members ═══════════════════════════════════════════════════════════
   This page is a blog listing of the Member Locations posts, and each card
   renders that post's whole Divi layout — section, row, column, blurb. The
   result was 42 cards laid out by CSS multi-column with heights from 635px to
   1032px and building photos at every aspect ratio, so nothing lined up.
   Grid them, fix the photo box, and let the text below it vary. */
.wj-page-members .et_pb_posts {
  column-count: 1 !important;
  columns: auto !important;
}
.wj-page-members .et_pb_posts > .et_pb_ajax_pagination_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: stretch;
}
.wj-page-members .et_pb_post,
#page-container .wj-page-members .et_pb_post {
  border: 1px solid #d8d8d8;
}
.wj-page-members .et_pb_post {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #f4f3e9;
  border: 1px solid #d8d8d8;
  overflow: hidden;
}
/* the nested post layout must not re-impose Divi's page-level spacing */
.wj-page-members .et_pb_post .et_pb_section { padding: 0; background: transparent; }
/* Divi emits a per-row width for each member post, so the photo boxes came out
   433-456px wide inside identical 496px cards. Force one width. */
.wj-page-members .et_pb_post .et_pb_row,
#page-container .wj-page-members .et_pb_post .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wj-page-members .et_pb_post .et_pb_section,
#page-container .wj-page-members .et_pb_post .et_pb_section { padding: 0 !important; }
.wj-page-members .et_pb_post .et_pb_column { width: 100%; margin: 0; }
.wj-page-members .et_pb_post .et_pb_blurb { margin: 0; }

/* One photo box for every member, whatever the source aspect ratio.
   .et_pb_main_blurb_image is inline-block, so it shrink-wraps; a width:100%
   image inside a shrink-wrapped parent resolves to zero and the photo vanishes.
   Give the wrapper a real width first, then the box can do its job. */
.wj-page-members .et_pb_main_blurb_image {
  display: block;
  width: 100%;
  margin: 0;
}
.wj-page-members .et_pb_main_blurb_image .et_pb_image_wrap {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.wj-page-members .et_pb_main_blurb_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wj-page-members .et_pb_blurb_container { padding: 22px; }
.wj-page-members .et_pb_module_header { margin-bottom: 10px; font-size: 20px; line-height: 1.3; }
/* member logos inside the description sit on one baseline */
.wj-page-members .et_pb_blurb_description img {
  max-height: 54px;
  width: auto;
  object-fit: contain;
  margin-bottom: 10px;
}
.wj-page-members .et_pb_blurb_description h4 { margin: 0 0 4px; }
/* the "visit" button sits at the card foot on every card */
.wj-page-members .et_pb_post .et_pb_button_module_wrapper { margin: auto 22px 22px; }

@media (max-width: 980px) {
  .wj-page-members .et_pb_posts > .et_pb_ajax_pagination_container { gap: 24px; }
}
@media (max-width: 720px) {
  .wj-page-members .et_pb_posts > .et_pb_ajax_pagination_container { grid-template-columns: 1fr; }
}


/* Put the photo box on .et_pb_main_blurb_image itself and let the span and img
   fill it, so nothing downstream can re-introduce a per-image width. */
.wj-page-members .et_pb_main_blurb_image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
}
.wj-page-members .et_pb_main_blurb_image .et_pb_image_wrap,
.wj-page-members .et_pb_main_blurb_image img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto;
}
.wj-page-members .et_pb_main_blurb_image img { object-fit: cover; }

/* ══ Become a Sponsor ══════════════════════════════════════════════════════
   The sponsor tiers are rows of bare logo images at their natural sizes, so
   column heights ran 117/137/1 and 51/85/1 — ragged, with empty cells holding
   the row open. Give every tier the same grid and every logo the same box. */
.wj-page-sponsor .et_pb_row:has(> .et_pb_column .et_pb_image):not(:has(.et_pb_text)):not(:has(.et_pb_heading)):not(:has(.et_pb_button)) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
}
.wj-page-sponsor .et_pb_row:has(> .et_pb_column .et_pb_image):not(:has(.et_pb_text)):not(:has(.et_pb_heading)):not(:has(.et_pb_button)) > .et_pb_column {
  width: auto;
  margin: 0;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.wj-page-sponsor .et_pb_row:has(> .et_pb_column .et_pb_image):not(:has(.et_pb_text)):not(:has(.et_pb_heading)):not(:has(.et_pb_button)) .et_pb_image {
  margin: 0;
  width: 100%;
  text-align: center;
}
.wj-page-sponsor .et_pb_row:has(> .et_pb_column .et_pb_image):not(:has(.et_pb_text)):not(:has(.et_pb_heading)):not(:has(.et_pb_button)) .et_pb_image img {
  max-height: 88px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: inline-block;
}
/* a tier with fewer logos than cells should not leave a held-open gap */
.wj-page-sponsor .et_pb_row > .et_pb_column:not(:has(img)):not(:has(p)):not(:has(h1,h2,h3,h4)) {
  display: none;
}
@media (max-width: 720px) {
  .wj-page-sponsor .et_pb_row:has(> .et_pb_column .et_pb_image):not(:has(.et_pb_text)):not(:has(.et_pb_heading)):not(:has(.et_pb_button)) {
    grid-template-columns: repeat(2, 1fr);
  }
}