/* =====================================================================
   Атлас парку — доповнення 1.1.0

   Окремий файл, а не нова секція main.css: той самий патерн, що
   map-overview.css (/map/) і catalog-regions.css (/parks/) — стилі,
   потрібні рівно двом сторінкам з Атласом, не їдуть у кожен документ
   сайту. Підключається у templates/map.html і templates/park_detail.html
   (block extra_head), одразу після main.css — тож усі змінні палітри
   (--green, --border, --muted-3, --poi-type-color…) і базові правила
   .pdm-info / .rm-poi-popup уже визначені вище.

   Вміст:
     • RECRE-383 — розкладка складу кластера POI за типами (.rm-poi-types);
     • RECRE-385 — тумблер «Карта ⇄ Супутник» (.pdm-basemap);
     • RECRE-433 — список-вибір конкретної точки в кластері POI (.poi-pick*,
       .pdm-info__back, .poi-sheet__nav).
   ===================================================================== */

/* ---------------------------------------------------------------------
   RECRE-383 — склад кластера POI за типами

   Рендериться poiClusterTypesHtml (alpine-data.js) в ОБОХ поверхнях
   показу кластера: тіло дока/bottom-sheet (.pdm-info) і floating-попап
   (.rm-poi-popup, ≤900px). Розмітка одна, тож і стиль один — контент
   двох представлень не може розійтись.

   Рядок: [іконка типу] [підпис ..........] [кількість]
   Кольорову іконку фарбує --poi-type-color, який кожен <li> виставляє
   собі сам (inline style з POI_META) — так рядок «Кафе» лишається
   терракотовим усередині списку, де загальний --poi-type-color обгортки
   нейтрально-зелений (POI_MIXED_GROUP).
   --------------------------------------------------------------------- */
.rm-poi-types {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rm-poi-types__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 9px;
    background: rgba(126, 148, 102, 0.08);
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
}
.rm-poi-types__row i,
.rm-poi-types__row svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--poi-type-color, var(--poi-other));
}
.rm-poi-types__label {
    flex: 1 1 auto;
    min-width: 0;
    /* довгі підписи категорій не мають розсувати док */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rm-poi-types__count {
    flex: none;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--green);
    font-variant-numeric: tabular-nums;   /* колонка чисел не «стрибає» */
}
/* Хвіст «ще N категорій» — не рядок даних, тому без плашки й іконки */
.rm-poi-types__rest {
    padding: 2px 8px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted-3);
}

/* Попап над картою вужчий за док — той самий блок трохи щільніший */
.rm-poi-popup .rm-poi-types { margin-top: 8px; gap: 2px; }
.rm-poi-popup .rm-poi-types__row { padding: 3px 7px; font-size: 11.5px; }

/* ---------------------------------------------------------------------
   RECRE-385 — перемикач «Карта ⇄ Супутник» в Атласі

   Кнопку створює miniAddBasemapToggle (park-mini-map.js) і кладе в
   .pdm-map як сусіда леафлет-контейнера — той самий прийом, що
   .pdm-zoom / .pdm-fullmap, тож клік по ній не долітає до карти.

   Позиція — правий верхній кут зі зсувом униз: топ-ліво зайняте
   кнопками масштабу (.pdm-zoom), топ-право — контролом «Моє
   місцеположення» (.rm-locate, RECRE-320), низ-право — пілюлею
   «Відкрити на карті» (.pdm-fullmap, лише /park/{slug}/).

   Вигляд — сімейство .pdm-fullmap (пілюля кремового скла з бордюром і
   м'якою тінню), щоб Атлас не оброс третім різновидом кнопок.
   --------------------------------------------------------------------- */
.pdm-basemap {
    position: absolute;
    right: 12px;
    top: 52px;            /* під контролом .rm-locate: 12 + 32 + 8 */
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--green);
    background: rgba(251, 245, 233, 0.94);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 8px 13px;
    cursor: pointer;
    box-shadow: 0 12px 26px -16px rgba(47, 74, 55, 0.55);
    transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.pdm-basemap:hover { background: #FFFDF8; transform: translateY(-1px); }
.pdm-basemap:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
}
.pdm-basemap i,
.pdm-basemap svg {
    width: 14px; height: 14px; flex: none;
    color: var(--terracotta);
}

/* Супутник увімкнено (aria-pressed="true") — інверсія, як у активному
   .rm-locate: світла пілюля на темному аерофото читалась би гірше */
.pdm-basemap[aria-pressed="true"] {
    background: var(--green);
    border-color: var(--green);
    color: #FBF5E9;
}
.pdm-basemap[aria-pressed="true"]:hover { background: var(--green-hover); }
.pdm-basemap[aria-pressed="true"] i,
.pdm-basemap[aria-pressed="true"] svg { color: #FBF5E9; }

/* ≤680px: лишається кругла іконка — вузьке полотно ділять ще зум,
   геолокація і (на /park/) пілюля «Відкрити на карті» */
@media (max-width: 680px) {
    .pdm-basemap { padding: 8px; border-radius: 50%; }
    .pdm-basemap__label { display: none; }
}

/* ---------------------------------------------------------------------
   RECRE-447 — атрибуція тайлів не тікає за межі полотна

   Без max-width довгий рядок супутникового джерела (basemap.js:
   "Tiles © Esri — Source: Esri, Maxar, Earthstar Geographics…") на
   вузькому Атласі не переноситься, а просто йде за правий край полотна
   і обрізається overflow:hidden контейнера Leaflet — частина
   юридично обов'язкового тексту стає невидимою. max-width змушує
   рядок перенестись у 2 рядки ВСЕРЕДИНІ полотна (текст лишається
   повністю видимим), і саме на цю висоту (макс. 2 рядки) розрахований
   відступ .rt-focus (route-card.css, той самий тікет). */
.pdm-map .leaflet-control-attribution {
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    white-space: normal;
}
/* =====================================================================
   RECRE-433 — ВИБІР КОНКРЕТНОЇ ТОЧКИ В КЛАСТЕРІ POI
   Дельта стилів дослівно з design_mockups/cluster-poi-picker/
   cluster-picker.css (Дизайнер, TOR-recre433-cluster-poi-picker).

   Токени беруться з наявних :root main.css (--surface, --bg-2, --sage,
   --green, --border-3, --muted-3, --ink-2, --poi-type-color). Жодного
   нового кольору тікет не вводить.

   СКЛАД:
     1. .poi-pick*      — сам список-вибір (замість .rm-poi-types +
                          .pdm-info__list у кластерному стані)
     2. .pdm-info__back — «хлібна крихта» повернення до списку
     3. .poi-sheet__nav — її мобільна обгортка в шторці
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. СПИСОК-ВИБІР
   Родовід — .rt-pick (route-card.css, RECRE-367 У-3: «тут проходить
   кілька маршрутів» → клік по рядку відкриває картку КОНКРЕТНОГО).
   Візуальна плашка рядка — успадкована від .rm-poi-types__row
   (RECRE-383), щоб панель кластера не змінилась до невпізнання:
   той самий фон, той самий кегль, та сама кольорова іконка категорії.
   --------------------------------------------------------------------- */
.poi-pick {
    margin: 10px 0 0;
    font-family: 'Mulish', system-ui, sans-serif;
}
.poi-pick__cats,
.poi-pick__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}
.poi-pick__cats {
    display: flex;
    flex-direction: column;
    gap: 6px;                       /* ux-guidelines #23: проміжок між
                                       сусідніми тач-цілями */
}

/* --- Рядок (спільна основа категорії та одиничного об'єкта) --- */
.poi-pick__row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;               /* ux-guidelines #22: тач-ціль */
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(126, 148, 102, 0.08);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
    /* ux-guidelines #8: мікровзаємодія 150-300 мс; #13: без layout-
       властивостей в переході */
    transition: background .16s ease-out, border-color .16s ease-out,
                transform .12s ease-out;
}
.poi-pick__row > i,
.poi-pick__row > svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--poi-type-color, var(--poi-other));
}
.poi-pick__row:hover {
    background: var(--bg-2);
    border-color: var(--border-3);
}
/* ux-guidelines #31: миттєвий відгук на натиск (і на тапі теж —
   :active працює на touch) */
.poi-pick__row:active { transform: translateY(1px); background: var(--dash); }
/* ux-guidelines #28: видиме кільце фокуса, не outline:none */
.poi-pick__row:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}

/* Підпис категорії — гнучкий, обрізається трьома крапками */
.poi-pick__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Назва конкретного об'єкта в рядку «категорія з однією точкою»:
   другорядна, праворуч від підпису категорії. Підпис категорії там
   віддає гнучкість назві (0 1 auto), але й далі стискається/обрізається */
.poi-pick__row--direct .poi-pick__label { flex: 0 1 auto; }
.poi-pick__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--muted);
}
.poi-pick__count {
    flex: none;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}
/* Порядковий номер об'єкта серед однойменних («2/3») — єдиний чесний
   розрізнювач двох фізично різних точок з однаковою назвою */
.poi-pick__ord {
    flex: none;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--muted-3);
    font-variant-numeric: tabular-nums;
}

/* --- Афорданс: РІЗНИЙ гліф для різної обіцянки (рішення §2.3 ТЗ) --- */
.poi-pick__chev {
    flex: none;
    /* страховка правого краю: у рядку «категорія з 1 об'єкта БЕЗ назви»
       гнучкого елемента взагалі немає — шеврон мусить лишитись праворуч */
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: var(--muted-3);
    transition: transform .18s ease-out, color .16s ease-out;
}
.poi-pick__row:hover .poi-pick__chev { color: var(--green); }
/* chevron-down розгорнутої категорії обертається на 180° */
.poi-pick__row[aria-expanded="true"] .poi-pick__chev { transform: rotate(180deg); }
.poi-pick__row[aria-expanded="true"] {
    background: var(--bg-2);
    border-color: var(--border-3);
}

/* --- Підсписок конкретних об'єктів категорії --- */
.poi-pick__sub {
    margin: 4px 0 2px 7px;
    padding-left: 9px;
    border-left: 2px solid var(--poi-type-color, var(--sage));
    /* поява — лише opacity/transform (ux-guidelines #13) */
    animation: poiPickIn .18s ease-out both;
}
@keyframes poiPickIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
.poi-pick__sub li + li { border-top: 1px dashed var(--border-3); }
.poi-pick__row--item {
    background: none;
    border-radius: 7px;
    font-weight: 600;
    color: var(--ink-2);
}
.poi-pick__row--item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex: none;
    background: var(--poi-type-color, var(--poi-other));
}
.poi-pick__row--item:hover { background: var(--surface-2); }

/* Хвіст довгого підсписку: «показати всі 24» (не рядок даних) */
.poi-pick__more {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--green);
    text-align: left;
    cursor: pointer;
}
.poi-pick__more:hover { background: var(--surface-2); text-decoration: underline; }
.poi-pick__more:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* Підказка для дуже щільних бульбашок (>30 точок): чесний вихід —
   наблизити карту, а не гортати сотню рядків */
.poi-pick__hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--muted-3);
}
.poi-pick__hint i, .poi-pick__hint svg {
    width: 13px; height: 13px; flex: none; margin-top: 1px;
}

/* Однотипний кластер (одна категорія): шапки категорії немає — вона
   дублювала б eyebrow «Кафе · 12». Підсписок стає списком верхнього
   рівня і рейки не потребує. */
.poi-pick--single .poi-pick__sub {
    margin: 0;
    padding-left: 0;
    border-left: 0;
    animation: none;
}

/* Десктопний док (320px, миша) — щільніше на 4px; тач-мінімум там
   не діє, а вертикальний бюджет 12 категорій реальний */
@media (min-width: 901px) {
    .pdm-info .poi-pick__row { min-height: 40px; }
    .pdm-info .poi-pick__cats { gap: 4px; }
}

/* ---------------------------------------------------------------------
   2. «ХЛІБНА КРИХТА» ПОВЕРНЕННЯ ДО СПИСКУ
   Живе в шапці панелі (.pdm-info__head / .poi-sheet__nav) — тобто в
   ШАБЛОНІ, а не в рядкових білдерах poiCardHtml/poiPanelHtml: так
   вона однаково працює і над докованою карткою каталогу (≥901px), і
   над карткою в шторці (≤900px), не чіпаючи жодного білдера.
   --------------------------------------------------------------------- */
/* RECRE-484 (друга скарга ПО: «кнопка, яка повертає назад до кластеру,
   вибивається з дизайну»). Було: прямокутник radius 8px, ЖИРНИЙ 800
   капс із трекінгом і зеленим текстом — тобто акцентна кнопка дії.
   На кремовій шторці вона важила більше за назву самого об'єкта й
   читалась як головний елемент картки, хоча за змістом це навігаційна
   крихта «назад».
   Стало: та сама родина, що всі допоміжні керунки Атласу —
   .vs-pill__back (пілюля 26px, radius 30, surface-2, 1px border-2,
   700/11px, колір --muted) і .pdm-info__close. Змінюється ВИГЛЯД, не
   поведінка: клас, розмітка й обробник ті самі. */
.pdm-info__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 26px;
    margin: 0;
    padding: 0 10px 0 7px;
    border: 1px solid var(--border-2);
    border-radius: 30px;
    background: var(--surface-2);
    font: 700 11px/1 'Mulish', system-ui, sans-serif;
    color: var(--muted);
    cursor: pointer;
    transition: background .16s ease-out, color .16s ease-out;
}
.pdm-info__back:hover { background: var(--bg-2); color: var(--green); }
.pdm-info__back:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.pdm-info__back i, .pdm-info__back svg { width: 13px; height: 13px; flex: none; }
.pdm-info__back span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Мобільна шторка: крихта — окремий рядок НАД шапкою (eyebrow + ×
   лишаються на своєму місці). RECRE-484: візуально 26px, зона влучання
   44×44 через ::after — той самий прийом, що .poi-sheet__more і
   .pdm-info__close (min-height: 40px роздувало саму пілюлю). */
.poi-sheet__nav {
    display: flex;
    padding: 2px 16px 6px;
}
.poi-sheet__nav .pdm-info__back::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

/* ---------------------------------------------------------------------
   3. ДОСТУПНІСТЬ РУХУ
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .poi-pick__row,
    .poi-pick__chev,
    .pdm-info__back { transition: none; }
    .poi-pick__sub { animation: none; }
    .poi-pick__row:active { transform: none; }
}

/* =====================================================================
   RECRE-475 — «жолоби» кутових контролів Атласу (одне джерело правди)

   RECRE-447 задокументував, ЯКИЙ кут кому належить, але кожен банер над
   полотном (.vs-pill, .rt-focus) сам вгадував, скільки місця лишити
   стовпчикам кнопок — і на вузькому полотні вгадував НЕПРАВИЛЬНО.
   Заміряно на 375px у повноекранному Атласі (скріншот PO):
     .vs-pill × .pdm-zoom     — нахлест 32×53 px (кнопки ± повністю під
                                пілюлею, зумувати нічим);
     .vs-pill × .rm-locate    — 32×32 px (кнопка «Моє місцеположення»
                                зникає під пілюлею цілком);
     .vs-pill × .pdm-basemap  — 32×13 px;
     .rt-focus × .rm-locate   — 30×30 px (пілюля маршруту, той самий кут).
   На 1440px нахлесту немає — тому дефект і не спливав до RECRE-447.

   Далі жолоби рахуються ОДИН раз тут, а банери лише посилаються на них:
   інакше наступна кнопка в стовпчику знову розійдеться з банерами.

     --atlas-ctl-l — ширина лівого стовпчика (.pdm-zoom) плюс поле:
                     12 (offset) + 32 (кнопка) + 8 (проміжок) = 52.
     --atlas-ctl-r — те саме праворуч. ≤680px там кругла іконка 32px
                     (правила .pdm-basemap/.pdm-fs вище), отже теж 52;
                     ширше — пілюлі з підписами («Супутник», «Атлас»),
                     заміряно 104px, звідси 12 + 104 + 8 = 124.
   --------------------------------------------------------------------- */
.pdm-map {
    --atlas-ctl-l: 52px;
    --atlas-ctl-r: 52px;
}
@media (min-width: 681px) {
    .pdm-map { --atlas-ctl-r: 124px; }
}

/* ---------------------------------------------------------------------
   RECRE-475 — «Відкрити на карті» більше не лягає на атрибуцію тайлів

   Дзеркало того, що RECRE-447 зробив для .rt-focus у низ-ЛІВОМУ куті.
   Там нахлест побачили і полагодили, тут — ні: .pdm-fullmap стоїть
   bottom:12 у низ-ПРАВОМУ, а рядок атрибуції Leaflet тягнеться від
   лівого краю на всю дозволену ширину (calc(100% - 16px), те саме
   правило RECRE-447 вище) і на вузькому полотні заходить під пілюлю.
   Заміряно на 375px (/park/{slug}/, не повноекранний Атлас): нахлест
   91×22 px — половина юридично обов'язкового рядка під кнопкою.

   Ліки ті самі й з тієї ж причини: атрибуцію не чіпаємо (її текст
   обов'язковий і вже перенесений у 2 рядки), а пілюлю піднімаємо на
   ту саму висоту 40px, що й .rt-focus (2 рядки × ~15.4px + запас).
   Лише ≤900px: на широкому полотні рядок атрибуції в один рядок і до
   правого кута не дотягується, а зайвий відступ там помітний.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .pdm-fullmap { bottom: 40px; }
}