/* care-enhancements.css — scoped responsive polish for #care .card
   Parent: yanshen care cards responsive polish (dev-middle-0)
   Uses only existing tokens: --ink --muted --accent --paper --line
   No global selectors, no remote assets, no content, no transforms
   outside #care .card hover. */

/* Desktop (default, e.g. 1440px): cards remain 3 equal columns with 18px
   gap; resting cards sit on a calm paper surface with a hairline edge. */
#care .card {
  background: rgba(255, 250, 246, .72);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(185, 150, 136, 0);
  transition: box-shadow 0.2s ease, transform 0.2s ease,
    border-color 0.2s ease;
}

#care .card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 32px rgba(80, 45, 40, 0.16);
}

#care .card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent);
}

/* Mobile (768px and 390px both fall under max-width:768px, matching the
   base sheet): one column with 18px gap, tighter padding. */
@media (max-width: 768px) {
  #care {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #care .card {
    padding: 24px;
    min-height: 0;
  }
}