{"version":3,"file":"blocks/PostsTemplate/index.css","mappings":";;;AAAA,gBAAgB;AAAhB;;;;;EAAA;ACAA;;;;;;;;;;;EAAA;AA0BA;EACE;EACA;EACA;EAKA;EAIA;EACA;EACA;EACA;EAGA;ADfF;ACiBE;EACE;ADfJ;ACkBE;EA/BA;EAkCE;EACA;EACA;ADjBJ;ACoBE;EACE;IAxCF;EDuBA;AACF;ACqBE;EACE;IA9CF;ED4BA;AACF;;AApCA;EACE;EACA;AAuCF,C","sources":["webpack://brandy-blocks/./src/blocks/PostsTemplate/editor.scss","webpack://brandy-blocks/./src/blocks/_shared/_loop-slider-preview.scss"],"sourcesContent":["/**\n * Post Template — editor-only styles.\n *\n * The slider preview strip is shared with brandy/product-template; only the grid\n * reset below is specific to this block.\n */\n\n@import \"../_shared/loop-slider-preview\";\n\n// The block's own class carries `display: grid` from style.scss; the preview is\n// a single scrolling row, so the grid has to be switched off here rather than\n// conditioned in the shared stylesheet (the frontend never renders this class).\n.wp-block-brandy-posts-template.is-editor-preview {\n  display: block;\n  grid-template-columns: none;\n}\n","/**\n * Editor-only styles for the shared loop slider preview (_shared/loop-slider-preview.jsx).\n *\n * Embla never runs in the canvas, so the preview is a natively scrollable strip\n * (same approach as the Slider block's editor preview). Widths come from the\n * same --embla-slides-* / --embla-gap custom properties the frontend uses, so\n * changing \"slides per view\" moves the canvas and the frontend together.\n *\n * Arrow and dot styling is inherited from embla.min.css, which Initialize.php\n * loads admin-side; only the strip itself is declared here. Each loop block's\n * editor.scss imports this and adds its own `.is-editor-preview` grid reset.\n */\n\n// Breakpoints mirror embla.min.css so a slide is the same width in the canvas\n// device previews as it is on the frontend.\n$loop-preview-tablet-max: 1023px;\n$loop-preview-mobile-max: 479px;\n\n@mixin loop-preview-slide-width($slides-var, $fallback) {\n  flex: 0 0\n    calc(\n      (100% - var(--embla-gap, 30px) * (var(#{$slides-var}, $fallback) - 1)) /\n        var(#{$slides-var}, $fallback)\n    );\n}\n\n.brandy-loop-slider-preview__slides {\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  // Flex `gap`, not the frontend's padding-left model: the item reset in each\n  // block's style.scss carries `margin: 0 !important`, so a margin-based gap\n  // loses, and padding would need the container's negative margin to stay\n  // aligned. The widths below already reserve room for it.\n  gap: var(--embla-gap, 30px);\n  // Snapping makes a dragged strip settle on a slide edge, which is how the\n  // frontend carousel behaves; without it the preview parks mid-slide and the\n  // \"Slide n of m\" readout drifts from what is on screen.\n  scroll-snap-type: x mandatory;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  // The scrollbar would sit across the card row and read as part of the design.\n  // Dragging and the arrows still scroll.\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  > li {\n    @include loop-preview-slide-width(--embla-slides-desktop, 4);\n\n    min-width: 0;\n    box-sizing: border-box;\n    scroll-snap-align: start;\n  }\n\n  @media screen and (min-width: 480px) and (max-width: $loop-preview-tablet-max) {\n    > li {\n      @include loop-preview-slide-width(--embla-slides-tablet, 2);\n    }\n  }\n\n  @media screen and (max-width: $loop-preview-mobile-max) {\n    > li {\n      @include loop-preview-slide-width(--embla-slides-mobile, 1);\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}