/* ==========================================================
   Basta Books — Collection / Listing Shortcode Styles
   Scoped under .bb-collection so it never leaks into the theme
   ========================================================== */

.bb-collection{
  --cream:#F3EEE3;
  --cream-2:#EAE3D3;
  --ink:#181A1E;
  --charcoal:#14171D;
  --gold:#B98A3E;
  --gold-soft:#D8B471;
  --muted:#736B5B;
  --line:#DED5C0;
  --card:#FBF9F4;

  --spine-cyber:#1D3B3A;
  --spine-cyber-2:#0F2423;
  --spine-math:#2C2A4A;
  --spine-math-2:#181730;
  --spine-faith:#4A3423;
  --spine-faith-2:#2C1E14;
  --spine-schol:#5C1F22;
  --spine-schol-2:#340F12;

  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.bb-collection *,
.bb-collection *::before,
.bb-collection *::after{ box-sizing:border-box; }
.bb-collection a{ color:inherit; text-decoration:none; }

.bb-collection .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
}

/* ===== HEADER ===== */
.bb-collection header.bb-hero{
  background: linear-gradient(160deg, var(--charcoal) 0%, #1c2029 100%);
  color:#F3EEE3;
  padding:64px 40px 56px;
  position:relative;
  overflow:hidden;
}
.bb-collection header.bb-hero::after{
  content:"";
  position:absolute;
  right:-120px; top:-160px;
  width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(185,138,62,0.16) 0%, rgba(185,138,62,0) 70%);
}
.bb-collection header.bb-hero .eyebrow{ margin-bottom:18px; display:block;}
.bb-collection header.bb-hero h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(38px, 6vw, 66px);
  line-height:1;
  letter-spacing:-0.01em;
  margin:0;
}
.bb-collection header.bb-hero p{
  margin-top:18px;
  max-width:560px;
  color:#B9B2A2;
  font-size:15px;
  line-height:1.6;
}

/* ===== BROWSE SECTION HEAD ===== */
.bb-collection .browse-head{ padding:56px 40px 8px; }
.bb-collection .browse-head .eyebrow{ color:var(--gold); margin-bottom:14px; }
.bb-collection .browse-head .rule{ width:46px; height:2px; background:var(--gold); margin-bottom:20px; }
.bb-collection .browse-head h2{
  font-family:'Fraunces', serif;
  font-weight:450;
  font-size:34px;
  letter-spacing:-0.01em;
  margin:0;
}
.bb-collection .browse-head h2 em{ font-style:normal; color:var(--gold); font-weight:600; }
.bb-collection .browse-head .sub{ margin-top:10px; color:var(--muted); font-size:14px; max-width:520px; }

/* ===== LAYOUT ===== */
.bb-collection .bb-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:44px;
  padding:32px 40px 90px;
  align-items:start;
}

/* ===== SIDEBAR ===== */
.bb-collection .bb-sidebar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:26px 24px 30px;
  position:sticky;
  top:24px;
}
.bb-collection .sidebar-block + .sidebar-block{
  margin-top:26px; padding-top:26px; border-top:1px solid var(--line);
}
.bb-collection .sidebar-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px; display:block;
}
.bb-collection .search-box{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:3px; background:#fff; font-family:'Inter', sans-serif;
  font-size:13px; color:var(--ink);
}
.bb-collection .search-box::placeholder{ color:#A69F8E; }

.bb-collection select.sort{
  width:100%; padding:10px 12px; border:1px solid var(--line);
  border-radius:3px;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23736B5B"/></svg>') no-repeat right 12px center;
  appearance:none; font-size:13px; color:var(--ink);
}

.bb-collection .filter-list{ display:flex; flex-direction:column; gap:11px; max-height:260px; overflow-y:auto; }
.bb-collection .filter-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:#3A362F; cursor:pointer; }
.bb-collection .filter-item input{ width:15px; height:15px; accent-color:var(--gold); }
.bb-collection .filter-item .count{ margin-left:auto; color:#A69F8E; font-size:11.5px; font-family:'IBM Plex Mono', monospace; }

.bb-collection .sidebar-actions{ margin-top:26px; display:flex; flex-direction:column; gap:10px; }
.bb-collection .btn-reset{
  width:100%; padding:11px; background:transparent; border:1px solid var(--ink);
  border-radius:3px; font-family:'IBM Plex Mono', monospace; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; color:var(--ink);
}
.bb-collection .btn-top{
  width:100%; padding:11px; background:none; border:none;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); cursor:pointer;
}

/* ===== RESULTS BAR ===== */
.bb-collection .results-bar{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:8px;
}
.bb-collection .results-bar .count{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; color:var(--muted); }
.bb-collection .results-bar .count b{ color:var(--ink); }
.bb-collection .results-bar .hint{ font-size:12px; color:#A69F8E; }

/* ===== GRID ===== */
.bb-collection .bb-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px 22px; min-height:120px; }
.bb-collection .book-card{ display:flex; flex-direction:column; }
.bb-collection .cover{
  aspect-ratio:2/3; border-radius:2px; position:relative; overflow:hidden;
  box-shadow:0 10px 24px -12px rgba(20,20,15,0.35);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:16px 14px; color:#F3EEE3; transition:transform .25s ease, box-shadow .25s ease;
  background-size:cover; background-position:center;
}
.bb-collection .book-card:hover .cover{ transform:translateY(-4px); box-shadow:0 18px 30px -14px rgba(20,20,15,0.45); }
.bb-collection .cover::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 5px);
  pointer-events:none;
}
.bb-collection .cover .genre-tag{ font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.75; position:relative; z-index:1; }
.bb-collection .cover .cover-title{ font-family:'Fraunces', serif; font-weight:600; font-size:19px; line-height:1.14; position:relative; z-index:1; }
.bb-collection .cover .cover-author{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.04em; opacity:0.85; margin-top:6px; position:relative; z-index:1; }
/* Real cover images already contain their own title/author artwork, so we
   hide the text overlay and skip the darkening gradient for them — only
   the colored fallback "spine" (no real cover uploaded) gets the overlay. */
.bb-collection .cover.has-image .genre-tag,
.bb-collection .cover.has-image .cover-title,
.bb-collection .cover.has-image .cover-author{ display:none; }

.bb-collection .cyber{ background:linear-gradient(160deg, var(--spine-cyber) 0%, var(--spine-cyber-2) 100%); }
.bb-collection .math{ background:linear-gradient(160deg, var(--spine-math) 0%, var(--spine-math-2) 100%); }
.bb-collection .faith{ background:linear-gradient(160deg, var(--spine-faith) 0%, var(--spine-faith-2) 100%); }
.bb-collection .schol{ background:linear-gradient(160deg, var(--spine-schol) 0%, var(--spine-schol-2) 100%); }
.bb-collection .default-spine{ background:linear-gradient(160deg,#3a3530 0%, #1c1815 100%); }

.bb-collection .meta{ margin-top:12px; }
.bb-collection .meta .title{ font-family:'Fraunces', serif; font-size:14.5px; font-weight:450; line-height:1.3; color:var(--ink); }
.bb-collection .meta .author{ margin-top:3px; font-size:12px; color:var(--muted); font-family:'IBM Plex Mono', monospace; }

/* ===== FOOTER ACTIONS ===== */
.bb-collection .grid-footer{ display:flex; justify-content:center; gap:14px; margin-top:52px; }
.bb-collection .btn-outline, .bb-collection .btn-solid{
  padding:13px 30px; border-radius:3px; font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; border:none;
}
.bb-collection .btn-outline{ background:transparent; border:1px solid var(--ink); color:var(--ink); }
.bb-collection .btn-solid{ background:var(--gold); border:1px solid var(--gold); color:#1B1305; font-weight:500; }
.bb-collection .btn-solid[disabled]{ opacity:.5; cursor:not-allowed; }

.bb-collection .bb-loading{ text-align:center; padding:40px 0; color:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.bb-collection .bb-empty{ text-align:center; padding:60px 0; color:var(--muted); font-family:'Fraunces', serif; font-size:20px; grid-column:1/-1; }

@media (max-width: 900px){
  .bb-collection header.bb-hero, .bb-collection .browse-head, .bb-collection .bb-layout{ padding-left:20px; padding-right:20px; }
  .bb-collection .bb-layout{ grid-template-columns:1fr; }
  .bb-collection .bb-sidebar{ position:static; }
  .bb-collection .bb-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 480px){
  .bb-collection .bb-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .bb-collection .cover .cover-title{ font-size:15px; }
}