/*
 * Path: css/components/cards.css
 * Purpose: Component variants for cards (base .card lives in core/layout.css)
 * Depends on: css/core/tokens.css, css/core/layout.css
 * Version: 0.9.0 (pre-1.0)
 */

/* Soft variant */
.card.soft{
  background: color-mix(in srgb, var(--surface) 92%, var(--ec-neutral-900) 8%);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: none;
}


body[data-theme-tone="dark"] .section.is-muted .card.soft{
  background: color-mix(in srgb, var(--surface) 92%, var(--ec-neutral-900) 8%);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: none;
}

.section.is-muted .card.soft{
  background: var(--ec-surface-100);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: none;
}

/* Inverted section treatment */
.section.is-invert .card.soft{
  background: color-mix(in srgb, var(--surface-invert) 82%, #ffffff 18%);
  border-color: color-mix(in srgb, #ffffff 28%, transparent);
}

/* added on 2025/10/22 */
/* === Card media (large top image) =============================== */
/* Opt-in via .has-media to avoid touching existing cards elsewhere */
.card.has-media {
  display: grid;
  gap: clamp(10px, 1.6vw, 14px);
}

/* The media block sits on top, spans full card width */
.card-media {
  --card-media-aspect: 16 / 10;        /* tweak per taste */
  --card-media-max-h: 280px;           /* desktop cap */
  --card-media-min-h: 160px;           /* mobile floor */

  position: relative;
  display: block;
  width: 100%;
  /* background: color-mix(in srgb, var(--surface) 95%, var(--ec-neutral-900) 5%); */
  /* border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); */
  /* border-radius: var(--radius-md); */
  overflow: hidden;
  /* box-shadow: var(--shadow-sm); */
}

/* Responsive sizing: maintain ratio and cap height */
.card-media::before {
  content: "";
  display: block;
  aspect-ratio: var(--card-media-aspect);
  min-height: var(--card-media-min-h);
  max-height: var(--card-media-max-h);
  width: 100%;
}

/* Actual image fills the box neatly */
.card-media .card-img,
.card-media picture,
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* keep SVG/PNG fully visible */
  object-position: center;
  display: block;
  background: transparent;
}

/* Dark tone slight polish for contrast */
body[data-theme-tone="dark"] .card-media {
  /* background: color-mix(in srgb, var(--ec-neutral-100) 95%, var(--ec-neutral-900) 5%); */
  /* background: color-mix(in srgb, var(--ec-neutral-300) 92%, #ffffff 8%); */
  /* border-color: color-mix(in srgb, #ffffff 22%, transparent); */
  /* box-shadow: var(--shadow-sm); */
}

/* Tighten heading spacing after big visual */
.card.has-media > h2 {
  margin-top: 0.2em;
}

/* Grid cards get a bit more breathing room when media is present */
.grid .card.has-media {
  padding: clamp(0.85rem, 1.6vw, 1.1rem);
}