/* ============================================
   Components — Cards, Buttons, Tags, etc.
   ============================================ */

/* ── Card ── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--text-dark);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--text-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.card__date {
  font-size: var(--fs-xs);
  color: var(--text-dark-muted);
  margin-bottom: var(--space-sm);
}

.card__excerpt {
  font-size: var(--fs-small);
  color: var(--text-dark-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__link {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--accent-coral);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: gap var(--duration-fast) var(--ease-out);
}

.card__link:hover { gap: var(--space-sm); }

.card__link::after { content: '→'; }

/* Card with accent border top */
.card--accent { border-top: 3px solid var(--accent-coral); }
.card--accent-sage { border-top: 3px solid var(--accent-sage); }
.card--accent-gold { border-top: 3px solid var(--accent-gold); }
.card--accent-indigo { border-top: 3px solid var(--accent-indigo); }

/* Card on dark bg (inverted) */
.card--dark {
  background: var(--bg-secondary);
  color: var(--text-light);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.card--dark .card__title { color: var(--text-light); }
.card--dark .card__excerpt { color: var(--text-light-muted); }

/* ── Tags ── */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.75em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  border: 1px solid var(--accent-indigo);
  color: var(--accent-indigo);
  background: transparent;
  transition: all var(--duration-fast) var(--ease-out);
  cursor: default;
  letter-spacing: 0.02em;
}

.tag--coral { border-color: var(--accent-coral); color: var(--accent-coral); }
.tag--sage { border-color: var(--accent-sage); color: var(--accent-sage); }
.tag--gold { border-color: var(--accent-gold); color: var(--accent-gold); }

/* Tag on dark bg */
.tag--light {
  border-color: rgba(232, 224, 212, 0.3);
  color: var(--text-light-muted);
}

/* ── Filter Tags (clickable) ── */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-2xl); }

.filter-btn {
  padding: 0.4em 1.2em;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-full);
  border: 1px solid rgba(232, 224, 212, 0.2);
  color: var(--text-light-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: var(--font-body);
}

.filter-btn:hover { border-color: var(--accent-coral); color: var(--text-light); }

.filter-btn.active {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  color: var(--card-bg);
}

/* ── Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.7em 1.6em;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  font-family: var(--font-body);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background: var(--accent-coral);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-coral-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(224, 122, 95, 0.3);
}

.btn--ghost {
  background: transparent;
  color: var(--text-light);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn--ghost:hover {
  border-color: var(--accent-coral);
  color: var(--accent-coral);
}

/* ── Progress Bar ── */
.progress { width: 100%; height: 8px; background: rgba(0, 0, 0, 0.1); border-radius: var(--radius-full); overflow: hidden; }

.progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent-coral), var(--accent-sage));
  transition: width 1s var(--ease-out);
}

/* ── Status Badge ── */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status--planning .status__dot { background: var(--accent-gold); }
.status--active .status__dot { background: var(--accent-coral); animation: pulse-dot 2s infinite; }
.status--completed .status__dot { background: var(--accent-sage); }

/* ── Divider ── */
.divider {
  width: 60px;
  height: 3px;
  background: var(--accent-coral);
  border-radius: var(--radius-full);
  margin: var(--space-lg) 0;
}

.divider--center { margin-left: auto; margin-right: auto; }

/* ── Back Link ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--text-light-muted);
  text-decoration: none;
  margin-bottom: var(--space-xl);
  transition: color var(--duration-fast) var(--ease-out);
}

.back-link:hover { color: var(--accent-coral); }
.back-link::before { content: '←'; }