/* ==========================================================================
   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);
  }

/* Case Studies Page Specific Styles */

.case-studies-main-content .section-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 3rem !important; 
}

.case-studies-main-content .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--bs-primary);
}

.case-study-card {
    background-color: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6); /* Fallback border color */
    border-radius: 0; /* Sharp corners as requested for similar cards previously */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: flex; /* Already flex, but ensure it's column */
    flex-direction: column; /* Stack image and body vertically */
}

.case-study-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* New styles for the image at the top of the card */
.case-study-image {
  width: 100%;
  height: 280px; /* Adjust as needed, or use aspect-ratio */
  object-fit: cover; /* Cover the area, crop if necessary */
  border-top-left-radius: 0; /* Keep sharp corners if card is sharp */
  border-top-right-radius: 0;
}

/* Styles for the text content area */
.case-study-card-body {
  padding: 1rem; /* Adjust padding as needed */
  text-align: center; /* Center align the text content */
  flex-grow: 1; /* Allow body to grow and push footer (if any) down */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center title vertically if it's the only content */
}

.case-study-card .card-title {
    color: var(--bs-text-dark);
    margin-top: 0.5rem; 
    margin-bottom: 0; 
}