/* ==========================================================================
   Hengjia Machinery — responsive.css（响应式 + 后加载组件基样式）
   --------------------------------------------------------------------------
   ⚠️ 本文件最后加载。顶层全局规则（sidebar/news-sidebar/product-sidebar/
   contact-form/breadcrumb/nav 等）是刻意放在最后的历史覆盖层——同样的选择器
   若在前面文件也有定义，以本文件为准。❗不要把这些规则搬到前面的文件，
   否则会翻转级联顺序、改变现有外观（如需重组须走快照对比流程）。
   @media 段为各断点适配规则。
   ========================================================================== */
.sidebar-widget {
  margin-bottom: 20px;
}

.sidebar-widget__title {
  background: var(--color-primary);
  color: #ffffff;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0;
}

/* About Sidebar BEM */
.about-sidebar__list {
  border: none;
  list-style: none;
  padding: 0;
  margin: 0;
}




/* News Sidebar BEM */
.news-sidebar__list {
  border: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-sidebar__item {
  margin-top: 2px;
}

.news-sidebar__item.active {
  background: var(--color-primary);
}

.news-sidebar__link {
  display: block;
  line-height: 50px;
  padding: 0 0 0 25px;
  font-size: 15px;
  color: #666666;
  background-color: #ececec;
  transition: var(--transition);
}

.news-sidebar__link:hover,
.news-sidebar__item.active .news-sidebar__link {
  color: #ffffff;
  background: var(--color-primary);
  padding-left: 25px;
}

/* Product Sidebar BEM */
.product-sidebar__list {
  border: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-sidebar__item {
  margin-top: 2px;
}

.product-sidebar__item.active {
  background: var(--color-primary);
}

.product-sidebar__link {
  display: block;
  line-height: 50px;
  padding: 0 0 0 25px;
  font-size: 15px;
  color: #666666;
  background-color: #ececec;
  transition: var(--transition);
}

.product-sidebar__link:hover,
.product-sidebar__item.active .product-sidebar__link {
  color: #ffffff;
  background: var(--color-primary);
  padding-left: 25px;
}

/* --------------------------------------------------------------------------
   2.10 Contact Form 组件基样式（历史追加，后加载覆盖层）
   （表单提示样式已收敛到 page-contact.css 1.25 的 .hengjia-notice，此处不再重复）
   -------------------------------------------------------------------------- */
.contact-form__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--color-text);
}

.contact-form__required {
  color: var(--color-accent);
}

.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 14px;
  font-family: var(--font-family);
  transition: var(--transition);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

.contact-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form__group--submit {
  margin-top: 10px;
}

.contact-form__submit {
  display: inline-block;
  background: var(--color-accent);
  color: #ffffff;
  padding: 12px 30px;
  border-radius: var(--border-radius);
  font-size: 15px;
  font-weight: 700;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.contact-form__submit:hover {
  background: var(--color-accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   2.11 Breadcrumb 组件基样式（历史追加，后加载覆盖层）
   -------------------------------------------------------------------------- */
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  font-size: 13px;
  color: var(--color-text-light);
}

.breadcrumb__item::before {
  content: "\203A";
  margin-right: 5px;
  color: var(--color-border);
}

.breadcrumb__item:first-child::before {
  display: none;
}

.breadcrumb__item--active {
  color: var(--color-text);
  font-weight: 700;
}

.breadcrumb__link {
  color: var(--color-text-light);
  font-size: 13px;
}

.breadcrumb__link:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   2.12 Post Navigation 组件基样式（历史追加，后加载覆盖层）
   -------------------------------------------------------------------------- */
.nav-links {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-previous {
  text-align: left;
  flex: 1;
  max-width: 48%;
}

.nav-next {
  text-align: right;
  flex: 1;
  max-width: 48%;
  margin-left: auto;
}

.nav-previous__link,
.nav-next__link {
  display: block;
  font-size: 14px;
  color: var(--color-text-light);
  transition: var(--transition);
}

.nav-previous__link:hover,
.nav-next__link:hover {
  color: var(--color-accent);
}

.nav-previous__label,
.nav-next__label {
  display: block;
  font-size: 12px;
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.nav-previous__title,
.nav-next__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2.13 Header 追加样式（历史追加，后加载覆盖层）
   -------------------------------------------------------------------------- */
.header-main__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-main__logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* Logo 尺寸统一由 layout.css 的 .header-main__logo img（400×67）控制，
   此处不再重复定义，避免低特异性死规则误导维护。 */

.header-main__logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}

.header-main__info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-main__phone-label {
  font-size: 13px;
  color: var(--color-text-light);
  display: block;
  font-weight: 400;
}

/* 电话号码字号/字重/颜色已统一收敛到 layout.css 的 .header-main__phone-number，
   此处不再重复定义（原 22px/accent 红与 layout.css 的 a 主色规则互相打架）。 */

.menu-toggle__icon {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  margin: 5px 0;
  transition: var(--transition);
}

/* --------------------------------------------------------------------------
   2.14 Footer
   页脚样式已统一收敛到 pages-common.css 的「1.20 Footer」一节（基础样式 + 992/640 断点）。
   此处不再重复定义，避免同一选择器分散在多个文件里互相覆盖。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2.15 Mobile Navigation Panel BEM Additions
   （遮罩样式在 layout.css 的 .mobile-nav-overlay —— 1.4.11 起遮罩是面板的
   兄弟节点，嵌在面板内的 .mobile-nav-panel__overlay 已随结构修正删除）
   -------------------------------------------------------------------------- */
.mobile-nav-panel__content {
  position: relative;
  z-index: 1001;
  padding: 20px;
}

.mobile-nav-panel__close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
}

.mobile-nav-panel__close-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  position: relative;
}

.mobile-nav-panel__close-icon::before,
.mobile-nav-panel__close-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background: #ffffff;
  top: 50%;
  left: 0;
}

.mobile-nav-panel__close-icon::before {
  transform: rotate(45deg);
}

.mobile-nav-panel__close-icon::after {
  transform: rotate(-45deg);
}

.mobile-nav-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-panel__list a {
  display: block;
  padding: 15px 20px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
}

.mobile-nav-panel__list a:hover {
  background: var(--color-primary-dark);
}

.mobile-nav-panel__phone {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-panel__phone-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.mobile-nav-panel__phone-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   2.16 Mobile Bottom Nav（历史追加）
   -------------------------------------------------------------------------- */
.mobile-bottom-nav__icon {
  width: 20px;
  height: 20px;
}

.mobile-bottom-nav__label {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   2.17 Top Bar 追加样式（历史追加）
   -------------------------------------------------------------------------- */
.top-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar__welcome {
  font-size: 13px;
  color: var(--color-text-light);
}

/* --------------------------------------------------------------------------
   2.18 Main Nav 追加样式（历史追加）
   -------------------------------------------------------------------------- */
.main-nav__inner {
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   2.19 主导航平板自适应
   supplement-common.css 把导航项固定 172px（×5=860px），而主导航 ≤768px 才隐藏，
   769–889px 区间必溢出（实测 850px 时全站横向溢出 25px）。
   此规则只作用于 769–900px：改为均分容器宽度；≤768 导航隐藏，桌面端不变。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .main-nav__list > li {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .main-nav__list > li > a {
    padding: 0 6px;
  }
}

/* --------------------------------------------------------------------------
   2.27 Responsive - Additional Missing Responsive Rules
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .archive-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-news__columns {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 联系页：双栏堆叠，卡片改两列，地图降高 */
  .page-contact__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-contact__grid {
    grid-template-columns: 1fr;
  }

  .page-contact__map #map-container {
    height: 300px !important;
  }
}

@media (max-width: 768px) {
  /* 1.4.24：两栏布局改 Grid 后，塌为单栏由 grid-template-columns 接管
     （原 flex-direction: column 对 Grid 容器无效） */
  .archive-products__layout,
  .archive-news__layout,
  .single-product__layout,
  .single-post__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .archive-products__sidebar,
  .archive-news__sidebar,
  .single-product__sidebar,
  .single-post__sidebar {
    width: 100%;
  }

  .archive-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-news__columns {
    grid-template-columns: 1fr;
  }

  .product-showcase__gallery,
  .product-showcase__info {
    width: 100%;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }

  .contact-info-grid__card {
    flex-direction: column;
    text-align: center;
  }

  .nav-links {
    flex-direction: column;
    gap: 10px;
  }

  .nav-previous,
  .nav-next {
    max-width: 100%;
  }

  .article-header__meta {
    flex-direction: column;
    gap: 5px;
  }

  .share-buttons__list {
    flex-wrap: wrap;
  }

  .header-main__inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .archive-products__grid {
    grid-template-columns: 1fr;
  }

  .related-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-posts__list {
    grid-template-columns: 1fr;
  }

  .home-links__list {
    flex-direction: column;
  }

  /* 联系页：卡片 2→1 */
  .page-contact__cards {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   1.27 Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }

  .header-main__phone {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
  }

  .mobile-nav-panel {
    display: block;
  }

  /* 1.4.26（BUG-01 修复）：原为 display:block，导致 .mobile-bottom-nav__item
     的 flex:1 失效（4 项因此等距挤在左侧、未铺满宽度）。改为 flex 后
     4 个入口等宽铺满视口。 */
  .mobile-bottom-nav {
    display: flex;
  }









  .news-card__link {
    flex-direction: column;
  }

  .news-card__image {
    width: 100%;
    height: 180px;
  }

  /* 1.4.24：改 Grid 后单栏由栅格接管（原 flex-direction: column 对 Grid 无效） */
  .product-showcase {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
  }



  .banner-slider .swiper-slide {
    height: 200px;
  }

  .post-navigation {
    flex-direction: column;
    gap: 10px;
  }

  .post-navigation a {
    max-width: 100%;
  }

  body {
    padding-bottom: 60px;
  }
}

@media (max-width: 480px) {




  .related-posts__list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   关于我们页面：平板收窄 → 手机单栏
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .page-about__layout {
    gap: 36px;
  }
}

@media (max-width: 900px) {
  .page-about__layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-about__media-img {
    height: auto;    /* 单栏后恢复固定比例，不再跟随左栏高度 */
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 480px) {
  .page-about__brand-logo {
    height: 44px;
  }

  .page-about__title {
    font-size: 20px;
    padding-left: 13px;
    margin-bottom: 16px;
  }

  .page-about__media-img {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   热门关键词栏：手机端改纵向堆叠
   （横向排列时关键词列被挤压到几十像素宽，文字会逐字竖排）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hot-keywords .container,
  .hot-keywords__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .hot-keywords__left {
    flex: 0 0 auto;
    flex-wrap: wrap;
    width: 100%;
  }

  .hot-keywords__list {
    width: 100%;
  }

  .hot-keywords__list a {
    padding: 1px 8px;
    font-size: 12px;
    line-height: 18px;
  }

  .hot-keywords__search {
    width: 100%;
  }

  /* 移动端搜索表单铺满整行：输入框弹性伸缩，按钮等宽固定 */
  .hot-keywords__search form {
    width: 100%;
    height: 32px;
  }

  .hot-keywords__search input,
  .hot-keywords__search button {
    height: 32px;
  }

  .hot-keywords__search input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    line-height: 30px;
  }

  .hot-keywords__search button {
    width: 54px;
  }
}

/* --------------------------------------------------------------------------
   首页产品区：手机端纵向堆叠 + 两列网格
   （原 768px 断点漏掉本区块，横向排列时产品卡片被压成几十像素宽的细条）
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 1.4.24：改 Grid 后单栏由栅格接管（原 flex-direction: column 对 Grid 无效） */
  .home-products__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .home-products__sidebar {
    width: 100%;
  }

  /* 产品分类改为两列按钮，避免全宽长列表 */
  .product-sidebar__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .product-sidebar__link {
    line-height: 42px;
    padding: 0 12px;
    font-size: 14px;
    text-align: center;
    border-radius: var(--border-radius);
  }

  .product-sidebar__item.active {
    background: transparent;
  }

  .product-sidebar__link:hover,
  .product-sidebar__item.active .product-sidebar__link {
    padding-left: 12px;
  }

  .home-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   正文内嵌内容：不撑破容器
   （编辑器插入的视频 iframe 常带固定 width，会把整页顶宽，连带底部导航被拉长）
   -------------------------------------------------------------------------- */
.article-content iframe,
.article-content embed,
.article-content object,
.article-content video,
.article-content table,
.product-detail__content iframe,
.product-detail__content embed,
.product-detail__content object,
.product-detail__content video,
.product-detail__content table,
.page-content iframe,
.page-content embed,
.page-content video,
.page-content table {
  max-width: 100%;
}

.article-content img,
.page-content img {
  max-width: 100%;
  height: auto;
}