/* =============================================================
 * VI Component: Card
 * vi-card
 * =============================================================
 *
 * VARIANTS:    vi-card--flat | vi-card--raised | vi-card--bordered
 * MODIFIERS:   vi-card--interactive (hover lift effect)
 * SLOTS:       vi-card__media | vi-card__header | vi-card__body |
 *              vi-card__footer | vi-card__eyebrow | vi-card__title |
 *              vi-card__text | vi-card__actions
 *
 * USAGE PATTERN (full card):
 *   <article class="vi-card vi-card--raised">
 *     <div class="vi-card__media">
 *       <img src="..." alt="...">
 *     </div>
 *     <div class="vi-card__body">
 *       <span class="vi-card__eyebrow">Category</span>
 *       <h3 class="vi-card__title">Title</h3>
 *       <p class="vi-card__text">Description text here.</p>
 *     </div>
 *     <div class="vi-card__footer">
 *       <button class="vi-btn vi-btn--ghost vi-btn--sm">Cancel</button>
 *       <button class="vi-btn vi-btn--primary vi-btn--sm">Confirm</button>
 *     </div>
 *   </article>
 *
 * USAGE PATTERN (minimal):
 *   <div class="vi-card vi-card--flat">
 *     <div class="vi-card__body">
 *       <h3 class="vi-card__title">Title</h3>
 *       <p class="vi-card__text">Content</p>
 *     </div>
 *   </div>
 *
 * TOKENS: Tier 3 (--card-*) defined below, mapping to Tier 2 roles.
 *         Rules reference Tier 3 ONLY — never --primitive-* or
 *         Tier 2 directly. Fills consume the surface.* family
 *         (§20 boundary); text uses the text.* roles.
 * ============================================================= */

/* ── Tier 3 component tokens ── */
.vi-card {
  /* structure */
  --card-bg:                    var(--color-surface-default);
  --card-radius:                var(--radius-card);
  --card-border:                var(--color-border-default);
  --card-border-width:          var(--border-width-thin);
  --card-bordered-border-width: var(--border-width-medium);
  --card-shadow:                var(--shadow-card);
  --card-shadow-hover:          var(--shadow-dropdown);
  --card-padding-y:             var(--spacing-component-padding-lg);
  --card-padding-x:             var(--spacing-component-padding-lg);
  --card-header-padding-y:      var(--spacing-component-padding-md);
  --card-footer-padding-y:      var(--spacing-component-padding-md);
  --card-gap:                   var(--spacing-component-gap-sm);

  /* motion */
  --card-duration:              var(--motion-duration-normal);
  --card-ease:                  var(--motion-ease-out);
  --card-lift-distance:         var(--motion-distance-xs);

  /* focus ring (§20 canonical family) */
  --card-focus-ring-width:      var(--focus-ring-width);
  --card-focus-ring-offset:     var(--focus-ring-offset);
  --card-focus-ring-fill:       var(--color-interactive-focus);

  /* footer */
  --card-footer-bg:             var(--color-surface-subtle);
  --card-footer-border:         var(--color-border-default);

  /* slot: eyebrow */
  --card-eyebrow-font-size:     var(--font-size-xs);
  --card-eyebrow-font-weight:   var(--font-weight-semibold);
  --card-eyebrow-letterspacing: var(--font-letterspacing-widest);
  --card-eyebrow-text:          var(--color-text-secondary);

  /* slot: title */
  --card-title-font-size:       var(--font-size-lg);
  --card-title-font-weight:     var(--font-weight-semibold);
  --card-title-leading:         var(--font-leading-snug);
  --card-title-letterspacing:   var(--font-letterspacing-tight);
  --card-title-text:            var(--color-text-primary);

  /* slot: text */
  --card-text-font-size:        var(--font-size-sm);
  --card-text-leading:          var(--font-leading-relaxed);
  --card-text-text:             var(--color-text-secondary);
}

/* ── Base ── */
.vi-card {
  background-color: var(--card-bg);
  border-radius:    var(--card-radius);
  border:           var(--card-border-width) solid var(--card-border);
  overflow:         hidden;
  display:          flex;
  flex-direction:   column;
}


/* ── Variant: Flat (no shadow, just border) ── */
.vi-card--flat {
  box-shadow: none;
}

/* ── Variant: Raised (default feel — subtle shadow) ── */
.vi-card--raised {
  box-shadow:  var(--card-shadow);
  border-color: transparent;
}

/* ── Variant: Bordered (strong border, no shadow) ── */
.vi-card--bordered {
  border:     var(--card-bordered-border-width) solid var(--card-border);
  box-shadow: none;
}


/* ── Modifier: Interactive (clickable card) ── */
.vi-card--interactive {
  cursor:     pointer;
  transition:
    transform  var(--card-duration) var(--card-ease),
    box-shadow var(--card-duration) var(--card-ease);
}

.vi-card--interactive:hover {
  transform:  translateY(calc(-1 * var(--card-lift-distance)));
  box-shadow: var(--card-shadow-hover);
}

.vi-card--interactive:active {
  transform:  translateY(0);
  box-shadow: var(--card-shadow);
}

.vi-card--interactive:focus-visible {
  outline:        var(--card-focus-ring-width) solid var(--card-focus-ring-fill);
  outline-offset: var(--card-focus-ring-offset);
}


/* ── Slot: Media (image or video at top of card) ── */
.vi-card__media {
  width:    100%;
  overflow: hidden;
  flex-shrink: 0;
}

/* Media is content-driven: it fills the card's width and keeps its
 * intrinsic height — no imposed height or ratio (checkpoint decision,
 * 2026-07-05). Equal-height card rows come from the grid's
 * align-items: stretch, not from fixed media sizes. */
.vi-card__media img,
.vi-card__media video {
  width:      100%;
  height:     auto;
  display:    block;
}


/* ── Slot: Header (above body, below media — for labels/badges) ── */
.vi-card__header {
  padding:       var(--card-header-padding-y) var(--card-padding-x);
  padding-bottom: 0;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           var(--card-gap);
}


/* ── Slot: Body (main content area) ── */
.vi-card__body {
  padding: var(--card-padding-y) var(--card-padding-x);
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     var(--card-gap);
}


/* ── Slot: Footer (actions at bottom) ── */
.vi-card__footer {
  padding:         var(--card-footer-padding-y) var(--card-padding-x);
  background-color: var(--card-footer-bg);
  border-top:      var(--card-border-width) solid var(--card-footer-border);
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--card-gap);
  flex-shrink:     0;
}

.vi-card__footer--space-between {
  justify-content: space-between;
}


/* ── Typography slots ── */
.vi-card__eyebrow {
  font-size:      var(--card-eyebrow-font-size);
  font-weight:    var(--card-eyebrow-font-weight);
  letter-spacing: var(--card-eyebrow-letterspacing);
  text-transform: uppercase;
  color:          var(--card-eyebrow-text);
}

.vi-card__title {
  font-size:      var(--card-title-font-size);
  font-weight:    var(--card-title-font-weight);
  color:          var(--card-title-text);
  line-height:    var(--card-title-leading);
  letter-spacing: var(--card-title-letterspacing);
  margin:         0;
}

.vi-card__text {
  font-size:   var(--card-text-font-size);
  color:       var(--card-text-text);
  line-height: var(--card-text-leading);
  margin:      0;
  flex:        1;
}

.vi-card__actions {
  display:    flex;
  gap:        var(--card-gap);
  margin-top: var(--card-gap);
  flex-wrap:  wrap;
}


/* ── Reduced motion ──
 * Required pattern on every motion state. The global guard in
 * styles/motion.css covers the layered vi.css cascade; this block
 * keeps the component safe when its file is loaded standalone
 * (e.g. the docs pages link component files directly). */
@media (prefers-reduced-motion: reduce) {
  .vi-card--interactive {
    transition: none;
  }
  .vi-card--interactive:hover {
    transform: none;
  }
}