/* The pictures follow poem permalinks, so reordering the public collection does not swap artwork. */
.poem-card[href$="/poems/april/"] { --poem-art: url("./assets/poem-cards/april.webp"); }
.poem-card[href$="/poems/stars/"] { --poem-art: url("./assets/poem-cards/stars.webp"); }
.poem-card[href$="/poems/waiting/"] { --poem-art: url("./assets/poem-cards/waiting.webp"); }
.poem-card[href$="/poems/bakery/"] { --poem-art: url("./assets/poem-cards/bakery.webp"); }
.poem-card[href$="/poems/voices/"] { --poem-art: url("./assets/poem-cards/voices.webp"); }

.poem-card {
  isolation: isolate;
  background: #f4f0e6;
}
.poem-card::before,
.poem-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.poem-card::before {
  z-index: 0;
  background-image: var(--poem-art, none);
  background-position: right center;
  background-size: cover;
  opacity: .9;
  transition: transform .45s ease, opacity .45s ease;
}
.poem-card::after {
  z-index: 1;
  background: linear-gradient(90deg, rgba(247,245,238,.96) 0%, rgba(247,245,238,.9) 35%, rgba(247,245,238,.66) 70%, rgba(247,245,238,.28) 100%),
              linear-gradient(180deg, rgba(247,245,238,.46), transparent 75%);
}
.poem-card > * {
  position: relative;
  z-index: 2;
}
.poem-card h3 { word-break: keep-all; overflow-wrap: break-word; }
.poem-card:hover::before { transform: scale(1.035); opacity: 1; }
.poem-card:hover { border-color: #9caa99; }

@media (prefers-reduced-motion: reduce) {
  .poem-card::before { transition: none; }
  .poem-card:hover::before { transform: none; }
}