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

/* --------------------------------------------------------------------------
   1. CSS 变量（自定义属性）
   -------------------------------------------------------------------------- */
   :root {
    --bs-primary: #3897B3;      /* 主品牌色 - 蓝色 */
    --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);
  }

  .hero-section {
    min-height: 60vh; /* Consistent height with tour page */
    /* background-image: url('../../../assets/images/about/hero-background.jpg'); */ /* Removed */
    /* background-size: cover; */ /* Handled by img tag styles */
    /* background-position: center; */ /* Handled by img tag styles */
    position: relative; /* For internal absolute positioning */
    /* padding: 8rem 1.5rem; */ /* Padding might not be needed if content is flex-centered */
    color: #fff; /* Ensure text color is white */
    overflow: hidden; /* To contain the absolutely positioned image */
  }

  .hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0; /* Behind overlay and content */
  }

  .hero-overlay {
    position: absolute; /* 绝对定位于 .hero-section内部 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 使用您在 variables.css 中定义的品牌主色，并调整透明度 */
    /* 假设 --color-primary 是 #3897B3 */
    background-color: rgba(56, 151, 179, 0.5); /* 0.5 代表 50% 透明度 */
    z-index: 1; /* 确保蒙版在背景图片之上，文本内容之下 */
  }

  /* 如果您想将 hero-section 内部 container 的样式也移过来 */
  .hero-section .container {
      position: relative;
      z-index: 2; /* 确保内容在蒙版之上 */
  }

.hero-section h1 {
  color: #fff !important; /* Ensure hero title is white, overriding other styles if necessary */
}

.core-intro-box {
  /* background-color: var(--color-background); */ /* 移除或注释掉背景色 */
  border: 1px solid #dee2e6; /* 添加一个标准的浅灰色边框 */
  /* border-radius: 0.25rem; */ /* .rounded 类已处理，如果需要自定义则取消注释 */
}

.core-intro-box h2 {
  color: var(--bs-text-dark); /* 确保标题颜色在无背景时清晰 */
}

.core-intro-box p {
  font-size: 1rem; /* 标准字体大小 */
  font-weight: 400; /* 标准字重 */
  line-height: 1.7;
  color: var(--text-primary);
  margin-bottom: 1rem; /* 添加标准段落下边距 */
}

/* Timeline Section Styles */
.timeline-section {
  background-color: var(--bg-secondary); /* Or a light grey if preferred */
}

.timeline-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the line) */
.timeline-container::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--color-primary-light);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-item {
  padding: 10px 40px; /* This padding creates space around the .timeline-content for the ::after pseudo-element */
  position: relative;
  background-color: inherit;
  width: 50%;
  /* transition: transform 0.3s ease-in-out; Moved to .timeline-content */
}

.timeline-item:hover .timeline-content {
  transform: scale(1.03);
  z-index: 10; /* To bring the content box жертвуя when scaled */
  /* Note: If the scaled content box visually overlaps with ::after of an adjacent item,
     this z-index on .timeline-content might need careful adjustment or might not perfectly prevent it.
     The original z-index on .timeline-item:hover was better for overall item stacking. */
}

/* The circles on the timeline */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px; /* Adjusted for the 6px line width */
  background-color: var(--bg-secondary);
  border: 4px solid var(--color-accent);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the item to the left */
.timeline-item:nth-child(odd) {
  left: 0;
}

/* Place the item to the right */
.timeline-item:nth-child(even) {
  left: 50%;
}

/* Fix the circle for items on the right side */
.timeline-item:nth-child(even)::after {
  left: -13px; /* Adjusted for the 6px line width */
}

/* The content */
.timeline-content {
  /* padding set by odd/even rules for edge alignment */
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: var(--bg-secondary);
  border-radius: 0;
  border: 1px solid var(--color-primary-light);
  display: flex; /* Re-introduced flex */
  align-items: stretch; /* Key: makes children (img container & text container) same height */
  gap: 15px; /* Gap between image container and text container */
  transition: transform 0.3s ease-in-out; /* Added transition here */
  position: relative; /* Needed if z-index is to be applied on hover */
}

.timeline-content .timeline-img {
  width: 40%; /* Image container still takes 40% of width */
  flex-shrink: 0;
  display: flex; /* To help center the image if it's narrower than container due to aspect ratio */
  justify-content: center; /* Horizontally center image within its 40% container */
  align-items: center; /* Vertically center image within its 40% container (which is stretched) */
}

.timeline-content .timeline-img img {
  max-width: 100%; /* Image won't exceed its container's width */
  max-height: 100%; /* Image won't exceed its container's height */
  width: auto;   /* Adjust width to maintain aspect ratio after height is constrained by max-height */
  height: auto;  /* Adjust height to maintain aspect ratio after width is constrained by max-width */
  object-fit: contain; /* Ensures entire image is visible, scaled down to fit, maintains aspect ratio */
  border-radius: 0;
  display: block;
  /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); Optional: can be kept */
}

.timeline-text-details {
  /* position, top, bottom, left, right removed */
  flex-grow: 1; /* Takes remaining width */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* overflow: hidden; /* Can be removed or kept based on desired text overflow behavior */
  box-sizing: border-box;
}

/* For ODD items (image on left, text on right) */
.timeline-item:nth-child(odd) .timeline-content {
  flex-direction: row; /* Image container on left, text on right */
  padding-left: 0; /* Image container (and thus image edge) touches left edge of line box */
  padding-right: 15px; /* Right padding for text area (gap is already handled) */
}
/* .timeline-item:nth-child(odd) .timeline-content .timeline-img { } */ /* No specific style needed here now */
.timeline-item:nth-child(odd) .timeline-text-details {
  /* width: auto; Removed as flex-grow handles it */
  text-align: center; /* Changed from left to center */
}

/* For EVEN items (image on right, text on left) */
.timeline-item:nth-child(even) .timeline-content {
  flex-direction: row-reverse; /* Text on left, image container on right */
  padding-left: 15px; /* Left padding for text area */
  padding-right: 0; /* Image container (and image edge) touches right edge */
}
/* .timeline-item:nth-child(even) .timeline-content .timeline-img { margin-left: 0; } */ /* No margin needed */
.timeline-item:nth-child(even) .timeline-text-details {
  /* width: auto; Removed */
  text-align: center; /* Changed from right to center */
}

.timeline-text-details h3 {
  color: var(--color-primary-dark);
  margin-top: 0; /* Remove default top margin if any */
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.timeline-text-details p {
  color: var(--text-light);
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .timeline-container::after {
    left: 31px;
  }
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0;
  }
  .timeline-item::after {
    left: 18px; /* Adjusted for the 6px line and new layout */
  }
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    /* text-align: left; */ /* Handled by .timeline-text-details now */
    flex-direction: column; /* Stack image and text vertically on small screens */
  }

  .timeline-item:nth-child(odd) .timeline-text-details,
  .timeline-item:nth-child(even) .timeline-text-details {
    text-align: left; /* Ensure text is left-aligned in column layout */
  }

  .timeline-content .timeline-img {
    width: 100%; /* Image takes full width in column layout */
    margin-bottom: 10px; /* Add space between image and text when stacked */
  }
}

/* OEM/ODM Services Section Styles */
.oem-odm-section {
  background-color: var(--bg-primary); /* Or slightly different from main bg for contrast */
}

.oem-odm-section h2 {
  color: var(--color-primary-dark);
}

.service-card {
  background-color: var(--bg-secondary);
  /* border: 1px solid #e0e0e0; */ /* Removed for top border accent */
  border-radius: 0; /* Changed from 8px to 0 for straight angles */
  /* Using hardcoded RGB for primary color as fallback */
  /* box-shadow: 0 8px 25px rgba(56, 151, 179, 0.08); */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); /* Softer shadow */
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  overflow: hidden; /* To contain any pseudo-elements or visual flairs */
  position: relative; /* For pseudo-elements or absolute positioned icons */
}

.service-card:hover {
  transform: translateY(-5px);
  /* Using hardcoded RGB for primary color as fallback */
  /* box-shadow: 0 12px 35px rgba(56, 151, 179, 0.12); */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); /* Softer shadow on hover */
}

.oem-card {
  border-top: 4px solid var(--bs-primary);
}

.odm-card {
  border-top: 4px solid var(--bs-primary-light);
}

.service-card-header {
  /* Placeholder for potential background shape or image for the icon area */
  position: relative;
}

.service-icon-placeholder {
  width: 60px;
  height: 60px;
  /* Using hardcoded RGB for primary color as fallback */
  /* background-color: rgba(56, 151, 179, 0.1); */ /* Moved to .oem-card .service-icon-placeholder */
  border-radius: 0; /* Changed from 50% to 0 for straight angles */
  display: flex;
  align-items: center;
  justify-content: center;
  /* In a real scenario, an <img> or <i> tag for the icon would go here or replace this div */
  /* Example: color: var(--color-primary); font-size: 2rem; */
}

.oem-card .service-icon-placeholder {
  background: linear-gradient(135deg, rgba(56, 151, 179, 0.2) 0%, rgba(56, 151, 179, 0.05) 100%);
}

.odm-card .service-icon-placeholder {
   /* Using hardcoded RGB for secondary color as fallback */
   /* background-color: rgba(78, 193, 196, 0.1); */ /* Replaced with gradient */
   background: linear-gradient(135deg, rgba(78, 193, 196, 0.2) 0%, rgba(78, 193, 196, 0.05) 100%);
   /* border-radius will inherit from .service-icon-placeholder, so it's also 0 now */
}

.service-card h3 {
  color: var(--color-primary);
  font-size: 1.75rem; /* Slightly larger for card title */
}

.service-card h5 {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.service-advantages li {
  color: var(--text-light);
  padding: 0.3rem 0;
  display: flex;
  align-items: center; /* Vertically align icon with text */
}

.service-advantages li i {
  color: var(--color-accent); /* Using accent color for list icons */
  font-size: 1.2em; /* Slightly larger icon */
  margin-right: 0.75rem !important; /* Ensure spacing */
}

/* Optional: Add a subtle pattern or gradient to the card header or background */
.oem-card .service-card-header::before {
  /* Example of a subtle background element for OEM card header */
  /* content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  background: linear-gradient(135deg, rgba(56, 151, 179, 0.05), rgba(56, 151, 179, 0));
  border-radius: 50%;
  z-index: 0; */
}

.odm-card .service-advantages li i {
  color: var(--color-secondary); /* Using secondary for ODM list icons */
}

/* Responsive adjustments for timeline circles may need to be checked after adding new section */
@media screen and (max-width: 768px) {
  /* Existing responsive rules for timeline if any, or add new ones for OEM/ODM cards */
  .service-card h3 {
    font-size: 1.5rem; /* Adjust card title size for smaller screens */
  }
  .service-advantages li {
    font-size: 0.9rem; /* Adjust list item text for smaller screens */
  }
}