/* =========================================================
   GLOBAL: Page Layout
========================================================= */

.books-body {
  background-color: var(--bg-0);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.books-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* =========================================================
 SEARCH BAR (Sleek, Centered)
========================================================= */

.search-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 60px auto; /* Centered with space below */
  position: relative;
  opacity: 0;
  transform: translateY(-20px);
  animation: smoothDropIn 0.8s ease forwards;
}

#searchBar {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-family: var(--font-serif);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0; /* Square edges for underline style */
  transition: border-color 0.3s ease, padding 0.3s ease;
}

#searchBar::placeholder {
  color: var(--text-3);
  font-style: italic;
  opacity: 0.7;
}

#searchBar:focus {
  outline: none;
  border-bottom-color: var(--ink);
  padding-left: 10px; /* Text slide effect */
}

@keyframes smoothDropIn {
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
 MOBILE ADJUSTMENTS
========================================================= */
@media (max-width: 768px) {
  .search-container {
    /* Constrain width so the line isn't edge-to-edge */
    width: 85%; 
    margin-bottom: 40px;
  }
  
  #searchBar {
    padding: 12px 10px;
    font-size: 0.95rem;
  }
}

/* =========================================================
 GRID LAYOUT
========================================================= */

.books-grid { /* Renamed from .books-main flex container for better structure */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 40px;
  align-items: start;
}

/* =========================================================
 BOOK CARD
========================================================= */

.book-container {
  background: var(--panel-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  position: relative;
  
  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  /* Animation */
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: opacity, transform;
}

/* Add logic in your JS to add the .animated class, 
 OR use this animation directly in CSS like the essays page */
.book-container.animated {
  animation: fadeUpBook 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUpBook {
  to { opacity: 1; transform: translateY(0); }
}

/* Hover Effect */
.book-container:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-m);
  border-color: var(--border-2);
}

/* =========================================================
 BOOK COVER
========================================================= */

.books-image {
  width: 140px; /* Standardized width */
  height: auto;
  border-radius: 4px; /* Sharper corners for books */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Deep shadow for depth */
  margin-bottom: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.book-container:hover .books-image {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* =========================================================
 BOOK TEXT
========================================================= */

/* You might need to add a title class in HTML, or style generic elements */
.book-container h3 { 
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.book-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-top: 10px;
  /* Removed background color for cleaner look */
  background: transparent; 
  padding: 0;
  border: none;
  box-shadow: none;
}

.book-description a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s ease;
}

.book-description a:hover {
  border-color: var(--ink);
}

/* =========================================================
   FEATURED BOOK STAMP (Trigger Button)
========================================================= */

.featured-book-stamp {
  position: absolute;
  /* Positioned to clear the header */
  top: 110px;      
  left: 30px;
  
  /* Layering: Above page content, below overlay (99999) */
  z-index: 900;    

  display: flex;
  align-items: center;
  gap: 12px;

  /* Glassmorphism Effect */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  
  border: 1px solid var(--border);
  padding: 8px 18px 8px 10px; /* Balanced pill padding */
  border-radius: 100px;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* Text Color */
  color: var(--ink);
}

/* Dark Mode Adjustment */
:root[data-theme="dark"] .featured-book-stamp {
  background: rgba(20, 20, 20, 0.85);
}

/* Hover State */
.featured-book-stamp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border-color: var(--ink);
}

/* The Mini Book Icon */
.stamp-image {
  width: 26px; /* Precise small size */
  height: auto;
  border-radius: 3px;
  display: block;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* The Text Label */
.stamp-text {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* =========================================================
   MOBILE / iPHONE ADJUSTMENTS
========================================================= */
@media (max-width: 768px) {
  .featured-book-stamp {
    /* Tighter positioning on small screens */
    top: 15px;
    left: 20px;
    
    /* Smaller Scale */
    padding: 6px 12px 6px 8px;
    gap: 8px;
    
    /* Ensure it doesn't look like a huge block */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .stamp-image {
    width: 20px; /* Smaller icon */
  }

  .stamp-text {
    font-size: 0.7rem; /* Crisp, small text */
  }
}

/* =========================================================
 RESPONSIVE
========================================================= */
@media (max-width: 768px) {
  .books-main {
      padding: 40px 20px;
  }

  .books-grid {
      grid-template-columns: 1fr; /* Single column */
      gap: 30px;
  }
  
  .search-container {
      margin-bottom: 40px;
  }

}
/* =========================================================
   FULL SCREEN OVERLAY (Global)
========================================================= */

#featuredOverlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999; 
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
}

/* The "Paper" Sheet */
.overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--bg-0);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent body scroll bleed */
}

/* =========================================================
   HEADER
========================================================= */

.overlay-header {
  flex-shrink: 0; /* Never shrink */
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-0);
  z-index: 10;
  position: relative;
}

.overlay-header h2 {
  font-family: var(--font-serif);
  font-size: 0.9rem; /* Slightly smaller for elegance */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--text-3);
}

/* Close Button */
.close-btn {
  position: absolute;
  right: 15px; /* Pushed tight to the right */
  top: 20%;
  transform: translateY(-50%); /* perfectly centered vertically */
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  z-index: 20;
}
.close-btn:hover { transform: translateY(-50%) rotate(90deg); }

/* =========================================================
   CAROUSEL CONTAINER
========================================================= */

.carousel-container {
  flex-grow: 1; 
  position: relative;
  overflow: hidden;
  /* Fallback for old browsers */
  height: calc(100vh - 60px);
  /* FIX: 100dvh adapts to iPhone address bar expanding/collapsing */
  height: calc(100dvh - 60px);
}

.carousel-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* =========================================================
   SPLIT LAYOUT ITEM
========================================================= */

.carousel-item {
  min-width: 100%;
  height: 100%;
  display: grid;
  /* Desktop: 40% Image | 60% Text */
  grid-template-columns: 40% 60%;
  box-sizing: border-box;
}

/* --- LEFT SIDE: THE BOOK (Image Control) --- */
.book-visual {
  display: flex;
  align-items: center; 
  justify-content: center;
  height: 100%; /* Ensures vertical centering works */
  position: relative;
  background-color: var(--bg-1); /* Optional: Subtle definition for image area */
}

.overlay-book-image {
  /* TIGHTER CONTROLS FOR DESKTOP */
  max-height: 50vh; /* Limits height to half screen */
  max-width: 280px; /* Hard limit on width so it stays elegant */
  width: auto;
  height: auto;
  
  object-fit: contain;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  transition: transform 0.4s ease;
}

/* --- RIGHT SIDE: THE TEXT (Scrolls) --- */
.book-details {
  padding: 60px 80px 100px 80px; 
  overflow-y: auto;   
  height: 100%;       
  text-align: left;   
  box-sizing: border-box;
}

/* Header Group */
.book-header-group {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--hairline);
}

.book-date {
  display: block;
  font-size: 0.9rem;
  font-family: -apple-system, sans-serif;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  font-weight: 600;
}

.book-title {
  font-family: var(--font-serif);
  font-size: 2rem; /* Adjusted for balance */
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

/* Paragraphs */
.book-details p {
  font-size: 1rem;
  line-height: 1.7; 
  color: var(--text);
  max-width: 60ch; 
  margin-bottom: 20px;
}

.book-details a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* =========================================================
   ARROWS (Desktop)
========================================================= */

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  background: transparent;
  border: none;
  font-size: 3rem; 
  color: var(--ink); 
  cursor: pointer;
  padding: 20px;
  transition: opacity 0.2s, transform 0.2s;
  opacity: 0.5;
}

.carousel-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.left-arrow { left: 10px; }
.right-arrow { right: 10px; }
@media (max-width: 900px) {
  
  /* 1. Stack Layout Vertical */
  .carousel-item {
      grid-template-columns: 1fr; 
      grid-template-rows: 40% 1fr; 
  }

  /* 2. Image Area (Top) - FIXED BACKGROUND ISSUE HERE */
  .book-visual {
      border-right: none;
      border-bottom: 1px solid var(--border);
      padding: 20px;
      
      /* KEY FIXES START */
      background-color: var(--bg-0); /* Must be solid color to hide text scrolling behind it */
      position: relative; 
      z-index: 10; /* Ensures this layer sits ON TOP of the scrolling text */
      /* KEY FIXES END */
  }
  
  .overlay-book-image {
      max-height: 80%; 
      max-width: 140px; 
      box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  }

  /* 3. Text Area (Bottom) */
  .book-details {
      padding: 40px 24px 80px 24px;
      -webkit-overflow-scrolling: touch; 
      z-index: 1; /* Sits underneath the image area */
  }

  /* 4. Typography Scaling */
  .book-title {
      font-size: 1.5rem;
  }
  
  .book-date {
      font-size: 0.8rem;
      line-height: 1.5; 
      display: inline-block; 
  }
  
  .book-details p {
      font-size: 0.95rem; 
      line-height: 1.6;
  }

  /* 5. Mobile Arrows */
  .carousel-arrow {
      top: 20%; 
      font-size: 1.5rem; 
      width: 36px;
      height: 36px;
      display: flex; 
      align-items: center; 
      justify-content: center;
      opacity: 1;
      padding: 0;
  }
  

  .left-arrow { left: 15px; }
  .right-arrow { right: 15px; }
}