/* 04-components.css
 * Buttons, cards, panels, nav primitives.
 */

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn:active{
  transform: translateY(0);
}

/* Primary button — new + legacy alias */
.btn.primary,
.btn.btn-primary{
  background: var(--c-accent);
  border-color: color-mix(in srgb, var(--c-accent) 65%, var(--c-border));
  color: hsl(var(--h-surface) 30% 98%);
  text-decoration: none;
}

/* Secondary button — new + legacy alias */
.btn.secondary,
.btn.btn-secondary{
  background: var(--c-accent-soft);
  border-color: color-mix(in srgb, var(--c-accent) 20%, var(--c-border));
  color: var(--c-accent-ink);
  text-decoration: none;
}

/* Cards */
.card{
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-card);
  box-shadow: var(--shadow-1);
}

/* Calm panel (used across governance/booking/intake/etc.) */
.calm-panel{
  margin: var(--s-5) 0;
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: color-mix(in srgb, var(--c-accent-soft) 55%, var(--c-card));
  box-shadow: var(--shadow-1);
}

.calm-panel__title{
  margin: 0 0 var(--s-2);
}

.calm-panel__text{
  margin: 0;
}

/* Prose blocks */
.prose{
  margin-top: var(--s-3);
}

/* ✅ Prevent “extra top gap” when prose begins with H2/H3/UL/etc. */
.prose > :first-child{
  margin-top: 0 !important;
}

/* ✅ Prevent “extra bottom gap” at end of prose blocks */
.prose > :last-child{
  margin-bottom: 0 !important;
}

.prose > :where(p, ul, ol){
  max-width: var(--measure);
}

/* Media frames (image shaping support—class hooks) */
.media-frame{
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.media-frame img{
  width: 100%;
  height: auto;
  display: block;
}

/* Simple notice */
.notice{
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-warm-soft);
}

/* Header/footer minimal hooks */
.site-header,
.site-footer{
  border-top: 1px solid transparent;
}

.site-footer{
  margin-top: var(--s-9);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--c-border);
}

/* ===============================================================
   Subtle stagger animation (therapy-safe) — respects reduced motion
   Apply by adding .stagger-grid to a grid container.
   =============================================================== */

@keyframes hhg-fade-up{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Default: cards animate in gently, with staggered delays */
.stagger-grid > .card{
  opacity: 0;
  animation: hhg-fade-up 420ms ease both;
  will-change: transform, opacity;
}

/* Stagger timing (covers up to 12 cards safely) */
.stagger-grid > .card:nth-child(1){  animation-delay: 40ms; }
.stagger-grid > .card:nth-child(2){  animation-delay: 90ms; }
.stagger-grid > .card:nth-child(3){  animation-delay: 140ms; }
.stagger-grid > .card:nth-child(4){  animation-delay: 190ms; }
.stagger-grid > .card:nth-child(5){  animation-delay: 240ms; }
.stagger-grid > .card:nth-child(6){  animation-delay: 290ms; }
.stagger-grid > .card:nth-child(7){  animation-delay: 340ms; }
.stagger-grid > .card:nth-child(8){  animation-delay: 390ms; }
.stagger-grid > .card:nth-child(9){  animation-delay: 440ms; }
.stagger-grid > .card:nth-child(10){ animation-delay: 490ms; }
.stagger-grid > .card:nth-child(11){ animation-delay: 540ms; }
.stagger-grid > .card:nth-child(12){ animation-delay: 590ms; }

/* Reduced motion: no animation, no transforms, fully visible */
@media (prefers-reduced-motion: reduce){
  .stagger-grid > .card{
    opacity: 1;
    animation: none;
    transform: none;
    will-change: auto;
  }

  .btn{
    transition: none;
  }

  .btn:hover,
  .btn:active{
    transform: none;
  }
}