/* ═══════════════════════════════════════════════════════════════════════════
   v5-routes.css · натяжка /routes (Напрямки) на v5-шапку (19.07)
   Стилі .at-tkc/.at-ridx/.at-rgroup/… витягнуті з premium.css (де вони жили),
   щоб контент каталогу напрямків працював під v5-layout (шапка v5, без
   premium.css). Токени .r2026 + hero — свої (як about). Розмітка й фільтр —
   1:1 з component/routes/title.phtml, лише обгорнуті в .r2026.
   ═══════════════════════════════════════════════════════════════════════════ */
.r2026{--at-scene:#0A1024;--at-panel:#16234E;--at-page:#EEF1F7;--at-card:#FFFFFF;
  --at-text:#101729;--at-text2:#4A5570;--at-muted:#667088;--at-amber:#FFB800;--at-on-amber:#231700;
  --at-link:#2F59B0;--at-focus:#3B6FD9;--at-live:#3ECF8E;--at-line:#E4E8F1;--at-line-scene:#FFFFFF17;
  --at-fh:'Manrope',system-ui,sans-serif;--at-fb:'Source Sans 3',system-ui,sans-serif;
  --r-card:16px;--r-panel:24px;--r-pill:999px;--e:cubic-bezier(.16,1,.3,1);
  --sh-card:0 4px 14px -8px rgba(10,16,36,.14);--sh-raised:0 14px 34px -12px rgba(10,16,36,.22);
  container-type:inline-size;container-name:root;background:var(--at-page);color:var(--at-text);
  overflow-x:clip; /* notch-кружечки картки (left/right:-17px) виступали за край
                      і зсували контент на мобілці (рев'ю Віктора 19.07) */
  /* аліаси токенів premium.css — витягнуті .at-* правила чекають саме ці імена.
     Без них каталог рендерився б без кольорів/радіусів (undefined var → initial). */
  --at-ink:#0F1729;--at-txt2:#39435A;--at-txt2b:#5A6B85;--at-txt3:#8A93A8;--at-bg:#EAEDF4;
  --at-blue:#2F59B0;--at-blue-dk:#24478E;--at-blue-ac:#3B6FD9;--at-blue-bg:#EEF2FA;
  --at-r-card-lg:18px;--at-shadow-card:0 16px 34px rgba(15,23,41,.13);
  --at-hair:rgba(15,23,41,.07);--at-rule:#F1F3F8;--at-surface:#F7F9FC;--at-r-icon:11px;
  font:400 16px/1.6 var(--at-fb)}
.r2026 *,.r2026 *::before,.r2026 *::after{box-sizing:border-box}
.r2026 h1,.r2026 h2,.r2026 h3{font-family:var(--at-fh);letter-spacing:-.02em}
.r2026 a{text-decoration:none;color:inherit}
.r2026 .tnum{font-variant-numeric:tabular-nums}
.r2026 .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
@container root (max-width:900px){.wrap{padding:0 18px}}
/* Hero у мові v5 (badge+h1+subtitle) */
.rhero{color:#fff;padding:56px 0;background:radial-gradient(620px 240px at 12% -40%,#FFB80014,transparent 70%),radial-gradient(720px 300px at 90% 120%,#2F59B026,transparent 70%),linear-gradient(180deg,#0A1024,#101A38)}
.rhero .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--at-fh);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#FFD35A}
.rhero .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--at-amber)}
.rhero h1{margin:0;font-size:clamp(28px,4vw,44px);font-weight:800;max-width:20ch}
.rhero p{margin:12px 0 0;font-size:clamp(15px,1.6vw,18px);color:#FFFFFFC7;max-width:60ch}
.crumb{display:flex;gap:8px;font-size:12.5px;color:var(--at-muted);margin:24px 0 0}
.crumb a:hover{color:var(--at-text)}
/* ⚠ Breadcrumbs::render() віддає <ul class="breadcrumbs-static"><li> з
   мікроданими schema.org — стилізувати сам .crumb недостатньо: без скидання
   списку крихти малювались вертикально й З БУЛІТАМИ (скріншот 19.07).
   Мікродані лишаємо в DOM (це SEO), ховаємо лише маркери списку. */
.crumb ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.crumb li{display:flex;align-items:center;gap:8px}
.rstage{padding:28px 0 56px}

/* ── КАТАЛОГ (з premium.css) ─────────────────────────── */
/* ============================================================
   /routes — каталог напрямків. 1:1 з макетом «Всі напрямки».
   ============================================================ */
.phx .at-routes{padding-top:22px;padding-bottom:34px}
.phx .at-routes .breadcrumbs{margin:0 0 18px}
/* заголовок секції: H2 зліва, приглушена підпис справа */
.at-sech{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:15px}
.at-sech h2{font-family:var(--at-fh);font-weight:800;font-size:20px;letter-spacing:-.4px;margin:0;color:var(--at-ink)}
.at-sech span{font-family:var(--at-fh);font-weight:600;font-size:12.5px;color:var(--at-txt3)}
/* ── Популярні маршрути: картка-квиток з «відривним» корінцем ── */
.at-rfeat-sec{margin:0 0 26px}
.at-rfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.at-tkc{position:relative;display:block;border-radius:var(--at-r-card-lg);overflow:hidden;background:var(--at-card);box-shadow:0 10px 26px rgba(15,23,41,.10);color:inherit;text-decoration:none;transition:transform .18s,box-shadow .18s}
.at-tkc:hover{transform:translateY(-3px);box-shadow:var(--at-shadow-card);text-decoration:none;color:inherit}
.at-tkc__top{position:relative;display:block;padding:16px 18px 20px;color:#fff}
.at-tkc__row{display:flex;align-items:center;justify-content:space-between}
.at-tkc__ico{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;place-items:center}
.at-tkc__ico .ic{stroke-width:2}
.at-tkc__tag{font-family:var(--at-fh);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.18);border-radius:6px;padding:4px 8px}
.at-tkc__ttl{display:block;font-family:var(--at-fh);font-weight:800;font-size:19px;letter-spacing:-.4px;margin-top:14px;line-height:1.25}
.at-tkc__arr{display:block;opacity:.85;font-size:14px;line-height:1.1}
/* корінець: пунктир + два напівкола кольору фону сторінки */
.at-tkc__notch{position:absolute;left:0;right:0;top:auto;bottom:52px;height:0;border-top:2px dashed rgba(15,23,41,.14);margin:0 9px;pointer-events:none}
.at-tkc__notch::before{content:'';position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--at-bg);left:-17px}
.at-tkc__notch::after{content:'';position:absolute;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--at-bg);right:-17px}
.at-tkc__bot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 18px;height:52px;box-sizing:border-box}
.at-tkc__cta{font-family:var(--at-fh);font-weight:700;font-size:13px;color:var(--at-blue)}
.at-tkc__chev{color:#B7C0D2;transition:transform .16s;display:grid;place-items:center}
.at-tkc:hover .at-tkc__chev{transform:translateX(3px)}
/* ── Алфавітний каталог ── */
.at-ridx__h{font-family:var(--at-fh);font-weight:800;font-size:20px;letter-spacing:-.4px;margin:0 0 14px;color:var(--at-ink)}
.at-ridx-tools{position:relative;max-width:440px;margin:0 0 15px}
.at-ridx-tools__ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--at-txt3);pointer-events:none;display:grid;place-items:center}
.at-ridx-tools input{width:100%;box-sizing:border-box;height:50px;padding:0 16px 0 44px;font-family:var(--at-fh);font-weight:600;font-size:15px;color:var(--at-ink);background:var(--at-card);border:1.5px solid var(--at-line);border-radius:13px;box-shadow:0 6px 18px rgba(15,23,41,.06)}
.at-ridx-tools input::placeholder{font-weight:500;color:var(--at-txt3)}
.at-ridx-tools input:focus{outline:none;border-color:var(--at-blue);box-shadow:0 0 0 3px var(--at-blue-bg),0 6px 18px rgba(15,23,41,.06)}
/* швидкий перехід по літерах */
.at-azp{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.at-azp__l{font-family:var(--at-fh);font-weight:700;font-size:13px;color:var(--at-txt2);background:var(--at-card);border:1px solid var(--at-line);border-radius:9px;min-width:32px;padding:6px 9px;text-align:center;text-decoration:none;transition:.14s}
.at-azp__l:hover{border-color:var(--at-blue);color:var(--at-blue);background:var(--at-blue-bg);text-decoration:none}
/* .phx .at-rgroup, а не .at-rgroup: вище в цьому файлі є `.phx section
   {padding:56px 0}
` (записане як «.phx /* коммент *​/ section» — селектор
   склеюється). Його специфічність (0,1,1) б'є голий клас (0,1,0), і група
   отримувала 56px порожнечі над кольоровою смужкою. */
.phx .at-rgroup{padding:0}
.at-rgroup{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 16px;background:var(--at-card);border:1px solid var(--at-hair);border-radius:var(--at-r-card-lg);box-shadow:0 8px 24px rgba(15,23,41,.06);overflow:hidden;scroll-margin-top:80px;display:inline-block;width:100%}
.at-rgroup__bar{display:block;height:4px}
.at-rgroup__hd{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--at-rule)}
.at-rgroup__ch{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--at-fh);font-weight:800;font-size:16px;flex:none}
.at-rgroup__n{font-family:var(--at-fb);font-weight:600;font-size:12.5px;color:var(--at-txt2b)}
.at-rgroup__body{padding:8px}
.at-rlink{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--at-r-icon);transition:background .14s,box-shadow .14s;color:inherit;text-decoration:none; background: rgba(0, 0, 0, 0.03); margin-bottom: 10px;}
.at-rlink:hover,.at-rlink:focus-visible{background:var(--at-blue-bg);box-shadow:inset 0 0 0 1px var(--at-line);text-decoration:none;color:inherit}
.at-rlink:hover .at-rlink__t{color:var(--at-blue)}
.at-rlink__ico{width:24px;height:24px;border-radius:7px;background:var(--at-blue-bg);color:var(--at-blue);display:grid;place-items:center;flex:none}
.at-rlink__t{flex:1;font-family:var(--at-fb);font-weight:600;font-size:14px;color:#26304A;transition:color .14s}
.at-rlink__a{color:#B7C0D2}
.at-rlink__chev{color:var(--at-blue);opacity:0;transition:.14s;flex:none;display:grid;place-items:center}
.at-rlink:hover .at-rlink__chev,.at-rlink:focus-visible .at-rlink__chev{opacity:1;transform:translateX(2px)}
/* порожній стан фільтра */
.at-rempty{text-align:center;padding:48px 20px;color:var(--at-txt2)}
.at-rempty__ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:16px;background:var(--at-card);border:1px solid var(--at-line);color:var(--at-txt3)}
.at-rempty b{display:block;font-family:var(--at-fh);font-weight:700;font-size:17px;color:var(--at-ink);margin-bottom:4px}
.at-rempty p{margin:0;font-family:var(--at-fb);font-size:14.5px;color:var(--at-txt3)}

@media (max-width:980px){
.at-rfeat{grid-template-columns:repeat(2,1fr)}
  .rstage {
    margin: 0 15px
  }
}
@media (max-width:600px){
.at-rfeat{grid-template-columns:1fr;gap:12px}
.at-sech{flex-direction:column;align-items:flex-start;gap:2px}
}