/* ============================================================
   ГОЛОВНА — spec/05-ui-pages.md §1
   Сигнатура напряму «Маршрут»: контурний рельєф + лінія маршруту.
   ============================================================ */

.home{padding-top:0}

/* ---- Hero ----
   Дві колонки: сенс і дія ліворуч, приклад маршруту праворуч.
   Пошук — на всю ширину під ними: це головна дія екрана, а не деталь у кутку.
   ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding:var(--sp-7) 0 var(--sp-6);
      background:radial-gradient(120% 90% at 85% -10%,var(--brand-soft),transparent 60%)}
/* Контур лишаємо як текстуру, але гасимо його там, де лежить текст:
   інакше лінії проходять крізь абзац і читаються як підкреслення. */
.hero__contour{position:absolute;inset:0;width:100%;height:100%;color:var(--brand);opacity:.2;
               pointer-events:none;z-index:0;
               -webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%);
               mask-image:linear-gradient(to right,transparent 0,#000 42%)}
.hero__inner{position:relative;z-index:1;margin-inline:auto}

.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
            gap:var(--sp-6);align-items:center;margin-bottom:var(--sp-5)}
.hero:not(.hero--split) .hero__grid{grid-template-columns:minmax(0,1fr);max-width:720px}
@media(max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}

.hero__text h1{margin:.25em 0 var(--sp-3)}
.hero__lead{font-size:clamp(1.02rem,.96rem+.4vw,1.18rem);color:var(--muted);margin:0;max-width:52ch}
.hero__continue{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}

/* Міні-маршрут: ті самі точки на пунктирній лінії, що й у плані поїздки */
.routecards{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);position:relative}
.routecards::before{content:"";position:absolute;left:15px;top:20px;bottom:20px;width:2px;
                    background:repeating-linear-gradient(var(--accent) 0 6px,transparent 6px 16px)}
.routecard{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-3);align-items:center}
.routecard__dot{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;
                display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.85rem;
                position:relative;z-index:1;border:3px solid var(--paper)}
.routecard__body{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--sp-3);align-items:center;
                 background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
                 padding:8px;transition:.15s}
.routecard__body:hover{border-color:var(--brand);transform:translateX(3px);text-decoration:none}
.routecard__body img{width:64px;height:56px;object-fit:cover;border-radius:var(--r-sm);display:block}
.routecard__text{display:grid;gap:2px;min-width:0}
.routecard__text strong{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--text);
                        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.routecard__text .u-muted{font-size:.8rem}
@media(max-width:900px){
  .routecards{grid-template-columns:1fr;max-width:520px}
}

.searchbar{display:flex;gap:var(--sp-2);background:var(--surface);padding:var(--sp-2);
           border-radius:var(--r-md);box-shadow:var(--shadow-2);flex-wrap:wrap}
.searchbar .field{flex:1 1 240px;border:0;min-width:0}
.searchbar__region{flex:0 1 200px}
.quickchips{display:flex;gap:var(--sp-2);margin-top:var(--sp-4);flex-wrap:wrap}
.quickchips .chip{text-decoration:none}
.quickchips .chip:hover{text-decoration:none}

/* ---- Секції ---- */
.block{padding:var(--sp-7) 0 0}
.block__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.block__head h2{margin:0}

/* ---- Напрямки ---- */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-3)}
.region-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
             padding:var(--sp-4);display:grid;gap:4px;transition:.15s}
.region-tile:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.region-tile__name{font-family:var(--font-display);font-weight:600;color:var(--text)}
.region-tile__count{color:var(--muted);font-size:.85rem}

/* ---- Добірки ---- */
.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}
.collection{position:relative;border-radius:var(--r-md);overflow:hidden;min-height:170px;display:flex;
            align-items:end;padding:var(--sp-4);color:#fff}
.collection:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-2)}
.collection::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,20,16,.78))}
.collection__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.collection__title{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:1.05rem;
                   display:grid;gap:2px}
.collection__count{font-family:var(--font-body);font-weight:400;font-size:.8rem;opacity:.85}

/* ---- CTA ---- */
.cta{background:var(--brand);color:#fff;border-radius:var(--r-lg);padding:var(--sp-7);text-align:center}
.cta h2{color:#fff;margin:0 0 var(--sp-3)}
.cta p{color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto var(--sp-5)}

@media(max-width:620px){
  .hero{padding:var(--sp-6) 0 var(--sp-5)}
  .cta{padding:var(--sp-5)}
}