/* ============================================================
   PM Hub — blog index card covers
   Covers are CSS gradients with no <img>, so a featured image is
   applied as a background by cards.php. These rules take over once
   the pmhub-photo class is present.
   ============================================================ */

.pmhub .cover.pmhub-photo,
.pmhub .pm-featured .cover.pmhub-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

/* A scrim keeps the tag, ribbon and stamp readable over a photograph.
   Without it a bright sky swallows white text. */
.pmhub .cover.pmhub-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14,21,37,.42) 0%, rgba(14,21,37,.06) 38%, rgba(14,21,37,.30) 100%);
  pointer-events: none;
  z-index: 0;
}

/* The gradient decorations fight a photograph, so they come off.
   The tag and ribbon are labels, not decoration, so they stay. */
.pmhub .cover.pmhub-photo .glow,
.pmhub .cover.pmhub-photo .pattern,
.pmhub .cover.pmhub-photo .wm,
.pmhub .cover.pmhub-photo .bigmark {
  display: none !important;
}

.pmhub .cover.pmhub-photo .tag,
.pmhub .cover.pmhub-photo .ribbon,
.pmhub .cover.pmhub-photo .stamp {
  position: relative;
  z-index: 1;
}

/* The tag sat on a flat violet field. On a photo it needs its own
   contrast rather than relying on the background. */
.pmhub .cover.pmhub-photo .tag {
  background: rgba(14,21,37,.78) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(14,21,37,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Gentle zoom on hover, matching the lift the cards already have. */
.pmhub .card .cover.pmhub-photo { transition: background-size .45s ease; }
.pmhub .card:hover .cover.pmhub-photo { background-size: 108% auto !important; }

@media (prefers-reduced-motion: reduce) {
  .pmhub .card .cover.pmhub-photo,
  .pmhub .card:hover .cover.pmhub-photo {
    transition: none !important;
    background-size: cover !important;
  }
}