/**
 * Shared UI-only adjustments for the listing pages (events, campaigns,
 * resources, groups). DOES NOT change any card markup — only adds spacing
 * and equal-height behavior so cards in a grid look balanced like the
 * memberships and directory pages.
 */

/* Row spacing between card rows. Bootstrap's .g-4 sets a 1.5rem (24px)
   vertical gutter via --bs-gutter-y; push it to ~56px so multi-row card
   grids breathe. Setting --bs-gutter-y (not just row-gap) overrides
   Bootstrap's spacing system instead of layering on top of it. */
.listing-section .row {
  --bs-gutter-y: 3.5rem;
  row-gap: 3.5rem;
}
@media (max-width: 768px) {
  .listing-section .row {
    --bs-gutter-y: 2rem;
    row-gap: 2rem;
  }
}

/* Equal-height cards in the row — keeps card bottoms aligned regardless
	   of inner content length, so rows don't sit on top of each other. */
.listing-section .row > [class*="col-"] {
  display: flex;
}
.listing-section .row > [class*="col-"] > .event-blk,
.listing-section .row > [class*="col-"] > .blk,
.listing-section .row > [class*="col-"] > .plan-tab-contents {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Breathing room at the bottom of the cards section */
.listing-section {
  padding-bottom: 60px;
}

/* Strip the global .blk { margin: 30px 0; padding: 8px } that pushes
	   campaign/resource cards out of alignment with event cards, and that
	   causes the .blk-wrap negative margin to lift the title onto the image
	   area. Matches what section.blog-area .blk does on the homepage. */
.listing-section .blk {
  margin: 0;
  padding: 0;
}

/* Consistent image dimensions across all listing cards (events, campaigns,
	   resources). Both real images and the colored fallback are forced to the
	   same 4:3 aspect ratio so cards in a row align uniformly regardless of
	   the source image's natural shape.

	   Homepage carousels: applied to .campaigns-area + .blog-area (their
	   .blk-top has no fixed height — was inheriting the image's natural
	   aspect, so a row mixing uploaded banners + fallback letter cards
	   rendered as different-sized cards). .event-area is intentionally
	   EXCLUDED here because the homepage event card has a hard
	   height: 238px set in style.css — overriding it would change event
	   card geometry across all orgs.

	   Listing pages: applied to all three since they already had the rule
	   and don't have a competing fixed height. */
section.campaigns-area .blk-top,
section.blog-area .blk-top,
.listing-section.event-area .event-img,
.listing-section.campaigns-area .blk-top,
.listing-section.blog-area .blk-top {
  aspect-ratio: 4 / 3;
  height: auto;
  overflow: hidden;
}
section.campaigns-area .blk-top img,
section.blog-area .blk-top img,
.listing-section.event-area .event-img img,
.listing-section.campaigns-area .blk-top img,
.listing-section.blog-area .blk-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
}

/* Homepage campaign/resource fallback cards override the global
   .card-image-fallback's min-height: 180px (too tall for the 4:3
   container at small widths) so the parent's aspect-ratio fully wins. */
section.campaigns-area .blk-top .card-image-fallback,
section.blog-area .blk-top .card-image-fallback {
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
}

/* Resource card body sits cleanly below the image. The global .blk-wrap
	   uses margin-top:-20px to overlap a tag onto the image; on the listing
	   page we want the title fully below the image area. */
.listing-section.blog-area .blk-wrap {
  margin-top: 0;
  padding: 16px 18px 18px;
}

/* Resource card title — clamp to 3 lines max so a single very long title
	   doesn't grow unbounded; use the title attribute on <h4> for full text
	   on hover. No min-height: Bootstrap's row + d-flex still equalizes the
	   cards in a row to the tallest sibling, so a row of 1-line titles stays
	   compact and a row with a 3-line title expands cleanly. */
.listing-section.blog-area .blk-wrap h4 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}

/* Title clamp — keep card titles to 2 lines max so long names don't push
	   content below them out of alignment with the other cards in the row.
	   Excluded for .blog-area (resources) because that card design uses a
	   negative margin-top to overlap a tag onto the image; clamping there
	   would push the title into the image area. */
.listing-section .event-blk h4,
.listing-section .campaigns-area .blk h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
  margin-bottom: 12px;
}

/* Resource card tag chips — render the kd_article.tags CSV column as a
   row of pills below the title. Cards cap at 2 visible + "+N" overflow
   counter so a noisy article (some have 5+) doesn't blow out the card
   height. Neutral gray fill (NOT --theme-light + --theme-color, which
   would pair primary with secondary on the same pill — an org's primary
   and secondary can have no contrast against each other, so the chip
   would become unreadable on those themes). Matches .detail-hero-badge
   default so the tag treatment is consistent across listing + detail. */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f0f3f8;
  color: #4a4a68;
  font-family: var(--font-stack);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.4;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-tag-more {
  background: #eef0f4;
  color: #5a6373;
}

/* Section "View all X" CTA on the org homepage (sits below each section's
   carousel, links to the corresponding listing page). Outline-secondary
   per the two-tier button rule: navigation/utility actions stay quiet —
   transparent fill + --theme-light-readable border/text (driven by the
   org's secondary). Hover inverts to a filled secondary so it gains
   weight only when the user commits. The arrow icon nudges right on
   hover to reinforce the "go to" intent.

   --theme-light-readable falls through to --theme-light for saturated
   secondaries, or to a darkened variant for pale ones — so the text
   stays visible on white regardless of the org's chosen secondary. */
.section-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.section-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1.5px solid var(--theme-light-readable);
  border-radius: 8px;
  background: transparent;
  color: var(--theme-light-readable);
  font-family: var(--font-stack);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.section-cta-btn:hover,
.section-cta-btn:focus-visible {
  background: var(--theme-light);
  color: var(--theme-on-secondary);
  border-color: var(--theme-light);
  text-decoration: none;
}
.section-cta-btn svg {
  width: 18px;
  height: 18px;
  transition: transform .15s ease;
}
.section-cta-btn:hover svg,
.section-cta-btn:focus-visible svg {
  transform: translateX(3px);
}

/* Clickable plan/group cards — when a .plan-tab-contents card carries an
   onclick (groups listing page + the homepage Join Our Community section),
   it should feel like the memberships card: a subtle lift on hover so the
   user understands the whole card is the click target, not just the
   inline button. We target [onclick] so resting plan-tab-contents (without
   a click handler attached) keeps the dev's default flat treatment. */
.plan-tab-contents[onclick] {
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan-tab-contents[onclick]:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

/* ── Mobile homepage carousels: arrows alongside cards ─────────────────
   The dev's mobile responsive rule for .owl-nav drops arrows BELOW the
   cards. Restore desktop's absolute centering so they sit on the left
   and right edges, overlapping the card itself. */
@media (max-width: 767px) {
  /* Targeted by section so each of the four homepage carousels
     (campaigns, events, resources, groups) gets the same treatment
     regardless of whether .plan-3x was added (only present when groups
     count > 2). The deeper .plan-area .plan-3x .owl-nav selector lifts
     specificity above the dev's hardcoded .plan-3x .owl-nav > div rules
     so the mobile size/shape/fill all apply cleanly. */
  section.campaigns-area .owl-nav,
  section.event-area .owl-nav,
  section.blog-area .owl-nav,
  section.plan-area .owl-nav,
  section.plan-area .plan-3x .owl-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%);
    margin-top: 0 !important;
    justify-content: space-between !important;
    pointer-events: none; /* the arrows themselves re-enable below */
  }
  section.campaigns-area .owl-nav > div,
  section.event-area .owl-nav > div,
  section.blog-area .owl-nav > div,
  section.plan-area .owl-nav > div,
  section.plan-area .plan-3x .owl-nav > div {
    pointer-events: auto;
    width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    /* Translucent fill so the arrow reads on top of any card image
       without obscuring it as much as the solid 48px desktop button. */
    background: color-mix(in srgb, var(--theme-color) 92%, transparent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  }

  /* Owl marks the leading arrow as .disabled at index 0 (loop:false).
     Hide the LEFT arrow until the carousel advances so the first card
     has full visual prominence. visibility:hidden (not display:none)
     keeps the arrow in the flex flow — otherwise space-between would
     collapse the remaining .owl-next onto the left edge. */
  section.campaigns-area .owl-nav .owl-prev.disabled,
  section.event-area .owl-nav .owl-prev.disabled,
  section.blog-area .owl-nav .owl-prev.disabled,
  section.plan-area .owl-nav .owl-prev.disabled {
    visibility: hidden;
    pointer-events: none;
  }

  /* Carousel parent padding: campaigns/events use 65px side padding on
     .all-campains (style.css); .plan-3x.owl-carousel does the same
     (style.css). Both reserve outside-the-card gutters for desktop's
     arrows. On mobile the arrows live OVER the cards, so those gutters
     are wasted — trim to 12px on all four carousels for wider cards. */
  section.campaigns-area .all-campains,
  section.event-area .all-campains,
  section.blog-area .all-campains {
    padding: 0 12px;
  }
  .plan-3x.owl-carousel {
    padding: 0 12px;
  }
}

/* ── Resource & campaign card borders ──────────────────────────────────
   Events get a full themed background (.event-blk uses --theme-color);
   campaigns and resources are white cards. When the page background is
   also light/white, the white card disappears into the page — no visible
   left/right edge. Add a thin themed border so the card shape always
   reads, regardless of background color. Border replaces no existing
   visual; the card's own padding accommodates 1px without layout shift.
   --theme-color-readable is the auto-contrast variant (darkened for
   light primaries, brightened for very dark primaries) so the border
   has good contrast against the card AND the page in every theme. */
section.campaigns-area .blk,
section.blog-area .blk,
.listing-section.campaigns-area .blk,
.listing-section.blog-area .blk {
  border: 1px solid var(--theme-color-readable, var(--theme-color));
}

/* ── Carousel overflow: don't clip card box-shadow ─────────────────────
   Owl-carousel's .owl-stage-outer has overflow: hidden, which crops the
   downward box-shadow on cards at the carousel's bottom edge — visually
   reads as "the bottom of the card is cut off." Side overflow still
   needs to hide so off-screen carousel items don't show; only vertical
   overflow needs to be visible. clip-path narrows the clipping to the
   horizontal axis. Add a small bottom padding to the carousel so the
   freed-up shadow has space to render without bumping into the next
   section. */
section.campaigns-area .all-campains .owl-stage-outer,
section.blog-area .all-campains .owl-stage-outer {
  overflow: visible;
  clip-path: inset(-30px -0px -30px -0px);
}
section.campaigns-area .all-campains,
section.blog-area .all-campains {
  padding-bottom: 24px;
}