/* membership-section.css — the PMPro-driven membership tier cards.
   Pass 48 built this for the homepage; Pass 49 extracted it into its own
   file so the About page (and anywhere else the same section is used
   later) can reuse it without loading homepage.css. See
   template-parts/sections/membership.php for the markup and
   osta_public_membership_levels() (inc/access.php) for the data — this
   file only ever styles what that template already renders.

   Classes are named .membership-cards__*, not .homepage-membership__* —
   deliberately page-agnostic now that more than one page uses them.

   Same discipline as every other section stylesheet in this theme: no
   Tailwind, no new colours outside tokens.css, --color-accent (green)
   never used as text — checkmarks and the "Most Popular" badge are
   navy, per Pass 48's own correction to the original mockup. */

.membership-cards__heading,
.membership-cards__name,
.membership-cards__price {
  /* Same long-unbroken-word overflow fix as every other ACF/PMPro-
     sourced text element across the site (see homepage.css's own copy
     of this comment for the fuller history) — level names and
     descriptions are PMPro admin-entered text, not guaranteed short. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.membership-cards__heading {
  text-align: center;
  margin-bottom: var(--space-6);
}

.membership-cards__card {
  display: flex;
  flex-direction: column;
  text-align: center;
  /* PASS 58 visual direction: generous radius + soft shadow, scoped to
     this card only (not global.css's base .card, used sitewide). */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  /* PASS 58: explicit, not just relying on CSS Grid's own default
     align-items: stretch on .card-grid (global.css) — verified live
     that the default already equalizes all three cards' heights
     correctly regardless of description length (tested with one card
     given a real 4-line feature list and the other two left empty; all
     three still matched, pixel for pixel). The "different height"
     problem actually visible before this pass was the Basic tier's
     placeholder garbage text (fixed separately, see this pass's own
     report) creating a much longer wrapped line, not a layout bug. This
     rule is a defensive restatement, not a fix for something broken —
     it keeps this card correct even if .card-grid's own default is ever
     changed for some other reason elsewhere. */
  align-self: stretch;
}

.membership-cards__badge {
  display: inline-block;
  align-self: center;
  /* Navy text on the brand wash, never white-on-green — the mockup's
     white-on-green badge fails contrast. */
  background: var(--color-brand-wash);
  color: var(--color-brand);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.membership-cards__name {
  color: var(--color-brand);
}

.membership-cards__price {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.membership-cards__features {
  text-align: left;
  flex-grow: 1;
  margin-bottom: var(--space-4);
}

.membership-cards__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--color-body);
  overflow-wrap: break-word;
  word-break: break-word;
}

.membership-cards__feature + .membership-cards__feature {
  margin-top: var(--space-1);
}

.membership-cards__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  /* Navy, not green — checkmarks are the mockup's other contrast
     failure (a green icon fails on white; white-on-green fails too). */
  color: var(--color-brand);
}

.membership-cards__cta {
  margin-top: auto;
}

/* No new colour VALUES in this file — every var() above already exists
   in tokens.css. */