{"version":3,"file":"blocks/ShowcaseSlider/style-index.css","mappings":";;;AAAA,gBAAgB;ACAhB;;;;;;;;;;;;;;;EAAA;ADEA;;;;;;;;;;EAAA;AAWA;EACE;EACA;EAGA;AAcF;AARE;EACE;EACA;EACA;AAUJ;AAPE;EACE;EACA;EACA;AASJ;AA7BA;EAuBE;;;;;IAAA;EAMA;;GAAA;AAWF;AAPE;EACE;EACA;EAIA;AAMJ;AADE;EACE;EACA;EACA;EACA;EACA;AAGJ;AApDA;EAoDE;;;;;;IAAA;AASF;AAFE;;EAEE;AAIJ;AADE;EACE;AAGJ;AApEA;EAoEE;;;;IAAA;AAOF;AAFE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAIJ;AADE;EACE;AAGJ;AAxFA;EAwFE;;;;;;IAAA;AASF;AAFE;EACE;AAIJ;AADE;EACE;AAGJ;AAAE;EACE;EACA;AAEJ;AACE;EACE;EACA;AACJ;AA/GA;EAiHE;;;;IAAA;AAKF;AAAE;EACE;EACA;EACA;AAEJ;AA3HA;EA4HE;;;;;IAAA;AAOF;AADE;EACE;EACA;EACA;EACA;AAGJ;AAAE;EACE;AAEJ;AA5IA;EA6IE;;;;;IAAA;AAOF;AAAI;EACE;AAEN;AACI;EACE;AACN;AAEI;EACE;AAAN;ACzJE;EDJF;ICKI;;;;;;;;;;;;;;MAAA;ED0KF;EC3JE;;IAIE;IACA;ED2JJ;ECxJE;;IAIE;EDwJJ;EAxLF;ICmCI;;;;;;;;;;MAAA;EDkKF;ECvJE;IACE;EDyJJ;EAxMF;ICwDI;;;;;;MAAA;EDyJF;EClJE;IACE;EDoJJ;ECjJE;IACE;EDmJJ;AACF;AAxNA;EAmKE;;;;;;IAAA;AA8DF;AAvDE;EACE;EACA;AAyDJ;AAvDI;EACE;EACA;AAyDN;AAtDI;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;AAqDN;AAlDI;EACE;EACA;AAoDN;AAzPA;EAyME;;;;;IAAA;AAwDF;AAlDE;EACE;AAoDJ;AAlDI;;EAEE;EACA;AAoDN;AAjDI;EACE;AAmDN;AA5QA;EA6NE;;;IAAA;AAqDF;AAjDE;EAjOF;IAkOI;EAoDF;EAlDE;;IAEE;IACA;EAoDJ;EAjDE;IACE;EAmDJ;EA9CE;IACE;IACA;IACA;IACA;IACA;EAgDJ;AACF,C","sources":["webpack://brandy-blocks/./src/blocks/ShowcaseSlider/style.scss","webpack://brandy-blocks/./src/blocks/_shared/_slider-motion-primitives.scss"],"sourcesContent":["@use '../_shared/slider-motion-primitives' as motion;\n\n/**\n * Showcase Slider — frontend styles.\n *\n * The composition is one flex row wider than the viewport: media, then the\n * panel, then a preview column that starts past the right edge and is meant to\n * be mostly clipped. That clipping is the effect — a sliver of the next slide's\n * photo is what tells a reader the strip continues.\n *\n * Nothing here animates. Every transform is written by view.js from the\n * engine's progress; CSS only owns the boxes and the panel's colour fade.\n */\n.brandy-showcase-slider {\n  display: flex;\n  flex-wrap: nowrap;\n  // `clip` rather than `hidden`: this must not become a scroll container, or\n  // the preview column would be reachable by scrolling sideways.\n  overflow: clip;\n\n  // embla.min.css gives every .embla__viewport 20px of padding with\n  // compensating negative margins, so a slide can never fill the clipped area\n  // and ~20px of the neighbour always bleeds through. Harmless in a card row,\n  // wrong here: the media edge has to meet the panel exactly.\n  .embla__viewport {\n    padding: 0;\n    margin: 0;\n    width: 100%;\n  }\n\n  .embla__container {\n    display: flex;\n    flex-wrap: nowrap;\n    margin-left: 0;\n  }\n\n  /*\n   * The media and the preview are the same width — that is what makes one step\n   * move them equally, so the sliver the reader was peeking at becomes the next\n   * hero shot. Both are \"the row minus the panel minus the peek\", so the peek\n   * is the only part of the preview that survives the clip.\n   */\n  --showcase-media-width: calc(\n    100% - var(--showcase-panel-width, 42%) - var(--showcase-preview-peek, 8%)\n  );\n\n  .showcase__media {\n    flex: 0 0 var(--showcase-media-width);\n    min-width: 0;\n    // The strip is slideCount × this region wide. embla.min.css clips at\n    // `.embla`, which here is the whole slider — so without a clip of its own\n    // the media strip paints straight over the panel beside it.\n    overflow: hidden;\n  }\n\n  // Three selectors deep to outrank embla.min.css's own\n  // `.embla__slide:not(...)` sizing and its breakpoint variants.\n  .showcase__media .embla__container .embla__slide {\n    flex: 0 0 100%;\n    min-width: 0;\n    padding-left: 0;\n    margin-right: 0;\n    box-sizing: border-box;\n  }\n\n  /*\n   * Media height is the media's, and the preview mirrors it so the two strips\n   * stay the same shape. The panel is sized by its own layout: only the\n   * editorial column is meant to run the full height of the photo beside it —\n   * forcing it on an overlay card would push the card past the photo it floats\n   * on, and on a caption bar it would leave a screen of empty colour.\n   */\n  .showcase__media-item,\n  .showcase__preview .showcase__track-item {\n    min-height: var(--showcase-media-height, 540px);\n  }\n\n  &.is-showcase-editorial .showcase__panel .showcase__track-item {\n    min-height: var(--showcase-media-height, 540px);\n  }\n\n  /*\n   * The panel is the fixed frame: it holds its box for the whole transition\n   * while its track slides through it. Everything that must stay still — the\n   * arrows, the counter — lives in here but outside the track.\n   */\n  .showcase__panel {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    flex: 0 0 var(--showcase-panel-width, 42%);\n    min-width: 0;\n    overflow: hidden;\n    transition: background-color 0.3s;\n  }\n\n  .showcase__panel-viewport {\n    overflow: hidden;\n  }\n\n  /*\n   * Panel padding belongs to the layout, not to the authored content. Each\n   * composition needs a different inset — an overlay card is tighter than a\n   * full-height column — and asking every slide to carry its own padding meant\n   * a freshly inserted block came out flush to the panel edges, and three\n   * slides that could disagree with each other.\n   */\n  .showcase__track-item {\n    box-sizing: border-box;\n  }\n\n  .showcase__panel .showcase__track-item {\n    padding: var(--showcase-panel-padding, 64px 48px);\n  }\n\n  .showcase__track {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  .showcase__track > .showcase__track-item {\n    flex: 0 0 100%;\n    min-width: 0;\n  }\n\n  /*\n   * Starts past the panel, so only its leading edge is visible. Same width as\n   * the media region, so one step moves it exactly as far — that lockstep is\n   * what makes the peeked photo become the next hero shot.\n   */\n  .showcase__preview {\n    flex: 0 0 var(--showcase-media-width);\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  /*\n   * Layout, spacing and the arrow un-pinning come from `.embla__controls` in\n   * the shared stylesheet; what is left here is where the row sits inside the\n   * panel. Out of the track's flow entirely — the chrome is the one thing in\n   * the panel that must not move.\n   */\n  .showcase__chrome {\n    position: relative;\n    z-index: 1;\n    justify-content: flex-start;\n    padding: 0 var(--showcase-chrome-inset, 48px) var(--showcase-chrome-inset, 48px);\n  }\n\n  .embla__dots {\n    --embla-pagination-display: flex;\n  }\n\n  /*\n   * Panel side flips paint order only. DOM order stays media-then-panel so the\n   * reading and tab order follow the content, not the composition — and the\n   * preview stays last either way, because a sliver clipped at the left edge\n   * would need negative margins to sit outside the row rather than push it.\n   */\n  &[data-panel-side='left'] {\n    .showcase__panel {\n      order: 1;\n    }\n\n    .showcase__media {\n      order: 2;\n    }\n\n    .showcase__preview {\n      order: 3;\n    }\n  }\n\n  @include motion.slider-motion-primitives;\n\n  /*\n   * ── Overlay ──────────────────────────────────────────────────────────────\n   * Full-bleed media with the panel floating over it as an inset card. The\n   * panel is still a fixed frame — it just stops being a column — so nothing\n   * about the follower engine changes: its track items are card-width, so the\n   * text lags the photo by cardWidth / fullWidth.\n   */\n  &.is-showcase-overlay {\n    position: relative;\n    display: block;\n\n    .showcase__media {\n      flex: none;\n      width: 100%;\n    }\n\n    .showcase__panel {\n      --showcase-panel-padding: 40px;\n      --showcase-chrome-inset: 40px;\n\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      inset-inline-end: 5%;\n      width: min(var(--showcase-panel-width, 42%), 460px);\n      // The card sits over a photo, so it needs a surface of its own even when\n      // no slide sets a colour.\n      background-color: var(--showcase-panel-fallback, #fff);\n      border-radius: 8px;\n      box-shadow: 0 18px 40px rgb(0 0 0 / 18%);\n    }\n\n    &[data-panel-side='left'] .showcase__panel {\n      inset-inline-end: auto;\n      inset-inline-start: 5%;\n    }\n  }\n\n  /*\n   * ── Stacked ──────────────────────────────────────────────────────────────\n   * Media above, panel as a full-width bar below. Its track items are the full\n   * width, so panel and media travel the same distance — no lag, which is the\n   * honest result when the two regions are the same size rather than a bug.\n   */\n  &.is-showcase-stacked {\n    display: block;\n\n    .showcase__media,\n    .showcase__panel {\n      flex: none;\n      width: 100%;\n    }\n\n    .showcase__panel {\n      --showcase-panel-padding: 40px 48px;\n    }\n  }\n\n  /*\n   * Stacked below the panel breakpoint: the preview only makes sense beside a\n   * panel, and two side-by-side regions on a phone leave neither readable.\n   */\n  @media screen and (max-width: 781px) {\n    flex-direction: column;\n\n    .showcase__media,\n    .showcase__panel {\n      flex: 0 0 auto;\n      width: 100%;\n    }\n\n    .showcase__preview {\n      display: none;\n    }\n\n    // A card floated over the photo needs room the photo no longer has once\n    // both are the width of a phone; it drops below the media like the others.\n    &.is-showcase-overlay .showcase__panel {\n      position: static;\n      transform: none;\n      width: 100%;\n      border-radius: 0;\n      box-shadow: 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":""}