/* ==========================================================================
   Component: Engagement Feed Card  (Chunk 13)
   The member dashboard "Feed" is a list of these — one per FEED-delivery
   Elements::Card — each linking to its /p participation. Three coach-selectable
   styles (settings.feed_style → hero | split | cover), picked in the Card editor
   via the Hero Pill Select. Banner / accent colours are per-Card runtime values
   (inline styles); everything else is token-driven.
   ========================================================================== */

.ds-feed-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
}

.ds-feed-card:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* --- Shared image --- */
.ds-feed-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Banner pill (top-left). Background colour set inline from the Card. --- */
.ds-feed-card__banner {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-on-accent);
}

/* --- Completion check --- */
.ds-feed-card__done {
  display: grid;
  place-items: center;
}

.ds-feed-card__done .material-symbols-rounded { font-size: 18px; }

/* ==========================================================================
   Style: Image hero (default) — full image + legibility scrim
   ========================================================================== */
.ds-feed-card--hero {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background-color: var(--surface-sunken);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.ds-feed-card--hero:hover { box-shadow: var(--shadow-lg); }

.ds-feed-card--hero .ds-feed-card__banner {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.ds-feed-card--hero .ds-feed-card__done,
.ds-feed-card--cover .ds-feed-card__done {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background-color: var(--status-success);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-md);
}

.ds-feed-card__scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--text-primary) 90%, transparent),
    color-mix(in srgb, var(--text-primary) 45%, transparent) 60%,
    transparent
  );
}

.ds-feed-card--hero .ds-feed-card__title {
  color: var(--text-inverse);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.ds-feed-card--hero .ds-feed-card__desc {
  margin-top: var(--space-1);
  color: color-mix(in srgb, var(--text-inverse) 85%, transparent);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Style: Split row — thumbnail left, body right
   ========================================================================== */
.ds-feed-card--split {
  display: flex;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--surface-base);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.ds-feed-card--split:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-default);
}

.ds-feed-card__thumb {
  position: relative;
  flex: 0 0 7rem;
  align-self: stretch;
  background-color: var(--surface-sunken);
}

/* Thin accent rail — colour set inline from the Card's banner colour. */
.ds-feed-card__accent {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--space-1);
}

.ds-feed-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  min-width: 0;
}

.ds-feed-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-feed-card--split .ds-feed-card__done { color: var(--status-success); margin-left: auto; }

.ds-feed-card--split .ds-feed-card__title,
.ds-feed-card--cover .ds-feed-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.ds-feed-card--split .ds-feed-card__desc,
.ds-feed-card--cover .ds-feed-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Style: Cover card — cover image on top, body below (mirrors .card--content)
   ========================================================================== */
.ds-feed-card--cover {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: var(--surface-base);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.ds-feed-card--cover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-default);
}

.ds-feed-card__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--surface-sunken);
}

.ds-feed-card--cover .ds-feed-card__banner {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}

.ds-feed-card--cover .ds-feed-card__body {
  gap: var(--space-1);
}

/* --- Feed grid (dashboard Feed panel body) — mobile-first single column,
       two-up on tablet+. The cards already cap their own width within. --- */
.ds-feed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .ds-feed-grid { grid-template-columns: 1fr 1fr; }
}

/* Card shape follows the soul (kept after --hero so it wins, as before). */
.ds-feed-card { border-radius: var(--soul-radius-card, 12px); }