/* /assets/css/listing.css */
/* Category / listing pages */

.prose {
  max-width: 90ch;
  font-size: var(--text-lg);
}
.list-hero {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.list-kicker {
  font-family: var(--serif);
  letter-spacing: 0.6px;
  opacity: 0.85;
  margin: 0 0 var(--space-2);
}

.list-title {
  font-size: var(--h1);
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--serif);
  letter-spacing: 0.35px;
  opacity: 0.95;
  margin: 0 0 var(--space-4);
}

.crumbs a { color: var(--oak); text-decoration: underline; text-underline-offset: 4px; }
.crumb-sep { opacity: 0.7; }

.subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(75, 54, 33, 0.22);
  background: rgba(245, 240, 230, 0.78);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  letter-spacing: 0.35px;
  font-size: 14px;
}

.pill:hover {
  text-decoration: none;
  background: rgba(75, 54, 33, 0.08);
  border-color: rgba(75, 54, 33, 0.32);
}

/* Pager */
.list-controls {
  padding: var(--space-5) 0 var(--space-3);
}

.list-controls--bottom {
  padding: var(--space-4) 0 var(--space-7);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 34px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid rgba(75, 54, 33, 0.22);
  background: rgba(255,255,255,0.28);

  font-family: var(--serif);
  letter-spacing: 0.3px;
  text-decoration: none;
  color: var(--ink);
}

.page-link:hover {
  background: rgba(75, 54, 33, 0.08);
  text-decoration: none;
}

.page-link.is-current {
  background: rgba(75, 54, 33, 0.12);
  border-color: rgba(75, 54, 33, 0.35);
  color: var(--oak);
}

/* Book grid */
.book-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding: var(--space-3) 0;
}

.book-card {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
}

.book-cover {
  display: block;
  background: rgba(255,255,255,0.25);
}

.book-cover img {
  width: 100%;
  aspect-ratio: 2 / 3;   /* matches your 475×712 thumbs */
  object-fit: cover;
  display: block;
}

.book-meta {
  padding: var(--space-4);
  display: grid;
  gap: 8px;
}

.book-title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.2px;
}

.book-title a {
  color: var(--ink);
  text-decoration: none;
}

.book-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.book-author {
  margin: 0;
  opacity: 0.88;
}

.book-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}

.price {
  font-family: var(--serif);
  letter-spacing: 0.3px;
  color: var(--oak);
}

.price--free {
  color: var(--oak);
}


/* Responsive */
@media (max-width: 900px) {
  .book-grid { grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 700px) {
  .book-grid { grid-template-columns: repeat(2, 1fr);}
  .list-hero { padding-top: var(--space-5); }
  .book-meta { padding: var(--space-4); }
  .page-link { min-width: 36px; height: 32px; }
}
@media (max-width: 380px) {

  .book-grid {
    grid-template-columns: 1fr;
    justify-items: center;   /* allow cards to be narrower */
  }

  /* make each card hug the book instead of the screen */
  .book-card {
    width: fit-content;
    max-width: 100%;
  }

  /* control the book size */
  .book-cover img {
    width: 250px;           /* try 220–260px to taste */
    max-width: 100%;
    aspect-ratio: 2 / 3;
  }

  /* keep metadata aligned to the book width */
  .book-meta {
    width: 250px;
    max-width: 100%;
    padding: var(--space-3);
  }
}


/* Series blocks for author pages (works with your existing .book-grid) */
.series {
  margin: var(--space-6) 0;
  padding-top: var(--space-2);
}

.series:first-of-type {
  margin-top: 0;
}

.series-head {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.series-title {
  font-size: var(--h2);
  color: var(--oak);
  margin: 0 0 6px;
  letter-spacing: 0.2px;
}

/* Optional subtitle/description under the title */
.series-note {
  margin: 0;
  opacity: 0.85;
  max-width: 70ch;
}

/* If you jump to #marie-antoinette etc, this keeps the heading visible */
.series-title {
  scroll-margin-top: 120px; /* adjust if your header is taller/shorter */
}

/* A little tighter on small screens */
@media (max-width: 700px) {
  .series {
    margin: var(--space-5) 0;
  }
}