/*
 * meg-system.css: единая визуальная система meg.kz.
 * Подключается после стилей темы (inc/ux.php). Все значения заданы токенами в :root, поэтому цвет, радиус или отступ меняется в одном месте.
 * Стиль: точный, инженерный, сдержанный. Светлые поверхности, тёмный текст, один фирменный акцент (синий) и один вспомогательный (золотой, только как тонкая деталь).
 */

:root {
  /* цвета */
  --meg-ink: #1f2933;           /* основной текст */
  --meg-ink-2: #52606d;         /* вторичный текст (контраст на белом 6.9:1) */
  --meg-brand: #254982;         /* фирменный синий (контраст на белом 9:1) */
  --meg-brand-dark: #1b3763;
  --meg-accent: #9f640a;        /* золотой для текста на светлом (контраст 4.9:1) */
  --meg-accent-deco: #e8b262;   /* золотой только для линий и деталей, не для текста */
  --meg-surface: #ffffff;
  --meg-surface-2: #f4f6f9;     /* спокойная светлая подложка */
  --meg-border: #dde3ea;
  --meg-danger: #b3261e;
  /* типографика */
  --meg-fs-body: 16px;
  --meg-fs-small: 14px;
  --meg-fs-h1: clamp(28px, 3vw, 40px);
  --meg-fs-h2: clamp(24px, 2.4vw, 34px);
  --meg-fs-h3: clamp(18px, 1.6vw, 22px);
  --meg-lh: 1.55;
  /* отступы (шаг 8) */
  --meg-s1: 8px;
  --meg-s2: 16px;
  --meg-s3: 24px;
  --meg-s4: 40px;
  --meg-s5: 64px;
  /* формы */
  --meg-radius: 8px;
  --meg-radius-lg: 12px;
  --meg-gap: 24px;
  /* состояния */
  --meg-focus: 3px solid var(--meg-brand);
  --meg-shadow: 0 1px 2px rgba(31, 41, 51, .06), 0 4px 12px rgba(31, 41, 51, .06);
}

/* ---------- Общие элементы ---------- */
body { color: var(--meg-ink); line-height: var(--meg-lh); }
main p, main li { text-align: left; }
.section_title { font-size: var(--meg-fs-h2) !important; line-height: 1.2 !important; letter-spacing: -.01em; color: var(--meg-ink); }
.section_title span { color: var(--meg-accent) !important; }
.section_title span.blue { color: var(--meg-brand) !important; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.mobile_hamburger:focus-visible { outline: var(--meg-focus) !important; outline-offset: 2px; }

/* кнопки: прямоугольные, с единым радиусом */
.blue_btn, a.button, button.blue_btn, .top_btn { border-radius: var(--meg-radius) !important; }
.blue_btn:hover, a.button:hover { box-shadow: var(--meg-shadow); }

/* ---------- Внутренние страницы: светлая шапка раздела вместо цветных баннеров ---------- */
body:not(.meg-home) main .hero { margin-bottom: var(--meg-s5) !important; }
body:not(.meg-home) main .hero .hero_content {
  background: var(--meg-surface-2) !important;
  border: 1px solid var(--meg-border);
  border-left: 4px solid var(--meg-brand);
  border-radius: var(--meg-radius-lg) !important;
  padding: var(--meg-s4) var(--meg-s4) var(--meg-s3) !important;
  min-height: 0;
}
body:not(.meg-home) main .hero .hero_content::before,
body:not(.meg-home) main .hero .hero_content::after { display: none !important; }
body:not(.meg-home) main .hero .hero_title { color: var(--meg-ink) !important; font-size: var(--meg-fs-h1) !important; line-height: 1.15 !important; max-width: 24ch; }
body:not(.meg-home) main .hero p { color: var(--meg-ink-2) !important; max-width: 70ch; font-size: var(--meg-fs-body) !important; }
body:not(.meg-home) main .hero .title_top, body:not(.meg-home) main .hero .title_top a { color: var(--meg-brand) !important; font-size: var(--meg-fs-small); }
body:not(.meg-home) main .hero .meg_crumbs ul { color: var(--meg-ink-2); }
/* рубрика уже есть в хлебных крошках: подпись над заголовком не дублируем */
body:not(.meg-home) main .hero .meg_crumbs ~ .title_top { display: none; }
body:not(.meg-home) main .hero .meg_crumbs a:hover { color: var(--meg-brand); }
body:not(.meg-home) main .hero .blue_btn,
body:not(.meg-home) main .hero .meg_hero_cta { background: var(--meg-brand) !important; color: #fff !important; border: 0; }
body:not(.meg-home) main .hero .blue_btn:hover { background: var(--meg-brand-dark) !important; }
@media (max-width: 768px) {
  body:not(.meg-home) main .hero .hero_content { padding: var(--meg-s3) var(--meg-s2) !important; }
}

/* ---------- Каталог: сетка 3 / 2 / 1 без эффектов карусели ---------- */
main.production .slide_items::before, main.production .slide_items::after { display: none !important; content: none !important; }
main.production .slides [class*="swiper-button"], main.production .slides .swiper-pagination { display: none !important; }
main.production .slide_items { margin-top: var(--meg-s3); overflow: visible; }
main.production .slide_items .swiper-wrapper,
.category .slide_content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--meg-gap);
  transform: none !important;
  height: auto !important;
  flex-wrap: initial;
}
main.production .slide_items .swiper-slide { width: auto !important; margin: 0 !important; height: auto !important; }
main.production .slide_items .swiper-slide-duplicate { display: none !important; }
.category .slide_content .slide_item { width: auto !important; }
@media (max-width: 1099px) {
  main.production .slide_items .swiper-wrapper, .category .slide_content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  main.production .slide_items .swiper-wrapper, .category .slide_content { grid-template-columns: minmax(0, 1fr); }
}

/* карточка: единый формат фото 4:3, текст важнее картинки, кнопка прижата вниз */
.slide_items .slide_item, .category .slide_content .slide_item {
  display: flex; flex-direction: column; height: 100%;
  background: var(--meg-surface); border: 1px solid var(--meg-border); border-radius: var(--meg-radius-lg);
  overflow: hidden; width: auto;
}
.slide_items .slide_img, .category .slide_content .slide_img { width: 100%; }
.slide_items .slide_img img, .category .slide_content .slide_item img {
  display: block; width: 100%; height: auto !important; max-height: none !important;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important;
}
.slide_item .slide_info, .category .slide_content .slide_info {
  display: flex; flex-direction: column; flex: 1 1 auto; height: auto; margin: 0 !important;
  padding: var(--meg-s2) var(--meg-s3) var(--meg-s3);
}
.slide_item .slide_item_title { font-size: var(--meg-fs-h3) !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: var(--meg-ink) !important; font-weight: 700; }
.slide_item .slide_subtitle { color: var(--meg-accent) !important; font-size: var(--meg-fs-small) !important; margin: 4px 0 8px !important; }
.slide_item .slide_description {
  color: var(--meg-ink-2) !important; font-size: var(--meg-fs-small) !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.slide_item .slide_info > a.blue_btn, .slide_item .slide_info > .blue_btn { margin-top: auto !important; align-self: flex-start; }
.slide_item .slide_description + a, .slide_item .slide_info .slide_description { margin-bottom: var(--meg-s2); }

/* ---------- Блоки решений: назначение, характеристики, комплектация и др. ---------- */
.meg_specs { margin: 0 0 var(--meg-s5); }
.meg_specs .container > * + * { margin-top: var(--meg-s3); }
.meg_block { background: var(--meg-surface); border: 1px solid var(--meg-border); border-radius: var(--meg-radius-lg); padding: var(--meg-s3); }
.meg_block h3 { font-size: var(--meg-fs-h3); margin: 0 0 var(--meg-s1); color: var(--meg-ink); }
.meg_block p { margin: 0; color: var(--meg-ink-2); max-width: 75ch; white-space: pre-line; }
.meg_blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--meg-gap); }
@media (max-width: 899px) { .meg_blocks { grid-template-columns: minmax(0, 1fr); } }
.meg_specs_table { width: 100%; border-collapse: collapse; background: var(--meg-surface); border: 1px solid var(--meg-border); border-radius: var(--meg-radius-lg); overflow: hidden; }
.meg_specs_table th, .meg_specs_table td { padding: 12px var(--meg-s2); border-bottom: 1px solid var(--meg-border); text-align: left; vertical-align: top; }
.meg_specs_table tr:last-child th, .meg_specs_table tr:last-child td { border-bottom: 0; }
.meg_specs_table th { width: 38%; font-weight: 600; color: var(--meg-brand); background: var(--meg-surface-2); }
.meg_docs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--meg-s1); }
.meg_docs a { color: var(--meg-brand); font-weight: 600; }
.meg_cta_row { display: flex; flex-wrap: wrap; gap: var(--meg-s2); align-items: center; }
.meg_cta_row .blue_btn { margin: 0; }
.meg_cta_row .meg_btn_secondary { background: var(--meg-surface) !important; color: var(--meg-brand) !important; border: 1px solid var(--meg-brand) !important; }

/* ---------- Главная: два пути ---------- */
.meg_paths { margin: 0 0 var(--meg-s5); }
.meg_paths_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--meg-gap); }
@media (max-width: 799px) { .meg_paths_grid { grid-template-columns: minmax(0, 1fr); } }
.meg_path { display: flex; flex-direction: column; gap: var(--meg-s1); background: var(--meg-surface-2); border: 1px solid var(--meg-border); border-top: 4px solid var(--meg-brand); border-radius: var(--meg-radius-lg); padding: var(--meg-s3); }
.meg_path h2 { font-size: var(--meg-fs-h3); margin: 0; }
.meg_path p { color: var(--meg-ink-2); margin: 0 0 var(--meg-s1); }
.meg_path .meg_cta_row { margin-top: auto; }

/* ---------- Форма ---------- */
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea {
  border: 1px solid var(--meg-border); border-radius: var(--meg-radius); background: var(--meg-surface); color: var(--meg-ink);
}
.form input::placeholder, .form textarea::placeholder { color: #6b7785; opacity: 1; }
.form input:focus, .form textarea:focus { border-color: var(--meg-brand); }
.form input[type="file"] {
  width: 100%; padding: 10px; border: 1px dashed var(--meg-brand); border-radius: var(--meg-radius);
  background: var(--meg-surface-2); color: var(--meg-ink); font-size: var(--meg-fs-small); cursor: pointer;
}
.form input[type="file"]::file-selector-button {
  margin-right: var(--meg-s2); padding: 8px 14px; border: 0; border-radius: var(--meg-radius);
  background: var(--meg-brand); color: #fff; font: inherit; cursor: pointer;
}
.form small { display: block; margin-top: 6px; color: var(--meg-ink-2); font-size: 13px; }
.form label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 10px; }
.form input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--meg-brand); }
.form .meg_selected {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px var(--meg-s2);
  background: var(--meg-surface-2); border: 1px solid var(--meg-border); border-left: 4px solid var(--meg-brand); border-radius: var(--meg-radius);
}
.form .meg_selected span { color: var(--meg-ink-2); font-size: var(--meg-fs-small); }
.form .meg_selected strong { color: var(--meg-ink); }
.form .form_notice { padding: 12px var(--meg-s2); border-radius: var(--meg-radius); background: var(--meg-surface-2); border-left: 4px solid var(--meg-brand); }
.form .form_notice.is-error { border-left-color: var(--meg-danger); color: var(--meg-danger); }
.form input:user-invalid, .form textarea:user-invalid { border-color: var(--meg-danger); }

/* ---------- Блок «Узнайте больше» ---------- */
.about_products .product_about_title { font-size: var(--meg-fs-h2) !important; line-height: 1.2 !important; }

/* ---------- Главная: компактный первый экран ---------- */
@media (min-width: 769px) {
  body.meg-home main .hero .hero_content { padding-top: 40px !important; padding-bottom: 48px !important; }
  body.meg-home main .hero .hero_logo { margin-bottom: 56px !important; }
  body.meg-home main .hero { margin-bottom: var(--meg-s4) !important; }
}
@media (max-width: 768px) {
  body.meg-home main .hero .hero_content { padding-bottom: 48px !important; }
  body.meg-home main .hero { margin-bottom: var(--meg-s4) !important; }
}

/* ---------- Зона нажатия не меньше 24 px (WCAG 2.5.8) ---------- */
.header_menu > li > a, .header .dropdown_menu_btn { padding-top: 6px; padding-bottom: 6px; }
footer a { display: inline-block; padding: 4px 0; }
.request_link { display: inline-block; padding: 6px 0; }
.news a:not([class]) { display: inline-block; min-height: 24px; }

/* текст согласия одним блоком рядом с чекбоксом */
.form .meg_consent_text { flex: 1 1 auto; }
.form .meg_consent_text .policy { display: inline; }
.form .meg_selected a { color: var(--meg-brand); font-weight: 600; }
body:not(.meg-home) main .hero .hero_title span { color: var(--meg-brand) !important; }

/* поля формы: рамка фокуса видна и при щелчке мышью, и при переходе клавишей Tab */
.form input:focus, .form textarea:focus, .form button:focus, .form input[type="file"]:focus { outline: var(--meg-focus) !important; outline-offset: 2px; }