/*
 * cards.css
 * SEO Engine Design System — Card Components
 * Tickets: UI-0022, UI-0036 through UI-0042
 *
 * Depends on tokens.css for CSS custom properties:
 *   --color-electric, --color-electric-10, --border-default, --border-focus,
 *   --shadow-sm, --shadow-md, --shadow-lg, --shadow-glow, --shadow-glow-lg,
 *   --gradient-card-dark, --space-* tokens
 */

/* ==========================================================================
   CARD PADDING UTILITIES (UI-0022)
   ========================================================================== */

/* compact-card: 16px — used in tight dashboard widgets */
.compact-card  { padding: 16px; }

/* standard-card: 24px — default for content and lead cards */
.standard-card { padding: 24px; }

/* large-card: 32px — feature cards */
.large-card    { padding: 32px; }

/* stat-card: 24px — same as standard, explicit alias */
.stat-card     { padding: 24px; }

/* feature-card: 32px — feature card default */
.feature-card  { padding: 32px; }

/* pricing-card: 40px — pricing card */
.pricing-card  { padding: 40px; }

/* ==========================================================================
   CONTENT CARD (UI-0036)
   White bg, border, 12px radius, 24px padding, shadow-md
   Hover: lifts 2px, shadow-lg
   ========================================================================== */

.card-content {
  background-color: #ffffff;
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    16px;
  padding:          24px;
  box-shadow:       var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04));
  transition:
    box-shadow 300ms ease,
    transform  300ms ease,
    border-color 300ms ease;
}

.card-content:hover {
  transform:  translateY(-2px);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04));
}

/* ==========================================================================
   STAT CARD (UI-0037)
   White bg, border, 12px radius, 24px padding, shadow-sm
   Interior: icon circle | label | value | trend badge
   ========================================================================== */

.card-stat {
  background-color: #ffffff;
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    16px;
  padding:          24px;
  box-shadow:       var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04));
  transition:
    box-shadow 300ms ease,
    transform  300ms ease;
}

/* Icon circle at top of stat card */
.card-stat__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.10));
  color:           var(--color-electric, #2F80ED);
  margin-bottom:   16px;
  flex-shrink:     0;
}

.card-stat__icon svg,
.card-stat__icon .icon {
  width:  24px;
  height: 24px;
}

/* Stat label (e.g., "Total Leads") */
.card-stat__label {
  font-family:  var(--font-body, 'Inter', sans-serif);
  font-size:    13px;
  font-weight:  500;
  color:        var(--text-secondary, #64748B);
  line-height:  1.4;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Primary numeric value */
.card-stat__value {
  font-family:  var(--font-display, 'Space Grotesk', sans-serif);
  font-size:    32px;
  font-weight:  700;
  color:        var(--text-primary, #0A2540);
  line-height:  1.1;
  margin-bottom: 12px;
}

/* Trend badge row */
.card-stat__trend {
  display:    inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   13px;
  font-weight: 600;
  padding:     3px 8px;
  border-radius: 100px;
  line-height: 1.4;
}

/* Trend: positive (green) */
.card-stat__trend--up {
  background-color: var(--success-light, rgba(16, 185, 129, 0.12));
  color:            var(--color-success, #10B981);
}

/* Trend: negative (red) */
.card-stat__trend--down {
  background-color: var(--error-light, rgba(239, 68, 68, 0.10));
  color:            var(--color-error, #EF4444);
}

/* Trend: neutral (gray) */
.card-stat__trend--neutral {
  background-color: rgba(100, 116, 139, 0.10);
  color:            var(--text-secondary, #64748B);
}

/* ==========================================================================
   FEATURE CARD — LIGHT VARIANT (UI-0038)
   White bg, border, 12px radius, 32px padding
   Electric icon; hover border shifts to rgba blue
   ========================================================================== */

.card-feature {
  background-color: #ffffff;
  border:           1px solid rgba(226, 232, 240, 0.8);
  border-radius:    16px;
  padding:          32px;
  box-shadow:       var(--shadow-sm, 0 1px 2px rgba(10, 37, 64, 0.05));
  transition:
    box-shadow   300ms ease,
    transform    300ms ease,
    border-color 300ms ease;
}

.card-feature:hover {
  border-color: rgba(47, 128, 237, 0.40);
  box-shadow:   var(--shadow-lg, 0 10px 15px -3px rgba(10, 37, 64, 0.08), 0 4px 6px -4px rgba(10, 37, 64, 0.04));
  transform:    translateY(-4px);
}

/* 56px electric icon area */
.card-feature__icon {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            56px;
  height:           56px;
  border-radius:    14px;
  background-color: rgba(47, 128, 237, 0.08);
  color:            var(--color-electric, #2F80ED);
  margin-bottom:    20px;
  flex-shrink:      0;
}

.card-feature__icon svg,
.card-feature__icon .icon {
  width:  24px;
  height: 24px;
}

.card-feature__title {
  font-family:   var(--font-display, 'Space Grotesk', sans-serif);
  font-size:     18px;
  font-weight:   700;
  color:         var(--text-primary, #0A2540);
  line-height:   1.3;
  margin-bottom: 8px;
}

.card-feature__description {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:   15px;
  font-weight: 400;
  color:       var(--text-secondary, #64748B);
  line-height: 1.6;
}

/* ==========================================================================
   FEATURE CARD — DARK VARIANT (UI-0039)
   gradient-card-dark background, rgba white border
   Hover: border shifts to rgba blue + inner glow
   ========================================================================== */

.card-feature-dark {
  background:          linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter:     blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:              1px solid rgba(255, 255, 255, 0.12);
  border-radius:       16px;
  padding:             32px;
  transition:
    box-shadow   300ms ease,
    border-color 300ms ease,
    transform    300ms ease;
}

.card-feature-dark:hover {
  border-color: rgba(47, 128, 237, 0.40);
  box-shadow:   0 0 30px rgba(47, 128, 237, 0.12), 0 0 0 1px rgba(47, 128, 237, 0.20);
  transform:    translateY(-4px);
}

/* Icon on dark */
.card-feature-dark .card-feature__icon {
  background-color: rgba(47, 128, 237, 0.20);
  color:            var(--color-electric, #2F80ED);
}

.card-feature-dark .card-feature__title {
  color: #ffffff;
}

.card-feature-dark .card-feature__description {
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   PRICING CARD — DEFAULT (UI-0040)
   White bg, 1px border, 40px padding, shadow-md
   Interior: plan name / price / features / CTA
   ========================================================================== */

.card-pricing {
  position:         relative;
  background-color: #ffffff;
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    16px;
  padding:          40px;
  box-shadow:       0 2px 8px rgba(10, 37, 64, 0.06);
  display:          flex;
  flex-direction:   column;
  transition:
    box-shadow   300ms ease,
    transform    300ms ease,
    border-color 300ms ease;
}

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

/* Plan name (e.g., "Starter") */
.card-pricing__plan {
  font-family:   var(--font-display, 'Space Grotesk', sans-serif);
  font-size:     14px;
  font-weight:   700;
  color:         var(--color-electric, #2F80ED);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  12px;
}

/* Price amount */
.card-pricing__price {
  display:       flex;
  align-items:   baseline;
  gap:           4px;
  margin-bottom: 8px;
}

.card-pricing__price-amount {
  font-family:  var(--font-display, 'Space Grotesk', sans-serif);
  font-size:    48px;
  font-weight:  700;
  color:        var(--text-primary, #0A2540);
  line-height:  1;
}

.card-pricing__price-currency {
  font-family:  var(--font-display, 'Space Grotesk', sans-serif);
  font-size:    24px;
  font-weight:  700;
  color:        var(--text-primary, #0A2540);
  align-self:   flex-start;
  margin-top:   8px;
}

.card-pricing__price-period {
  font-size:   15px;
  font-weight: 400;
  color:       var(--text-secondary, #64748B);
}

/* Short descriptor line below price */
.card-pricing__description {
  font-size:     14px;
  color:         var(--text-secondary, #64748B);
  margin-bottom: 24px;
  line-height:   1.5;
}

/* Divider before feature list */
.card-pricing__divider {
  height:           1px;
  background-color: var(--border-default, #E2E8F0);
  margin:           24px 0;
}

/* Feature list */
.card-pricing__features {
  list-style:    none;
  margin:        0 0 24px;
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           12px;
  flex:          1; /* push CTA to bottom */
}

.card-pricing__feature {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  font-size:   15px;
  color:       var(--text-primary, #0A2540);
  line-height: 1.5;
}

/* Checkmark icon wrapper */
.card-pricing__check {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            20px;
  height:           20px;
  border-radius:    50%;
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.10));
  color:            var(--color-electric, #2F80ED);
  flex-shrink:      0;
  margin-top:       1px;
}

.card-pricing__check svg { width: 12px; height: 12px; }

/* CTA — secondary button, full width (spec: secondary) */
.card-pricing__cta {
  margin-top: auto;
}

/* ==========================================================================
   PRICING CARD — RECOMMENDED / PRO (UI-0041)
   2px electric border, shadow-lg + glow, scale 1.02, "MOST POPULAR" badge
   ========================================================================== */

.card-pricing.recommended {
  background: linear-gradient(180deg, rgba(47, 128, 237, 0.03) 0%, #ffffff 20%);
  border:     2px solid var(--color-electric, #2F80ED);
  box-shadow:
    var(--shadow-lg,   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)),
    var(--shadow-glow, 0 0 0 4px rgba(47, 128, 237, 0.20));
  transform:  scale(1.04);
  z-index:    1;
}

.card-pricing.recommended:hover {
  box-shadow:
    var(--shadow-lg,    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)),
    var(--shadow-glow-lg, 0 0 0 6px rgba(47, 128, 237, 0.25));
  transform: scale(1.04) translateY(-4px);
}

/* "MOST POPULAR" badge — overlaps top border by 50% */
.card-pricing.recommended::before {
  content:          'MOST POPULAR';
  position:         absolute;
  top:              -15px; /* half of badge height (30px) */
  left:             50%;
  transform:        translateX(-50%);
  background-color: var(--color-electric, #2F80ED);
  color:            #ffffff;
  font-family:      var(--font-body, 'Inter', sans-serif);
  font-size:        12px;
  font-weight:      700;
  letter-spacing:   0.08em;
  padding:          6px 16px;
  border-radius:    100px;
  white-space:      nowrap;
  height:           30px;
  display:          flex;
  align-items:      center;
}

/* ==========================================================================
   LEAD CARD (UI-0042)
   White bg, 12px radius, 24px padding
   Interior: name / status badge / email / phone / message preview (2-line clamp)
   ========================================================================== */

.card-lead {
  background-color: #ffffff;
  border:           1px solid var(--border-default, #E2E8F0);
  border-radius:    12px;
  padding:          24px;
  transition:
    box-shadow   300ms ease,
    transform    300ms ease;
}

.card-lead:hover {
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04));
  transform:  translateY(-1px);
}

/* Two-column header: name (left) + badge (right) */
.card-lead__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   12px;
}

.card-lead__name {
  font-family:  var(--font-display, 'Space Grotesk', sans-serif);
  font-size:    16px;
  font-weight:  700;
  color:        var(--text-primary, #0A2540);
  line-height:  1.3;
}

/* Status badge (pill) */
.card-lead__badge {
  display:         inline-flex;
  align-items:     center;
  padding:         3px 10px;
  border-radius:   100px;
  font-size:       12px;
  font-weight:     600;
  white-space:     nowrap;
  flex-shrink:     0;
}

.card-lead__badge--new {
  background-color: var(--color-electric-10, rgba(47, 128, 237, 0.10));
  color:            var(--color-electric, #2F80ED);
}

.card-lead__badge--contacted {
  background-color: rgba(16, 185, 129, 0.10);
  color:            var(--color-success, #10B981);
}

.card-lead__badge--qualified {
  background-color: rgba(245, 158, 11, 0.10);
  color:            var(--color-warning, #F59E0B);
}

.card-lead__badge--closed {
  background-color: rgba(100, 116, 139, 0.10);
  color:            var(--text-secondary, #64748B);
}

/* Contact detail rows */
.card-lead__detail {
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     14px;
  color:         var(--text-secondary, #64748B);
  margin-bottom: 6px;
  line-height:   1.4;
}

.card-lead__detail svg,
.card-lead__detail .icon {
  width:     16px;
  height:    16px;
  flex-shrink: 0;
  color:     var(--color-gray, #B0BAC5);
}

/* Message preview — 2-line clamp (Finding from UI-0042) */
.card-lead__message-preview {
  margin-top:        12px;
  padding-top:       12px;
  border-top:        1px solid var(--border-muted, #F1F5F9);
  font-size:         14px;
  color:             var(--text-secondary, #64748B);
  line-height:       1.55;
  /* 2-line clamp */
  display:           -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:          hidden;
}

/* ==========================================================================
   PREMIUM SHADOW UPGRADE
   ========================================================================== */

.card-feature {
  box-shadow: var(--shadow-premium-sm, 0 1px 2px rgba(10, 37, 64, 0.04), 0 1px 3px rgba(10, 37, 64, 0.02));
}

.card-feature:hover {
  box-shadow: var(--shadow-premium-lg, 0 4px 8px rgba(10, 37, 64, 0.04), 0 16px 32px -4px rgba(10, 37, 64, 0.08), 0 1px 0 rgba(10, 37, 64, 0.02));
}

/* ==========================================================================
   Cards — Mobile Responsive
   ========================================================================== */
@media (max-width: 768px) {
  .card-content,
  .card-stat,
  .card-feature,
  .card-feature-dark,
  .card-pricing,
  .card-lead {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .compact-card,
  .standard-card,
  .stat-card { padding: 20px; }

  .large-card,
  .feature-card { padding: 24px; }

  .pricing-card { padding: 32px; }

  .card-pricing.recommended {
    transform: scale(1.02);
  }
}

@media (max-width: 639px) {
  /* Prevent horizontal overflow on all cards */
  .card-content,
  .card-stat,
  .card-feature,
  .card-feature-dark,
  .card-pricing,
  .card-lead {
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Reduce padding on mobile */
  .card-content,
  .card-stat {
    padding: var(--space-4);
  }

  .card-feature,
  .card-feature-dark {
    padding: var(--space-5);
  }

  .card-pricing {
    padding: var(--space-6);
  }

  .large-card    { padding: var(--space-5); }
  .feature-card  { padding: var(--space-5); }
  .pricing-card  { padding: var(--space-6); }

  /* Stat card value: smaller on mobile */
  .card-stat__value {
    font-size: 24px;
  }

  /* Pricing card: reset recommended scale on mobile */
  .card-pricing.recommended {
    transform: none;
  }

  .card-pricing.recommended:hover {
    transform: translateY(-2px);
  }

  .card-pricing__price-amount {
    font-size: 36px;
  }

  /* Disable hover lift on touch devices */
  .card-content:hover,
  .card-feature:hover,
  .card-feature-dark:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .card-content,
  .card-stat {
    padding: 12px;
  }

  .card-feature,
  .card-feature-dark {
    padding: 16px;
  }

  .card-pricing {
    padding: 20px;
  }

  .card-stat__value {
    font-size: 22px;
  }

  .card-pricing__price-amount {
    font-size: 32px;
  }

  .card-feature__title {
    font-size: 16px;
  }

  .card-feature__description {
    font-size: 14px;
  }

  .card-lead {
    padding: 16px;
  }

  .card-lead__name {
    font-size: 15px;
  }
}