/* Page styles are scoped to keep existing solution detail pages unchanged. */
.ai-education-page { color: #444; font-family: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; }
.ai-container { width: 62.5%; max-width: 1200px; margin-inline: auto; }
.ai-education-page .ai-hero { background-image: linear-gradient(rgba(0, 86, 185, .4), rgba(0, 86, 185, .4)), url('../../image/ai-education/detail/detail-hero-background.png'); background-position: center top; }
.ai-category { background: #f5f6fa; }
.ai-category span { display: inline-block; padding: 20px 0 15px; border-bottom: 3px solid #0056b9; font-size: 16px; line-height: 20px; }
.ai-main { padding-bottom: 64px; }
.ai-breadcrumb { padding: 32px 0 30px; font-size: 14px; line-height: 20px; }
.ai-breadcrumb a { color: #555; }
.ai-section-title { margin: 0 0 20px; color: #0056b9; font-size: 20px; font-weight: 700; line-height: 24px; }
.ai-classroom { position: relative; }
.ai-classroom__image { display: block; width: 100%; height: 466px; object-fit: cover; }
.ai-classroom__label { position: absolute; right: 0; top: 27%; width: 215px; padding: 28px; color: white; background: rgba(0, 86, 185, .8); }
.ai-classroom__label h3 { font-size: 24px; line-height: 1.4; margin: 0 0 10px; font-weight: 700; }
.ai-classroom__label p { font-size: 18px; line-height: 1.5; margin: 0; padding-top: 10px; border-top: 1px solid #fff; }
.ai-classroom__caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 40px; background: rgba(0, 86, 185, .8); color: #fff; }
.ai-classroom__caption h3 { font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0 0 6px; }
.ai-classroom__caption p { font-size: 12px; line-height: 1.8; margin: 0; }
.ai-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px; margin-top: 28px; }
.ai-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 280 / 172; object-fit: cover; }
.ai-case { margin-top: 28px; }
.ai-case h2 { border-left: 9px solid #0056b9; padding-left: 12px; margin: 0 0 28px; font-size: 32px; line-height: 1.3; font-weight: 700; color: #0056b9; }
.ai-case__images { display: grid; grid-template-columns: 835fr 365fr; }
.ai-case__images img { display: block; width: 100%; height: auto; aspect-ratio: 835 / 352; object-fit: cover; }
.ai-case__images img + img { aspect-ratio: 365 / 352; }
.ai-case__caption { background: #0056b9; color: #fff; padding: 20px; }
.ai-case__caption p { font-size: 16px; line-height: 2; margin: 0; }
.ai-education-page a:focus-visible { outline: 3px solid #0056b9; outline-offset: 4px; }
@media (min-width: 769px) and (max-width: 1024px) {
  .ai-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ai-container { width: auto; margin-inline: .373rem; }
  .ai-category { border-bottom: 1px solid #e0e0e0; }
  .ai-category .ai-container { margin: 0 .427rem; }
  .ai-category span { font-size: .373rem; line-height: .56rem; font-weight: 500; color: #005cac; padding: .267rem 0; border-bottom: .053rem solid #005cac; }
  .ai-main { padding-top: .72rem; padding-bottom: 40px; }
  .ai-breadcrumb, .ai-section-title { display: none; }
  .ai-classroom__image { height: auto; aspect-ratio: 3 / 2; }
  .ai-classroom__label { top: 12%; width: auto; padding: 12px 16px; }
  .ai-classroom__label h3 { font-size: 18px; margin-bottom: 6px; }
  .ai-classroom__label p { font-size: 14px; padding-top: 6px; }
  .ai-classroom__caption { position: static; padding: 18px; background: #0056b9; }
  .ai-classroom__caption p { font-size: 14px; }
  .ai-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .ai-case h2 { font-size: 26px; margin-bottom: 20px; border-left-width: 6px; }
  .ai-case__images { grid-template-columns: 1fr; gap: 12px; }
  .ai-case__images img, .ai-case__images img + img { aspect-ratio: 3 / 2; }
  .ai-case__caption { padding: 18px; }
  .ai-case__caption p { font-size: 14px; line-height: 1.9; }
}