/* ==========================================================
CARDS.CSS
The card component and the grid that holds it. Page files
only ever decide how many cards go in, never how a card
looks.
========================================================== */

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

.card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  box-shadow: 0 1px 3px rgba(22, 40, 28, 0.06);
  overflow: hidden;
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(22, 40, 28, 0.12);
}

/* Accent line, top-left corner, grows left-to-right on
   interaction — but only on devices that actually have a
   hover gesture. Touch devices show it already grown, since
   there's no "hover" to wait for and requiring a tap first
   would make it feel broken compared to every other page. */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--accent-light);
  border-radius: 0 0 3px 0;
  transition: width 300ms ease;
}

@media (hover: hover) {
  .card:hover::before,
  .card:focus-within::before {
    width: 56px;
  }
}

@media (hover: none) {
  .card::before {
    width: 56px;
  }
}

/* Icon + heading + text pattern, usable on any card variant
   (feature cards, contact cards, etc.) */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(45, 85, 55, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent);
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.feature-card p {
  margin-bottom: 0;
}

/* Opt-in scroll reveal: add .reveal-grid alongside .card-grid
   on any page that wants the fade-up entrance. Uses animation,
   not transition — transition would collide with (and replace)
   the hover transition every .card already has. */
.reveal-grid .card {
  opacity: 0;
  transform: translateY(16px);
}

.reveal-grid.is-visible .card {
  animation: cardFadeUp 500ms ease forwards;
}

.reveal-grid.is-visible .card:nth-child(2) { animation-delay: 0.08s; }
.reveal-grid.is-visible .card:nth-child(3) { animation-delay: 0.16s; }

@keyframes cardFadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-grid .card {
    opacity: 1;
    transform: none;
  }

  .reveal-grid.is-visible .card {
    animation: none;
  }
}