/* RECRE-297 — блок «Перед виходом у гори» (TOR-recre297 §3 F4).
   ------------------------------------------------------------------
   ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ main.css
   Той самий підхід, що catalog-regions.css / map-overview.css /
   atlas.css: стилі, потрібні лише двом поверхням із карткою парку,
   підключаються цими поверхнями (park_detail.html, map.html), а не
   вантажаться на кожній сторінці сайту. У цій ітерації main.css до
   того ж заблокований паралельною роботою — при нагоді правило можна
   перенести туди без змін класів.

   ВІЗУАЛЬНА МОВА
   Рецепт контейнера дослівно повторює .pdc-rules (правила відвідування)
   і .pdc-beach (пляжна територія): тонка ліва межа 3px + легкий тон
   акценту, радіус 0 13px 13px 0, padding 12/14/12/15, margin-bottom 18.
   Відрізняє тільки тон — глибокий лісовий --green із наявної палітри
   (терракота вже означає «заборони», пісок — «пляж»); НОВИХ ТОКЕНІВ
   НЕ ВВОДИТЬСЯ, як і в .pdc-beach.

   ТОН (S-5 ТЗ): це вказівник на державний сервіс, а не інструкція з
   порятунку — тому блок спокійний (зелений), а не тривожний
   (червоний/терракотовий). Єдиний акцент попередження — рядок
   .pdc-mountain__warn для нез(в)ірених контактів. */

.pdc-mountain {
    background: rgba(47, 74, 55, 0.06);
    border-left: 3px solid var(--green);
    border-radius: 0 13px 13px 0;
    padding: 12px 14px 12px 15px;
    margin-bottom: 18px;
}
.pdc-mountain__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.pdc-mountain__head .pdc__section-title { margin: 0; }
.pdc-mountain__head > i, .pdc-mountain__head > svg {
    width: 14px; height: 14px; color: var(--green); flex: none;
}
.pdc-mountain__lead {
    margin: 0 0 10px;
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
}

/* CTA реєстрації — вторинна кнопка (головна дія картки лишається
   «Показати на карті»/«Зберегти»): контурна, у зеленому тоні блоку.
   inline-flex, а не block: на широкій колонці /park/{slug}/ кнопка на
   всю ширину виглядала б як банер. */
.pdc-mountain__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(47, 74, 55, 0.35);
    border-radius: 11px;
    background: var(--surface-2);
    color: var(--green);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.pdc-mountain__cta:hover {
    background: rgba(47, 74, 55, 0.09);
    border-color: var(--green);
}
.pdc-mountain__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
}
.pdc-mountain__cta > i, .pdc-mountain__cta > svg {
    width: 14px; height: 14px; flex: none;
}
/* Назва області — підпорядкований підпис усередині кнопки: користувач
   мусить бачити, у ЯКУ область він реєструється (критерій приймання
   №7 ТЗ), але це не сама дія */
.pdc-mountain__cta-oblast {
    font-weight: 600; color: var(--muted-2);
    padding-left: 8px;
    border-left: 1px solid var(--border);
}

.pdc-mountain__phones {
    list-style: none;
    margin: 12px 0 0; padding: 0;
}
.pdc-mountain__phone {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px dashed var(--dash);
    font-size: 13.5px; line-height: 1.45;
}
.pdc-mountain__phone-label { color: var(--muted); min-width: 0; }
.pdc-mountain__nums {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    justify-content: flex-end;
}
.pdc-mountain__num {
    color: var(--green); font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(126, 148, 102, 0.5);
}
.pdc-mountain__num:hover { color: var(--green-hover); }
.pdc-mountain__num:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
    border-radius: 3px;
}
/* 101 — головний номер блоку: помітно більший за решту */
.pdc-mountain__phone--emergency .pdc-mountain__num { font-size: 16px; }

.pdc-mountain__app,
.pdc-mountain__warn {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 10px 0 0;
    font-size: 12px; line-height: 1.45;
}
.pdc-mountain__app { color: var(--muted-2); }
.pdc-mountain__warn { color: var(--terracotta); }
.pdc-mountain__app > i, .pdc-mountain__app > svg,
.pdc-mountain__warn > i, .pdc-mountain__warn > svg {
    width: 12px; height: 12px; flex: none; margin-top: 2px;
}
.pdc-mountain__warn b { font-weight: 800; }

/* Атрибуція: базовий .pdc__source має негативний top-margin
   (підтягування під .pdc__desc) — усередині контейнера він шкідливий,
   гасимо в обох варіантах картки, як це вже зроблено для
   .pdc-rules__source */
.pdc-mountain__source,
.pdc[data-variant="page"] .pdc-mountain__source {
    margin: 10px 0 0;
    flex-wrap: wrap;
}
.pdc-mountain__checked { color: var(--muted-3); font-weight: 600; }

/* Вузькі в'юпорти: рядок «підпис — номер» у два ряди, інакше довга
   назва підрозділу («Чернівецький гірський пошуково-рятувальний
   пункт (Вижниця)») стискає номер до переносу посеред цифр */
@media (max-width: 560px) {
    .pdc-mountain__phone {
        flex-direction: column; align-items: flex-start; gap: 2px;
    }
    .pdc-mountain__nums { justify-content: flex-start; }
    .pdc-mountain__cta { width: 100%; flex-wrap: wrap; }
    .pdc-mountain__cta-oblast { border-left: none; padding-left: 0; }
}