/* ================================================================
   02 — HEART OF HOPE COMPONENTS LAYER
   Version: Phase 5.0 (Unified Components)
   Purpose: Reusable components — cards, shadows, component tokens
================================================================ */

/* ---------------------------------------------------------------
   1. COMPONENT TOKENS
---------------------------------------------------------------- */

:root {
  --hoh-component-gap: var(--space-2);
  --hoh-component-radius: var(--radius-soft);
  --hoh-component-shadow: var(--shadow-soft);
}

/* ================================================================
   2. PHASE 5 — CARD SYSTEM (Soft, Layered, Devotional)
================================================================ */

.card {
  background: var(--color-surface);
  border-radius: var(--hoh-component-radius);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  box-shadow: var(--hoh-component-shadow);
  transition:
    box-shadow var(--transition-medium),
    transform var(--transition-medium),
    background-color var(--transition-medium);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  background-color: var(--color-surface-alt);
}

.card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-soft);
}

/* Inner padding for Gutenberg groups */
.card > .wp-block-group,
.card > .wp-block-group__inner-container {
  padding: var(--space-3);
}