/*
 * Price card component.
 *
 * Four-up grid of offerings (dagdeel, hele dag, jeugd, lidmaatschap) with
 * the "featured" variant flipping the card to forest-green so the most
 * important option anchors the row. Used on the home page Tarieven section
 * and any future pricing surface (/gastvisser, a /tarieven page, the
 * reservation form).
 *
 * Amount typography is Playfair Display to match the rest of the editorial
 * tone; numbers use --accent (amber) on the white card and --sage on the
 * forest card so the figure stays prominent against either background.
 *
 * See docs/design_system.md §"Price cards" and docs/nnvv_prd.md §"Pricing".
 */

.price-card {
  background: white;
  border: 1.5px solid var(--sand);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.price-card.featured {
  background: var(--forest);
  border-color: var(--forest);
  color: white;
}

.price-card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-card.featured .price-card-label {
  color: var(--on-dark-65);
}

.price-card-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.price-card.featured .price-card-title {
  color: white;
}

.price-amount {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-block: .25rem;
}

.price-card.featured .price-amount {
  color: var(--sage);
}

.price-card-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

.price-card.featured .price-card-note {
  color: var(--on-dark-75);
}