/* 重置和基础样式 */
.bobo-sidebanner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  height: 280px;
  display: flex;
  align-items: center;
}

.bobo-sidebanner .container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* 默认左对齐 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 居中对齐变体 */
.bobo-sidebanner .container .center {
  align-items: center !important;
  text-align: center !important;
}

.bobo-sidebanner .container h1,
.bobo-sidebanner .container h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 15px 0;
  color: #333;
  line-height: 1.2;
}

.bobo-sidebanner .container .path {
  font-size: 14px;
  color: #666;
}

.bobo-sidebanner .container .path a {
  color: #666;
  text-decoration: none;
}

.bobo-sidebanner .container .path a:hover {
  color: #333;
  text-decoration: underline;
}

/* iPad 专用修复 - 使用更精确的媒体查询 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .bobo-sidebanner {
    height: 300px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }
  
  .bobo-sidebanner .container {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0 40px !important;
  }
  
  /* 强制居中所有内容 */
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2,
  .bobo-sidebanner .container .path {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .bobo-sidebanner .container .left,
  .bobo-sidebanner .container .center {
    align-items: center !important;
    text-align: center !important;
  }
}

/* iPad 横屏模式 */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .bobo-sidebanner {
    height: 350px !important;
  }
}

/* iPad Pro */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  .bobo-sidebanner {
    height: 400px !important;
  }
  
  .bobo-sidebanner .container {
    padding: 0 60px !important;
  }
}

/* 响应式字体大小 */
@media screen and (max-width: 1500px) {
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    font-size: 32px;
  }
}

@media screen and (max-width: 1280px) {
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    font-size: 28px;
  }
}

@media screen and (max-width: 1200px) {
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    font-size: 26px;
  }
}

@media screen and (max-width: 992px) {
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    font-size: 32px;
  }
  
  .bobo-sidebanner {
    height: 250px;
  }
  
  .bobo-sidebanner .container {
    padding: 0 30px;
  }
}

@media screen and (max-width: 768px) {
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    font-size: 28px;
  }
  
  .bobo-sidebanner {
    height: 200px;
    padding: 30px 0;
  }
  
  .bobo-sidebanner .container {
    padding: 0 20px;
  }
}

@media screen and (max-width: 576px) {
  .bobo-sidebanner .container h1,
  .bobo-sidebanner .container h2 {
    font-size: 24px;
  }
  
  .bobo-sidebanner {
    height: 180px;
  }
  
  .bobo-sidebanner .container {
    padding: 0 15px;
  }
}

/* 最强效的iPad居中修复 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  div[class*="bobo-sidebanner"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }
  
  div[class*="bobo-sidebanner"] .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  div[class*="bobo-sidebanner"] .container > * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}