/* ============================================================
   BYPLAN — cases-slider.css (v2.6)
   Fix: стрелки переключения кейсов должны стоять на КРАЯХ
        большого общего бокса (cases-inline__dialog),
        а не по краям карточки плана.

   Важно:
   - Работает с cases.js (v1.3.3-inline-global-arrows)
   - Этот файл — ДОПОЛНЕНИЕ к cases.css / story.css
   ============================================================ */

/* Dialog is positioning context for the global switch */
.cases-inline__dialog{
  position: relative;
  /* must match cases.css dialog padding (currently 22px) */
  --cases-dialog-pad-x: 22px;
}

/* Keep plan image from becoming too tall.
   Fixed frame height + object-fit: contain.
   Clicking opens the large image in a lightbox. */
.cases-inline__dialog .story-plan__frame{
  position: relative;
  height: clamp(260px, 52vh, 560px);
  touch-action: pan-y; /* allow vertical scroll, keep horizontal swipe usable */
}

.cases-inline__dialog .story-plan__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

/* === GLOBAL CASE SWITCH (prev/next) ===
   This overlay spans the whole dialog width (big rounded box).
   JS sets: top + height (equal to plan frame) + --counter-left (center of plan). */
.cases-inline__dialog .cases-switch{
  position: absolute;
  /* stretch to OUTER edges of the dialog, compensating inner padding */
  left: calc(-1 * var(--cases-dialog-pad-x, 22px));
  right: calc(-1 * var(--cases-dialog-pad-x, 22px));

  /* top + height are set inline in JS */
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0; /* no inset — real edges */
  pointer-events: none; /* allow swipe/scroll; buttons enable events */
  z-index: 50;
}

/* Buttons */
.cases-inline__dialog .cases-switch__btn{
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);

  /* default: no vertical lift, but we keep a horizontal offset per button */
  transform: translate(var(--dx, 0), 0);
}

/* Sit half-outside the big dialog border (center on the edge) */
.cases-inline__dialog #casesPrevCase{ --dx: -50%; }
.cases-inline__dialog #casesNextCase{ --dx:  50%; }

.cases-inline__dialog .cases-switch__btn:hover{
  transform: translate(var(--dx, 0), -1px);
  background: rgba(255,255,255,.12);
}

.cases-inline__dialog .cases-switch__btn:active{
  transform: translate(var(--dx, 0), 0);
}

/* Counter — small pill at bottom center of the PLAN frame (not the whole dialog) */
.cases-inline__dialog .cases-switch__counter{
  position: absolute;
  left: var(--counter-left, 50%);
  bottom: clamp(8px, 1.2vw, 14px);
  transform: translateX(-50%);
  pointer-events: none;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 720px){
  .cases-inline__dialog .story-plan__frame{
    height: min(46vh, 300px);
    height: min(46svh, 300px);
    max-height: min(46svh, 300px);
    aspect-ratio: auto;
  }

  .cases-inline__dialog .cases-switch{
    position: absolute;
    left: 8px;
    right: 8px;
    padding: 0;
    pointer-events: none;
  }

  .cases-inline__dialog .cases-switch__btn{
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .cases-inline__dialog #casesPrevCase{ --dx: 0; }
  .cases-inline__dialog #casesNextCase{ --dx: 0; }

  .cases-inline__dialog .cases-switch__counter{
    position: absolute;
    left: 50% !important;
    bottom: 6px;
    transform: translateX(-50%);
    font-size: 0.85rem;
  }

  .cases-inline__dialog #casesPrevCase{ --dx: 0; }
  .cases-inline__dialog #casesNextCase{ --dx: 0; }
}

/* Extra-tight on very small phones */
@media (max-width: 520px){
  .cases-inline__dialog{
    --cases-dialog-pad-x: 16px; /* smaller inner padding */
  }

  .cases-inline__dialog .story-plan__frame{
    height: min(42vh, 260px);
    height: min(42svh, 260px);
    max-height: min(42svh, 260px);
  }

  .cases-inline__dialog .cases-switch__btn{
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .cases-inline__dialog .cases-switch__counter{
    padding: 5px 9px;
    font-size: 0.82rem;
  }
}