/* Photo slideshow overlay — exact port of the legacy app-gallery COMPONENT's
   PhotoSwipe skin + custom slider styles, captured from the live
   ideasfor.events DOM (runtime-injected, absent from every shipped bundle,
   same as concept-gallery.css).

   Legacy pairs this CSS with its own Angular slide logic, NOT stock
   PhotoSwipe JS: a flex .slider.pswp__container stepped by
   translateX(-index*100%), each .slider-panel vertically centering its image
   with an inline-block .slider-helper. js/concept-gallery.js reimplements
   that logic.

   Icon sprite: /images/ico/gallery-icons.png|svg — byte-for-byte copies of
   the legacy assets (264x88, same background-position offsets). */

.pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    backface-visibility: hidden;
    outline: 0;
}

.pswp * {
    box-sizing: border-box;
}

.pswp img {
    max-width: none;
}

.pswp--animate_opacity {
    opacity: 0.001;
    will-change: opacity;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
    display: block;
}

.pswp--zoom-allowed .pswp__img { cursor: zoom-in; }
.pswp--zoomed-in .pswp__img { cursor: grab; }
.pswp--dragging .pswp__img { cursor: grabbing; }

.pswp--open .pswp__bg {
    opacity: 1;
}

.pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
    touch-action: none;
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.pswp__container,
.pswp__img {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    transform-origin: left top;
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    backface-visibility: hidden;
    will-change: opacity;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
    transition: none;
}

.pswp__item {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pswp__img {
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
}

.pswp__img--placeholder { backface-visibility: hidden; }
.pswp__img--placeholder--blank { background: #222; }

.pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: #ccc;
}

.pswp__error-msg a {
    color: #ccc;
    text-decoration: underline;
}

.pswp__button {
    position: relative;
    cursor: pointer;
    overflow: visible;
    appearance: none;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: 0.75;
    transition: opacity 0.2s;
    box-shadow: none;
}

.pswp__button:focus,
.pswp__button:hover {
    opacity: 1;
}

.pswp__button:active {
    outline: 0;
    opacity: 0.9;
}

.pswp__ui--over-close .pswp__button--close {
    opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    background: url("/images/ico/gallery-icons.png") 0 0 / 264px 88px no-repeat;
    width: 44px;
    height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left::before,
    .pswp--svg .pswp__button--arrow--right::before {
        background-image: url("/images/ico/gallery-icons.svg");
    }

    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: 0 0;
    }
}

.pswp__button--close { background-position: 0 -44px; }
.pswp__button--share { background-position: -44px -44px; }

.pswp__button--fs { display: none; }
.pswp--supports-fs .pswp__button--fs { display: block; }
.pswp--fs .pswp__button--fs { background-position: -44px 0; }

.pswp__button--zoom { display: none; background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom { display: block; }
.pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; }

/* Stock PhotoSwipe hides the arrows on touch devices, on the assumption that
   swipe is the navigation. The rule is kept here for fidelity but immediately
   overridden below — see the note. */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden;
}

/* DELIBERATE DIVERGENCE from the legacy skin: keep the arrows on touch.
   Hiding them is only safe if swipe exists to replace them. It does now
   (js/concept-gallery.js implements it), but on a phone the arrows are also
   the only DISCOVERABLE control — with them hidden and no gesture hint, the
   slideshow read as broken. Both affordances are therefore active on touch:
   swipe for anyone who tries it, buttons for everyone else.
   Placed after the rule it overrides; same specificity, later wins. */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: visible;
}


.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background: 0 0;
    top: 0;
    width: 70px;
    height: 100%;
    position: absolute;
}

.pswp__button--arrow--left { left: 0; }
.pswp__button--arrow--right { right: 0; }

.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    content: "";
    top: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    height: 30px;
    width: 32px;
    position: absolute;
}

.pswp__button--arrow--left::before {
    left: 6px;
    background-position: -138px -44px;
}

.pswp__button--arrow--right::before {
    right: 6px;
    background-position: -94px -44px;
}

.pswp__counter,
.pswp__share-modal {
    user-select: none;
}

.pswp__share-modal {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px;
    position: absolute;
    z-index: 1600;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    backface-visibility: hidden;
    will-change: opacity;
}

.pswp__share-modal--hidden { display: none; }

.pswp__share-tooltip {
    z-index: 1620;
    position: absolute;
    background: #fff;
    top: 56px;
    border-radius: 2px;
    display: block;
    width: auto;
    right: 44px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transform: translateY(6px);
    transition: transform 0.25s;
    backface-visibility: hidden;
    will-change: transform;
}

.pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
}

.pswp__share-tooltip a:hover {
    text-decoration: none;
    color: #000;
}

.pswp__share-tooltip a:first-child { border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; }

.pswp__share-modal--fade-in { opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip { transform: translateY(0); }
.pswp--touch .pswp__share-tooltip a { padding: 16px 12px; }

a.pswp__share--facebook::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -12px;
    right: 15px;
    border: 6px solid transparent;
    border-bottom-color: #fff;
    pointer-events: none;
}

a.pswp__share--facebook:hover { background: #3e5c9a; color: #fff; }
a.pswp__share--facebook:hover::before { border-bottom-color: #3e5c9a; }
a.pswp__share--twitter:hover { background: #55acee; color: #fff; }
a.pswp__share--pinterest:hover { background: #ccc; color: #ce272d; }
a.pswp__share--download:hover { background: #ddd; }

.pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    font-size: 13px;
    line-height: 44px;
    color: #fff;
    opacity: 0.75;
    padding: 0 10px;
}

.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 44px;
}

.pswp__caption small {
    font-size: 11px;
    color: #bbb;
}

.pswp__caption__center {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 13px;
    padding: 10px;
    line-height: 20px;
    color: #ccc;
}

.pswp__caption--empty { display: none; }
.pswp__caption--fake { visibility: hidden; }

.pswp__preloader {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -22px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    will-change: opacity;
    direction: ltr;
}

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px;
}

.pswp--css_animation .pswp__preloader--active,
.pswp__preloader--active {
    opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    animation: clockwise 0.5s linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    animation: donut-rotate 1s cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
    background: 0 0;
    opacity: 0.75;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 15px;
    top: 15px;
    margin: 0;
}

.pswp--css_animation .pswp__preloader__cut {
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background: 0 0;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        float: right;
    }
}

/* Stock PhotoSwipe skin keyframes — the captured rules animate with these
   names but @keyframes carry no selectorText, so they are restored from the
   library source the legacy component compiled in. */
@keyframes clockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes donut-rotate {
    0% { transform: rotate(0); }
    50% { transform: rotate(-140deg); }
    100% { transform: rotate(0); }
}

.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: 1550;
}

.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    width: 100%;
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right,
.pswp__caption,
.pswp__top-bar {
    backface-visibility: hidden;
    will-change: opacity;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible;
}

.pswp__caption,
.pswp__top-bar {
    background-color: rgba(0, 0, 0, 0.5);
}

.pswp__ui--fit .pswp__caption,
.pswp__ui--fit .pswp__top-bar {
    background-color: rgba(0, 0, 0, 0.3);
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right,
.pswp__ui--idle .pswp__top-bar {
    opacity: 0;
}

.pswp--open .pswp__ui--idle .pswp__button--arrow--left,
.pswp--open .pswp__ui--idle .pswp__button--arrow--right,
.pswp--open .pswp__ui--idle .pswp__top-bar {
    opacity: 1;
}

.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__top-bar {
    opacity: 0.001;
}

.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
    display: none;
}

.pswp__element--disabled { display: none !important; }
.pswp--minimal--dark .pswp__top-bar { background: 0 0; }

.pswp__button--arrow--left:disabled::before,
.pswp__button--arrow--right:disabled::before,
.pswp__button:disabled {
    opacity: 0.2;
}

/* Legacy's custom slider (their Angular slide logic, reused here as-is). */
.slider {
    display: flex;
}

.slider.is-animating {
    transition: transform 0.4s cubic-bezier(0.5, 0, 0.5, 1);
}

.slider-panel {
    width: 100%;
    white-space: nowrap;
    margin: 1em 0;
    text-align: center;
    padding-top: 0;
}

.slider-panel .slider-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.slider-panel img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    margin-left: -5px;
}

.slider-panel .video-wrapper {
    width: auto;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
}

.slider-panel .video-wrapper > .video-wrap {
    display: table;
    position: relative;
    padding: 0 70px;
}

.slider-panel .video-wrapper > .video-wrap > video {
    width: 100%;
}

.slider-panel .video-wrapper > .video-wrap > .btn-play {
    width: 50px;
    height: 50px;
    position: absolute;
    inset: 0;
    margin: auto;
}

.has-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* No extra rules: the open-state capture showed legacy's own component sets
   position:fixed INLINE on the .pswp root — js/concept-gallery.js does the
   same, so even the inline style attribute matches. */

/* Phone sizing for the arrows — MUST stay at the end of this file.
   The base geometry (`.pswp__button--arrow--left/right { width: 70px;
   height: 100%; top: 0 }`) is declared above at the same specificity, so an
   override placed earlier silently loses the cascade; only source order
   separates them.

   70px per side is 37% of a 375px viewport and swallows most of the swipe
   area. Narrower, and inset clear of the top bar and caption, so a swipe
   starting mid-image is not intercepted and neither control blocks the
   other. */
@media (max-width: 599px) {
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        width: 50px;
        height: calc(100% - 88px);
        top: 44px;
    }
}