/* ==================================================
   CARD EXTENSION LAYER
   Canonical .card, .tool-card and .result-card foundations
   live in base.css. This file extends product/landing card
   variants used by pages that load core/*.
================================================== */

.ml-card,
.info-card,
.feature-card,
.cta-card,
.surface-card,
.benefit-card,
.value-item,
.orc-card,
.ml-flow-box,
.price-section {
  border: var(--surface-card-border, 1px solid var(--border-strong, var(--ml-border)));
  border-radius: var(--surface-card-radius, var(--radius-lg));
  background: var(--surface-card-bg, var(--ml-surface));
  color: var(--ml-text);
  box-shadow: var(--surface-shadow, var(--shadow-soft, var(--shadow-sm)));
  min-width: 0;
}

.ml-card :is(h1, h2, h3, h4, h5, h6),
.info-card :is(h1, h2, h3, h4, h5, h6),
.feature-card :is(h1, h2, h3, h4, h5, h6),
.cta-card :is(h1, h2, h3, h4, h5, h6),
.surface-card :is(h1, h2, h3, h4, h5, h6),
.benefit-card :is(h1, h2, h3, h4, h5, h6),
.value-item :is(h1, h2, h3, h4, h5, h6),
.orc-card :is(h1, h2, h3, h4, h5, h6),
.ml-flow-box :is(h1, h2, h3, h4, h5, h6),
.price-section :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ml-text);
}

.ml-card :is(p, li, small),
.info-card :is(p, li, small),
.feature-card :is(p, li, small),
.cta-card :is(p, li, small),
.surface-card :is(p, li, small),
.benefit-card :is(p, li, small),
.orc-card :is(p, li, small),
.ml-flow-box :is(p, li, small),
.price-section :is(p, li, small),
.ml-card .muted,
.surface-card .muted {
  color: var(--ml-text-muted);
}

.info-card,
.feature-card,
.cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.result-label,
.ml-card .result-label {
  color: var(--ml-text-muted);
  font-size: var(--result-label-size, var(--text-xs));
  font-weight: 750;
  letter-spacing: var(--result-label-tracking, var(--tracking-wide));
  line-height: var(--line-snug);
  text-transform: uppercase;
}

.result-value,
.ml-card .result-value {
  color: var(--ml-text);
  font-size: var(--result-value-size, clamp(2rem, 5vw, 3.35rem));
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  letter-spacing: var(--result-value-tracking, -0.055em);
  line-height: 0.98;
}

.result-meta,
.ml-card .result-meta {
  color: var(--ml-text-muted);
  font-size: var(--text-xs);
  line-height: var(--line-normal);
}

.cta-card {
  border-color: var(--surface-workflow-border-color, color-mix(in srgb, var(--ml-primary) 26%, var(--border-strong, var(--ml-border))));
  background: var(--surface-workflow-bg, color-mix(in srgb, var(--ml-primary) 7%, var(--ml-surface)));
  box-shadow: var(--surface-shadow-hover, var(--shadow-card, var(--shadow-md)));
  text-align: center;
}

.feature-card,
.info-card {
  border-color: var(--border-soft, var(--ml-border-soft));
}

.ml-card-header,
.ml-card-content,
.ml-card-actions {
  padding: var(--space-lg);
}

.ml-card-header + .ml-card-content,
.ml-card-content + .ml-card-actions {
  padding-top: 0;
}

.ml-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

@media (max-width: 640px) {
  .ml-card-header,
  .ml-card-content,
  .ml-card-actions {
    padding: var(--mobile-card-padding, var(--space-md));
  }

  .ml-card-actions > * {
    flex: 1 1 100%;
  }

  .info-card,
  .feature-card,
  .cta-card {
    gap: var(--mobile-stack-gap, var(--space-sm));
    padding: var(--mobile-card-padding, var(--space-md));
  }

  .result-value,
  .ml-card .result-value {
    font-size: var(--result-value-mobile-size, clamp(1.8rem, 11vw, 2.7rem));
  }
}