/**
 * Tutorials listing page (page-tutorials.php).
 * Reuses the blog archive's charcoal hero + overlapping card grid (blog.css);
 * this file only adds the lock/unlock badge and the card footer line.
 */

.mwp-tut-card {
  position: relative;
}

.mwp-tut-card .mwp-post-card__media {
  position: relative;
}

/* Locked cards read as browsable-but-gated, not broken: full-colour art, a
   small badge, and a faint dim so the lock state is obvious at a glance. */
.mwp-tut-card.is-locked .mwp-post-card__media img {
  filter: saturate(0.85) brightness(0.94);
}

.mwp-tut-card__badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.32rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-warm-white);
  /* Colour at half opacity + a firmer blur so the pill reads over busy or
     light artwork; the text shadow keeps the label legible either way. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(46, 42, 38, 0.35);
}

.mwp-tut-card__badge.is-locked {
  background: rgba(196, 112, 75, 0.75); /* --color-terracotta */
}

.mwp-tut-card__badge.is-open {
  background: rgba(122, 139, 111, 0.75); /* --color-sage */
}

.mwp-tut-card__foot {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-clay);
}

.mwp-tut-card.is-locked .mwp-tut-card__foot {
  color: var(--color-warm-gray);
}