/* Logo Carousel Block - frontend
 *
 * INTENTIONALLY (almost) EMPTY.
 *
 * This module outputs the xso template's own "brand logos" markup and
 * classes (section-wrapper, section-brands, splide, brands-slider,
 * splide__track, splide__list, splide__slide, brand-box, brand-logo) -
 * exactly what demo.html ships under "SECTION - BRAND LOGOS". The template
 * already provides everything the brief asked for:
 *   - the auto-scrolling motion itself: js/app.js initializes every
 *     ".brands-slider" with Splide + the auto-scroll extension (both loaded
 *     on every page by the template's index.php)
 *   - grayscale-until-hover: .brand-box img is grayscale by default,
 *     .brand-box:hover img switches to full colour (brands.css)
 *   - the fade-out at both edges of the row (brands.css, mask-image)
 * So this module ships no JavaScript of its own, and only the one small
 * rule below - the template's own .brand-box img has a FIXED max-height
 * (70px desktop / 30px mobile), and this module's "logo height" setting
 * needs to be able to override that with a single admin-chosen value.
 */

/* ---------------------------------------------------------------------------
 * view.php sets --lcb-logo-height as an inline custom property on the
 * carousel's own wrapper (from the block's "image height" setting), so this
 * rule works for every instance of the block independently, each with its
 * own height, without needing a separate CSS class per height value.
 *
 * Most logos never actually need this in the browser: save.php already
 * resizes each one server-side (with GD) to this same height, so the image
 * file itself typically already has almost exactly this height. This rule
 * is the defensive fallback for the logos GD could not resize - svg (no
 * "resizing" needed, it is already a vector), gif, or any image that failed
 * to resize for some other reason - so every logo still lines up on the row
 * regardless of its own original size.
 * ------------------------------------------------------------------------ */
.lcb-carousel .brand-box img {
	width: auto;
	max-height: var(--lcb-logo-height, 60px);
}

/* The template's own .brand-box has a fixed min-height (100px) sized around
   its own fixed 70px logo height. With a small admin-chosen height that
   leaves a lot of empty space above/below the logo; center it there instead
   of just floating in the taller box. Layout-only - grayscale, opacity and
   the hover transition are all still the template's own. */
.lcb-carousel .brand-box {
	min-height: calc(var(--lcb-logo-height, 60px) + 40px);
}

/* ---------------------------------------------------------------------------
 * Geen eigen titelopmaak meer (v1.0.2). De titel is een kale <h1> en wordt
 * volledig door het template opgemaakt (css/basics.css voor grootte en
 * gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
 * blok er exact hetzelfde uit als een kop uit elke andere module of uit de
 * editor - de eerdere .lcb-title-line2-regel gaf dit blok een eigen opmaak
 * voor de tweede titelregel, en dat is precies het verschil dat we niet meer
 * willen. Wil je de kopopmaak wijzigen, doe dat in het template.
 * ------------------------------------------------------------------------ */