/* ============================================================
   Cards & Pillars Components
   ============================================================ */

/* --- Generic card --- */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-xl);
}

.card--cream {
  background-color: var(--color-cream);
  box-shadow: var(--shadow-sm);
}

.card--cream:hover {
  box-shadow: var(--shadow-md);
}

.card--dark {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.card--dark:hover {
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.24);
}

/* --- Pillar card --- */
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.pillar-card:hover {
  box-shadow: var(--shadow-xl);
}

.pillar-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  color: var(--color-gold);
  line-height: 1;
  opacity: 0.6;
}

.pillar-card__icon {
  width: 48px;
  height: 48px;
  color: var(--color-green);
}

.pillar-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.pillar-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  max-width: none;
}

/* Button inside pillar card — always pinned to bottom-left */
.pillar-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Featured (green) pillar card */
.pillar-card--featured {
  background-color: var(--color-green);
  box-shadow: var(--shadow-lg);
}

.pillar-card--featured .pillar-card__number { color: var(--color-gold); }
.pillar-card--featured .pillar-card__title  { color: var(--color-white); }
.pillar-card--featured .pillar-card__body   { color: rgba(255, 255, 255, 0.75); }

/* Dark variant (on dark sections) */
.pillar-card--dark {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.pillar-card--dark:hover {
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.24);
}

.pillar-card--dark .pillar-card__title {
  color: var(--color-white);
}

.pillar-card--dark .pillar-card__body {
  color: rgba(255, 255, 255, 0.65);
}

/* --- Journey step card --- */
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.step-card:hover {
  box-shadow: var(--shadow-xl);
}

.step-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.3;
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
}

.step-card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.step-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.step-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  max-width: none;
}

/* Dark variant */
.step-card--dark {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}

.step-card--dark:hover {
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.24);
}

.step-card--dark .step-card__title { color: var(--color-white); }
.step-card--dark .step-card__body  { color: rgba(255,255,255,0.65); }

/* --- Blog post card --- */
.post-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);
}

.post-card:hover {
  box-shadow: var(--shadow-xl);
}

.post-card__image {
  aspect-ratio: 16 / 9;
  background-color: var(--color-cream-dark);
  overflow: hidden;
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__image img {
  transform: scale(1.04);
}

.post-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.post-card__category {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.post-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.post-card:hover .post-card__title {
  color: var(--color-green);
}

.post-card__excerpt {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-muted);
  flex: 1;
  max-width: none;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-cream-dark);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

.post-card__read-more {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-green);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.post-card:hover .post-card__read-more {
  gap: var(--space-3);
  color: var(--color-gold);
}

/* --- Stat card --- */
.stat-card {
  text-align: center;
  padding: var(--space-8);
}

.stat-card__value {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-card__label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}