/* RECRE-553 (реліз 1.1.0.1) — ГАЛЕРЕЯ ФОТО РОІ.

   Модель POIPhoto тримає кілька фото з RECRE-299, але поверхні
   показували лише обкладинку. Тепер фото-зона з 2+ кадрами стає
   мінікаруселлю, а клік по кадру відкриває лайтбокс.

   Вказівка ПВ (2026-09-13): механіка — як у галереї деталізації парку
   (перегортання + lightbox), КОМПОНУВАННЯ — під менші розміри картки
   РОІ. Звідси розподіл:
     • повний екран (.ov-lightbox*) перевикористаний З main.css БЕЗ
       змін — це буквально та сама галерея, що в парку, і другого
       набору стилів повного екрана в проєкті бути не повинно;
     • тут — лише компактний шар каруселі (.poi-gal*) і три дельти
       лайтбокса, яких вимагає ЙОГО новий спосіб життя: вузол
       створюється з JS і не має x-show, тож видимістю керує власний
       клас .is-visible.

   Окремий файл, а не main.css: main.css під паралельним WIP (той
   самий мотив, що в poi-owner-badge.css). Підключається на /map/ і
   /park/{slug}/ — обидві поверхні картки точки. */

/* ==================================================================
   1. Мінікарусель фото-зони
   ================================================================== */

/* Обгортка заповнює наявну фото-зону будь-якої поверхні; сама зона на
   плитці каталогу вже position:relative (.pcat-card__photo), а доку
   Атласу позиціювання бракує — доміряємо його тут, не чіпаючи
   main.css. Формули кадру (aspect-ratio 16/10 плитки, 3/2 дока,
   object-fit:cover для img) лишаються за main.css: вкладений <img>
   і далі відповідає селекторам .pcat-card__photo img /
   .pdm-info__photo img. */
.pdm-info__photo--gal { position: relative; }

.poi-gal {
    position: absolute;
    inset: 0;
}

.poi-gal__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр — цільова кнопка лайтбокса; курсор це й обіцяє */
    cursor: zoom-in;
}

/* Стрілки — зменшене (26px проти 46px) відлуння .ov-lightbox__arrow:
   те саме кремове коло з зеленою шевронною іконкою. У кадрі 16/10
   заввишки ~130px пара 46-піксельних кіл з'їла б третину ширини, тому
   компактний розмір — не косметика, а вимога «під менші розміри
   картки». Всередині кадру (не за його межами, як на десктопному
   лайтбоксі) — виносити нікуди. */
.poi-gal__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(251, 245, 233, 0.9);
    color: var(--green);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px -5px rgba(0, 0, 0, 0.55);
    /* Над кадром, але під пілюлею годин (z-index:5) і × докованого
       стану — вони в інших кутах і не перетинаються */
    z-index: 4;
    opacity: 0.88;
    transition: background .18s, opacity .18s;
}

.poi-gal__arrow:hover { background: #fff; opacity: 1; }

.poi-gal__arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.55);
    opacity: 1;
}

.poi-gal__arrow i,
.poi-gal__arrow svg { width: 14px; height: 14px; }

.poi-gal__arrow--prev { left: 6px; }
.poi-gal__arrow--next { right: 6px; }

/* Лічильник «1/3» — bottom-RIGHT свідомо: bottom-left зайнятий
   пілюлею годин роботи (.pcat-card__hours), top-right — × докованої
   картки (.pcat-card__close). Єдиний вільний кут. */
.poi-gal__count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(36, 52, 38, 0.72);
    color: #FBF5E9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.5;
    pointer-events: none;
}

/* Найвужчі плитки: стрілки притискаються до країв, лічильник дрібніє */
@media (max-width: 680px) {
    .poi-gal__arrow { width: 24px; height: 24px; }
    .poi-gal__arrow i, .poi-gal__arrow svg { width: 13px; height: 13px; }
    .poi-gal__arrow--prev { left: 4px; }
    .poi-gal__arrow--next { right: 4px; }
    .poi-gal__count { right: 6px; bottom: 6px; font-size: 10px; }
}

/* ==================================================================
   2. Дельти лайтбокса РОІ
   ==================================================================
   Вузол .ov-lightbox.poi-lightbox створюється з JS і живе в <body>
   постійно. Галерея парку ховається через x-show (Alpine ставить
   display:none), а тут керує власний клас: без .is-visible вузол не
   бере участі ні в layout, ні в hit-testing — інакше він перехоплював
   би кліки по всій сторінці. .is-open лишається чистим перемикачем
   прозорості (правило .ov-lightbox.is-open з main.css). */
.ov-lightbox.poi-lightbox { display: none; }
.ov-lightbox.poi-lightbox.is-visible { display: flex; }

/* Підпис РОІ коротший за парковий і без смуги мініатюр під ним —
   трохи більше повітря зверху, щоб кадр не «сідав» на текст */
.poi-lightbox .ov-lightbox__caption { margin-top: 14px; }