/* ============================================================
   RECRE-295 · 1.0.9 — головна як ієрархічний агрегатор напрямків
   (дизайн-ТЗ TOR-1.0.9-regions-ui §5; стилі перенесені з прототипу
   Designer/mockups/regions-1.0.9-prototype/prototype.css, розділ 4).

   ОКРЕМИЙ файл, а не main.css: правка main.css на момент реалізації
   заблокована паралельним незакоміченим WIP (той самий прецедент, що
   catalog-regions.css у RECRE-346). Підключається лише news_home.html.
   Жодного нового кольору — тільки токени main.css.
   ============================================================ */

/* ============================================================
   RECRE-406 · 1.1.0 — підпис «безкоштовний каталог» у hero головної.

   Причина існування саме тут, а не в main.css: файл лишається
   заблокованим (див. шапку вище), а стиль потрібен рівно на одній
   поверхні — hero news_home.html.

   Форма — «пілюля» тим самим словником, що .hero-btn (напівпрозорий
   темний фон + світла рамка на фото), але БЕЗ hover/focus-станів і без
   курсора-руки: елемент навмисне не виглядає клікабельним, щоб не
   читатись як третій CTA поруч із «Переглянути парки»/«Відкрити карту».
   ============================================================ */
.hero-note {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 14px 0 0; padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; line-height: 1.45;
    color: rgba(251,245,233,0.92);
    background: rgba(36,52,38,0.32);
    border: 1px solid rgba(251,245,233,0.34);
    border-radius: 22px;
    /* max-width < .hero-content (640px): рядок не тягнеться на всю
       ширину фото і читається як підпис, а не як ще один абзац */
    max-width: 480px;
}
/* Іконку фарбуємо охрою — тим самим акцентом, що первинна CTA-кнопка;
   flex:none, бо при переносі тексту в кілька рядків інакше стискається */
.hero-note i, .hero-note svg { width: 15px; height: 15px; flex: none; color: var(--ochre-light); }

/* Мобільна: текст переноситься на 2–3 рядки, тож іконка вирівнюється
   по ПЕРШОМУ рядку, а не по центру блока (той самий брейкпоінт, що
   мобільні правила hero в main.css) */
@media (max-width: 680px) {
    .hero-note {
        align-items: flex-start;
        margin-top: 12px; padding: 7px 12px;
        font-size: 11.5px;
    }
    .hero-note i, .hero-note svg { margin-top: 1px; }
}

/* ---------- Групи-регіони стрічки ---------- */
.fgroup { margin-top: 26px; }
.fgroup:first-of-type { margin-top: 0; }
.fgroup__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 11px 14px; margin-bottom: 14px;
    background: var(--bg-2); border: 1px solid var(--border-3); border-radius: 14px;
}
.fgroup__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px; font-weight: 700; color: var(--green);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.fgroup__title .kind {
    font-family: 'Mulish', system-ui, sans-serif; font-size: 8.5px; font-weight: 800;
    letter-spacing: .7px; text-transform: uppercase; color: var(--terracotta);
}
.fgroup__sub { font-size: 11.5px; color: var(--muted-2); font-weight: 700; }
.fgroup__go {
    margin-left: auto; font-size: 11px; font-weight: 800; color: var(--terracotta);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px;
    padding: 7px 13px; cursor: pointer; font-family: inherit; min-height: 34px;
    text-decoration: none; display: inline-flex; align-items: center;
}
.fgroup__go:hover { background: var(--surface); color: var(--green); }
.fgroup__go--map { color: var(--muted); }
.fgroup__go--map:hover { color: var(--green); }
.fgroup__go + .fgroup__go { margin-left: 0; }

/* Сітка новин під сіткою подій усередині групи */
.fgroup .grid-news { margin-top: 14px; }

/* ============================================================
   RECRE-392 · 1.1.0 — акордеон напрямків у стані «Уся Україна».

   До зміни кожна група займала повноекранну смугу навіть з ОДНІЄЮ
   карткою, і огляд країни цілком був довгим гортанням майже порожніх
   екранів (скріншот у тікеті). Тепер згорнута група — це один рядок
   шапки: назва + покриття + кількість матеріалів, тобто навігація
   замість вертикального «полотна».

   Стан керується класом .fgroup--folded на секції; саме приховування —
   атрибут hidden (див. блок «[hidden]» нижче), тож решта CSS тут
   відповідає лише за щільність і за напрямок каретки.
   ============================================================ */
.fgroup--folded { margin-top: 10px; }
/* Шапка згорнутої групи — сама собі рядок списку: відступ під нею
   тримав би повітря для сітки, якої вже немає */
.fgroup--folded .fgroup__head { margin-bottom: 0; }

/* Кнопка-перемикач: перша в шапці, до заголовка. Це НЕ .fgroup__go —
   у тих margin-left:auto, який притискає їх до правого краю */
.fgroup__fold {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none; padding: 0;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--surface-2); color: var(--green);
    cursor: pointer; font-family: inherit;
}
.fgroup__fold:hover { background: var(--surface); border-color: var(--dash); }
.fgroup__fold:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* Каретка — CSS-трикутник (див. коментар у шаблоні: lucide тут не
   годиться, бо іконка міняється на кожен клік). Базовий стан —
   «розгорнуто» (вістря вгору), згорнута група перевертає її вниз */
.fgroup__caret {
    display: block; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-135deg); margin-top: 3px;
    transition: transform .16s ease;
}
.fgroup--folded .fgroup__caret { transform: rotate(45deg); margin-top: -3px; }

/* Рядок «лічильник + гуртовий перемикач». .home-chips — колонковий
   флекс (main.css), тому auto-відступ зліва притискає весь рядок до
   правого краю, як раніше робив сам .feed-count */
.feed-bar {
    display: flex; align-items: center; gap: 12px;
    margin-left: auto; flex-wrap: wrap;
}
.feed-foldall {
    padding: 6px 12px; min-height: 30px;
    font-family: inherit; font-size: 11px; font-weight: 800;
    color: var(--terracotta); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 20px; cursor: pointer;
}
.feed-foldall:hover { background: var(--surface); color: var(--green); }
.feed-foldall:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

@media (max-width: 680px) {
    /* На вузькому екрані рядок лічильника переноситься сам — auto-
       відступ .feed-count усередині .feed-bar уже нічого не робить,
       але лишається чинним у розмітці без обгортки (страховка) */
    .feed-bar { width: 100%; justify-content: flex-end; }
    /* Каретка мусить лишатись клікабельною ціллю ≥30px і на мобільному:
       розмір кнопки НЕ зменшуємо, лише прибираємо зайвий відступ */
    .fgroup__head { gap: 10px; }
}

/* ---------- Приховування вузлів стрічки (RECRE-392, баг QA) ----------
   Видимість стрічки та акордеона тримає атрибут hidden (:hidden у
   news_home.html), а не x-show — розгорнуте «чому» в коментарі шаблону
   біля .feed-bar: x-show із другого перемикання ховає елемент не сам, а
   через ланцюжок предка, який теж ховається, і на зміні напрямку цей
   ланцюжок губив приховування вже наявних вузлів.

   Правила потрібні тому, що UA-стиль `[hidden] { display: none }` —
   найслабший, і будь-який display у стилі компонента (flex/inline-flex
   вище) його перебиває. Той самий прийом уже вживаний у main.css для
   .mloc-* (RECRE-165). Ці правила ідуть ПІСЛЯ оголошень display вище —
   порядок теж має значення, не переставляти. */
.feed-bar[hidden],
.feed-foldall[hidden],
.feed-groups[hidden],
.fgroup__fold[hidden],
.fgroup__body[hidden] { display: none !important; }

/* ---------- Бейдж вузла на обкладинці картки ----------
   Кути фото зайняті: дата (top-left), ціна (top-right), плейсхолдер
   «Ще без фото» (bottom-left) → вузол іде bottom-right */
.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: .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;
}
.node-badge--region { color: #fff; background: var(--terracotta); border-color: var(--terracotta); }

/* Страховка позиціювання бейджа: у main.css relative є не на всіх
   фото-контейнерах карток (glue з прототипу, розділ 6) */
.event-card__photo, .news-card__photo { position: relative; }

/* ---------- Лічильник стрічки у рядку чипів ---------- */
.feed-count { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted-3); }