/* ==========================================================================
   SUNSHINE AESTHETIC CLINIC — CARDS
   Soft edges, generous air, a mint-tinted lift on hover — never a hard shadow.
   ========================================================================== */

.card {
  background-color: var(--color-bg-surface); /* warm alabaster — never white */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-standard) var(--ease-signature),
              box-shadow var(--duration-standard) var(--ease-signature);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Treatment card — image + name + one-line description + price */
.card--treatment {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card--treatment .card__image {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.card--treatment .card__title {
  font-family: var(--font-display);
  font-weight: var(--text-h2-weight);
  font-size: var(--text-h2-size);
}
.card--treatment .card__price {
  font-family: var(--font-body);
  font-weight: var(--text-body-weight-regular);
  color: var(--color-champagne-tan-deep);
}

/* Signature card — sits on Whisper Mint, used for the "one signature" feature */
.card--signature {
  background-color: var(--color-butter-cream); /* cream passed between mint bg and card — never tan directly on mint */
  border: 1px solid var(--color-champagne-tan-20);
}

/* Testimonial card — quiet quote, no heavy quotation marks */
.card--testimonial {
  background-color: var(--color-butter-cream);
  border: none;
  box-shadow: none;
  padding: var(--space-6);
  text-align: center;
}
.card--testimonial .card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h2-size);
  color: var(--color-text-primary);
}
.card--testimonial:hover {
  transform: none;
  box-shadow: none;
}

/* Pricing / protocol card — clarity of a prescription, none of the intimidation */
.card--pricing {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  box-shadow: none;
  border: 1px solid var(--color-border);
}
.card--pricing:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-champagne-tan);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}