{"version":3,"file":"blocks/Slider/style-index.css","mappings":";;;AAAA,gBAAgB;ACAhB;;;;;;;;;;;;;;;EAAA;ADEA;;;;;;;;;;;EAAA;AAgBE;EACE;AAYJ;AARE;EACE;AAUJ;AAHE;EACE;EACA;EAGA;EACA;AAGJ;AAGI;EAZF;IAaI;EAAJ;AACF;AAMI;EApBF;IAqBI;EAHJ;AACF;AAcE;EACE;AAZJ;ACpCE;EDHF;ICII;;;;;;;;;;;;;;MAAA;EDqDF;ECtCE;;IAIE;IACA;EDsCJ;ECnCE;;IAIE;EDmCJ;EAlEF;ICkCI;;;;;;;;;;MAAA;ED6CF;EClCE;IACE;EDoCJ;EAlFF;ICuDI;;;;;;MAAA;EDoCF;EC7BE;IACE;ED+BJ;EC5BE;IACE;ED8BJ;AACF;AAnCE;EACE;EACA;EACA;AAqCJ;AAnCI;EACE;AAqCN,C","sources":["webpack://brandy-blocks/./src/blocks/Slider/style.scss","webpack://brandy-blocks/./src/blocks/_shared/_slider-motion-primitives.scss"],"sourcesContent":["@use '../_shared/slider-motion-primitives' as motion;\n\n/**\n * Slider — frontend styles.\n *\n * Slide sizing and control chrome come from the globally-enqueued embla assets\n * (embla.min.css), driven by the --embla-slides-* / --embla-gap vars stamped in\n * render.php. What this file overrides is the *gap technique*: the shared\n * stylesheet spaces slides with padding-left, which sits inside the slide box,\n * so a slide with a background or border paints straight through the gap and\n * the slides read as one solid strip. Slides support both, so they space with\n * margin-right instead — the same technique testimonial cards use — and the\n * width formula subtracts the gaps that padding no longer absorbs.\n */\n.brandy-slider {\n  // Base embla.min.css ships .embla__dots as display:var(--embla-pagination-display, none)\n  // — hidden until a consumer opts in. render.php only emits .embla__dots when\n  // \"Show dots\" is on, so opting in unconditionally here is safe.\n  .embla {\n    --embla-pagination-display: flex;\n  }\n\n  // The negative margin only pairs with the padding-left gap below.\n  .embla .embla__container {\n    margin-left: 0;\n  }\n\n  // Three selectors deep so these outrank embla.min.css's\n  // `.embla__slide:not(.wp-block-brandy-testimonial-card)` rules — and their\n  // breakpoint variants — whichever stylesheet loads last. Breakpoints match\n  // embla.min.css so every base rule has a same-scope override.\n  .embla .embla__slide {\n    padding-left: 0;\n    margin-right: var(--embla-gap, 16px);\n    // Borders and padding must eat into the slide width, not add to it, or the\n    // last visible slide overflows the viewport.\n    box-sizing: border-box;\n    flex: 0 0\n      calc(\n        (100% - var(--embla-gap, 16px) * (var(--embla-slides-desktop, 1) - 1)) /\n          var(--embla-slides-desktop, 1)\n      );\n\n    @media screen and (min-width: 480px) and (max-width: 1023px) {\n      flex: 0 0\n        calc(\n          (100% - var(--embla-gap, 16px) * (var(--embla-slides-tablet, 1) - 1)) /\n            var(--embla-slides-tablet, 1)\n        );\n    }\n\n    @media screen and (max-width: 479px) {\n      flex: 0 0\n        calc(\n          (100% - var(--embla-gap, 16px) * (var(--embla-slides-mobile, 1) - 1)) /\n            var(--embla-slides-mobile, 1)\n        );\n    }\n  }\n\n  // A trailing margin on the last slide only earns its keep in loop mode, where\n  // it spaces the wrap-around. view.js stamps embla--no-loop when Embla resolves\n  // loop to false; there the same margin is pure overflow that Embla counts as\n  // scrollable slack, faking an extra snap on a slider whose slides all fit.\n  .embla--no-loop .embla__container > .embla__slide:last-child {\n    margin-right: 0;\n  }\n\n  // Shared with the Showcase Slider — same rules, different scope.\n  @include motion.slider-motion-primitives;\n\n  // Fallback if Embla JS fails: keep slides reachable via native scroll.\n  // ONLY while uninitialized — view.js stamps .is-embla-ready before creating\n  // the Embla instance. With overflow-x:auto left on, the container becomes\n  // its own scroll box: off-screen slides clip INSIDE it, so Embla's\n  // translate3d moves the whole box out of the viewport (blank slider after\n  // next/prev). Post-init, clipping belongs to .embla__viewport alone.\n  &:not(.is-embla-ready) .brandy-slider__slides {\n    overflow-x: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n","/**\n * Slider motion primitives — shared by every block that runs an Embla strip.\n *\n * Two opt-in classes an author types into the editor's \"Additional CSS classes\"\n * box, which is the only authoring surface that reaches an arbitrary inner\n * block. Both read state published by embla-slide-motion.js (`.is-selected` on\n * the active slide, `--brandy-slide-progress` on every slide), so neither needs\n * JavaScript of its own.\n *\n * Included rather than written flat because each consuming block scopes it to\n * its own root — the rules are identical, the scope is not.\n *\n * Wrapped in `prefers-reduced-motion: no-preference` rather than merely\n * shortened under `reduce`: the honest answer to \"no movement\" is no transform\n * at all, which is also how the view modules treat continuous drift.\n */\n@mixin slider-motion-primitives {\n  @media (prefers-reduced-motion: no-preference) {\n    /*\n     * Ken-Burns settle: neighbours sit fractionally overscanned and the active\n     * slide relaxes to true size, so an incoming image reads as coming to rest\n     * rather than snapping into place.\n     *\n     * Two shapes, because the class lands in two places: on the media itself\n     * (core/image, where the author's own wrapper does the clipping), or on a\n     * core/cover, where scaling the block box would drag its inner content\n     * along — there the overscan belongs to the background layer alone.\n     *\n     * The 3% overscan has to be clipped by an ancestor or it bleeds past the\n     * slide edge — core/cover and any group with `overflow: hidden` already do;\n     * a bare core/image does not. Left to the author rather than forced here,\n     * since clipping every slide would cut off deliberate overhangs.\n     */\n    .embla__slide .brandy-zoom-settle:not(.wp-block-cover),\n    .embla__slide\n      .brandy-zoom-settle.wp-block-cover\n      .wp-block-cover__image-background {\n      transform: scale(1.03);\n      transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);\n    }\n\n    .embla__slide.is-selected .brandy-zoom-settle:not(.wp-block-cover),\n    .embla__slide.is-selected\n      .brandy-zoom-settle.wp-block-cover\n      .wp-block-cover__image-background {\n      transform: scale(1);\n    }\n\n    /*\n     * Parallax layer: drifts against its own slide, so text can lag the photo\n     * it sits beside — the cross-column drift of a multi-track slider, without\n     * the second track.\n     *\n     * Strength is a custom property, not a class variant: CSS cannot read a\n     * number out of an attribute, and a property can be set on the layer or any\n     * ancestor (pattern, theme, block style) without new selectors here. It is\n     * deliberately NOT declared on this rule — an own declaration would beat an\n     * inherited one and silently ignore the author's value.\n     */\n    .embla__slide .brandy-parallax {\n      transform: translate3d(\n        calc(\n          var(--brandy-slide-progress, 0) * var(--brandy-parallax-strength, 0px)\n        ),\n        0,\n        0\n      );\n    }\n\n    /*\n     * Ready-made strengths, so the effect is usable from the editor alone. A\n     * pattern cannot carry a bare `style=\"--brandy-parallax-strength:…\"`: the\n     * block would no longer serialise to what its save() produces and the\n     * editor would flag it as invalid content. A second class is the one hook\n     * that survives that round-trip.\n     */\n    .embla__slide .brandy-parallax--soft {\n      --brandy-parallax-strength: 32px;\n    }\n\n    .embla__slide .brandy-parallax--strong {\n      --brandy-parallax-strength: 72px;\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}