/* ============================================================
   BOOKS SLIDER — STYLESHEET
   ============================================================
   All customizable values are exposed as CSS custom properties
   on the .books-slider scope. See admin "Information" tab for
   detailed documentation and examples.

   Sections:
     1.  Design tokens (customize here)
     2.  Shared card
     3.  Grid layout
     4.  Slider layout
     5.  Responsive behaviour
     6.  Accessibility
   ============================================================ */


/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
/**
 * [CONFIG] Global look & feel.
 * Change these values to customize the module's appearance.
 * Everything below uses these tokens.
 */
.books-slider {
    /* Spacing between cards */
    --books-gap: 1rem;

    /* Card corner radius */
    --books-radius: 8px;

    /* Card shadow */
    /*--books-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/
    /*--books-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.14);*/

    /* Title */
    --books-title-color: inherit;
    --books-title-size: 1rem;
    --books-title-weight: 600;

    /* Overlay gradient (used for overlay title and overlay dots) */
    --books-overlay-gradient: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0) 100%
    );

    /* Dots */
    --books-dot-size: 8px;
    --books-dot-gap: 6px;
    --books-dot-color: rgba(0, 0, 0, 0.3);
    --books-dot-color-active: rgba(0, 0, 0, 0.8);
    --books-dot-color-overlay: rgba(255, 255, 255, 0.5);
    --books-dot-color-overlay-active: #fff;

    /* Arrows */
    --books-arrow-size: 36px;
    --books-arrow-bg: rgba(0, 0, 0, 0.5);
    --books-arrow-bg-hover: rgba(0, 0, 0, 0.75);
    --books-arrow-color: #fff;

    /* Image aspect ratio (2/3 = portrait book cover) */
    --books-image-ratio: 3 / 4;

    /* Image static size */
    --books-image-width: 165px;
    --books-image-height: 240px;

    /* Image fit: cover | contain | fill | scale-down | none */
    --books-image-fit: fill;

    /* Transition used by the slider track */
    --books-transition-duration: 950ms;
    --books-transition-easing: cubic-bezier(0.2, 0, 0, 1);

    /* Placeholder background (used when no image is available) */
    /*--books-placeholder-bg: #eaeaea;*/
    --books-placeholder-color: #9a9a9a;
}


/* ── 2. SHARED CARD ───────────────────────────────────────── */
.books-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--books-radius);
    box-shadow: var(--books-shadow);
    overflow: hidden;
    transition: box-shadow 200ms ease;
    align-items: center;
}

.books-item:hover {
    box-shadow: var(--books-shadow-hover);
}

/* Adaptive image size/
.books-item__image {
    position: relative;
    width: 100%;
    aspect-ratio: var(--books-image-ratio);
    background: var(--books-placeholder-bg);
    overflow: hidden;
}

.books-item__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--books-image-fit);
    display: block;
}

/* Fixed image size*/
.books-item__image {
    width: var(--books-image-width);
    height: var(--books-image-height);
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--books-placeholder-bg);
    overflow: hidden;
}

.books-item__image img {
    position: static;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: var(--books-image-fit);
}

/* CSS-only placeholder (📖 icon drawn via pseudo-element) */
.books-item__image--empty::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--books-placeholder-bg);
}

.books-item__image--empty::after {
    content: "📖";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--books-placeholder-color);
    opacity: 0.5;
}

.books-item__title {
    margin: 0;
    font-size: var(--books-title-size) !important;
    font-weight: var(--books-title-weight);
    color: var(--books-title-color);
    line-height: 1.3;
}

.books-item__title-link {
    color: inherit;
    text-decoration: none;
}

.books-item__title-link:hover,
.books-item__title-link:focus-visible {
    text-decoration: underline;
}

/* Title: above */
.books-item__title--above {
    padding: 0.5rem 0.75rem 0;
}

/* Title: below */
.books-item__title--below {
    padding: 0.5rem 0.75rem 0;
}

/* Title: overlay */
.books-item__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem 0.75rem 0.6rem;
    background: var(--books-overlay-gradient);
    color: #fff;
    pointer-events: none;
}

.books-item__overlay .books-item__title-link {
    pointer-events: auto;
}

.books-item__title--overlay {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.books-item__category {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    margin: 0.4rem 0.75rem 0;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
}

.books-item__date {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem 0.6rem;
    opacity: 0.7;
}


/* ── 3. GRID LAYOUT ───────────────────────────────────────── */
/**
 * [CONFIG] Number of columns is provided as data-columns on the
 * wrapper by PHP (module parameter "columns"). On smaller screens
 * the grid collapses via the responsive rules below.
 */
.books-grid {
    display: grid;
    gap: var(--books-gap);
    grid-template-columns: repeat(var(--books-columns, 4), minmax(0, 1fr));
}

.books-grid[data-columns="1"] { --books-columns: 1; }
.books-grid[data-columns="2"] { --books-columns: 2; }
.books-grid[data-columns="3"] { --books-columns: 3; }
.books-grid[data-columns="4"] { --books-columns: 4; }
.books-grid[data-columns="5"] { --books-columns: 5; }
.books-grid[data-columns="6"] { --books-columns: 6; }


/* ── 4. SLIDER LAYOUT ─────────────────────────────────────── */
.books-slider--slider {
    position: relative;
}

.books-slider__viewport {
    position: relative;
    overflow: hidden;
    /* Vertical panning handled by the page, horizontal by the slider. */
    touch-action: pan-y;
}

.books-slider__track {
    display: flex;
    gap: var(--books-gap);
    /* The slide width is defined on .books-slider__slide (see below). */
    will-change: transform;
    transition: transform var(--books-transition-duration) var(--books-transition-easing);
}

/* Slides-per-view is controlled by --books-slides-visible.
   The default (responsive) mode uses media queries below.
   The "fixed" mode reads --books-slides-visible from data-columns. */
.books-slider--slider[data-layout="responsive"] {
    --books-slides-visible: 4;
}

/* Fixed grid mode — the column count comes from data-columns. */
.books-slider--slider[data-layout="fixed"][data-columns="1"] { --books-slides-visible: 1; }
.books-slider--slider[data-layout="fixed"][data-columns="2"] { --books-slides-visible: 2; }
.books-slider--slider[data-layout="fixed"][data-columns="3"] { --books-slides-visible: 3; }
.books-slider--slider[data-layout="fixed"][data-columns="4"] { --books-slides-visible: 4; }
.books-slider--slider[data-layout="fixed"][data-columns="5"] { --books-slides-visible: 5; }
.books-slider--slider[data-layout="fixed"][data-columns="6"] { --books-slides-visible: 6; }

.books-slider__slide {
    flex: 0 0 calc(
        (100% - (var(--books-slides-visible) - 1) * var(--books-gap))
        / var(--books-slides-visible)
    );
}

/* Arrows */
.books-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--books-arrow-size);
    height: var(--books-arrow-size);
    border: 0;
    border-radius: 50%;
    background: var(--books-arrow-bg);
    color: var(--books-arrow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 150ms ease;
}

.books-slider__arrow:hover { background: var(--books-arrow-bg-hover); }

.books-slider__arrow svg {
    width: 60%;
    height: 60%;
    fill: currentColor;
}

.books-slider__arrow--prev { left: 8px; }
.books-slider__arrow--next { right: 8px; }

/* Dots */
.books-slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--books-dot-gap);
}

.books-slider__dots--above { margin-bottom: 0.5rem; }
.books-slider__dots--below { margin-top: 0.5rem; }

.books-slider__dots--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 2;
}

.books-slider__dot {
    width: var(--books-dot-size);
    height: var(--books-dot-size);
    border-radius: 50%;
    background: var(--books-dot-color);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 150ms ease;
}

.books-slider__dot[aria-current="true"] { background: var(--books-dot-color-active); }

.books-slider__dots--overlay .books-slider__dot {
    background: var(--books-dot-color-overlay);
}

.books-slider__dots--overlay .books-slider__dot[aria-current="true"] {
    background: var(--books-dot-color-overlay-active);
}


/* ── 5. RESPONSIVE BEHAVIOUR ──────────────────────────────── */
/**
 * [CONFIG] Slides per view by breakpoint.
 * To change visible slides on a given viewport, edit the value
 * of --books-slides-visible inside the relevant media query.
 */
@media (max-width: 1199.98px) {
    .books-slider--slider[data-layout="responsive"] { --books-slides-visible: 3; }
}

@media (max-width: 991.98px) {
    .books-slider--slider[data-layout="responsive"] { --books-slides-visible: 2; }
    .books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .books-slider--slider[data-layout="responsive"] { --books-slides-visible: 1; }
    .books-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── 6. ACCESSIBILITY ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .books-slider__track,
    .books-item,
    .books-slider__arrow {
        transition: none !important;
    }
}