/* ==========================================================================
   Togo Paws — Web Stories listing
   ========================================================================== */

.stories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:1.5rem;
  padding-bottom:3rem;
}

.story-card{
  display:block;
  text-decoration:none;
  color:var(--ink);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--sand-line);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.story-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.story-poster{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--sand-bg);
}
.story-poster img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,var(--sand-bg),var(--sand-line));
}

.story-pages-badge{
  position:absolute;
  top:.6rem;
  right:.6rem;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:.72rem;
  font-weight:600;
  padding:.25rem .55rem;
  border-radius:999px;
  letter-spacing:.02em;
}

.story-card h3{
  font-family:var(--font-display);
  font-size:1rem;
  line-height:1.3;
  margin:0;
  padding:.8rem 1rem .3rem;
}
.story-card:hover h3{color:var(--coral-dark)}

.story-date{
  display:block;
  font-size:.82rem;
  color:var(--ink-soft);
  padding:0 1rem .8rem;
}

@media(max-width:480px){
  .stories-grid{grid-template-columns:repeat(2, 1fr);gap:1rem}
  .story-card h3{font-size:.9rem;padding:.6rem .7rem .2rem}
}