/* =========================================================
   1PEN SLIDER — FINAL
   Goal:
   - Big glass container stays fixed
   - Only inner bookcard slides
   - Rails (meter + arrows) INSIDE the big glass
   - No ghost slides
   - No rail background panels
========================================================= */

/* Slider root = the fixed frame */
.onepen-slider{
  position:relative;
  width:100%;
  box-sizing:border-box;

  /* HARD CLIP: nothing can leak outside */
  overflow:hidden;
}

/* Viewport = clip moving track */
.onepen-slider__viewport{
  position:relative;
  width:100%;
  min-width:0;
  box-sizing:border-box;

  /* HARD CLIP: stops ghost slides */
  overflow:hidden;

  /* Space INSIDE the frame for the rails */
  padding-left: 110px;
  padding-right: 110px;
}

/* Moving strip */
.onepen-slider__track{
  display:flex;
  transition:transform .45s ease;
  will-change:transform;
}

/* One slide = one viewport width */
.onepen-slide{
  flex:0 0 100%;
  min-width:0;
}

/* =========================================================
   RAILS INSIDE FRAME (overlay)
========================================================= */

.onepen-slider__rail{
  position:absolute;
  top:0;
  bottom:0;
  width:96px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:14px;

  padding:18px 10px;
  box-sizing:border-box;

  background:transparent !important;
  border:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  z-index:20;
  pointer-events:none; /* only arrow button clickable */
}

.onepen-slider__rail--left{ left: 12px; }
.onepen-slider__rail--right{ right: 12px; }

/* subtle internal glow behind controls (NOT a panel) */
.onepen-slider__rail::before{
  content:"";
  position:absolute;
  inset: 12px 12px;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(212,182,108,.05),
    rgba(0,0,0,0),
    rgba(212,182,108,.06)
  );
  opacity:.85;
  pointer-events:none;
}

.onepen-slider__meter,
.onepen-slider__btn{
  position:relative;
  z-index:2;
}

/* =========================================================
   METER (visible + elegant)
========================================================= */

.onepen-slider__meter{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:9px;
  margin:0 0 10px 0;
  opacity:1;
}

.onepen-slider__tick{
  height:3px;
  width:34px;
  border-radius:999px;
  background: rgba(212,182,108,.28);
  opacity:.55;
  transition:opacity .2s ease, background .2s ease, width .2s ease, box-shadow .2s ease;
}

.onepen-slider__tick.is-on{
  background: rgba(212,182,108,.92);
  opacity:1;
  box-shadow: 0 0 12px rgba(212,182,108,.30);
}

/* tapered ends */
.onepen-slider__meter .onepen-slider__tick:nth-child(1),
.onepen-slider__meter .onepen-slider__tick:nth-child(2),
.onepen-slider__meter .onepen-slider__tick:nth-last-child(1),
.onepen-slider__meter .onepen-slider__tick:nth-last-child(2){
  width:18px;
  opacity:.32;
}

/* =========================================================
   ARROWS (big, clean, no outline)
========================================================= */

.onepen-slider__btn{
  pointer-events:auto;

  width:88px;
  height:88px;
  border-radius:999px;
  border:none;
  outline:none;
  background:transparent;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:"Tangerine", cursive;
  font-size:4rem;
  line-height:1;

  color: rgba(212,182,108,.98);
  text-shadow: 0 0 16px rgba(212,182,108,.35);
  opacity:.95;

  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease, text-shadow .18s ease, filter .18s ease;
}

.onepen-slider__btn:hover{
  transform:scale(1.12);
  text-shadow: 0 0 22px rgba(212,182,108,.55);
  filter:brightness(1.05);
}

.onepen-slider.is-at-start .onepen-slider__btn[data-dir="prev"],
.onepen-slider.is-at-end   .onepen-slider__btn[data-dir="next"]{
  opacity:.22;
  cursor:default;
  transform:none;
  filter:none;
  text-shadow:none;
}

/* =========================================================
   SLIDE CONTENT — two inner boxes (cover + text)
========================================================= */

.onepen-bookcard{
  display:grid;
  grid-template-columns: minmax(260px, 42%) 1fr;
  gap:34px;
  align-items:stretch;

  min-height:420px;
  padding:34px;
  box-sizing:border-box;
}

.onepen-bookcard__media{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  padding:18px;
}

.onepen-cover-placeholder{
  width:100%;
  aspect-ratio: 3 / 4;
  border-radius:14px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(245,247,248,.55);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:"Poppins","Inter",sans-serif;
  font-size:.8rem;
}

.onepen-bookcard__text{
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  padding:26px 28px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
}

.onepen-bookcard__title{
  margin:0 0 12px 0;
  font-family:"Cinzel", serif;
  font-size:1.35rem;
  letter-spacing:.02em;
  color:rgba(245,247,248,.88);
}

.onepen-bookcard__desc{
  margin:0;
  color:rgba(245,247,248,.72);
  line-height:1.55;

  display:-webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.onepen-bookcard__actions{
  display:flex;
  gap:16px;
  justify-content:flex-end;
  margin-top:22px;
}

.onepen-bookcard__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;

  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;

  font-family:"Poppins","Inter",sans-serif;
  font-weight:400;
  font-size:.95rem;

  color:rgba(245,247,248,.88);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);

  transition:transform .2s ease, filter .2s ease, background .2s ease;
}

.onepen-bookcard__btn:hover{
  transform:scale(1.04);
  filter:brightness(1.05);
}

.onepen-bookcard__btn--gold{
  background:rgba(25,160,160,.35);
  border:1px solid rgba(255,255,255,.12);
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width:900px){
  .onepen-slider__viewport{
    padding-left: 78px;
    padding-right: 78px;
  }

  .onepen-slider__rail{
    width:64px;
    padding:12px 6px;
  }

  .onepen-slider__btn{
    width:56px;
    height:56px;
    font-size:2.8rem;
  }

  .onepen-slider__tick{
    width:22px;
  }

  .onepen-bookcard{
    grid-template-columns:1fr;
    gap:16px;
    padding:18px;
    min-height:auto;
  }

  .onepen-bookcard__actions{
    justify-content:center;
  }
}
/* =========================================================
   FIX: no ghost slides + no rail panels
========================================================= */

/* HARD CLIP everything to the slider frame */
.onepen-slider,
.onepen-slider__viewport{
  overflow:hidden !important;
}

/* Ensure each slide cannot exceed the viewport width */
.onepen-slide{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Remove any accidental rail glass/background */
.onepen-slider__rail,
.onepen-slider__rail::before{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   GHOST KILL SWITCH — clip at every level
========================================================= */

/* 1) The slider itself clips */
.onepen-slider{
  overflow:hidden !important;
}

/* 2) The viewport clips */
.onepen-slider__viewport{
  overflow:hidden !important;
}

/* 3) The moving track must never overflow horizontally */
.onepen-slider__track{
  overflow:visible;              /* track itself can be visible */
  width:100% !important;         /* important: prevents extra width bleed */
}

/* 4) Slides must be exactly the viewport width */
.onepen-slide{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 5) If the slider sits inside a glass wrapper, that wrapper must clip too */
.onepen-slider-shell__glass,
.onepen-slider-shell__glass-inner,
.glass-card{
  overflow:hidden;
}