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

/* Add your blog list page specific styles here */

.blog-list-main-content .card .card-img-top {
  height: 250px; /* Updated to 250px */
  width: 100%;    /* Ensure it fills the card width */
  object-fit: cover; /* Ensures the image covers the area, cropping if necessary, without distortion */
  border-radius: 0; /* Ensure image corners are not rounded */
}

.blog-list-main-content .card {
  border-radius: 0; /* Remove rounded corners from the card itself */
}

/* Styling for the 'Read More' button in blog cards */
.blog-list-main-content .card .btn-primary {
  background-color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
}

.blog-list-main-content .card .btn-primary:hover,
.blog-list-main-content .card .btn-primary:focus {
  background-color: var(--bs-primary-light);
  color: #fff;
  border-color: var(--bs-primary-light);
}