/* =============================================================================
   home-quick-nav.css  ·  ?v=qnav-1
   Быстрые переходы на первом экране ГЛАВНОЙ (RU /, HE /he/).
   Подключается ТОЛЬКО на двух главных страницах и грузится ПОСЛЕДНИМ —
   легко откатить, ничего другого не затрагивает.

   Задача: пользователь с готовым намерением («мне нужна лазерная эпиляция»)
   видит переход в направление сразу, не открывая меню и не скролля.

   Правила:
   - только существующие токены: --soft, --sand-2, --pearl, --line, --gold,
     --gold-soft, --ink, --r-sm, --font-body;
   - лёгкая navigation strip, НЕ секция и НЕ баннер: без заголовка, без фона-полосы;
   - первый экран не растёт «в никуда»: верхний padding hero уменьшен ровно
     настолько, чтобы компенсировать высоту полосы;
   - direction-neutral (grid + logical props) → RTL работает без отдельных правил,
     кроме зеркальной стрелки.
   ============================================================================= */

/* ---- Полоса ---- */
.qnav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 14px;
}

/* ---- Общая база ссылки ---- */
.qnav__link{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--pearl);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px; font-weight:600; line-height:1.15; letter-spacing:.01em;
  text-align:center; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
.qnav__link:hover{ border-color:var(--gold); color:var(--gold); }
.qnav__link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.qnav__link:active{ transform:translateY(1px); }

/* ---- Главное направление: champagne-заливка из токенов.
        Заметно сильнее вторичных, но тише, чем WhatsApp-CTA ниже
        (один главный CTA на экран сохраняется). ---- */
.qnav__link--primary{
  grid-column:1 / -1;
  min-height:48px;
  font-size:15px; font-weight:700;
  background:linear-gradient(135deg, var(--soft), var(--sand-2));
  border-color:var(--gold-soft);
  color:var(--ink);
  box-shadow:0 8px 20px rgba(169,119,45,.14);
}
.qnav__link--primary:hover{
  color:var(--ink);
  border-color:var(--gold);
  box-shadow:0 12px 26px rgba(169,119,45,.22);
}

.qnav__ic{ width:16px; height:16px; flex:none; color:var(--gold); }
html[dir="rtl"] .qnav__ic{ transform:scaleX(-1); }

/* ---- Компенсация высоты: hero прижимается к header,
        чтобы первый экран не вырос и H1 не уехал вниз ---- */
.page-home .hero{ padding-top:clamp(12px, 2.2vw, 34px); }
.page-home .hero .eyebrow{ margin-bottom:12px; }

/* ---- Desktop: компактная строка из трёх, без мобильной сетки ---- */
@media (min-width:900px){
  .qnav{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-bottom:18px;
  }
  .qnav__link{ min-height:44px; padding:0 18px; }
  .qnav__link--primary{ min-height:44px; font-size:14px; }
}

/* ---- Очень узкие телефоны: чуть плотнее, без переноса «Косметология» ---- */
@media (max-width:360px){
  .qnav{ gap:7px; }
  .qnav__link{ font-size:13px; padding:0 8px; }
  .qnav__link--primary{ font-size:14.5px; }
}

@media (prefers-reduced-motion:reduce){
  .qnav__link{ transition:none; }
  .qnav__link:active{ transform:none; }
}