@use "./functions.scss" as *;
@use "./repeater-embla-controls.scss" as *;

// Category Groups product grid — display styles (Grid / Cards / Slider) ported
// (light) from the Repeater, rebound to the productGridDesign.layout CSS-variable
// paths (--_ctm-catego-dn-pt-gd-dn-lt-*). Items-per-row / min-column-width /
// gaps are responsive (mob/tab/desktop var fallback). The container box
// (padding + fill/border/radius/shadow) stays on .cg_product_grid in
// category-groups-element.scss. @imported there within the categoryGroups scope.
//
// DOM: .cg_product_grid (root, gets grd|crds|sld + embla + data-control-type)
//        > .cg_product_grid_wrapper (gets embla__container in slider mode)
//            > .cg_product_card        (grid / cards)
//            > .embla__slide > .cg_product_card (slider)
//        > slider arrows / dots (slider mode)
    .cg_product_grid {
      // Slider-control intermediate vars consumed by the embla-controls mixin.
      --_sf-ic-sz-nn: var(
        --_ctm-mob-catego-dn-pt-gd-dn-lt-aw-in-se,
        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-aw-in-se, var(--_ctm-catego-dn-pt-gd-dn-lt-aw-in-se, 40px))
      );
      --_sf-ed-vl-sz: var(
        --_ctm-mob-catego-dn-pt-gd-dn-lt-dt-se,
        var(--_ctm-tab-catego-dn-pt-gd-dn-lt-dt-se, var(--_ctm-catego-dn-pt-gd-dn-lt-dt-se, 10px))
      );

      // ---- Grid mode: auto-fit columns by min column width ----
      &.grd {
        & > .cg_product_grid_wrapper {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(
            auto-fit,
            minmax(
              var(
                --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-cn-wh,
                var(--_ctm-tab-catego-dn-pt-gd-dn-lt-mn-cn-wh, var(--_ctm-catego-dn-pt-gd-dn-lt-mn-cn-wh, 200px))
              ),
              1fr
            )
          );
          grid-auto-rows: minmax(
            var(
              --_ctm-mob-catego-dn-pt-gd-dn-lt-mn-rw-ht,
              var(--_ctm-tab-catego-dn-pt-gd-dn-lt-mn-rw-ht, var(--_ctm-catego-dn-pt-gd-dn-lt-mn-rw-ht, auto))
            ),
            auto
          );
          column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
          row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
        }
      }

      // ---- Cards mode: fixed items per row (flex calc) ----
      &.crds {
        & > .cg_product_grid_wrapper {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          column-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 24px)};
          row-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-rw-gp, 24px)};
          & > .cg_product_card {
            --_col-count: var(
              --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-rw,
              var(--_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-rw, var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-rw, 3))
            );
            --_col-gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-cn-gp, 0px)};
            width: calc(
              (100% / var(--_col-count)) -
                (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
            );
            flex: 0 0
              calc(
                (100% / var(--_col-count)) -
                  (((var(--_col-count) - 1) * var(--_col-gap)) / (var(--_col-count)))
              );
          }
        }
      }

      // ---- Slider mode (Embla) ----
      &.sld {
        position: relative;
        overflow: clip;
        --_sf-sl-ct-ic-dt-at-cl: var(
          --_ctm-mob-catego-dn-pt-gd-dn-lt-cl-ae-cr,
          var(--_ctm-tab-catego-dn-pt-gd-dn-lt-cl-ae-cr, var(--_ctm-catego-dn-pt-gd-dn-lt-cl-ae-cr))
        );

        @for $i from 1 through 3 {
          &:is([data-control-type="#{$i}"]) {
            @if ($i == 3) {
              overflow-y: visible;
            }
            @include CMSRepeaterEmblaControlStyles($i);
          }
        }

        // Template 3: place the arrows/dots ABOVE the product list (not over the
        // images). bottom:100% puts the control's bottom edge at the grid's top
        // edge; +8px adds a small gap. overflow-y:visible (set above) lets it
        // show above the grid. (Repeater gets this from a saved template.)
        &:is([data-control-type="3"]) {
          --_sf-rp-ct-t3-top-vl: auto;
          --_sf-rp-ct-t3-bottom-vl: calc(100% + 8px);
          --_sf-rp-ct-t3-right-vl: 0px;
          --_sf-rp-ct-t3-left-vl: auto;
          --_sf-rp-ct-t3-transform-vl: none;

          // Restyle template-3 pagination from the connected gray bar into
          // separated circular dots + a capsule active indicator.
          .pagination__v1 {
            gap: 6px;
          }
          .pagination__v1 > button.embla__dot {
            width: var(--_sf-ed-vl-sz, 10px);
            height: var(--_sf-ed-vl-sz, 10px);
            border-radius: 50%;
            background: #d6d6d6;
          }
          .pagination__v1 > button.embla__dot.embla__dot--selected {
            width: max(calc(var(--_sf-ed-vl-sz, 10px) * 2), 20px);
            border-radius: 999px;
            background: var(--_sf-sl-ct-ic-dt-at-cl, #7c3aed);
          }
        }

        // Pagination dots: never compress. With many pages the strip scrolls
        // horizontally (scrollbar hidden) instead of squishing the dots.
        .pagination__v1 {
          flex-wrap: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
          scrollbar-width: none;
          &::-webkit-scrollbar {
            display: none;
          }
          & > button.embla__dot {
            flex-shrink: 0;
          }
        }

        & > .cg_product_grid_wrapper.embla__container {
          display: flex;
          width: 100%;
          min-height: 100px;
          gap: #{prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px)};
          --_embla-slide-space: var(
            --_ctm-mob-catego-dn-pt-gd-dn-lt-im-gp,
            var(--_ctm-tab-catego-dn-pt-gd-dn-lt-im-gp, var(--_ctm-catego-dn-pt-gd-dn-lt-im-gp, 0px))
          );
          --_embla-col-count: var(
            --_ctm-mob-catego-dn-pt-gd-dn-lt-st-is-pr-se,
            var(--_ctm-tab-catego-dn-pt-gd-dn-lt-st-is-pr-se, var(--_ctm-catego-dn-pt-gd-dn-lt-st-is-pr-se, 3))
          );
          & > .embla__slide {
            --_sf-cl-vl: calc(
              (100% / var(--_embla-col-count, 3)) -
                (
                  ((var(--_embla-col-count, 3) - 1) * (var(--_embla-slide-space, 10px))) /
                    (var(--_embla-col-count, 3))
                )
            );
            flex: 0 0 var(--_sf-cl-vl);
            width: var(--_sf-cl-vl);
            grid-template-rows: minmax(50px, auto);
            grid-template-columns: minmax(0px, 1fr);
            img {
              width: 100%;
            }
          }
        }
      }
    }