/**
 * hx-card.css — Card SSOT
 */
.hx-card {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
  padding: var(--hx-space-4);
}
.hx-card__title {
  color: var(--hx-fg);
  font-weight: var(--hx-font-weight-bold);
  margin-bottom: var(--hx-space-2);
}
.hx-card__body {
  color: var(--hx-fg-muted);
}

/* Variants — pure tokens, flip with theme */
.hx-card--muted {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg-muted);
}
.hx-card--callout {
  background: var(--hx-info-bg);
  border-color: var(--hx-primary);
}
.hx-card--raised {
  box-shadow: var(--hx-elev);
  background: var(--hx-surface);
}
.hx-card--flat {
  box-shadow: none;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-card-mini { border: 1px solid var(--hx-line); border-radius: 12px; padding: 12px; }

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-card__body {
  color: var(--hx-fg);
}


/* 3.04.94 — 4-variant readiness (light/dark × desktop/mobile)
   Controlled by data-theme + data-hx-vp on <html>.
   All styles token-driven. Composition with other primitives encouraged. */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* tokens flip automatically */
}

/* Card — mobile + dark */
@media (max-width: 767px) {
  .hx-card {
    padding: var(--spacing-3);
  }
  .hx-card__title {
    font-size: var(--text-heading-4-size);
  }
}
html[data-theme="dark"] .hx-card,
[data-theme="dark"] .hx-card {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border-color: var(--hx-line);
}
html[data-theme="dark"] .hx-card__meta,
[data-theme="dark"] .hx-card__meta {
  color: var(--hx-fg-muted);
}

/* Card Elevations + Variants — mobile not out of view */
@media (max-width: 767px) {
  .hx-card,
  .hx-card--elevated,
  .hx-preview-card__stage .hx-card {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .ds-canvas--row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Card — Elevations + Variants: force in-view on mobile */
@media (max-width: 767px) {
  .hx-card-row,
  .hx-preview-card__stage .hx-card-row,
  .hx-example__stage .hx-card-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-3);
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  .hx-card-row > .hx-card,
  .hx-card-row > article {
    width: 100%;
    max-width: 100%;
    margin: 0;
    flex: 1 1 auto;
  }
}

/* Force Elevations + Variants rows in view on mobile */
@media (max-width: 767px) {
  .hx-preview-card__stage:has(.hx-card-row),
  .hx-example__stage:has(.hx-card-row) {
    overflow-x: auto;
    max-width: 100vw;
  }
  .hx-card-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }
  .hx-card-row .hx-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Force column on mobile — higher specificity */
@media (max-width: 900px) {
  .hx-preview-card__stage .hx-card-row,
  .hx-example__stage .hx-card-row,
  .hx-card-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    gap: var(--spacing-3);
  }
  .hx-preview-card__stage .hx-card-row > .hx-card,
  .hx-example__stage .hx-card-row > .hx-card,
  .hx-card-row > .hx-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Card Elevations + Variants — force column, no media query dependency */
.hx-card-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  gap: var(--spacing-3);
  box-sizing: border-box;
}
.hx-card-row > .hx-card,
.hx-card-row > article.hx-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 100%;
  box-sizing: border-box;
}

/* Desktop: normal wide row layout */
@media (min-width: 901px) {
  .hx-card-row {
    flex-direction: row;
    width: auto;
    max-width: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--spacing-4);
  }
  .hx-card-row > .hx-card,
  .hx-card-row > article.hx-card {
    width: auto;
    max-width: 320px;
    flex: 0 1 auto;
  }
}

/* Shared card width — Simple, Elevations, Variants */
.hx-card,
.hx-card-row > .hx-card {
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 901px) {
  .hx-card-row > .hx-card {
    width: 320px;
    flex: 0 0 320px;
  }
}

/* Elevations + Variants match hero Card title width */
.hx-card-row > .hx-card {
  width: 100%;
  max-width: 480px;
  flex: 0 1 480px;
}
.hx-preview-card__stage > .hx-card,
.hx-example__stage > .hx-card {
  width: 100%;
  max-width: 480px;
}

}

/* Elevations + Variants: fixed width, not content-sized */
.hx-card-row > .hx-card {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  flex: 0 0 320px;
  box-sizing: border-box;
}

/* Simple stays natural / content-aware but capped */
.hx-preview-card__stage > .hx-card:not(.hx-card-row .hx-card) {
  width: auto;
  max-width: 480px;
  min-width: 0;
  flex: none;
}

/* Definitive: Elevations + Variants fixed 320px */
.hx-card-row > .hx-card,
.hx-card-row > article.hx-card {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  flex: 0 0 320px;
}


/* Card raised: elevation (wins helix-app) */
.hx-app .hx-card--raised,
.hx-card--raised {
  box-shadow: var(--hx-elev);
}
.hx-app .hx-card--muted,
.hx-card--muted {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg-muted);
}