/* ============================================================
   Карусель скриншотов — переиспользуемый компонент.
   Разметку выводит includes/carousel.php (функция kc_carousel),
   поведение добавляет assets/js/carousel.js.

   Файл самодостаточен: не зависит ни от styles.css, ни от
   instructions.css — карусель можно вставить на любую страницу.

     .kc-carousel            <figure>, корень компонента
       __shell               белая карточка с рамкой и тенью
         __viewport          лента слайдов (нативный скролл + scroll-snap)
           __slide           один слайд: кадр + подпись
             __frame         кадр изображения (--fixed: единая пропорция)
             __slidecap      подпись под снимком (листается вместе с ним)
         __arrow --prev/next стрелки (показывает JS)
         __counter           счётчик «2 / 6» (показывает JS)
       __dots > __dot        точки-переключатели (показывает JS)
       __cap                 общая подпись под каруселью («Рис. 2. …»)
     .kc-carousel--wide      шире колонки текста — как .kc-shot в инструкциях
     .is-enhanced            ставит JS: прячем нативную полосу прокрутки
   ============================================================ */

.kc-carousel { margin:0; }
.kc-carousel [hidden] { display:none !important; }

.kc-carousel__shell { position:relative; background:#fff; border:1px solid #e2e7ee; border-radius:12px; overflow:hidden; box-shadow:0 16px 40px -22px rgba(10,107,110,.4); }

/* лента: без JS остаётся обычный горизонтальный скролл с видимой полосой */
.kc-carousel__viewport { display:flex; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
.kc-carousel.is-enhanced .kc-carousel__viewport { scrollbar-width:none; }
.kc-carousel.is-enhanced .kc-carousel__viewport::-webkit-scrollbar { display:none; }
.kc-carousel__viewport:focus-visible { outline:3px solid #7ee0cf; outline-offset:-3px; }

.kc-carousel__slide { flex:0 0 100%; min-width:100%; scroll-snap-align:start; display:flex; flex-direction:column; }

/* кадр: при известных размерах картинок PHP задаёт padding-top (единая
   высота всех слайдов), изображение вписывается целиком (contain) */
.kc-carousel__frame { position:relative; background:#fff; }
.kc-carousel__frame img { display:block; width:100%; height:auto; }
.kc-carousel__frame--fixed img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; }

.kc-carousel__slidecap { margin-top:auto; padding:10px 16px 12px; border-top:1px solid #eef1f4; background:#fff; font-size:13.5px; line-height:1.5; color:#647084; text-align:center; }

/* --- стрелки --- */
.kc-carousel__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%; border:1px solid #d3e2e0; background:rgba(255,255,255,.94); color:#0a6b6e; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(10,107,110,.18); transition:background .15s, color .15s, border-color .15s, opacity .15s; }
.kc-carousel__arrow:hover { background:#0a6b6e; border-color:#0a6b6e; color:#fff; }
.kc-carousel__arrow:disabled { opacity:.35; cursor:default; pointer-events:none; }
.kc-carousel__arrow--prev { left:12px; }
.kc-carousel__arrow--next { right:12px; }
.kc-carousel__arrow--prev svg { transform:scaleX(-1); }

/* --- счётчик «2 / 6» --- */
.kc-carousel__counter { position:absolute; top:10px; right:12px; z-index:2; background:rgba(26,34,48,.55); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.02em; padding:4px 10px; border-radius:99px; pointer-events:none; }

/* --- точки --- */
.kc-carousel__dots { display:flex; justify-content:center; align-items:center; gap:3px; padding-top:12px; }
/* прозрачная рамка расширяет зону нажатия, видимая точка — 9px */
.kc-carousel__dot { box-sizing:content-box; width:9px; height:9px; padding:0; border:6px solid transparent; background-clip:padding-box; border-radius:99px; background-color:#c2d4d2; cursor:pointer; transition:background-color .15s, width .15s; }
.kc-carousel__dot:hover { background-color:#8fb5b3; }
.kc-carousel__dot.is-active { background-color:#0a6b6e; width:22px; }

/* --- общая подпись (как .kc-figcap в инструкциях) --- */
.kc-carousel__cap { font-size:13px; color:#647084; margin-top:10px; text-align:left; }
.kc-carousel__dots + .kc-carousel__cap { margin-top:6px; }

/* --- широкий вариант: повторяет поведение .kc-shot из инструкций --- */
@media (min-width:960px) {
  .kc-carousel--wide { width:min(1058px, calc(100vw - 80px)); position:relative; left:50%; transform:translateX(-50%); }
}
/* на телефоне --wide не выходит за колонку текста: поля как у текста и таблиц */
@media (max-width:640px) {
  .kc-carousel__arrow { width:36px; height:36px; }
  .kc-carousel__arrow--prev { left:8px; }
  .kc-carousel__arrow--next { right:8px; }
  .kc-carousel__slidecap { padding-left:16px; padding-right:16px; }
}