/**
 * Kutby Card System — shared chrome + parts.
 * Variant files: components/cards/variant-*.css
 */

.kutby-card {
  --_card-radius: var(--kutby-card-radius, var(--kutby-radius-lg));
  --_card-pad: var(--kutby-card-padding, var(--kutby-space-5));
  --_card-shadow: var(--kutby-card-shadow, var(--kutby-shadow-sm));

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kutby-color-card);
  border: 1px solid var(--kutby-color-border);
  border-radius: var(--_card-radius);
  box-shadow: var(--_card-shadow);
  overflow: hidden;
  transition:
    box-shadow var(--kutby-transition),
    transform var(--kutby-transition),
    border-color var(--kutby-transition);
}

.kutby-card:hover {
  box-shadow: var(--kutby-shadow-md);
  border-color: var(--kutby-color-border);
}

.kutby-card:focus-within {
  box-shadow: var(--kutby-focus-ring);
}

.kutby-card__media {
  position: relative;
  overflow: hidden;
  background: var(--kutby-color-surface);
  flex-shrink: 0;
}

.kutby-card__media--empty {
  background: linear-gradient(
    135deg,
    var(--kutby-color-surface) 0%,
    var(--kutby-color-border) 100%
  );
}

.kutby-card__media--16x9 {
  aspect-ratio: 16 / 9;
}

.kutby-card__media--4x3 {
  aspect-ratio: 4 / 3;
}

.kutby-card__media--1x1 {
  aspect-ratio: 1 / 1;
}

.kutby-card__media--auto {
  aspect-ratio: auto;
}

.kutby-card__media-link {
  display: block;
  height: 100%;
}

.kutby-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--kutby-transition-slow);
}

.kutby-card:hover .kutby-card__img {
  transform: scale(1.03);
}

.kutby-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--kutby-overlay);
  pointer-events: none;
}

.kutby-card__gradient {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 65%;
  background: linear-gradient(
    to top,
    var(--kutby-overlay) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.kutby-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--kutby-space-2);
  padding: var(--_card-pad);
  flex: 1 1 auto;
}

.kutby-card__badge {
  align-self: flex-start;
  display: inline-flex;
  padding: var(--kutby-space-1) var(--kutby-space-2);
  border-radius: var(--kutby-radius-sm);
  background: var(--kutby-color-surface);
  color: var(--kutby-color-link);
  font-size: var(--kutby-font-size-sm);
  text-decoration: none;
  transition: color var(--kutby-transition), background-color var(--kutby-transition);
}

.kutby-card__badge:hover,
.kutby-card__badge:focus-visible {
  color: var(--kutby-color-hover);
  outline: none;
}

.kutby-card__title {
  margin: 0;
  font-size: var(--kutby-font-size-xl);
  line-height: var(--kutby-line-height-tight);
  font-weight: 700;
}

.kutby-card__title--sm {
  font-size: var(--kutby-font-size-body);
}

.kutby-card__title--lg {
  font-size: var(--kutby-font-size-2xl);
}

.kutby-card__title--display {
  font-size: var(--kutby-font-size-2xl);
}

.kutby-card__title a {
  color: var(--kutby-color-text);
  text-decoration: none;
}

.kutby-card__title a:hover,
.kutby-card__title a:focus-visible {
  color: var(--kutby-color-link);
  outline: none;
}

.kutby-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kutby-space-2) var(--kutby-space-3);
  color: var(--kutby-color-muted);
  font-size: var(--kutby-font-size-sm);
}

.kutby-card__excerpt {
  margin: var(--kutby-space-1) 0 0;
  color: var(--kutby-color-muted);
  font-size: var(--kutby-font-size-body);
  line-height: var(--kutby-line-height);
}

.kutby-card__readmore {
  margin-top: auto;
  padding-top: var(--kutby-space-3);
  align-self: flex-start;
  color: var(--kutby-color-link);
  font-size: var(--kutby-font-size-sm);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--kutby-transition);
}

.kutby-card__readmore:hover,
.kutby-card__readmore:focus-visible {
  color: var(--kutby-color-hover);
  outline: none;
  text-decoration: underline;
}

.kutby-card__bookmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--kutby-color-border);
  border-radius: var(--kutby-radius-sm);
  background: var(--kutby-color-bg);
  color: var(--kutby-color-text);
  cursor: pointer;
  transition: background-color var(--kutby-transition), color var(--kutby-transition);
}

.kutby-card__bookmark:hover,
.kutby-card__bookmark:focus-visible {
  color: var(--kutby-color-link);
  outline: none;
  box-shadow: var(--kutby-focus-ring);
}
