/* Wood desk background */
.cards-page{
  margin: 0;
  height: 100svh;                
  overflow: hidden;               /* prevent scrolling */
  background:
    url("/assets/AdobeStock_255334050%20(1).jpeg")
    center / cover fixed no-repeat;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* stack: tabs on top, book fills the rest */
  display: flex;
  flex-direction: column;
}

/* Tabs row at the top */
.book-bar{
  position: relative;             
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
  padding: clamp(10px, 2vh, 18px) 2vw 0;
  margin-bottom: clamp(12px, 2.5vh, 28px); /* breathing room above the book */
}
.book-bar .tab img{
  display:block;
  width: clamp(140px, 16vw, 220px);
  height: auto;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
  transition: transform .18s ease, filter .18s ease;
}
.book-bar .tab img:hover,
.book-bar .tab img:focus-visible{
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.35));
}

.book-area{
  flex: 1;                        /* take all space under the tabs */
  min-height: 0;                  
  display: grid;
  place-items: center;
  padding: 0 2vw 2vh;
}

.book-wrap{
  position: relative;
  height: min(74svh, 78vh);       
  aspect-ratio: 3 / 4;           
  width: auto;                    
}

/* The framed “paper” stack */
.book{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: clamp(8px, 1.2vw, 14px);
  background: linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10)) padding-box;
  border: clamp(8px, 1.2vw, 12px) solid #3b888b;
  box-shadow: 0 12px 26px rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.25);
  border-radius: clamp(6px, .8vw, 10px);
  overflow: hidden;
}
.book img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/Next on the LEFT, vertically centered */
.book-controls{
  position: absolute;
  left: calc(-1 * clamp(56px, 7vw, 110px));  /* sits left of the frame */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 25;
}
.book-controls button{
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  background: rgba(0,0,0,.75);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease;
}
.book-controls button:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.88);
}
.book-controls button:active{
  transform: translateY(0);
}

/* Small screens: keep buttons visible */
@media (max-width: 640px){
  .book-wrap{ height: 72svh; }
  .book-controls{ left: -56px; }
}