/* ==========================================================================
   Card Grid Item component sheet
   Shared grid/table styles live in sheet.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Demo cells — tall enough to show the full card
   -------------------------------------------------------------------------- */
.demo-cell {
  vertical-align: top;
  padding: var(--spacing-md) !important;
}

/* --------------------------------------------------------------------------
   Card item — media area + copy area
   Used as an <a> on index.html; pointer-events enabled in production.
   -------------------------------------------------------------------------- */
.card-item {
  display: flex;
  flex-direction: column;
  background: var(--background-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Hover state — shadow */
.card-item--hover {
  box-shadow:
    0px 4px 6px var(--shadow-light-08),
    0px 1px 1.5px var(--shadow-light-06);
}

[data-theme="dark"] .card-item--hover {
  box-shadow:
    0px 4px 6px var(--shadow-dark-28),
    0px 1px 1.5px var(--shadow-dark-24);
}

/* Focus states — 3px outside focus ring + hover shadow */
[data-state="focus"],
[data-state="focus-hover"] {
  outline: 3px solid var(--border-focus);
  outline-offset: 0px;
  box-shadow:
    0px 4px 6px var(--shadow-light-08),
    0px 1px 1.5px var(--shadow-light-06);
}

[data-theme="dark"] [data-state="focus"],
[data-theme="dark"] [data-state="focus-hover"] {
  box-shadow:
    0px 4px 6px var(--shadow-dark-28),
    0px 1px 1.5px var(--shadow-dark-24);
}

/* --------------------------------------------------------------------------
   Media block — remove standalone border/radius when nested in card
   -------------------------------------------------------------------------- */
.card-item .media-block__image {
  border: none;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Copy area
   -------------------------------------------------------------------------- */
.card-item__copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-sm);
  flex: 1;
}

.card-item__copy--hover {
  background: var(--background-hover);
}

.card-item__copy--hover .card-item__role,
[data-state="focus"] .card-item__role,
[data-state="focus-hover"] .card-item__role {
  color: var(--text-secondary);
}

.card-item__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Title — type/heading-1 */
.card-item__title {
  margin: 0;
  font-family: var(--type-family-semibold), system-ui, sans-serif;
  font-size: var(--type-heading-lg-size);
  font-weight: 400;
  line-height: var(--type-heading-lg-line-height);
  letter-spacing: var(--type-heading-lg-letter-spacing);
  color: var(--text-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.card-item__outcome {
  margin: 0;
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  color: var(--text-primary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.card-item__bottom {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: auto;
}

/* Role — type/caption */
.card-item__role {
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--text-info);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}