/* ==========================================================================
   ZEVIVO DESIGN SYSTEM - COMPONENT SYSTEM (v42)
   ==========================================================================
   This file defines the unified sys-* components for Zevivo.
   It strictly follows the Design System Migration Contract v3.0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SYS-FEATURE-CARD (Base: Light)
   -------------------------------------------------------------------------- */
.sys-feature-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg, 32px);
  background: var(--color-white, #ffffff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
  border: 1px solid rgba(44,57,62,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}

.sys-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08));
  border-color: rgba(255,69,33,0.25);
}

/* Feature Icon */
.sys-feature-card .sys-feature-icon {
  font-size: 2.5rem;
  color: var(--color-primary, #FF4521);
  margin-bottom: var(--space-md, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Feature Title */
.sys-feature-card .sys-feature-title {
  font-family: var(--font-primary, 'Catamaran', sans-serif);
  font-size: var(--body-lg, 1.125rem);
  font-weight: 700;
  color: var(--color-dark-base, #1a2830);
  margin-bottom: var(--space-sm, 12px);
  line-height: 1.3;
}

/* Feature Description */
.sys-feature-card .sys-feature-desc {
  font-family: var(--font-secondary, 'Work Sans', sans-serif);
  font-size: var(--body-sm, 0.875rem);
  color: var(--color-gray-dark, #5a6a72);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   2. SYS-FEATURE-CARD VARIANTS
   -------------------------------------------------------------------------- */

/* Dark Variant (for why-card, why-card-platform) */
.sys-feature-card--dark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
}

.sys-feature-card--dark:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,69,33,0.5);
  box-shadow: none;
}

.sys-feature-card--dark .sys-feature-title {
  color: var(--color-white, #ffffff);
}

.sys-feature-card--dark .sys-feature-desc {
  color: rgba(255,255,255,0.7);
}

/* Horizontal Variant (for explainer-card, wt-access-card, ec-key-card) */
.sys-feature-card--horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-md, 24px);
  padding: var(--space-md, 24px);
}

.sys-feature-card--horizontal .sys-feature-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.sys-feature-card--horizontal .sys-feature-content {
  flex: 1;
}

/* --------------------------------------------------------------------------
   3. SYS-STATS-CARD
   -------------------------------------------------------------------------- */
.sys-stats-card {
  text-align: center;
  padding: var(--space-md, 24px) 0;
}

.sys-stats-card__number {
  font-family: var(--font-primary, 'Catamaran', sans-serif);
  font-size: clamp(2rem, 4vw, 3.125rem);
  font-weight: 800;
  color: var(--color-primary, #FF4521);
  line-height: 1.1;
  margin-bottom: var(--space-xs, 8px);
  letter-spacing: -0.025em;
}

.sys-stats-card__label {
  font-family: var(--font-secondary, 'Work Sans', sans-serif);
  font-size: var(--body-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-dark-base, #1a2830);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin: 0;
}

/* Stats Card Dark Variant (for dark section backgrounds) */
.sys-stats-card--dark .sys-stats-card__number {
  color: var(--color-white, #fff);
}
.sys-stats-card--dark .sys-stats-card__label {
  color: rgba(255,255,255,0.7);
}

/* Stats Card Orange Variant (for market-stats-bar — orange #FF4521 background) */
.sys-stats-card--orange .sys-stats-card__number {
  color: var(--color-dark-deep, #0d1b22);
}
.sys-stats-card--orange .sys-stats-card__label {
  color: rgba(13,27,34,0.75);
}

/* Stats Card inside homepage stats-grid widget */
.stats-grid .sys-stats-card {
  width: 33.333333333%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 30px;
  margin: 0;
  position: relative;
}

/* --------------------------------------------------------------------------
   4. SYS-GRID SYSTEM
   -------------------------------------------------------------------------- */
.sys-grid-2, .sys-grid-3, .sys-grid-4 {
  display: grid;
  gap: var(--space-lg, 32px);
}

.sys-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sys-grid-3 { grid-template-columns: repeat(3, 1fr); }
.sys-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 991.98px) {
  .sys-grid-3, .sys-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .sys-grid-2, .sys-grid-3, .sys-grid-4 { grid-template-columns: 1fr; }
}