/* Scoped Swiper core + cards effect; independent of the stories viewer stylesheet. */
.pd-works { width:min(var(--works-max-width),calc(100% - 64px)); margin:30px auto 80px; }
.pd-works__heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.pd-works__heading h2 { margin-top:14px!important; }
.pd-works__heading p { color:var(--mk-muted); font-size:13px; line-height:1.8; }
.pd-works__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--works-min-width)),1fr)); gap:var(--works-gap); }
.pd-works__grid.is-masonry { display:block; position:relative; }
.pd-works__grid.is-masonry>.pd-work { position:absolute; top:0; left:0; }
.pd-work { min-width:0; margin:0; }
.pd-work__body { min-width:0; }
.pd-work__media { position:relative; aspect-ratio:var(--work-ratio,1.33333); isolation:isolate; overflow:visible; }
.pd-work__swiper { position:absolute; inset:0; display:block; margin:0; z-index:1; }
.pd-work__swiper .swiper-wrapper { position:relative; width:100%; height:100%; display:flex; box-sizing:content-box; z-index:1; transition-property:transform; transition-timing-function:ease; }
.pd-work__swiper .swiper-slide { position:relative; flex-shrink:0; width:100%; height:100%; display:block; border-radius:var(--works-radius); overflow:hidden; background:#202226; transition-property:transform; }
.pd-work__swiper:not(.swiper-initialized) .swiper-slide { display:none; }
.pd-work__swiper:not(.swiper-initialized) .pd-work__slide--initial { display:block; }
.pd-work__swiper.swiper-horizontal { touch-action:pan-y; }
.pd-work__swiper.swiper-3d { perspective:1200px; }
.pd-work__swiper.swiper-3d .swiper-wrapper { transform-style:preserve-3d; }
.pd-work__swiper.swiper-3d .swiper-slide { transform-style:preserve-3d; }
.pd-work__swiper.swiper-cards { overflow:visible; }
.pd-work__swiper.swiper-cards .swiper-wrapper { overflow:visible; }
.pd-work__swiper.swiper-cards .swiper-slide { transform-origin:center bottom; backface-visibility:hidden; }
/* Keep the app-compatible spinner classes while drawing the indicator in CSS. */
.pd-works .pd-image-loader { position:relative; display:block; overflow:hidden; isolation:isolate; background:linear-gradient(107deg,#2a2a2a,#1b1b1b); }
.pd-work__swiper .pd-image-loader { width:100%; height:100%; border-radius:inherit; }
.pd-works .pd-image-loader > .spinner { position:absolute; display:inline-block; z-index:2; top:50%; left:50%; box-sizing:border-box; width:20px; height:20px; margin:-10px 0 0 -10px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; font-size:0; animation:pd-image-loader-spin 1s linear infinite; transition:opacity .15s ease; }
.pd-work:not(.is-near) .pd-image-loader > .spinner { animation-play-state:paused; }
@keyframes pd-image-loader-spin { to { transform:rotate(360deg); } }
.pd-works .pd-image-loader__image { display:block; width:100%; height:100%; opacity:0; transition:opacity .2s ease; }
.pd-works .pd-image-loader.is-loaded > .spinner,
.pd-works .pd-image-loader.is-error > .spinner { opacity:0; visibility:hidden; animation:none; }
.pd-works .pd-image-loader.is-loaded .pd-image-loader__image { opacity:1; }
.pd-work__swiper .pd-image-loader__image { object-fit:contain; }
.pd-work__tag { position:absolute; top:12px; left:12px; padding:6px 10px; border-radius:20px; background:#101216b3; color:#fff; font-size:10px; line-height:1.4; pointer-events:none; }
.pd-work__wheel { position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 3;
    width: min(var(--works-wheel-size), 30%);
    aspect-ratio: 1;
    padding: 5px;
    overflow: hidden;
    pointer-events: none;
    filter: drop-shadow(2px 4px 6px black); }
.pd-work__wheel img { display:block; width:100%; height:100%; object-fit:cover; border-radius:11px; }
.pd-work__controls { position:absolute; left:12px; bottom:14px; z-index:3; display:flex; gap:3px; padding:3px; border-radius:22px; background:#101216c9; }
.pd-work__controls button { border:0; border-radius:19px; background:transparent; color:#d6dae2; padding:7px 12px; min-height:32px; font-size:11px; line-height:1.3; }
.pd-work__controls button[aria-pressed=true] { color:#16181b; background:#fff; }
.pd-work__controls button:disabled { cursor:wait; opacity:.65; }
.mk-page .pd-work__title { padding:14px 7px 0; font-size:17px; font-weight:550; line-height:1.4; letter-spacing:-.015em; overflow-wrap:anywhere; }
.pd-works__status { min-height:24px; margin-top:24px!important; text-align:center; font-size:12px; color:var(--mk-muted); }
.pd-works__empty { padding:32px 0; text-align:center; }
.pd-works__empty p { margin:15px 0!important; color:var(--mk-muted); }
.pd-works__more { display:flex; justify-content:center; margin-top:10px; }
.pd-works__more button { padding:12px 24px; border:1px solid #ffffff29; border-radius:30px; background:#202126; color:#e8eaee; }
.pd-works__more button:disabled { opacity:.6; cursor:wait; }
.pd-works__sentinel { height:1px; }
/* Cabinet history uses the same gallery inside the existing page outlet. */
.pd-app .pd-works { width:100%; margin:0; }
.pd-app .pd-work__swiper .pd-gen-thumb { aspect-ratio:auto; border-radius:inherit; }
.pd-app .pd-work__title { flex:1; min-width:0; margin:0; padding:0; font-size:17px; font-weight:550; line-height:1.4; letter-spacing:-.015em; }
.pd-app .pd-work__title button { display:block; max-width:100%; padding:0; overflow:hidden; border:0; background:none; color:var(--bs-gray-900); font:inherit; text-align:left; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; }
.pd-app .pd-work__meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 7px 0; }
.pd-app .pd-work__date { flex-shrink:0; color:var(--bs-gray-600); font-size:12px; white-space:nowrap; }
.pd-app .pd-work__status { padding-top:8px; }
.pd-app .pd-work__context { padding-inline:7px; }
.pd-app .pd-work__placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:var(--works-radius); background:var(--bs-gray-100); }
.pd-app .pd-work [data-pd-gen-open] { cursor:pointer; }
.pd-app .pd-work [data-pd-gen-open]:focus-visible,
.pd-app .pd-work__controls button:focus-visible { outline:2px solid var(--bs-primary); outline-offset:4px; }
@media(max-width:760px) {
  .pd-works { width:calc(100% - 36px); margin-block:20px 45px; }
  .pd-works__heading { align-items:start; flex-direction:column; gap:15px; margin-bottom:26px; }
  .mk-page .pd-work__title { font-size:16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-works .pd-image-loader > .spinner { animation-duration:4s; }
  .pd-works .pd-image-loader__image { transition:none; }
}