/* ============================================================
   Neoform — Reusable components
   Buttons, cards, badges, tags, form fields, section header,
   icons, photo placeholders. Generic building blocks only —
   page-specific layout lives in layout.css.
   ============================================================ */

/* Icons — inline SVGs referencing the sprite defined in index.html */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: none;
}
.icon--danger {
  color: #e8968c;
}
.icon--brand {
  color: var(--mint-400);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur-hover) var(--ease-out),
    background var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}
.btn:active {
  transform: scale(var(--scale-press));
}
.btn .icon {
  font-size: 18px;
}

.btn--md {
  height: 44px;
  padding: 0 20px;
  font-size: var(--text-body-sm);
}
.btn--lg {
  height: 56px;
  padding: 0 26px;
  font-size: var(--text-body-md);
  border-radius: var(--radius-lg);
}

.btn--primary {
  background: var(--surface-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover {
  background: var(--mint-600);
  transform: translateY(-2px);
  color: #fff;
}

.btn--secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-default);
}
.btn--secondary:hover {
  border-color: var(--border-brand);
  transform: translateY(-2px);
  color: var(--text-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--text-strong);
}
.btn--ghost:hover {
  background: rgba(143, 221, 187, 0.08);
  transform: translateY(-2px);
  color: var(--text-strong);
}

.btn--on-ink {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  color: #f2fbf6;
}
.btn--on-ink:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-2px);
  color: #f2fbf6;
}

/* Cards */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.card--interactive:hover,
.card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Badge / tag */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--mint-300);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--mint-300);
  font-size: var(--text-body-sm);
}

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  color: var(--text-strong);
}
.field .hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
}
.field input,
.field textarea {
  font: inherit;
  font-size: var(--text-body-md);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  transition:
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--mint-400);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}

/* Section header block */
.section {
  padding: var(--section-y) var(--gutter);
}
.section__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.section__head {
  max-width: var(--container-narrow);
  margin: 0 0 var(--space-6);
}
.section__head .eyebrow {
  margin-bottom: var(--space-4);
}
.section__head h2 {
  font-size: var(--text-h2);
}
.section__head p {
  margin-top: var(--space-4);
  font-size: var(--text-lead);
  color: var(--text-body);
  line-height: var(--lh-snug);
}

.section--white {
  background: var(--surface-page);
}
.section--page {
  background: var(--surface-page);
}
.section--fresh {
  background: var(--grad-fresh);
}

/* Photo placeholder — swap for a real <img> once assets exist */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: var(--grad-fresh);
  color: var(--mint-300);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}