/* =========================================================================
   polish.css — ПК-адаптация + полиш дизайна для линолеум.бел
   --------------------------------------------------------------------------
   Подключается ПОСЛЕ theme.css (в HEAD каждой страницы). Не правит контент —
   только расширяет layout на больших экранах, добавляет hover-эффекты,
   multi-column grids, большую типографику.

   Важно: inline styles в каждой странице заточены под мобилку (max-width 640px,
   grid-template-columns: 1fr 1fr). Мы override-им их через media-queries
   с `!important` — иначе inline побеждает.
   ========================================================================= */

/* ==========================================================================
   ПЛАНШЕТ / MD (>= 768px)
   ========================================================================== */
@media (min-width: 768px) {
  /* --- Контейнеры — расширяем --- */
  .hero,
  .section,
  .final-cta,
  .calc-wrap {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero { padding: 48px 2rem 40px !important; }
  .section { padding: 56px 2rem !important; }

  /* .scroll (главная) — даём контейнер */
  .scroll {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 2rem 120px !important;
    gap: 24px !important;
  }

  /* Хедер растянут */
  .header,
  header.header,
  .top {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    height: 60px !important;
  }

  /* --- Типографика --- */
  h1,
  .h1 {
    font-size: clamp(40px, 5vw, 54px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 18px !important;
  }
  .section-title { font-size: 28px !important; margin-bottom: 22px !important; }
  .lead { font-size: 16px !important; line-height: 1.7 !important; max-width: 720px !important; }
  .sub { font-size: 16px !important; max-width: 560px !important; line-height: 1.55 !important; }

  /* --- Grids: 2 → 3 колонки на tablet --- */
  .grid-2 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
  /* Rooms на главной */
  .rooms {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }

  /* --- CTA — горизонтально --- */
  .cta-group {
    flex-direction: row !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
  }
  .cta-group .btn {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 220px;
  }

  /* --- Hero-panel (на главной) --- */
  .hero-panel {
    padding: 32px !important;
    max-width: 720px;
    margin: 0 auto !important;
    border-radius: 24px !important;
  }

  /* --- Steps --- */
  .steps { max-width: 720px; margin: 0 auto; }

  /* --- Calculator --- */
  .calc-head { padding: 28px 32px 22px !important; }
  .calc-body { padding: 24px 32px !important; }

  /* --- Bottom bar — как плавающая панель по центру --- */
  .bottom-bar {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 640px;
    width: calc(100% - 3rem) !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }

  /* --- Theme toggle чуть больше --- */
  .theme-toggle { width: 40px !important; height: 40px !important; }
  .theme-toggle svg { width: 20px !important; height: 20px !important; }
}

/* ==========================================================================
   ПК / LG (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  /* --- Контейнеры — шире --- */
  .hero,
  .section,
  .final-cta,
  .calc-wrap,
  .scroll {
    max-width: 1100px !important;
  }

  /* Главная секции ещё просторнее */
  .section { padding: 72px 2rem !important; }
  .hero { padding: 64px 2rem 56px !important; }

  /* --- Типографика ещё крупнее --- */
  h1,
  .h1 {
    font-size: clamp(48px, 4.5vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }
  .section-title { font-size: 32px !important; }
  .page-tag { font-size: 12px !important; padding: 5px 14px !important; }
  .section-label { font-size: 12px !important; margin-bottom: 24px !important; }

  /* --- Grids — 4 колонки --- */
  .grid-2 {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  /* Navigation card list — 2 в ряд */
  .nav-card-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* FAQ — 2 колонки */
  .faq-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: start;
  }
  /* Class cards / line list — 2 колонки */
  .class-list,
  .line-list,
  .ok-list,
  .compare-list,
  .dispatch {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  /* Rooms — 7 колонок (все комнаты в ряд) */
  .rooms {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 10px !important;
  }

  /* --- Hero панель больше --- */
  .hero-panel {
    padding: 40px !important;
    max-width: 820px;
  }
  .hero-panel::before {
    width: 200px !important;
    height: 200px !important;
    right: -80px !important;
    top: -80px !important;
  }

  /* --- Bottom bar — floating pill в правом нижнем углу --- */
  .bottom-bar {
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    transform: none !important;
    max-width: none;
    width: auto !important;
    border-radius: 999px !important;
    padding: 6px 6px 6px 14px !important;
    border: 1px solid rgba(201,168,76,.35) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.1) !important;
    gap: 6px !important;
  }
  .bottom-pill { flex: 0 0 auto !important; min-width: 180px; }
  body { padding-bottom: 32px !important; }
  body.has-sticky-cta { padding-bottom: 32px !important; }

  /* ----- HOVER EFFECTS (только на устройствах с hover) ----- */
  @media (hover: hover) and (pointer: fine) {
    /* Карточки — плавный lift */
    .card,
    .nav-card,
    .line,
    .class-card,
    .compare-row,
    .ok-row,
    .faq-item,
    .mistake,
    .fi,
    .factor,
    .dc,
    .room,
    .section-card,
    .art-card,
    .brand-card,
    .type-card,
    .ukhod-card,
    .stat-card,
    .hero-panel,
    .hero-utp {
      transition: transform .22s cubic-bezier(.4,0,.2,1),
                  box-shadow .22s cubic-bezier(.4,0,.2,1),
                  border-color .22s ease !important;
    }
    .card:hover,
    .nav-card:hover,
    .line:hover,
    .class-card:hover,
    .compare-row:hover,
    .faq-item:hover,
    .mistake:hover,
    .fi:hover,
    .factor:hover,
    .dc:hover,
    .room:hover,
    .section-card:hover,
    .art-card:hover,
    .brand-card:hover,
    .type-card:hover,
    .ukhod-card:hover,
    .stat-card:hover,
    .hero-panel:hover,
    .hero-utp:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08) !important;
      border-color: rgba(201,168,76,.45) !important;
    }
    /* Кнопки */
    .btn-primary:hover,
    .bp:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 32px rgba(212,170,68,.38), 0 2px 8px rgba(0,0,0,.1) !important;
      filter: brightness(1.04);
    }
    .btn-outline:hover,
    .bs:hover {
      background: rgba(201,168,76,.12) !important;
      color: #d4aa44 !important;
      border-color: rgba(201,168,76,.7) !important;
    }
    .hero-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 36px rgba(0,0,0,.3) !important;
    }
    .bottom-pill:hover {
      background: #d4aa44 !important;
      color: #0c1a1e !important;
    }
    .bottom-icon-btn:hover {
      background: rgba(255,255,255,.12) !important;
    }
    .bottom-icon-btn--chat:hover {
      background: rgba(201,168,76,.22) !important;
    }
    .linav-a:hover {
      background: rgba(201,168,76,.08) !important;
    }
    .header-back:hover { color: #d4aa44 !important; opacity: .9; }

    /* FAQ chevron hover */
    .faq-btn:hover .faq-chevron { stroke: #d4aa44 !important; }

    /* Top-nav link hover */
    .linav-top a:hover {
      color: #d4aa44 !important;
      background: rgba(201,168,76,.08) !important;
    }
  }

  /* ----- Light theme hover overrides ----- */
  @media (hover: hover) and (pointer: fine) {
    :root[data-theme="light"] .card:hover,
    :root[data-theme="light"] .nav-card:hover,
    :root[data-theme="light"] .line:hover,
    :root[data-theme="light"] .class-card:hover,
    :root[data-theme="light"] .compare-row:hover,
    :root[data-theme="light"] .faq-item:hover,
    :root[data-theme="light"] .mistake:hover,
    :root[data-theme="light"] .fi:hover,
    :root[data-theme="light"] .dc:hover,
    :root[data-theme="light"] .room:hover,
    :root[data-theme="light"] .section-card:hover,
    :root[data-theme="light"] .art-card:hover,
    :root[data-theme="light"] .brand-card:hover,
    :root[data-theme="light"] .type-card:hover,
    :root[data-theme="light"] .hero-panel:hover {
      box-shadow: 0 20px 40px rgba(28,43,45,.14), 0 4px 12px rgba(28,43,45,.06) !important;
      border-color: rgba(166,137,78,.4) !important;
    }
    :root[data-theme="light"] .btn-primary:hover,
    :root[data-theme="light"] .bp:hover {
      box-shadow: 0 16px 32px rgba(166,137,78,.45) !important;
    }
    :root[data-theme="light"] .btn-outline:hover,
    :root[data-theme="light"] .bs:hover {
      background: rgba(166,137,78,.1) !important;
      color: #A6894E !important;
    }
    :root[data-theme="light"] .bottom-pill:hover {
      background: #A6894E !important;
      color: #FFFFFF !important;
    }
    :root[data-theme="light"] .linav-top a:hover {
      color: #A6894E !important;
      background: rgba(166,137,78,.1) !important;
    }
    :root[data-theme="light"] .faq-btn:hover .faq-chevron { stroke: #A6894E !important; }
  }
}

/* ==========================================================================
   XL (>= 1280px) — ещё просторнее
   ========================================================================== */
@media (min-width: 1280px) {
  .hero,
  .section,
  .final-cta,
  .calc-wrap,
  .scroll {
    max-width: 1200px !important;
  }
  h1,
  .h1 { font-size: 68px !important; }
  .section-title { font-size: 36px !important; }

  .hero-panel { padding: 48px !important; max-width: 900px; }
  .section { padding: 88px 2rem !important; }
}

/* ==========================================================================
   TOP-NAV (инжектится nav.js) — видна только на ПК
   ========================================================================== */
.linav-top {
  display: none;
}
@media (min-width: 1024px) {
  .linav-top {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
    padding: 0 16px;
    max-width: 900px;
    flex: 1;
    justify-content: center;
  }
  .linav-top a {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
    white-space: nowrap;
  }
  .linav-top a.active {
    color: #d4aa44;
    background: rgba(201,168,76,.1);
  }
  :root[data-theme="light"] .linav-top a { color: rgba(28,43,45,.72) !important; }
  :root[data-theme="light"] .linav-top a.active {
    color: #A6894E !important;
    background: rgba(166,137,78,.1) !important;
  }

  /* На странице с top-nav — скрыть burger (есть drawer для полного меню через dots) */
  .linav-top + .menu-btn,
  .linav-top ~ .menu-btn {
    /* оставляем видимым чтобы можно было открыть полное меню */
  }

  /* Header structure на ПК */
  .header,
  header.header,
  .top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 0 2rem !important;
  }
}

/* ==========================================================================
   Hero — центровка + премиум на ПК
   ========================================================================== */
@media (min-width: 1024px) {
  .hero {
    text-align: center;
  }
  .hero .page-tag { margin: 0 auto 18px !important; }
  .hero h1 { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }
  .hero .lead { margin: 0 auto 28px !important; text-align: center; }
  .hero .cta-group { justify-content: center !important; }

  /* Section-title центровка */
  .section-label { justify-content: center; }
  .section-title { text-align: center; }
  .section .section-title + p,
  .section .section-title + .section-sub { text-align: center; max-width: 720px; margin: 0 auto 32px; }
}

/* ==========================================================================
   Плавные переходы (transitions) — общие
   ========================================================================== */
.card,
.nav-card,
.line,
.class-card,
.compare-row,
.ok-row,
.faq-item,
.mistake,
.fi,
.factor,
.dc,
.room,
.section-card,
.art-card,
.brand-card,
.type-card,
.ukhod-card,
.stat-card,
.hero-panel,
.hero-utp,
.btn,
.bp,
.bs,
.bottom-pill,
.bottom-icon-btn,
.linav-a {
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1),
              border-color .22s ease,
              background-color .22s ease,
              color .22s ease !important;
}

/* ==========================================================================
   Улучшенный скроллбар на ПК
   ========================================================================== */
@media (min-width: 1024px) {
  html { scrollbar-width: thin; scrollbar-color: rgba(212,170,68,.4) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(212,170,68,.35);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(212,170,68,.6); background-clip: padding-box; }
  :root[data-theme="light"] html { scrollbar-color: rgba(166,137,78,.35) transparent; }
  :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(166,137,78,.4); background-clip: padding-box; }
}

/* ==========================================================================
   AI-чат — на ПК в правом нижнем углу, крупнее
   ========================================================================== */
@media (min-width: 1024px) {
  .lichw-box {
    left: auto !important;
    right: 24px !important;
    bottom: 92px !important;
    width: 420px !important;
    max-width: 90vw;
    max-height: 70vh !important;
    border-radius: 20px !important;
  }
}

/* ==========================================================================
   Чуть более щедрые радиусы/shadows на всех breakpoints
   ========================================================================== */
.card, .nav-card, .line, .class-card, .faq-item, .mistake,
.fi, .factor, .dc, .room, .brand-card, .type-card, .stat-card {
  border-radius: 16px !important;
}
.hero-panel { border-radius: 22px !important; }
.final-cta { border-radius: 20px !important; }

/* ==========================================================================
   Улучшенный focus-visible (для accessibility + keyboard users)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-card:focus-visible,
.card:focus-visible,
.theme-toggle:focus-visible,
.menu-btn:focus-visible,
.linav-btn:focus-visible {
  outline: 2px solid #d4aa44;
  outline-offset: 3px;
  border-radius: 8px;
}
:root[data-theme="light"] a:focus-visible,
:root[data-theme="light"] button:focus-visible {
  outline-color: #A6894E;
}

/* ==========================================================================
   Чистка — убираем user-select на мобилке (оставил inline) и восстанавливаем на ПК
   ========================================================================== */
@media (min-width: 1024px) {
  body { -webkit-user-select: text !important; user-select: text !important; }
}