/**
 * Membership cards — equal height, no dead gap before CTA.
 */

:root {
  --membership-card-min-height: clamp(190px, 28vw, 250px);
  --membership-card-min-height-mobile: auto;
  /* Vertical footprint of the gold ribbon (span ≈ 21px + 12px margin). Cards
     without a ribbon reserve the same space so every row lines up. */
  --membership-ribbon-reserve: 33px;
}

body:not(.dashboard-app-body) .membership-grid {
  align-items: stretch;
}

body:not(.dashboard-app-body) .membership-card {
  height: 100%;
  min-height: var(--membership-card-min-height);
  display: flex;
  flex-direction: column;
}

body:not(.dashboard-app-body) .membership-card-text {
  flex: 0 0 auto;
  margin-bottom: clamp(12px, 2vw, 16px) !important;
}

body:not(.dashboard-app-body) .membership-features {
  flex: 1 1 auto;
  margin-bottom: 0 !important;
  align-content: start;
}

body:not(.dashboard-app-body) .membership-card .membership-button,
body:not(.dashboard-app-body) .membership-card .membership-card-cta {
  margin-top: auto !important;
  flex-shrink: 0;
}

/* Guaranteed breathing room above the CTA. Because .membership-features grows
   (flex: 1 1 auto), the button's margin-top:auto collapses; a bottom margin on
   the features of a card that actually has a button keeps the CTA from feeling
   cramped against the benefits list. */
body:not(.dashboard-app-body) .membership-card:has(.membership-button) .membership-features {
  margin-bottom: clamp(18px, 2.6vw, 26px) !important;
}

/* Let the CTA grow naturally if the (translated) label wraps, without overlap. */
body:not(.dashboard-app-body) .membership-card .membership-button {
  height: auto;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

@media (min-width: 1024px) {
  body:not(.dashboard-app-body) .membership-card {
    padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px) !important;
  }

  body:not(.dashboard-app-body) .membership-features {
    gap: 8px;
  }

  body:not(.dashboard-app-body) .membership-features li {
    font-size: clamp(12px, 1.4vw, 14px);
    line-height: 1.35;
  }
}

body:not(.dashboard-app-body) .membership-card:not(:has(.membership-button)) .membership-features {
  margin-bottom: 0 !important;
  padding-bottom: 4px;
}

/* Desktop: cards sit side by side, so reserve the ribbon's height on cards that
   have no ribbon. This keeps the heading, price (numbers), description and
   feature lines aligned across every card in the row. */
@media (min-width: 761px) {
  body:not(.dashboard-app-body) .membership-card:not(:has(.membership-card-ribbon))::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    height: var(--membership-ribbon-reserve, 33px);
  }

  /* Reserve uniform space for the heading and description so the price (numbers),
     description and feature lines all start at the same height on every card. */
  body:not(.dashboard-app-body) .membership-card-title {
    min-height: calc(var(--membership-title-line-height, 1.1) * 1.5em);
  }
  body:not(.dashboard-app-body) .membership-card-text {
    min-height: calc(var(--membership-text-line-height, 1.6) * 1.5em);
  }
}

@media (max-width: 760px) {
  body:not(.dashboard-app-body) .membership-card {
    min-height: var(--membership-card-min-height-mobile);
    height: auto;
  }

  body:not(.dashboard-app-body) .membership-grid {
    align-items: stretch;
  }

  body:not(.dashboard-app-body) .membership-grid .membership-card {
    width: 100%;
    max-width: min(360px, calc(100vw - 48px));
  }
}