/* ==========================================================================
   Komater Tools - 主样式表
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 变量（自定义属性）
   -------------------------------------------------------------------------- */
   :root {
    --bs-primary: #3897B3;      /* 主品牌色 - 蓝色 */
    --bs-primary-rgb: 56, 151, 179; /* 主品牌色 RGB for Bootstrap utilities */
    --bs-primary-light: #4EC1C4; /* 主色调的浅色变体 */
    --bs-background: #F2F7F7;    /* 主背景色 */
    --bs-highlight: #F1C40F;     /* 强调色 - 黄色 */
    --bs-text-dark: #2C3E50;     /* 深色文字 */
  }
  
  /* --------------------------------------------------------------------------
     2. 基础样式
     -------------------------------------------------------------------------- */
  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bs-background);
    color: var(--bs-text-dark);
    margin: 0;
    min-width: 320px; /* 防止在小屏幕上出现横向滚动条 */
  }
  
  /* 全宽区域通用类 */
  /* 已迁移到utilities.css，无需保留 */
  
  /* --------------------------------------------------------------------------
     3. 排版样式
     -------------------------------------------------------------------------- */
  h1, h2 {
    font-weight: 600;
    color: var(--bs-text-dark);
  }
  
  .highlight {
    color: var(--bs-highlight);
  }

/* Factory Tour Page Specific Styles */

/* Hero Section */
.tour-hero-section {
  min-height: 60vh; /* Adjust as needed */
  /* background-image: url('../../assets/images/placeholder-hero-factory.jpg'); */ /* Removed, will be handled by <img> tag */
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden; /* To contain the absolutely positioned image */
}

.tour-hero-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
  object-position: center; /* Centers the image within its bounds */
  z-index: 0; /* Behind the overlay and content */
}

.tour-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--bs-primary-rgb), 0.5); /* Using Bootstrap primary color with opacity */
  z-index: 1;
}

.tour-hero-section h1 {
  font-weight: 700; /* Bolder title */
  color: #ffffff !important; /* Ensure hero title is white */
}

/* Common Section Title Styling */
.section-title {
  font-weight: 600;
  color: var(--bs-text-dark);
  position: relative;
  padding-bottom: 15px; /* Space for the underline */
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px; /* Width of the underline */
  height: 3px; /* Thickness of the underline */
  background-color: var(--bs-primary); /* Use primary color for underline */
}

/* Specific section styling if needed */
.tour-welcome-overview-section .list-unstyled li {
  padding: 0.3rem 0;
}

.tour-welcome-overview-section .list-unstyled i {
  font-size: 1.2rem;
}

/* Production Journey Section */
.process-item .process-title {
  color: var(--bs-primary);
}

.process-item img:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease-in-out;
}

/* Technology & Innovation Section */
.tour-technology-innovation-section h4, 
.tour-quality-assurance-section h4,
.tour-team-section h4 {
  color: var(--bs-text-dark);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Certifications */
.tour-quality-assurance-section img[alt*="Certified"], 
.tour-quality-assurance-section img[alt*="Logo"] {
  filter: grayscale(50%);
  transition: filter 0.3s ease;
}

.tour-quality-assurance-section img[alt*="Certified"]:hover,
.tour-quality-assurance-section img[alt*="Logo"]:hover {
  filter: grayscale(0%);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .tour-hero-section {
    min-height: 40vh;
  }
  .tour-hero-section h1 {
    font-size: 2.5rem;
  }
  .section-title::after {
    width: 60px;
  }
  .process-item.flex-row-reverse .col-lg-6:first-child {
    order: 1 !important; /* Ensure image is first on mobile for reversed rows */
  }
   .process-item.flex-row-reverse .col-lg-6:last-child {
    order: 2 !important; /* Ensure text is second on mobile for reversed rows */
  }
}

/* Ensure all Bootstrap icons within the main tour content use the primary color */
.factory-tour-main-content [class*="bi-"] {
  color: var(--bs-primary) !important; /* Ensure this overrides other styles if necessary */
}

/* General image size control for content images to prevent layout breaking */
.factory-tour-main-content section:not(.tour-hero-section) img.img-fluid {
  max-height: 450px; /* Adjust this value as needed, e.g., 400px, 500px */
  width: auto; /* Recalculate width if height is constrained by max-height, maintaining aspect ratio */
  display: block; /* Needed for margin auto to work for horizontal centering */
  margin-left: auto;
  margin-right: auto;
}