/* ═══════════════════════════════════════════════════
   GRID — lideravto theme
   Bootstrap 5 standard breakpoints
   Отступы уменьшаются на узких экранах
   Версия: 4.0
═══════════════════════════════════════════════════ */

/* ══════════════════════════════
   ПЕРЕМЕННЫЕ — меняются по брейкпоинтам
   Base: ≥ 992px (lg)
   --gap, --cont-max, --cont-pad — из tokens.css
══════════════════════════════ */
:root {
  /* Сетка */
  --card-pad:  16px;     /* padding внутри карточки */
  --card-pad-lg: 20px;   /* для USP с иконками */
  --sidebar-w: 260px;    /* ширина сайдбара */

  /* Bootstrap gutter (для совместимости) */
  --bs-gutter-x: 1rem;   /* 16px */
  --bs-gutter-y: 0;
}

/* md — планшет 768–992px */
@media (max-width: 991.98px) {
  :root {
    --cont-pad:  12px;
    --gap:       12px;
    --card-pad:  12px;
    --bs-gutter-x: 0.75rem; /* 12px */
  }
}

/* sm — большой телефон 576–768px */
@media (max-width: 767.98px) {
  :root {
    --cont-pad:  8px;          /* ÷4 ✅ */
    --gap:       8px;          /* ÷4 ✅ */
    --card-pad:  12px;         /* ÷4 ✅ */
    --bs-gutter-x: 0.5rem;    /* 8px */
  }
}

/* xs — мобильный < 576px */
@media (max-width: 575.98px) {
  :root {
    --cont-pad:  8px;
    --gap:       8px;
    --card-pad:  10px;
    --bs-gutter-x: 0.5rem; /* 8px */
  }
}

/* ══════════════════════════════
   КОНТЕЙНЕР — Bootstrap 5 стандарт
══════════════════════════════ */

/* Drupal #main */
#main {
  width: 100%;
  margin: 0 auto !important;
  padding-left:  var(--cont-pad) !important;
  padding-right: var(--cont-pad) !important;
  background: var(--white);
}

/* Bootstrap breakpoint containers */
@media (min-width: 576px)  { #main { max-width: 540px  !important; } }
@media (min-width: 768px)  { #main { max-width: 720px  !important; } }
@media (min-width: 992px)  { #main { max-width: 960px  !important; } }
@media (min-width: 1200px) { #main { max-width: 1140px !important; } }
@media (min-width: 1400px) { #main { max-width: 1320px !important; } }
@media (min-width: 1440px) { #main { max-width: var(--cont-max) !important; } }

/* Override Bootstrap .container */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  padding-left:  var(--cont-pad) !important;
  padding-right: var(--cont-pad) !important;
}

/* ══════════════════════════════
   БАЗОВЫЕ КЛАССЫ СЕТКИ
══════════════════════════════ */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; }

/* lg → 4 кол, sm/md → 2 кол */
@media (max-width: 991.98px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* xs → 1 колонка */
@media (max-width: 575.98px) {
  .grid-4,
  .grid-3,
  .grid-2 { grid-template-columns: 1fr; }
}

/* Сайдбар + контент */
.grid-sidebar {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 991.98px) {
  .grid-sidebar { grid-template-columns: 1fr; }
}

/* ══════════════════════════════
   СЕКЦИИ
══════════════════════════════ */
.lider-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--gray-100);
}
.lider-section:last-child { border-bottom: none; }

@media (max-width: 767.98px) {
  .lider-section { padding: 24px 0; }
}
@media (max-width: 575.98px) {
  .lider-section { padding: 16px 0; }
}

.lider-section__title {
  font-size: var(--h2) !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  margin: 0 0 var(--gap) 0 !important;
  line-height: 1.2 !important;
  font-family: var(--font) !important;
}

/* ══════════════════════════════
   КАТАЛОГ МАРОК — grid-4 адаптив
══════════════════════════════ */
.lider-brands-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--gap) !important;
}
@media (max-width: 991.98px) {
  .lider-brands-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575.98px) {
  .lider-brands-grid { grid-template-columns: 1fr !important; }
}

.lider-brand-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--card-pad);
  display: flex !important;
  align-items: center;
  gap: var(--gap);
  text-decoration: none !important;
  color: var(--gray-900) !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 72px;
}
.lider-brand-card:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(26,111,212,.1);
}
.lider-brand-logo { flex-shrink: 0; width: 80px; height: 48px; display: flex; align-items: center; justify-content: center; }
.lider-brand-logo img { max-width: 80px !important; max-height: 44px !important; width: auto !important; height: auto !important; object-fit: contain !important; }
.lider-brand-count { font-size: var(--small); color: var(--gray-500); font-family: var(--font); }

/* ══════════════════════════════
   USP — grid-4 адаптив
══════════════════════════════ */
.usp-bar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--gap) !important;
}
@media (max-width: 991.98px) {
  .usp-bar { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 575.98px) {
  .usp-bar { grid-template-columns: 1fr !important; }
}

.usp-item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  padding: var(--card-pad-lg);
  display: flex; flex-direction: column; gap: 8px;
}
.usp-item .bi, .usp-item i { font-size: 24px; color: var(--blue); }
.usp-item strong { font-size: 15px; font-weight: 700; color: var(--gray-900); font-family: var(--font); line-height: 1.3; }
.usp-item span { font-size: 13px; color: var(--gray-500); font-family: var(--font); line-height: 1.5; }

/* ══════════════════════════════
   ТОВАРЫ — grid-4 адаптив
══════════════════════════════ */
#block-lideravto-lider-popular-parts .view-content,
.view-id-lider_top_n .view-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--gap) !important;
}
@media (max-width: 991.98px) {
  #block-lideravto-lider-popular-parts .view-content,
  .view-id-lider_top_n .view-content {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 575.98px) {
  #block-lideravto-lider-popular-parts .view-content,
  .view-id-lider_top_n .view-content {
    grid-template-columns: 1fr !important;
  }
}

#block-lideravto-lider-popular-parts .views-row,
.view-id-lider_top_n .views-row {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition);
}
#block-lideravto-lider-popular-parts .views-row:hover,
.view-id-lider_top_n .views-row:hover { box-shadow: 0 4px 20px rgba(15,45,94,.1); }
#block-lideravto-lider-popular-parts .views-field,
.view-id-lider_top_n .views-field { padding: 0 var(--card-pad); }
#block-lideravto-lider-popular-parts .views-field:last-child,
.view-id-lider_top_n .views-field:last-child { padding-bottom: var(--card-pad); }

/* ══════════════════════════════
   ПОЧЕМУ МЫ — grid-2 адаптив
══════════════════════════════ */
.why-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--gap) !important;
}
@media (max-width: 767.98px) {
  .why-grid { grid-template-columns: 1fr !important; }
}

.why-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: 8px;
}
.why-item h3 { font-size: 15px !important; font-weight: 700 !important; color: var(--navy) !important; margin: 0 !important; font-family: var(--font) !important; }
.why-item p  { font-size: 13px; color: var(--gray-600); line-height: 1.5; margin: 0; font-family: var(--font); }

/* ══════════════════════════════
   КНОПКА «О КОМПАНИИ»
══════════════════════════════ */
.btn-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--card-pad);
  padding: 10px 20px;
  background: transparent;
  border: 2px solid var(--blue); border-radius: var(--radius);
  color: var(--blue); font-size: 14px; font-weight: 600;
  font-family: var(--font); text-decoration: none;
  transition: all var(--transition); cursor: pointer;
}
.btn-more:hover { background: var(--blue); color: var(--white); }

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero-inner {
  background: linear-gradient(135deg, var(--navy) 0%, #0a4a9e 60%, #112244 100%);
  border-radius: var(--radius);
  padding: 48px 0;
  color: var(--white);
  text-align: center;
}
@media (max-width: 991.98px) { .hero-inner { padding: 36px 0; } }
@media (max-width: 767.98px) { .hero-inner { padding: 28px 0; } }
@media (max-width: 575.98px) { .hero-inner { padding: 24px 0; border-radius: 0; } }

/* ══════════════════════════════
   ФУТЕР — адаптив
══════════════════════════════ */
.lider-footer-inner { background: var(--navy); padding: 40px 0 24px; }
@media (max-width: 991.98px) { .lider-footer-inner { padding: 32px 0 20px; } }

.lider-footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 32px !important;
  max-width: var(--cont-max);
  margin: 0 auto;
  padding: 0 var(--cont-pad);
}
@media (max-width: 991.98px) {
  .lider-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap) !important;
  }
}
@media (max-width: 575.98px) {
  .lider-footer-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════
   УТИЛИТА — скрывать на мобильном
══════════════════════════════ */
@media (max-width: 767.98px)  { .hide-mobile  { display: none !important; } }
@media (max-width: 991.98px)  { .hide-tablet  { display: none !important; } }
@media (min-width: 992px)     { .show-mobile-only { display: none !important; } }