{"version":3,"file":"blocks/MediaGallery/style-index.css","mappings":";;;AASA;EACE;EACA;EACA;EACA;AARF;AAUE;EACE;EACA;EACA;AARJ;AAUI;EALF;IAMI;EAPJ;AACF;AASI;EATF;IAUI;EANJ;AACF;AAaE;EACE;EACA;EACA;EACA;EACA;AAXJ;AAaI;EACE;AAXN;AAcI;EACE;EACA;AAZN;AAaM;EAHF;IAG8B;EAThC;AACF;AASM;EAJF;IAI+B;EALjC;AACF;AAYI;EACE;AAVN;AAaI;EACE;AAXN;AAcI;EACE;AAZN;AAcM;EACE;EACA;AAZR;AAgBI;EACE;EACA;EACA;EACA;AAdN;AAiBI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAfN;AAkBM;EACE;AAhBR;AAqBE;EACE;AAnBJ;;AAwBA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtBF;AAyBE;EACE;AAvBJ;AA+BE;EACE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/BJ,C","sources":["webpack://brandy-blocks/./src/blocks/MediaGallery/style.scss"],"sourcesContent":["// Media Gallery frontend layout + PhotoSwipe lightbox theming.\n// Editor-preview SCSS lives alongside (Phase 02); this file holds the\n// responsive grid + the --pswp-* overrides used in the lightbox.\n//\n// PhotoSwipe base styles + dynamic-caption plugin styles are imported from\n// view.js so they bundle into the lightbox JS chunks (lazy-loaded on first\n// click). Importing them here as SCSS only forwards as runtime CSS @import,\n// which doesn't actually bundle the rules.\n\n.brandy-media-gallery {\n  --brandy-mgal-cols-desktop: 3;\n  --brandy-mgal-cols-tablet: 2;\n  --brandy-mgal-cols-mobile: 1;\n  --brandy-mgal-gap: 16px;\n\n  &__items {\n    display: grid;\n    gap: var(--brandy-mgal-gap);\n    grid-template-columns: repeat(var(--brandy-mgal-cols-mobile), minmax(0, 1fr));\n\n    @media (min-width: 768px) {\n      grid-template-columns: repeat(var(--brandy-mgal-cols-tablet), minmax(0, 1fr));\n    }\n\n    @media (min-width: 1024px) {\n      grid-template-columns: repeat(var(--brandy-mgal-cols-desktop), minmax(0, 1fr));\n    }\n  }\n\n  // Slider mode: drop grid layout. Embla CSS (brandy-embla-style) provides\n  // the flex container + viewport overflow on .embla__container/.embla__viewport.\n  // The flex-basis math here gives each slide a column-fraction width.\n  // overflow-x + scrollbar-hide remain as graceful fallback if Embla JS fails.\n  &.is-display-slider .brandy-media-gallery__items {\n    display: flex;\n    grid-template-columns: none;\n    overflow-x: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n\n    > * {\n      flex: 0 0 calc(100% / var(--brandy-mgal-cols-mobile, 1));\n      min-width: 0;\n      @media (min-width: 768px) { flex-basis: calc(100% / var(--brandy-mgal-cols-tablet, 2)); }\n      @media (min-width: 1024px) { flex-basis: calc(100% / var(--brandy-mgal-cols-desktop, 3)); }\n    }\n  }\n\n  // Slider chrome: Brandy theme tokens for prev/next buttons + dot pagination.\n  // Brandy ships base .embla__button/.embla__dot styles via brandy-embla-style;\n  // these are gallery-specific positioning and disabled-state tweaks.\n  &.is-display-slider {\n    .embla {\n      position: relative;\n    }\n\n    .embla__buttons {\n      pointer-events: none;\n    }\n\n    .embla__button {\n      pointer-events: auto;\n\n      &[disabled] {\n        opacity: 0.4;\n        cursor: not-allowed;\n      }\n    }\n\n    .embla__dots {\n      display: flex;\n      gap: 8px;\n      justify-content: center;\n      margin-top: 12px;\n    }\n\n    .embla__dot {\n      width: 10px;\n      height: 10px;\n      padding: 0;\n      border: 0;\n      border-radius: 50%;\n      background: currentColor;\n      opacity: 0.3;\n      cursor: pointer;\n      transition: opacity 0.15s ease;\n\n      // Match Carousel + brandy-embla-style convention.\n      &--selected {\n        opacity: 1;\n      }\n    }\n  }\n\n  &__appender {\n    margin-top: 12px;\n  }\n}\n\n// PhotoSwipe theming — scoped via custom properties so we don't fight core CSS.\n.pswp {\n  // Lift the lightbox above any theme overlay (admin bar, sticky header, etc.).\n  --pswp-root-z-index: 999999;\n  --pswp-bg: rgba(15, 23, 32, 0.94);\n  --pswp-icon-color: #fff;\n  --pswp-icon-color-secondary: rgba(255, 255, 255, 0.7);\n  --pswp-icon-stroke-width: 2px;\n  --pswp-icon-stroke-color: rgba(0, 0, 0, 0.4);\n  --pswp-button-width: 44px;\n  --pswp-button-hover-bg: rgba(255, 255, 255, 0.12);\n\n  // Hide counter when data-lightbox-counter=\"0\" (toggle handled in view.js).\n  &.pswp--no-counter .pswp__counter {\n    display: none;\n  }\n\n  // photoswipe-dynamic-caption-plugin emits .pswp__dynamic-caption.\n  // Override the plugin's inline positioning (it pins caption width to the\n  // image width, which makes narrow images get a left-aligned caption).\n  // !important is required because the plugin sets `left`, `top`, `width`\n  // via inline style; CSS rules can only override inline with !important.\n  &__dynamic-caption {\n    position: fixed !important;\n    left: 50% !important;\n    bottom: 16px !important;\n    top: auto !important;\n    // !important on transform too — the plugin sets inline transform for\n    // animation, which would otherwise win over our centering rule.\n    transform: translateX(-50%) !important;\n    width: auto !important;\n    max-width: min(90vw, 720px);\n    padding: 8px 16px;\n    color: #fff;\n    font-size: 14px;\n    line-height: 1.4;\n    text-align: center;\n    background: transparent;\n    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);\n    pointer-events: none;\n  }\n}\n"],"names":[],"sourceRoot":""}