/* components/page-grid.css */

/* Grilla de páginas dentro de un capítulo
   ============================================================ */

.page-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(130px, 1fr)
  );
  gap: 14px;
  margin-top: 20px;
}

.page-thumb {
  overflow: hidden;
  padding: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.page-thumb:hover {
  border-color: var(--hover-primary);
  transform: translateY(-2px);
}

.page-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 7 / 10;
  object-fit: contain;
}