/* ============================================
   BOOKS LOBBY — Digital Library Stylesheet
   Extends style.css — reuses root tokens
   (--primary-color, --accent-color, --dark-color, etc.)
   ============================================ */

:root {
  --shelf-bg: #0f172a;
  --shelf-bg-2: #16213d;
  --spine-gold: #f59e0b;
  --spine-gold-dim: #b97f1f;
  --cover-radius: 6px;
  --card-radius: 14px;
}

/* ---------- HERO ---------- */
.books-hero{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:url('/books/books-lobby-hero.jpg')
               center center/cover no-repeat;

}

.books-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(5,15,30,.88) 0%,
        rgba(8,20,38,.78) 35%,
        rgba(10,20,30,.45) 70%,
        rgba(10,20,30,.35) 100%
    );

}

.books-hero .container{

    position:relative;

    z-index:5;

}

.books-hero-content{

    max-width:700px;

    color:#fff;

}

.books-hero h1{

    font-size:clamp(2.6rem,5vw,4.4rem);

    line-height:1.15;

    margin:20px 0;

    color:#fff;

}

.books-hero h1 span{

    color:#f5c156;

}

.books-hero .subtitle{

    font-size:1.2rem;

    line-height:1.9;

    color:#d6dbe6;

    max-width:650px;

    margin-bottom:40px;

}

.books-hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:55px;

}

.books-hero-buttons .btn{

    padding:14px 34px;

    border-radius:50px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.books-hero-buttons .btn-primary{

    background:#f5c156;

    color:#0b1730;

}

.books-hero-buttons .btn-primary:hover{

    transform:translateY(-3px);

}

.books-hero-buttons .btn-secondary{

    border:2px solid rgba(255,255,255,.4);

    color:#7889d6;

}

.books-hero-buttons .btn-secondary:hover{

    background:#8fade6;

    color:#111;

}

.books-hero-stats{

    display:flex;

    gap:55px;

    flex-wrap:wrap;

}

.books-hero-stat{

    color:#fff;

}

.books-hero-stat .num{

    font-size:2.5rem;

    font-weight:700;

    color:#f5c156;

}

.books-hero-stat .label{

    color:#d2d7df;

    font-size:.95rem;

}

@media (max-width:768px){

.books-hero{

    min-height:auto;

    padding:110px 0 80px;

    background-position:center;

}

.books-hero-content{

    text-align:center;

    max-width:100%;

}

.books-hero h1{

    font-size:2.2rem;

}

.books-hero .subtitle{

    font-size:1rem;

    line-height:1.7;

}

.books-hero-buttons{

    justify-content:center;

}

.books-hero-stats{

    justify-content:center;

    gap:25px;

}

.books-hero-stat{

    width:30%;

}

.books-hero-stat .num{

    font-size:2rem;

}

}

/* ---------- TOOLBAR ---------- */
.books-toolbar-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid var(--light-gray);
  box-shadow: var(--shadow-sm);
}

.books-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.books-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
}

.books-search input {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--dark-color);
  background: var(--light-color);
  transition: var(--transition-fast);
}

.books-search input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: #fff;
  box-shadow: 0 0 0 3px var(--primary-light);
}

.books-search i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-color);
  font-size: var(--text-sm);
}

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

.books-filter-chip {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-color);
  background: var(--light-color);
  border: 1px solid var(--light-gray);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.books-filter-chip:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.books-filter-chip.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* ---------- SHELF SECTIONS ---------- */
.books-shelf-section {
  padding: 64px 0 20px;
}

.books-shelf-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 10px;
}

.books-shelf-heading h2 {
  font-size: var(--text-3xl);
  color: var(--darker-color);
  margin-bottom: 4px;
}

.books-shelf-heading p {
  margin-bottom: 0;
  color: var(--gray-color);
  font-size: var(--text-base);
}

.books-shelf-count {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-sm);
  color: var(--primary-color);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px;
  margin-bottom: 20px;
}

.books-empty-state {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-color);
}

.books-empty-state.visible {
  display: block;
}

.books-empty-state i {
  font-size: var(--text-4xl);
  color: var(--light-gray);
  margin-bottom: 16px;
  display: block;
}

/* ---------- BOOK CARD ---------- */
.book-card {
  background: #fff;
  border-radius: var(--card-radius);
  border: 1px solid var(--light-gray);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
}

.book-card.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.book-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.book-card:hover .book-cover-inner {
  transform: rotateY(-14deg) translateX(2px);
}

.book-card-stage {
  background: linear-gradient(160deg, var(--shelf-bg) 0%, var(--shelf-bg-2) 100%);
  padding: 30px 24px 22px;
  display: flex;
  justify-content: center;
  perspective: 900px;
}

.book-cover-inner {
  position: relative;
  width: 148px;
  aspect-ratio: 2 / 3;
  border-radius: 0 var(--cover-radius) var(--cover-radius) 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 18px 30px -10px rgba(0,0,0,0.55);
}

/* spine edge, gives the 3D "book" feel */
.book-cover-inner::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 3px;
  bottom: 3px;
  width: 9px;
  background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  border-radius: 3px 0 0 3px;
  transform: rotateY(35deg);
  transform-origin: right center;
}

.book-cover-art {
  width: 100%;
  height: 100%;
  border-radius: 0 var(--cover-radius) var(--cover-radius) 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.book-cover-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.book-cover-art .cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}

.cover-kicker,
.cover-title,
.cover-footer {
  position: relative;
  z-index: 2;
}

.cover-kicker {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.cover-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.cover-footer {
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.8;
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 6px;
}

.coming-soon-ribbon {
  position: absolute;
  top: 10px;
  right: -32px;
  background: var(--spine-gold);
  color: #1a1300;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 34px;
  transform: rotate(38deg);
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.book-card.is-coming-soon .book-cover-art {
  filter: saturate(0.55) brightness(0.85);
}

.book-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.book-card-category {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.book-card-body h3 {
  font-size: var(--text-lg);
  color: var(--darker-color);
  margin-bottom: 0;
  line-height: 1.3;
}

.book-card-body p {
  font-size: var(--text-sm);
  color: var(--gray-color);
  margin-bottom: 0;
  flex: 1;
}

.book-card-meta {
  display: flex;
  gap: 14px;
  font-size: var(--text-xs);
  color: var(--gray-color);
  flex-wrap: wrap;
}

.book-card-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.book-card-meta i {
  color: var(--primary-color);
  font-size: 11px;
}

.book-card-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--primary-color);
}

.book-card-cta i {
  transition: var(--transition-fast);
}

.book-card:hover .book-card-cta i {
  transform: translateX(4px);
}

.book-card.is-coming-soon .book-card-cta {
  color: var(--spine-gold-dim);
}

/* ---------- SUGGEST A TOPIC / CTA BANNER ---------- */
.books-cta-banner {
  margin: 80px 0;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  border-radius: 20px;
  padding: 56px 48px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.books-cta-banner h2 {
  color: #fff;
  font-size: var(--text-2xl);
  margin-bottom: 8px;
}

.books-cta-banner p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 0;
  max-width: 480px;
}

.books-cta-banner .btn-white {
  background: #fff;
  color: var(--primary-color);
  font-weight: 600;
  padding: 13px 28px;
  border-radius: 8px;
  white-space: nowrap;
  transition: var(--transition-fast);
}

.books-cta-banner .btn-white:hover {
  background: var(--dark-color);
  color: #fff;
}

/* ---------- FAQ ---------- */
.books-faq {
  padding: 20px 0 80px;
  max-width: 820px;
  margin: 0 auto;
}

.books-faq h2 {
  text-align: center;
  font-size: var(--text-3xl);
  margin-bottom: 40px;
}

.books-faq-item {
  border-bottom: 1px solid var(--light-gray);
}

.books-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 4px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--darker-color);
  font-size: var(--text-base);
}

.books-faq-question i {
  color: var(--primary-color);
  transition: var(--transition-fast);
  flex-shrink: 0;
  margin-left: 16px;
}

.books-faq-item.open .books-faq-question i {
  transform: rotate(180deg);
}

.books-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  color: var(--gray-color);
  font-size: var(--text-sm);
}

.books-faq-answer-inner {
  padding: 0 4px 20px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .books-hero { padding: 70px 0 90px; }
  .books-hero-stats { gap: 24px; }
  .books-toolbar { flex-direction: column; align-items: stretch; }
  .books-search { max-width: 100%; }
  .books-filters { justify-content: flex-start; }
  .books-cta-banner { padding: 40px 28px; text-align: center; justify-content: center; }
  .books-cta-banner p { margin: 0 auto; }
  .books-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }
  .book-cover-inner { width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .book-card, .book-cover-inner, .books-faq-answer { transition: none !important; }
}