/* ==========================================================================
   CARD — Level 2 film and artist cards. Replaces otbtv_theme's card.css.
   A still with rounded corners, a title and one muted line; no surface.
   ========================================================================== */

/* ---------- GRIDS ---------- */

.otb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-10) var(--space-6);
}

.otb-grid--2,
.otb-grid--4 {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7) var(--space-6);
}

/* Portraits pair up on phones; stills stay one to a row. */
@media (max-width: 599px) {
  .otb-grid--4:has(> .otb-card--artist) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
}

@media (min-width: 600px) {
  .otb-grid--2,
  .otb-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 995px) {
  .otb-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- CARD ---------- */

.otb-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}

.otb-card__image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  background: var(--color-bg-surface);
}

.otb-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The trailer clip over the still while the card is pointed at or focused
   (js/card-preview.js); it shows once loaded. */
.otb-card__image .otb-card__preview {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.otb-card__image.is-previewing .otb-card__preview {
  opacity: 1;
}

.otb-card--artist .otb-card__image {
  aspect-ratio: 4 / 5;
}

.otb-card--artist .otb-card__image img {
  object-position: center 20%;
}

.otb-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.otb-card__title {
  margin: 0;
  color: var(--color-text-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

.otb-card__link:hover .otb-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.otb-card__subtitle,
.otb-card__meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

/* ---------- PROGRESS ---------- */
/* How much of a film the viewer has watched (home, continue watching). */

.otb-card__progress {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-border-light);
}

.otb-card__progress-bar {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
}

/* A live rental chip under the meta line (rental-countdown.js). */
.otb-card__chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  height: 24px;
  margin-top: var(--space-2);
  padding: 0 9px;
  border-radius: var(--border-radius-sm);
  background: var(--color-status-warning-bg);
  color: var(--color-status-warning-text);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.otb-card__chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- CHIP ON A STILL ---------- */
/* The neutral status chip: a word, with a dot. */

.otb-card__badge {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--border-radius-sm);
  background: var(--color-status-info-bg);
  color: var(--color-status-info-text);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.otb-card__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}