/* Button style — kept in sync with the single-flipbook block so this block
   also renders nicely when its view.css is the only stylesheet on the page. */
.sitewalk-flipbook-multi ._df_button {
    border-radius: 0;
    cursor: pointer;
    font-family: var(--body-type-font-family);
    padding: 10px 30px;
    display: inline-block;
    text-decoration: none !important;
    background-color: var(--primary-action-color) !important;
    color: #fff;
}
.sitewalk-flipbook-multi ._df_button:hover {
    filter: brightness(90%);
}

/* -------- Layout --------
   All values are static — no CSS custom properties inside `repeat()`, `gap`
   or `height`. Some hosting-side CSS minifiers (mod_pagespeed, LiteSpeed
   CSS-optimize, Cloudflare Auto Minify) mangle `var()` inside nested CSS
   functions and silently drop the declaration, so the grid was collapsing to
   a single column on optimizer-heavy hosts. Per-instance overrides (gap and
   thumbnail height) are emitted from `view.php` as a scoped inline <style>
   block or a plain `style="gap: …"` attribute. */

.sitewalk-flipbook-multi--df_thumb {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.sitewalk-flipbook-multi--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sitewalk-flipbook-multi--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sitewalk-flipbook-multi--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sitewalk-flipbook-multi--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sitewalk-flipbook-multi--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sitewalk-flipbook-multi--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.sitewalk-flipbook-multi--df_button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Each grid cell fills its column so the thumbnail can grow into it. */
.sitewalk-flipbook-multi--df_thumb .sitewalk-flipbook-multi__item {
    min-width: 0;
    display: flex;
    justify-content: center;
}

/* -------- Override DearFlip thumbnail defaults --------
   DearFlip renders `_df_thumb` as `.df-popup-thumb` with a hard-coded
   `width: 140px` and `margin: 30px 15px 15px !important`. Those fight the
   grid — killing them lets each cell decide the thumbnail width. */
.sitewalk-flipbook-multi--df_thumb .df-popup-thumb {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    display: block;
}

/* The book cover uses a background image (`background-size: 100% 100%`)
   and its <img> gets `width: 100%; height: auto`. That means: without a
   fixed height it naturally follows the PDF's aspect ratio inside the
   full cell width — exactly what "dynamisch anpassen" should do. */
.sitewalk-flipbook-multi--df_thumb .df-popup-thumb .df-book-wrapper {
    width: 100%;
}

/* -------- Fixed thumbnail height (opt-in) --------
   Structural rules only. The marker class `--fixed-thumb-height` switches
   DearFlip's cover from `background-size: 100% 100%` (stretched) to
   `contain` (letterboxed) so the cover isn't distorted at the requested
   height. The actual height value is emitted inline per block from
   `view.php`, scoped to `#sitewalk-flipbook-multi-<bID>`. */
.sitewalk-flipbook-multi--fixed-thumb-height .df-popup-thumb .df-book-cover,
.sitewalk-flipbook-multi--fixed-thumb-height .df-popup-thumb .df-book-page1,
.sitewalk-flipbook-multi--fixed-thumb-height .df-popup-thumb .df-book-page2 {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
}
.sitewalk-flipbook-multi--fixed-thumb-height .df-popup-thumb .df-book-cover img {
    width: auto !important;
    max-width: 100%;
    margin: 0 auto !important;
    object-fit: contain;
}

/* -------- Responsive fallbacks --------
   Same single-class specificity as `--cols-N` above, so the media query
   (source-later) wins on mobile regardless of the configured column count. */
@media screen and (max-width: 960px) {
    .sitewalk-flipbook-multi--df_thumb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 480px) {
    .sitewalk-flipbook-multi--df_thumb { grid-template-columns: 1fr; }
}