/* RECRE-550 — блок «Великі маршрути через цей парк».
   ------------------------------------------------------------------
   ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ main.css
   Той самий підхід і та сама причина, що в mountain-safety.css /
   route-card.css: стилі потрібні лише двом поверхням із карткою парку
   (park_detail.html, map.html) і підключаються ними, а не вантажаться
   на кожній сторінці сайту. main.css до того ж заблокований
   паралельною роботою — при нагоді правило переноситься туди без зміни
   класів.

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

   ЧОМУ БЛОК СПОКІЙНИЙ, А НЕ АКЦЕНТНИЙ. Він відповідає на питання
   «частиною чого є ці стежки», а не «що тут небезпечно». Застереження
   про прикордонні ділянки живе в КАРТЦІ МАРШРУТУ (.rt-border,
   route-card.css) — там, де людина ухвалює рішення йти. */

.pdc-trails {
    background: rgba(126, 148, 102, 0.07);
    border-left: 3px solid var(--sage);
    border-radius: 0 13px 13px 0;
    padding: 12px 14px 12px 15px;
    margin-bottom: 18px;
}

.pdc-trails__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.pdc-trails__head .pdc__section-title { margin: 0; }
.pdc-trails__head > i, .pdc-trails__head > svg {
    width: 14px; height: 14px; color: var(--sage); flex: none;
}

.pdc-trails__list { list-style: none; margin: 0; padding: 0; }

.pdc-trails__item {
    padding: 7px 0;
    border-bottom: 1px solid var(--border-3);
}
.pdc-trails__item:first-child { padding-top: 0; }
.pdc-trails__item:last-child { padding-bottom: 0; border-bottom: 0; }

.pdc-trails__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

/* Два числа з підписами в один рядок, що переноситься на вузькому
   екрані. flex-wrap, а не nobreak: «62,8 км у межах парку · 394,2 км
   повна» на 360px не вміщається, а обрізати підпис не можна — саме
   підпис і робить число чесним. */
.pdc-trails__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--muted);
}
.pdc-trails__meta b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.pdc-trails__sep { color: var(--dash); }