/* ===== PISKEI DIN — case results carousel ===== */
.psk { --h: 740; background: transparent; }
.psk__title {
  position: absolute; top: 101px; left: 50%; transform: translateX(-50%);
  width: 700px; text-align: center; font-size: 42px; line-height: 48px; font-weight: 400; color: #000;
  transform: translate(-50%, -50%);
}
.psak { position: relative; width: 303px; margin: 0; }
.psak__card { position: relative; width: 303px; height: 413px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.07); }
.psak__doc { position: absolute; top: 12px; left: 12px; width: 280px; height: 387px; object-fit: contain; }
.psak__badge {
  position: absolute; top: 18px; right: 13px; background: #b58d41; color: #fff;
  font-size: 20px; line-height: 1; border-radius: 4px; padding: 7px 16px; box-shadow: 0 0 4px rgba(0,0,0,.25);
}
.psak__zoom {
  position: absolute; left: 14px; bottom: 14px; width: 48px; height: 48px; background: #fff; border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center;
}
.psak__zoom img { width: 30px; height: 30px; }
.psak__cap { margin-top: 22px; text-align: center; font-size: 21px; line-height: 26px; color: #000; }

.psk__arrow { position: absolute; top: 343px; width: 62px; height: 62px; background: none; border: 0; padding: 0; }
.psk__arrow img { width: 100%; height: 100%; }
.psk__arrow--right { left: 1634px; }
.psk__arrow--left { left: 223px; transform: scaleX(-1); }
.psk__track { position: absolute; top: 166px; left: 314px; width: 1302px; }
/* Splide-core hides .splide until its JS adds .is-initialized — we only mount on mobile, so force
   it visible (desktop never initialises it). Also a safety net if the script fails on mobile. */
.psk .splide { visibility: visible !important; }
/* desktop: Splide is NOT mounted → force the original static 4-up grid on its list markup */
@media (min-width: 1025px) {
  .psk .splide__track { overflow: visible !important; }
  .psk .splide__list {
    display: grid !important; grid-template-columns: repeat(4, 303px); gap: 0 30px;
    direction: rtl; transform: none !important;
  }
  .psk .splide__slide { width: auto !important; }
}

@media (max-width: 1024px) {
  .psk { --h: auto; height: auto; }
  .psk .stage {
    position: relative; width: 100%; height: auto; transform: none;
    padding: 40px 0; display: flex; flex-direction: column; align-items: center;
  }
  .psk__title {
    position: relative; top: 0; left: 0; transform: none;
    width: auto; font-size: 26px; padding: 0 16px; margin-bottom: 4px; order: 0;
  }
  /* Splide drives the layout on mobile (portrait cards + loop). Reset the desktop absolute box. */
  .psk__track { position: relative; top: 0; left: 0; width: 100%; order: 2; margin-top: 22px; }
  .psk .splide { overflow: hidden; }
  .psk .splide__track { overflow: hidden; }
  .psk .splide__list { display: flex !important; grid-template-columns: none; gap: 14px; }
  /* portrait card — size controlled HERE (not by Splide) so it is never giant if the script fails */
  .psak {
    position: relative !important; top: 0 !important; left: 0 !important;
    flex: 0 0 auto; width: 190px; max-width: 60vw; margin: 0;
  }
  .psak__card { width: 100%; height: auto; aspect-ratio: 303 / 413; }
  /* explicit box (not auto) + contain → the WHOLE document is shown, never cropped */
  .psak__doc { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
  .psak__cap { font-size: 14px; line-height: 1.35; margin-top: 12px; }
  /* arrows centred on the card (a little lower), above the cards */
  .psk__arrow {
    display: block; width: 46px; height: 46px; padding: 0;
    background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(7,28,55,.20);
    z-index: 30; top: 47%; transform: translateY(-50%);
  }
  .psk__arrow--right { right: 6px; left: auto; }
  .psk__arrow--left { left: 6px; right: auto; transform: translateY(-50%) scaleX(-1); }
}