@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Jedna fotografia i jeden tytuł: napis pozostaje dostępnym tekstem strony. */
.lyrical-conversations { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
.lyrical-conversations .poem-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; }
.lyrical-conversations .poem-card {
  flex: 0 0 auto;
  width: var(--lyrical-card-width, 251px);
  max-width: 100%;
  min-height: var(--lyrical-card-height, 265px);
}
.poem-placeholder:hover { transform: none; }
.lyrical-conversations h2 {
  margin: 0 0 30px;
  text-align: center;
  color: var(--wine);
  font: 400 clamp(2.5rem, 6vw, 3.8rem)/1.3 'Great Vibes', 'Monotype Corsiva', 'Palatino Linotype', cursive;
}
.poem-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.poem-card { min-width: 0; padding: 20px; }
.poem-cover {
  display: block;
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 13;
  margin: 18px 0 8px;
  border-radius: 14px;
  background: #493a36;
  box-shadow: 0 13px 19px -12px #291c23a6, 0 3px 5px #291c2326;
  overflow: hidden;
}
.poem-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.42) sepia(.12);
}
.poem-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(145deg, #fff8e526, transparent 36%, #160c162b);
  box-shadow: inset 0 2px 2px #fff8e578, inset 2px 0 3px #fff8e52e, inset 0 -6px 12px #140b1d70;
  pointer-events: none;
}
.poem-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, #21151f75 58%, #21151ff2);
  pointer-events: none;
}
.poem-card .poem-cover h3 {
  position: absolute;
  inset: auto 16px 16px;
  z-index: 2;
  margin: 0;
  color: #fff7e8;
  font-family: 'Great Vibes', 'Monotype Corsiva', 'Palatino Linotype', cursive;
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  text-shadow: 0 2px 4px #100913;
  overflow-wrap: break-word;
}
.poem-cover:focus-visible { outline: 3px solid var(--wine); outline-offset: 5px; }
@media (max-width: 760px) { .poem-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .poem-cover { transition: transform .2s, box-shadow .2s; }
  .poem-cover:hover { transform: translateY(-2px); box-shadow: 0 17px 23px -12px #291c2399, 0 4px 7px #291c2333; }
}