/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * GRID presets (named asset 'cyliumee-grid').
 *
 * Unlike the carousel presets in themes.css, these are STRUCTURAL: front.js does
 * not initialise Swiper at all (it reads the theme from the widget's data-config),
 * every item is rendered, and arrows / pagination are not emitted. The only
 * exception is `grid-rows`, a multi-row CAROUSEL built on Swiper's native Grid
 * module — it keeps its arrows and needs nothing here.
 *
 * CSS Grid, not flex-wrap, on purpose:
 *   - an incomplete last row would stretch (flex-grow) or leave holes;
 *   - columns would not equalise across rows;
 *   - `grid-featured` needs `grid-column: span 2`, impossible in flex.
 *
 * Breakpoints match Creative Elements (md 768, lg 1025) and front.js, so the
 * editor's tablet/desktop preview agrees with the front.
 *
 * Custom properties, emitted by each widget on its wrapper:
 *   --cee-grid-cols-mobile / -tablet / -desktop  (integers, "Grid"/"Dense")
 *   --cee-grid-item-w                            (px, "Fluid grid")
 *   --cee-grid-gap                               (px, all presets)
 *
 * The three markups share one selector list: the slider element differs
 * (.cyliumee-cats IS the .swiper, the others contain one) but the item track is
 * always `> .swiper-wrapper`.
 */

/* ── Common: turn the Swiper track into a grid ───────────────────────────── */

.cyliumee-theme-grid .cyliumee-cats,
.cyliumee-theme-grid-fluid .cyliumee-cats,
.cyliumee-theme-grid-dense .cyliumee-cats,
.cyliumee-theme-grid-featured .cyliumee-cats,
.cyliumee-theme-grid .cyliumee-ps__slider,
.cyliumee-theme-grid-fluid .cyliumee-ps__slider,
.cyliumee-theme-grid-dense .cyliumee-ps__slider,
.cyliumee-theme-grid-featured .cyliumee-ps__slider,
.cyliumee-theme-grid .cyliumee-icob__swiper,
.cyliumee-theme-grid-fluid .cyliumee-icob__swiper,
.cyliumee-theme-grid-dense .cyliumee-icob__swiper,
.cyliumee-theme-grid-featured .cyliumee-icob__swiper {
    /* Swiper's stylesheet clips its container; a grid grows downwards and would
       lose its lower rows, plus card shadows and badges. */
    overflow: visible;
    height: auto;
}

.cyliumee-theme-grid .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
.cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--cee-grid-cols-mobile, 2), minmax(0, 1fr));
    gap: var(--cee-grid-gap, 16px);
    /* Swiper sets these when it runs; it does not here, but a shop theme might. */
    transform: none;
    width: auto;
}

/* ── Fluid: as many columns as the BLOCK width allows ────────────────────── */

.cyliumee-theme-grid-fluid .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-fluid .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-fluid .cyliumee-icob__swiper > .swiper-wrapper {
    display: grid;
    /* min() caps the item at the container width, so a 400px item in a 300px
       column shrinks instead of overflowing. */
    grid-template-columns: repeat(auto-fill, minmax(min(var(--cee-grid-item-w, 260px), 100%), 1fr));
    gap: var(--cee-grid-gap, 16px);
    transform: none;
    width: auto;
}

/* ── Slides become grid cells ────────────────────────────────────────────── */

.cyliumee-theme-grid .swiper-slide,
.cyliumee-theme-grid-fluid .swiper-slide,
.cyliumee-theme-grid-dense .swiper-slide,
.cyliumee-theme-grid-featured .swiper-slide {
    /* Swiper's base CSS pins slides to width:100% / flex-shrink:0, which would
       make every cell span its whole track. */
    width: auto;
    min-width: 0;
    flex-shrink: 1;
    height: auto;
}

/* ── Tablet / desktop column counts ──────────────────────────────────────── */

@media (min-width: 768px) {
    .cyliumee-theme-grid .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
        grid-template-columns: repeat(var(--cee-grid-cols-tablet, 3), minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .cyliumee-theme-grid .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper,
    .cyliumee-theme-grid .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper {
        grid-template-columns: repeat(var(--cee-grid-cols-desktop, 4), minmax(0, 1fr));
    }
}

/* ── Dense: tighter gutters (the extra column is added server-side, since
      repeat() does not accept calc()) ─────────────────────────────────────── */

.cyliumee-theme-grid-dense .cyliumee-cats > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-ps__slider > .swiper-wrapper,
.cyliumee-theme-grid-dense .cyliumee-icob__swiper > .swiper-wrapper {
    gap: var(--cee-grid-gap-dense, 8px);
}

/* ── Feature: the first item takes 2 columns x 2 rows ────────────────────── */

.cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper > .swiper-slide:first-child,
.cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper > .swiper-slide:first-child,
.cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper > .swiper-slide:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Phone: 2 columns means the feature would be the whole grid — keep it to one
   cell so the layout still reads as a grid. */
@media (max-width: 767.98px) {
    .cyliumee-theme-grid-featured .cyliumee-cats > .swiper-wrapper > .swiper-slide:first-child,
    .cyliumee-theme-grid-featured .cyliumee-ps__slider > .swiper-wrapper > .swiper-slide:first-child,
    .cyliumee-theme-grid-featured .cyliumee-icob__swiper > .swiper-wrapper > .swiper-slide:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* ── Scrolling grid (grid-rows): Swiper's own Grid module does the work, so
      nothing to lay out here. Only the vertical gutter needs a value, because
      Swiper applies spaceBetween horizontally only. ───────────────────────── */

.cyliumee-theme-grid-rows .swiper-slide {
    height: calc((100% - var(--cee-grid-row-gap, 16px)) / var(--cee-grid-rows, 2));
}

/* ─────────────────────────────────────────────────────────────────────────
 * CAROUSEL, "as many items as fit" (sizing_mode = width).
 *
 * Not a grid preset, but it belongs with the other layout modes: Swiper is run
 * with slidesPerView:'auto', which means it READS the slide width from CSS. The
 * width is therefore declared here, per breakpoint, and min(...,100%) keeps an
 * item from overflowing a narrow block.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-cats--autow > .swiper-wrapper > .swiper-slide,
.cyliumee-ps__slider--autow > .swiper-wrapper > .swiper-slide,
.cyliumee-icob__swiper--autow > .swiper-wrapper > .swiper-slide {
    width: min(var(--cee-item-w-mobile, 160px), 100%);
}

@media (min-width: 768px) {
    .cyliumee-cats--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-ps__slider--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-icob__swiper--autow > .swiper-wrapper > .swiper-slide {
        width: min(var(--cee-item-w-tablet, 220px), 100%);
    }
}

@media (min-width: 1025px) {
    .cyliumee-cats--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-ps__slider--autow > .swiper-wrapper > .swiper-slide,
    .cyliumee-icob__swiper--autow > .swiper-wrapper > .swiper-slide {
        width: min(var(--cee-item-w-desktop, 260px), 100%);
    }
}