/* Cozy Pebble Stories - catalogue cards.
   Restyles the markup that renderBooks() generates from data.json into the
   editorial language: hairlines and paper instead of rounded cards and pills.
   Class names are fixed by the generator, so only the looks change here. */

.book-series-grid,
.edition-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);align-items:stretch;
}
.coming-books-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem;
}

.edition-public-card{
  display:flex;flex-direction:column;gap:.7rem;
  background:transparent;border:none;border-top:1px solid var(--cps-rule);
  border-radius:0;box-shadow:none;padding:1.4rem 0 0;
  transition:border-color .18s;
}
.edition-public-card.series-toggle{cursor:pointer;outline:none}
.edition-public-card.series-toggle:hover,
.edition-public-card.series-toggle:focus-visible{
  transform:none;box-shadow:none;border-top-color:var(--cps-ink);
}

.edition-cover{
  width:100%;max-width:15rem;aspect-ratio:1/1;margin:0 0 .4rem;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--cps-paper-alt);border-radius:2px;color:var(--cps-ink);text-align:center;
}
.edition-cover img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 12px 24px rgba(30,58,86,.24));
}
.edition-cover h3{color:var(--cps-ink) !important;font-family:var(--cps-serif)}

.edition-kicker,
.edition-language-badge{
  display:flex;align-items:center;gap:.4rem;
  color:var(--cps-gold);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.edition-public-card h3,
.series-edition-card h3{
  font-family:var(--cps-serif);font-weight:600;color:var(--cps-ink);
  font-size:1.2rem;line-height:1.25;margin:0;
}
.edition-desc,
.series-edition-card p{
  color:var(--cps-ink-soft);font-size:.9rem;line-height:1.7;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* language + tag chips: type, not pills */
.book-tags,
.language-chips{display:flex;flex-wrap:wrap;gap:.3rem .8rem;margin:.35rem 0}
.tag{
  background:none;border:none;border-radius:0;padding:0;
  color:var(--cps-ink-mute);font-size:.73rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.tag + .tag::before{
  content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--cps-rule);margin-right:.8rem;vertical-align:.28em;
}
.coming-tag{
  display:inline-block;background:none;padding:0;border-radius:0;
  color:var(--cps-ink-mute);font-size:.73rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.series-open-hint{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding:.6rem 0 0;
  background:none;border:none;border-radius:0;
  color:var(--cps-summer);font-size:.86rem;font-weight:700;letter-spacing:0;
}
.series-open-hint .arrow{transition:transform .2s}
.edition-public-card.active .series-open-hint .arrow{transform:rotate(180deg)}

/* buttons inside generated markup */
.btn{
  display:inline-block;cursor:pointer;text-decoration:none;
  font-family:var(--cps-sans);font-weight:700;font-size:.88rem;letter-spacing:.03em;
  padding:.68rem 1.35rem;border-radius:2px;border:1.5px solid var(--cps-ink);
  background:var(--cps-ink);color:var(--cps-paper);
  transition:background .18s,color .18s,border-color .18s;
}
.btn:hover{transform:none;box-shadow:none;background:var(--cps-ink-deep);border-color:var(--cps-ink-deep)}
.btn-purple{background:var(--cps-ink);color:var(--cps-paper);border-color:var(--cps-ink)}
.btn-gold{background:var(--cps-gold-bright);color:var(--cps-ink-deep);border-color:var(--cps-gold-bright)}
.btn-gold:hover{background:#EBB864;border-color:#EBB864;color:var(--cps-ink-deep)}
.btn-outline{background:transparent;color:var(--cps-ink);border:1.5px solid var(--cps-ink)}
.btn-outline:hover{background:var(--cps-ink);color:var(--cps-paper)}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap}

/* expanded edition panel */
.series-detail-panel{
  display:none;margin-top:2rem;background:var(--cps-paper);
  border:1px solid var(--cps-rule);border-radius:2px;
  padding:clamp(1.25rem,3vw,2rem);box-shadow:none;animation:none;
}
.series-detail-panel.open{display:block}
.series-detail-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  margin-bottom:1.5rem;border-bottom:1px solid var(--cps-rule);padding-bottom:1.1rem;
}
.series-detail-header h2{
  font-family:var(--cps-serif);font-weight:400;color:var(--cps-ink);
  font-size:clamp(1.5rem,2.6vw,1.9rem);margin:0;letter-spacing:-.015em;
}
.series-detail-header p{color:var(--cps-ink-mute);font-size:.9rem;line-height:1.7;margin:.35rem 0 0}
.series-close-btn{
  background:transparent;color:var(--cps-ink);border:1.5px solid var(--cps-rule);
  border-radius:2px;padding:.5rem 1rem;font-weight:700;font-size:.84rem;cursor:pointer;
  font-family:var(--cps-sans);white-space:nowrap;
}
.series-close-btn:hover{border-color:var(--cps-ink)}
.series-edition-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));
  gap:clamp(1.25rem,2.5vw,2rem);justify-content:start;align-items:start;
}
.series-edition-card{
  background:transparent;border:none;border-top:1px solid var(--cps-rule);
  border-radius:0;box-shadow:none;padding:1.2rem 0 0;
  display:flex;flex-direction:column;gap:.65rem;max-width:260px;width:100%;
}
.series-edition-card .edition-cover{
  width:100%;max-width:100%;aspect-ratio:1/1;align-self:stretch;margin:0 0 .35rem;
}
.series-edition-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem}
.series-edition-actions a{font-size:.8rem;padding:.5rem 1rem}

@media(max-width:640px){
  .series-detail-header{flex-direction:column}
  .series-edition-grid{grid-template-columns:minmax(0,1fr)}
  .series-edition-card{max-width:100%}
}