/* ============================================================
   RECRE-346 — каталог /parks/ у стані «обрано регіон»
   (дизайн-ТЗ TOR-1.0.9-regions-ui §6/§12.2; розмітка/стилі — з
   build-ready прототипу Designer/mockups/regions-1.0.9-prototype,
   блок 5 prototype.css).

   Картка великого парку = ТА САМА .card-arch, що й у міських парків
   (рішення продакт-власника 2026-08-21: жодного окремого
   layout-патерну; попередні широкі картки-рядки .gcard скасовано).
   Модифікатор .card-arch--gpark відрізняється деталями:
     1) плейсхолдер фото .rm-ph--gpark з «ДНК зони» — тінт заливки
        полігона (#DCE3C4 = GPARK_POLY_STYLE карти) + внутрішня
        пунктирна sage-рамка;
     2) сквіркл-бейдж типу 40px у куті фото — 1:1 мітка .gpark карти
        (наскрізне впізнавання, §2);
     3) бейдж площі «N га» замість лічильника точок;
     4) eyebrow повного типу ПЗФ — терактою (акцент рівня регіону);
     5) рядок чипів «◌ Поза містом» / «⚠ …» під метаданими.

   ОКРЕМИЙ файл, а не main.css: підключається лише на /parks/
   (templates/index.html). Нових кольорів немає — токени main.css
   (:root глобальний) + #DCE3C4 («ДНК зони», синхронно з
   map-overview.css/GPARK_POLY_STYLE).
   ============================================================ */

/* ---------- Заголовки секцій двосекційної композиції ---------- */
.cat-sec-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 26px 0 14px;
    flex-wrap: wrap;
}
.cat-sec-head:first-child { margin-top: 0; }
.cat-sec-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--green);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.cat-sec-sub {
    font-size: 11.5px;
    color: var(--muted-2);
    font-weight: 700;
}

/* ---------- Картка великого парку (.card-arch--gpark) ---------- */
/* БЕЗ position: relative (QA D-2, RECRE-346): базовий .rm-ph — сам
   position: absolute; inset: 0 усередині медіа-бокса картки (main.css).
   Локальний relative перетворював модифікатор на статично розміщений
   бокс нульової висоти (inset не діє) — плейсхолдер «ДНК зони»
   схлопувався в 0px. ::after нижче позиціюється відносно самого
   .rm-ph (absolute-контейнер — власний containing block). */
.rm-ph--gpark {
    background: linear-gradient(150deg, rgba(220, 227, 196, 0.65), rgba(220, 227, 196, 0.35));
}
.rm-ph--gpark::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px dashed var(--sage);
    border-radius: 12px;
    opacity: 0.65;
    pointer-events: none;
}

/* Сквіркл-бейдж типу в правому нижньому куті фото (= мітка .gpark) */
.gpk-card-sq {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: #DCE3C4;
    border: 2px dashed var(--sage);
    box-shadow: 0 0 0 3px rgba(251, 245, 233, 0.9),
                0 6px 12px rgba(36, 52, 38, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

/* Бейдж площі «N га» у правому верхньому куті фото */
.gpk-area-badge {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--green);
    line-height: 1;
    background: rgba(251, 245, 233, 0.94);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 10px;
}
.gpk-area-badge span {
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted-3);
}

/* Eyebrow повного типу ПЗФ — терактовий акцент рівня регіону
   (терактовий текст ≥800 weight/uppercase — наявний прецедент, §8) */
.card-eyebrow--gpark { color: var(--terracotta); }

/* Чипи «◌ Поза містом» / «⚠ доступ обмежено» */
.gpk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}
.gpk-chips .chip--warn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg-2);
    border: 1px dashed var(--dash);
    border-radius: 20px;
    padding: 3px 9px;
}

/* ---------- Бейдж міста на картці міського парку ----------
   Рендериться ЛИШЕ в регіональному стані (ТЗ §6 п.2); кут bottom-right
   (кути фото зайняті: POI-бейдж top-right, плейсхолдер bottom-left) */
.node-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(251, 245, 233, 0.94);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 9px;
}

/* Страховка позиціювання бейджів у куті фото (в main.css
   .card-photo relative не гарантований) */
.card-arch .card-photo { position: relative; }