/*
  energoset-spb.ru main stylesheet
  Tokens: см. src/design/tokens.json
  Critical-CSS inline в base.php.j2 на следующем шаге.
*/

/* === Reset & base === */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1E1E1E;
  background: #F5F7FA;
  font-feature-settings: "ss01", "cv11";
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: #0F2D4D; text-decoration: none; }
a:hover { color: #FF6B1A; }
button { font: inherit; cursor: pointer; }

/* === Container === */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

/* === Typography === */
h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 700; margin: 32px 0 16px; }
h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.3; font-weight: 600; margin: 24px 0 12px; }
h4 { font-size: 16px; font-weight: 600; margin: 16px 0 8px; }
p { margin: 0 0 16px; }
.mono { font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13px; }

/* === Header === */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid #E1E5EB;
}
.header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 72px;
}
.logo img { height: 36px; width: auto; }
.nav-primary { display: flex; gap: 24px; flex: 1; margin-left: 32px; }
.nav-primary a {
  color: #1E1E1E;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 0;
  position: relative;
}
.nav-primary a:hover { color: #FF6B1A; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.phone {
  font-weight: 700;
  font-size: 16px;
  color: #0F2D4D;
}
.cart {
  position: relative;
  color: #0F2D4D;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
}
.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  background: #FF6B1A; color: #FFFFFF;
  font-size: 11px; font-weight: 700;
  border-radius: 10px;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.burger { display: none; background: none; border: 0; padding: 8px; }
.burger span { display: block; width: 24px; height: 2px; background: #0F2D4D; margin: 5px 0; transition: 0.2s; }

@media (max-width: 1023px) {
  .nav-primary { display: none; }
  .burger { display: block; }
}

/* === Breadcrumbs === */
.breadcrumbs { padding: 16px 0; font-size: 13px; color: #5A6776; }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #8A95A2; }
.breadcrumbs a { color: #5A6776; }

/* === Layout === */
.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding: 16px 0 64px;
  align-items: start;
}
.content {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(15, 45, 77, 0.06);
}
.sidebar {
  position: sticky;
  top: 88px;
}
@media (max-width: 1023px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* === Sidebar === */
.sidebar-inner { display: flex; flex-direction: column; gap: 16px; }
.sidebar-card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 45, 77, 0.06);
}
.sidebar-card h3 { margin: 0 0 12px; font-size: 16px; }
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin-bottom: 6px; }
.sidebar-nav a {
  display: block; padding: 6px 0;
  font-size: 14px;
  color: #1E1E1E;
}
.sidebar-callback { background: linear-gradient(135deg, #0F2D4D, #1A4A7A); color: #FFFFFF; }
.sidebar-callback h3 { color: #FFFFFF; }
.sidebar-callback p { color: #C7D6E9; font-size: 13px; }
.sidebar-sape {
  font-size: 12px;
  color: #5A6776;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #E1E5EB;
}
.sidebar-sape a { font-size: 12px; }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0; border-radius: 6px;
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  transition: 0.15s background, 0.15s color, 0.15s transform;
}
.btn-primary { background: #0F2D4D; color: #FFFFFF; }
.btn-primary:hover { background: #1A4A7A; color: #FFFFFF; }
.btn-accent { background: #FF6B1A; color: #FFFFFF; }
.btn-accent:hover { background: #FF8847; color: #FFFFFF; }
.btn-ghost { background: transparent; color: #0F2D4D; border: 1px solid #E1E5EB; }
.btn-ghost:hover { border-color: #0F2D4D; color: #0F2D4D; }

/* === Footer === */
.footer { background: #0A1A2E; color: #C7D6E9; padding: 64px 0 24px; margin-top: 64px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer h4 { color: #FFFFFF; font-size: 15px; margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 8px; }
.footer ul a { color: #C7D6E9; font-size: 14px; }
.footer ul a:hover { color: #FF6B1A; }
.footer-col p { font-size: 14px; line-height: 1.5; }
.footer-col p a { color: #FFFFFF; font-weight: 600; }
.footer-tagline { color: #8FA4BC; margin-top: 16px; font-size: 14px; }
.footer-bottom {
  border-top: 1px solid #1B3A5C;
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px;
}
.footer-rights { color: #8FA4BC; margin: 0; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.footer-legal a { color: #8FA4BC; font-size: 13px; }

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* === Product card / catalog grid === */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  background: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E1E5EB;
  overflow: hidden;
  transition: 0.15s box-shadow, 0.15s transform;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: 0 12px 32px rgba(15, 45, 77, 0.12); transform: translateY(-2px); }
.card-img { aspect-ratio: 4/3; background: #F5F7FA; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.card h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.3; }
.card-meta { font-size: 13px; color: #5A6776; margin-bottom: 12px; }
.card-price { font-weight: 700; font-size: 18px; color: #0F2D4D; margin-top: auto; margin-bottom: 12px; }
.card-actions { display: flex; gap: 8px; }
.card-actions .btn { flex: 1; padding: 10px 12px; font-size: 14px; }

/* === A11y / mobile fixes === */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
img, video, table { max-width: 100%; height: auto; }
.container { max-width: 100%; box-sizing: border-box; }
pre, code { white-space: pre-wrap; word-break: break-word; }
table { word-break: break-word; }

/* Все кликабельные элементы — ≥44px на мобиле */
@media (max-width: 768px) {
  a, button, .btn, .card, summary {
    min-height: 44px;
  }
  .nav-primary a, .footer-legal a, .footer ul a {
    display: inline-block;
    padding: 10px 8px;
    line-height: 1.3;
  }
  .breadcrumbs a, .breadcrumbs li {
    padding: 4px 4px;
    line-height: 1.3;
  }
}

/* Product hero — на mobile в столбик */
.product-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}
.product-photo img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #E1E5EB;
}
.product-summary { display: flex; flex-direction: column; gap: 16px; }
.spec-table { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.spec-table dt { color: #5A6776; font-size: 14px; }
.spec-table dd { margin: 0; font-size: 15px; font-weight: 500; }
.spec-table dd.price { font-weight: 700; font-size: 20px; color: #0F2D4D; }
.product-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.cta-box { background: #F5F7FA; border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }

@media (max-width: 768px) {
  .product-hero { grid-template-columns: 1fr; }
  .product-cta { flex-direction: column; }
  .product-cta .btn { width: 100%; }
}

/* FAQ */
.faq-item {
  border: 1px solid #E1E5EB;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.faq-item summary {
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}
.faq-item p { margin: 12px 0 0; line-height: 1.6; }

/* Blog */
.blog-list { list-style: none; padding: 0; }
.blog-list li { padding: 8px 0; border-bottom: 1px solid #EAEEF3; }
.blog-list a { font-size: 16px; }
.blog-recent { list-style: none; padding: 0; }

.card-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 180px;
  background: linear-gradient(135deg, #1B3A5C, #0F2D4D);
  color: #FFFFFF; font-weight: 600; font-size: 14px;
}

.product-card { color: inherit; text-decoration: none; }
.product-card:hover h3 { color: #FF6B1A; }

/* Lead paragraphs */
.lead { font-size: 18px; line-height: 1.6; color: #2A3744; margin: 16px 0 24px; }
.meta-info { font-size: 13px; color: #8FA4BC; margin: 8px 0 24px; }

/* Article body — long-read responsive */
.product-desc, article.content {
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 768px) {
  .product-desc h2, .product-desc h3, article h2, article h3 {
    word-break: break-word;
  }
  pre, table { overflow-x: auto; max-width: 100%; }
}