/* ============================================================
   RECRE-440 / RECRE-552 / RECRE-556 — блок «Готові підбірки» ГОЛОВНОЇ

   RECRE-556: підбірка стала рядком БД (parks.Preset), прив'язаним до
   МІСТА; підпис-милиця «Фільтр застосується одразу · Київ» зник разом
   із фолбеком на чужий напрямок, а заголовок називає місто
   («Готові підбірки · Київ»). Замість іконки-кнопки карти — два
   підписані виходи (.rm-preset__actions).

   Файл переїхав із /parks/ разом із блоком (був catalog-presets.css)
   і підключається лише в templates/news_home.html — той самий підхід,
   що home-regions.css. Нових кольорів немає: тільки токени :root з
   main.css.

   Картка має ДВА рівні насиченості (RECRE-552):
     • СПРОЩЕНА — горизонтальний родич чипа фільтра: іконка, назва,
       підказка, лічильник, дія. Мова чипів (.rm-fchip — пілюля,
       --bg-2/--border, зелений акцент), а не .card-arch: картка
       веде не на об'єкт, а на ВИБІРКУ;
     • ПОВНА — та сама картка плюс фото зверху й опис під назвою,
       коли куратор їх заповнив (parks.Preset).
   Верстка одна на обидві: .rm-preset — колонка з трьох частин, у
   спрощеної просто немає крайніх двох. Тому змішаний ряд не ламається;
   вирівнювання по ВЕРХУ (align-items: start у ряді) свідоме — тягнути
   спрощену картку на висоту повної означало б порожній прямокутник із
   одним рядком тексту посередині.

   Клікабельність: вкладені <a> невалідні, тож картка НЕ є
   посиланням — «розтягнутим» лінком працює ::after заголовка
   (.rm-preset__link, веде на сторінку підбірки), а два виходи
   (.rm-preset__actions) лежать поверх нього з вищим z-index. Усі три —
   звичайні <a href>, як того вимагає SEO й шеринг.
   ============================================================ */

/* Ширину й бічні поля дає .home-main (max-width 1280 / padding 0 30px),
   всередині якого блок стоїть першою секцією — власного контейнера
   тут, на відміну від версії для /parks/, більше немає */
.rm-presets {
    margin-top: 30px;
}

.rm-presets__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rm-presets__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--green);
    margin: 0;
}
.rm-presets__sub {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted-2);
}

/* Флекс-ряд із переносом (правка ПВ 2026-09-16, замінює горизонтальний
   скрол RECRE-556): картка №4, обрізана на краю контейнера, читалась
   як «список закінчився», а не як підказка «гортай далі» — скрол був
   непомітний. Тепер замість гортання — «Показати всі» під рядом
   (presetsHiddenCount(), home.js): перші PRESETS_COLLAPSED_COUNT (3)
   карток одразу, решта вивалюється в НОВІ РЯДКИ по кліку. Про сам
   flex-wrap і чому не grid — той самий аргумент, що був у скрол-версії:
   align-items: flex-start не дає короткій сусідці порожній хвіст під
   високою карткою з фото, і це лишається правдою для будь-якої
   кількості рядків, не лише одного. */
.rm-presets__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.rm-preset {
    flex: 1 1 280px;
    max-width: 360px;
}

/* Кнопка «Показати всі» — той самий рецепт .btn-reset, що вже возив
   каталог (catalog-more.css), тут не підключений (окрема сторінка),
   тож повторений як +6 рядків, а не новий спільний файл заради одного
   класу. */
.rm-presets__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.rm-presets__more:hover { background: var(--bg-2); border-color: var(--sage-light); }
.rm-presets__more:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
}
.rm-presets__more i, .rm-presets__more svg {
    width: 15px;
    height: 15px;
    transition: transform .18s;
}
/* Правка ПВ 2026-09-25: кнопка стала ДВОсторонньою (див. коментар до
   presetsExpanded у home.js). Стрілка перевертається класом, а не
   заміною data-lucide: іконки малює lucide.createIcons() один раз на
   монтуванні, і підміна атрибута вимагала б повторного проходу. */
.rm-presets__more--open i, .rm-presets__more--open svg { transform: rotate(180deg); }

/* ---------- Картка підбірки ----------
   Колонка з трьох частин: [фото] → __main (іконка/назва/лічильник/
   дія) → [опис]. Крайні дві — лише в повному варіанті. Відступи живуть
   на внутрішніх частинах, а не на самій картці: інакше фото не змогло
   б іти від краю до краю */
.rm-preset {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

/* Ряд «іконка · текст · лічильник · карта» — те, що раніше було самою
   карткою; у спрощеному варіанті він і є всім її вмістом */
.rm-preset__main {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
}

/* ---------- Повна картка: фото зверху ---------- */
.rm-preset__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--bg-2);
}
/* aspect-ratio дублюється на самому <img>, а не height: 100%: висота
   обгортки тут невизначена (картка — колонка з auto-висотою), тож
   відсоток резолвиться в auto, і зображення розтягувало б обгортку до
   СВОЇХ пропорцій (4:3 замість 16:9 — зловлено на dev-даних) */
.rm-preset__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* Під фото ряд щільніший зверху — обкладинка вже дала «повітря» */
.rm-preset--rich .rm-preset__main { padding-top: 12px; }

/* ---------- Повна картка: опис під назвою ----------
   Від'ємний margin-top, а не padding-bottom: 0 у __main через :has():
   картка з фото, але БЕЗ опису мусить зберегти свій нижній відступ, і
   так це працює без залежності від селектора-предка */
/* Правка ПВ 2026-09-25: відступ під текстом — МАРЖА, а не паддінг.
   Баг, який ловив ПВ («текст накладається на кнопки»): overflow:hidden
   ріже по ПАДДІНГ-боксу, тож обрізані нижні 14px були законною зоною
   малювання — четвертий рядок опису («берега.» у «Парках з водоймами»)
   випадав під три дозволені й наїжджав на ряд «Списком / На карті».
   Відтворено на стенді, 1440px, розгорнутий ряд. З margin-bottom клip-
   край збігається з нижнім краєм третього рядка, а проміжок до кнопок
   лишається той самий. */
.rm-preset__desc {
    margin: -6px 0 14px;
    padding: 0 16px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted);
    /* три рядки — щоб різні за довжиною описи не робили ряд рваним */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rm-preset:hover {
    transform: translateY(-2px);
    border-color: var(--sage-light);
    box-shadow: 0 16px 26px -18px rgba(47, 74, 55, 0.55);
}
/* Фокус приходить на вкладене посилання — підсвічуємо всю картку,
   інакше клавіатурний користувач бачить обведення лише навколо
   тексту заголовка всередині великої клікабельної зони */
.rm-preset:focus-within {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
}

.rm-preset__icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--chip-amenity-bg);
    color: var(--chip-amenity-fg);
}
.rm-preset__icon i,
.rm-preset__icon svg { width: 18px; height: 18px; }

.rm-preset__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rm-preset__link {
    font-size: 14px;
    font-weight: 800;
    color: var(--green);
    text-decoration: none;
    /* text-wrap: balance — назви підбірок дво-/трислівні, перенос
       посеред «Парки з» читається як обрив */
    text-wrap: balance;
}
/* Розтягнута клікабельна зона: весь прямокутник картки веде в каталог */
.rm-preset__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.rm-preset:hover .rm-preset__link { color: var(--green-hover); }

/* RECRE-556: .rm-preset__hint прибрано — короткої підказки в моделі
   більше немає, її роль повністю перебрав редакційний опис
   (.rm-preset__desc), який тепер заповнює сід для кожної підбірки. */

/* Лічильник — та сама пілюля, що .rm-catrow__count у сайдбарі фільтрів */
.rm-preset__count {
    flex: none;
    min-width: 30px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 30px;
    background: var(--bg-2);
    border: 1px solid var(--border-3);
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Два виходи картки (RECRE-556) ----------
   Рішення координатора 15.09: у кожної підбірки рівно дві дії —
   «Списком» (основна) і «На карті». До цього карта була іконкою-кнопкою
   без підпису, і сенс другого виходу доводилось вгадувати.
   z-index — щоб лежати ПОВЕРХ ::after розтягнутого заголовка (той веде
   на сторінку підбірки). */
.rm-preset__actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 0 16px 14px;
    margin-top: auto;
}
.rm-preset__act {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s;
}
.rm-preset__act i,
.rm-preset__act svg { width: 14px; height: 14px; }
.rm-preset__act--primary {
    background: var(--chip-amenity-bg);
    border-color: var(--sage-light);
    color: var(--green);
}
.rm-preset__act:hover {
    border-color: var(--sage);
    color: var(--green);
}
.rm-preset__act:focus-visible {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(126, 148, 102, 0.35);
}

/* ---------- Планшет: трохи вужча картка, той самий ряд-із-переносом ---------- */
@media (max-width: 1080px) {
    .rm-preset { flex-basis: 280px; }
    .rm-presets__row { gap: 12px; }
}

/* ---------- Мобільний: тісніший ряд, картка на всю ширину ----------
   flex-basis до 86vw при flex-grow:1 (базове правило) — на вузькому
   екрані картка сама розтягується в один стовпець, друга в тому самому
   ряду вже не влазить і переноситься нижче: те саме «вертикально», що
   й розгортання «Показати всі», просто вже на першому рядку. */
@media (max-width: 720px) {
    .rm-presets { margin-top: 22px; }
    .rm-presets__row { gap: 10px; }
    /* Картка на телефоні щільніша: при ширині 293px на текстову колонку
       лишалось 118px і підказка обрізалась еліпсисом ЗАВЖДИ. Ширина до
       86vw плюс зрізані іконка/відступи віддають колонці ~165px —
       підказка вміщується цілком. */
    .rm-preset { flex-basis: min(86vw, 320px); }
    .rm-preset__main { gap: 10px; padding: 12px 12px 12px 13px; }
    .rm-preset--rich .rm-preset__main { padding-top: 10px; }
    .rm-preset__desc { margin-bottom: 12px; padding: 0 13px; -webkit-line-clamp: 2; }
    .rm-preset__icon { width: 32px; height: 32px; border-radius: 10px; }
    .rm-preset__icon i,
    .rm-preset__icon svg { width: 16px; height: 16px; }
    .rm-preset__count { min-width: 26px; padding: 3px 7px; }
    .rm-preset__actions { padding: 0 13px 12px; }
}