/**
 * @file card-donation.css
 * Donation card SDC — Figma desktop 1-8898, mobile 1-8495.
 * Dark-themed pricing column: plan title, price, includes list (checkmarks), CTA button.
 * Tokens: --font-serif, --font-sans, --primary, --primary-foreground.
 */

/* When inside a grid column, stretch to equal height with sibling cards */
.section-grid__col > .card-donation {
  flex: 1 1 0;
}

.card-donation {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  min-height: max-content;
  background-color: #020704;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 32px 24px;
  gap: 32px;
  color: white;
}

@media (min-width: 768px) {
  .card-donation {
    padding: 32px;
  }
}

.card-donation__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1 1 auto;
  min-height: 0;
}

.card-donation__price {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  width: 100%;
}

.card-donation__title-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

/* Figma: IBM Plex Serif, Heading 6 (22px), line-height 1.4, letter-spacing -0.22px */
.card-donation__plan-title {
  flex: 1 1 0;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.22px;
  margin: 0;
  color: inherit;
}

.card-donation__plan-icon {
  display: none !important;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.card-donation__plan-icon img,
.card-donation__plan-icon .card-donation__plan-icon-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-donation__plan-icon .card-donation__plan-icon-fallback {
  display: none;
  width: 24px;
  height: 24px;
}

.card-donation__plan-icon .card-donation__plan-icon-fallback--visible {
  display: block;
}

.card-donation__plan-icon .card-donation__plan-icon-fallback svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Figma: $19 = 72px (Heading 1), /mo = 36px, line-height 1.2 / 1.3, letter-spacing -0.72px / -0.36px */
.card-donation__price-line {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
  color: inherit;
  letter-spacing: -0.72px;
}

.card-donation__price-amount {
  font-size: 3rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .card-donation__price-amount {
    font-size: 4.5rem;
  }
}

.card-donation__price-suffix {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.36px;
}

@media (min-width: 768px) {
  .card-donation__price-suffix {
    font-size: 2.25rem;
  }
}

.card-donation__divider {
  height: 0;
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0;
}

.card-donation__includes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

/* Figma: DM Sans Regular, Text Regular (16px), line-height 1.5 */
.card-donation__includes-heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  color: inherit;
}

/* Benefits list from CKEditor (ul/li): custom check marker SVG */
.card-donation__benefits {
  width: 100%;
  padding: 8px 0 0;
}

.card-donation__benefits ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.card-donation__benefits li {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
}

/* Default list marker: check SVG (Figma) */
.card-donation__benefits li::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.0635 6.79785C19.1627 6.79788 19.2389 6.82834 19.3174 6.90723C19.396 6.98628 19.4267 7.06364 19.4268 7.16504C19.4268 7.26621 19.3965 7.34439 19.3184 7.42383L9.7002 17.0352C9.618 17.1167 9.54201 17.1455 9.44922 17.1455C9.35658 17.1455 9.28147 17.1173 9.20117 17.0371L4.66602 12.502C4.58904 12.4238 4.56097 12.3493 4.56348 12.252C4.56631 12.1459 4.60105 12.0636 4.68262 11.9824C4.76168 11.9038 4.83902 11.8731 4.94043 11.873C5.01685 11.873 5.08003 11.8905 5.14062 11.9326L5.20117 11.9834L9.0957 15.8965L9.44922 16.252L9.80371 15.8975L18.7959 6.91113C18.8809 6.82853 18.9627 6.79785 19.0635 6.79785Z' fill='white' stroke='white'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: 0 0.15em;
}

.card-donation__benefits li > *:first-child {
  flex: 1 1 0;
}

.card-donation__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: 100%;
}

.card-donation__btn {
  width: 100%;
}

.card-donation__btn--static {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--primary-foreground, #fff);
  background-color: var(--primary, #c30000);
  border: 1.5px solid var(--destructive, #9c0000);
  border-bottom-width: 4px;
  border-radius: 4px;
}

.card-donation__btn--static:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}