/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 19 2025 | 08:23:21 */
/* ================================
   BOOKS BANNER WRAPPER + FADES
   ================================ */

/* Outer wrapper follows inner height via fit-content */
.books-banner {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
  height: fit-content;           /* <<< belangrijkste fix */
  overflow: visible;
}

/* Fade layers */
.books-banner::before,
.books-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 4;
}

/* TOP FADE */
.books-banner::before {
  top: 0;
  height: 90px;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* BOTTOM FADE — always sits *below* content */
.books-banner::after {
  bottom: -40px;              /* pulls fade fully over scrolling books */
  height: 140px;
  left: -15%;
  right: -10%;
  background: linear-gradient(
    to top,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
}


/* ================================
   COLUMNS & SCROLL TRACK
   ================================ */

.books-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 6px;

  /* <<< BELANGRIJK:
     Dit bepaalt nu de totale hoogte van de banner,
     en de wrapper volgt deze automatisch.
  */
  height: clamp(340px, 54vw, 468px);
}

.books-column {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: visible;
  transform: rotate(8deg);
  transform-origin: top;
  margin-top: -6%;
}

.books-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
  animation: books-vertical-scroll 80s linear infinite;
}

.books-column--reverse .books-track {
  animation-direction: reverse;
}


/* ================================
   BOOK CARDS
   ================================ */

.book-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px;
}

.book-card img {
  width: 220px;
  height: auto;
  display: block;
  border-radius: 12px;
}


/* ================================
   ANIMATION
   ================================ */

@keyframes books-vertical-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}


/* ================================
   RESPONSIVE
   ================================ */

/* First: reset tablet tweaks (not needed anymore) */
@media (max-width: 768px) {
  .book-card img {
    border-radius: 10px;
  }
}

/* REAL mobile/tablet logic — 1 COLUMN BELOW 1000px */
@media (max-width: 1000px) {
  .books-columns {
    grid-template-columns: 1fr;    /* 1 column */
    height: 420px;                 /* height for single column */
  }

  /* Keep rotation from desktop; only center */
  .books-column {
    justify-content: center;
    /* no transform / margin-top override here */
  }

  .book-card img {
    width: 220px;                  /* a bit narrower for smaller screens */
  }

  .books-track {
    animation-duration: 90s;       /* nice tempo for single column */
  }

  /* Fade aligns to inner width on smaller screens */
  .books-banner::after {
    left: 0;
    right: 0;
  }
}