/* ============================================================
   components/card.css — .dd-card
   Squircle surface with soft warm shadow; tint / glass / pink and a
   ticket-stub variant (stub — P8 pricing refines the notch).
   ============================================================ */

.dd-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  transition: transform var(--dur-slow) var(--ease-dreamy),
              box-shadow var(--dur-slow) var(--ease-dreamy),
              border-color var(--dur-slow) var(--ease-dreamy);
}

/* Lift on hover — opt in with .dd-card--hover, or any anchor card. */
.dd-card--hover:hover,
a.dd-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--coral-200);
}

/* Surface flavors */
.dd-card--tint  { background: var(--surface-tint); border-color: var(--coral-100); }
.dd-card--pink  { background: var(--grad-dreamy);  border-color: transparent; }
.dd-card--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  border-color: var(--glass-border);
}
.dd-card--flat { box-shadow: none; }

/* One tightened corner = the signature organic squircle. */
.dd-card--organic { border-radius: var(--radius-organic); }

/* Inner pieces */
.dd-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.dd-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-3);
  color: var(--text);
}
.dd-card__text { color: var(--text-muted); }

/* ---- ticket-stub (stub; P8 pricing tunes the perforation) ----
   Punches a notch on each side using bg-colored circles. Assumes the
   card sits on --bg; pages on a tinted band pass their own notch color
   via --dd-ticket-notch. */
.dd-card--ticket {
  --dd-ticket-notch: var(--bg);
  overflow: visible;
}
.dd-card--ticket::before,
.dd-card--ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  background: var(--dd-ticket-notch);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
}
.dd-card--ticket::before { left: -11px; }
.dd-card--ticket::after  { right: -11px; }

@media (prefers-reduced-motion: reduce) {
  .dd-card { transition: box-shadow var(--dur-base) var(--ease-soft),
                         border-color var(--dur-base) var(--ease-soft); }
  .dd-card--hover:hover,
  a.dd-card:hover { transform: none; }
}