/* .ap-card — generic surface card used for store/category tiles. See coupon.css for the coupon-specific card. */

.ap-card {
  display: flex;
  flex-direction: column;
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ap-transition), border-color var(--ap-transition);
}

.ap-card:hover {
  box-shadow: var(--ap-shadow-md);
  border-color: var(--ap-primary);
}

.ap-card:focus-within {
  box-shadow: var(--ap-focus-ring);
}

.ap-card__media {
  padding: var(--ap-space-md);
}

.ap-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-xs);
  padding: 0 var(--ap-space-md) var(--ap-space-md);
  flex: 1;
}

.ap-card__title {
  font-size: var(--ap-fs-body);
  font-weight: 600;
  color: var(--ap-text);
}

.ap-card__meta {
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

.ap-card__cta {
  margin-top: auto;
  padding-top: var(--ap-space-sm);
}

.ap-card--featured {
  border-color: var(--ap-accent);
}

.ap-card--featured::before {
  content: "Featured";
  display: block;
  background: var(--ap-accent);
  color: var(--ap-text-inverse);
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  text-align: center;
  padding: var(--ap-space-xs);
}

/* Cards built around a centered .ap-logo-badge (store/category logo cards)
   should have their title/meta text centered under it too, not left-aligned
   against a centered circle. */
.ap-card:has(.ap-logo-badge) .ap-card__body {
  align-items: center;
  text-align: center;
}