/* ============================================================
   SMARTLIB — slider.css  v7
   Cover image as blurred colour wash bg + crisp cover on right
   Black corner fix: overflow hidden on wrapper only
============================================================ */

/* ── Wrapper ── */
#featuredSlider {
  position: relative;
  margin: 0 4vw;
  border-radius: 28px;
  overflow: hidden;            /* clips everything inside — fixes black corners */
  box-shadow:
    0 24px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.07);
  background: #0d0d0d;
  isolation: isolate;
}
body.light-mode #featuredSlider {
  box-shadow:
    0 16px 56px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.07);
  background: #e8e8e8;
}

/* ── Slide track ── */
#sliderWrap {
  position: relative;
  min-height: 440px;
  overflow: hidden;
}

/* ── Individual slide ── */
.sl-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.sl-slide.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  min-height: 440px;
}

/* ── Background image — heavily blurred colour wash ── */
/* Style is applied inline from JS: blur(40px) brightness(.5) saturate(1.4) scale(1.15) */
/* We just need to position it correctly */
.sl-bg {
  position: absolute;
  inset: -8%;          /* oversized so scaled image never shows edges */
  background-size: cover;
  background-position: center;
  z-index: 0;
  /* inline style from JS sets filter + transform */
}

/* ── Dark gradient overlay — left text area opaque, right transparent ── */
.sl-overlay,
.sl-gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to right,
      rgba(8,8,8,.98)   0%,
      rgba(8,8,8,.88)  32%,
      rgba(8,8,8,.60)  55%,
      rgba(8,8,8,.20)  75%,
      rgba(8,8,8,.05) 100%
    ),
    linear-gradient(
      to top,
      rgba(8,8,8,.85)  0%,
      rgba(8,8,8,.40) 25%,
      transparent      55%
    );
}
body.light-mode .sl-overlay,
body.light-mode .sl-gradient-bg {
  background:
    linear-gradient(
      to right,
      rgba(242,242,242,.99)  0%,
      rgba(242,242,242,.92) 35%,
      rgba(242,242,242,.60) 58%,
      rgba(242,242,242,.15) 78%,
      transparent            100%
    ),
    linear-gradient(
      to top,
      rgba(242,242,242,.88)  0%,
      rgba(242,242,242,.35) 28%,
      transparent            55%
    );
}

/* ── Book cover (right side) — crisp ── */
.sl-cover-wrap {
  position: absolute;
  right: 5%;
  top: 50%;
  z-index: 4;
  opacity: 0;
  transform: translateY(-44%) scale(.92) rotate(2deg);
  transition: opacity .5s ease .2s,
              transform .65s cubic-bezier(.34,1.2,.64,1) .1s;
  filter: drop-shadow(-16px 20px 40px rgba(0,0,0,.7));
}
.sl-slide.active .sl-cover-wrap {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-1.5deg);
}
body.light-mode .sl-cover-wrap {
  filter: drop-shadow(-10px 14px 28px rgba(0,0,0,.25));
}
.sl-cover-img {
  width: 170px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  /* NO filter blur on the actual cover */
  filter: none;
}

/* ── Info panel ── */
.sl-info {
  position: relative;
  z-index: 5;
  padding: 2.8rem 3rem 3rem;
  max-width: 520px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease .15s, transform .4s ease .15s;
}
.sl-slide.active .sl-info { opacity: 1; transform: translateY(0); }

/* Badge */
.sl-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(232,201,109,.35);
  background: rgba(232,201,109,.10);
  padding: .3rem .75rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
body.light-mode .sl-badge { color:#8a6400; border-color:rgba(138,100,0,.28); background:rgba(138,100,0,.07); }

/* Title */
.sl-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--txt);
  margin-bottom: .85rem;
  letter-spacing: -.015em;
}

/* Meta */
.sl-meta { display:flex; align-items:center; gap:.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.sl-star   { color:#f5c518; font-weight:800; font-size:.82rem; }
.sl-dot    { color:var(--txt3); font-size:.5rem; }
.sl-author { font-size:.8rem; color:var(--txt2); font-weight:600; }
.sl-genre  {
  font-size:.7rem; font-weight:700;
  background:var(--tag-bg); border:1px solid var(--tag-border);
  color:var(--tag-col); padding:.18rem .55rem; border-radius:8px;
}

/* Buttons */
.sl-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.sl-read-btn {
  background:linear-gradient(135deg,var(--gold),#c9a84c);
  color:#1a1200; font-family:'Nunito',sans-serif; font-weight:800;
  font-size:.875rem; padding:.65rem 1.6rem; border:none; border-radius:50px;
  cursor:pointer; transition:transform .2s, box-shadow .2s;
  box-shadow:0 4px 18px rgba(232,201,109,.35);
}
.sl-read-btn:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(232,201,109,.45); }
body.light-mode .sl-read-btn { background:#111; color:#fff; box-shadow:none; }

.sl-save-btn {
  background:rgba(255,255,255,.07); backdrop-filter:blur(8px);
  color:var(--txt); font-family:'Nunito',sans-serif; font-weight:700;
  font-size:.875rem; padding:.65rem 1.6rem;
  border:1px solid rgba(255,255,255,.16); border-radius:50px;
  cursor:pointer; transition:background .2s, border-color .2s, color .2s;
}
.sl-save-btn:hover { background:rgba(94,196,182,.12); border-color:var(--teal); color:var(--teal); }
body.light-mode .sl-save-btn { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.14); color:var(--txt2); }
body.light-mode .sl-save-btn:hover { background:rgba(26,122,106,.08); border-color:var(--teal); color:var(--teal); }

/* ── Controls bar ── */
.sl-controls {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; padding:.9rem 1.5rem 1.1rem;
  background:rgba(0,0,0,.30); backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.06);
}
body.light-mode .sl-controls { background:rgba(0,0,0,.04); border-top:1px solid rgba(0,0,0,.07); }

.sl-arrow {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07);
  color:var(--txt); font-size:1.15rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .15s;
  line-height:1; flex-shrink:0;
}
.sl-arrow:hover { background:rgba(232,201,109,.18); border-color:var(--gold); transform:scale(1.08); }
body.light-mode .sl-arrow { border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.05); }
body.light-mode .sl-arrow:hover { background:rgba(0,0,0,.1); border-color:rgba(0,0,0,.3); }

#sliderDots { display:flex; align-items:center; gap:6px; }
.sl-dot-btn {
  width:7px; height:7px; border-radius:50%; border:none;
  background:rgba(255,255,255,.22); cursor:pointer; padding:0; flex-shrink:0;
  transition:background .25s, width .3s cubic-bezier(.4,0,.2,1);
}
.sl-dot-btn.active { background:var(--gold); width:22px; border-radius:4px; }
body.light-mode .sl-dot-btn        { background:rgba(0,0,0,.18); }
body.light-mode .sl-dot-btn.active { background:#111; }

#sliderCounter {
  font-family:'Nunito',sans-serif; font-size:.7rem; font-weight:700;
  color:var(--txt3); letter-spacing:.06em; margin-left:.25rem;
}

#sliderThumbs { display:none; }

/* ── Responsive ── */
@media (max-width:768px) {
  #featuredSlider { margin:0 3vw; border-radius:20px; }
  #sliderWrap, .sl-slide.active { min-height:360px; }
  .sl-cover-wrap { right:3%; opacity:.3 !important; }
  .sl-cover-img  { width:110px; }
  .sl-info       { padding:1.8rem 1.5rem 2rem; max-width:80%; }
  .sl-title      { font-size:1.5rem; }
}
@media (max-width:480px) {
  #featuredSlider { margin:0 2vw; border-radius:16px; }
  #sliderWrap, .sl-slide.active { min-height:300px; }
  .sl-cover-wrap { display:none; }
  .sl-info       { padding:1.4rem 1.2rem 1.6rem; max-width:100%; }
  .sl-title      { font-size:1.3rem; }
  .sl-actions    { flex-direction:column; }
  .sl-read-btn, .sl-save-btn { width:100%; text-align:center; }
}