/* 首页专属Tailwind样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义颜色配置 */
@layer base {
  :root {
    --color-primary: #3B82F6;
    --color-secondary: #64748B;
    --color-light: #F1F5F9;
    --color-dark: #1E293B;
  }
}

/* 首页专用组件样式 */
@layer components {
  /* 卡片悬停效果 */
  .card-hover {
    @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
  }
  
  /* 横幅渐变背景 */
  .banner-gradient {
    @apply bg-gradient-to-r from-primary to-blue-400;
  }
  
  /* 产品分类卡片 */
  .category-card {
    @apply flex flex-col items-center p-4 bg-gray-50 rounded-lg card-hover;
  }
  
  .category-icon {
    @apply w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-3;
  }
  
  .category-name {
    @apply text-gray-700 font-medium text-center;
  }
  
  /* 产品卡片 */
  .product-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden card-hover;
  }
  
  .product-image {
    @apply aspect-square overflow-hidden bg-gray-100 rounded-lg;
  }
  
  .product-image img {
    @apply w-full h-full object-cover transition-transform duration-500 hover:scale-105;
  }
  
  .product-content {
    @apply p-4;
  }
  
  .product-title {
    @apply font-medium text-gray-800;
  }
  
  .product-link {
    @apply inline-block mt-2 text-primary hover:underline text-sm;
  }
  
  /* 新闻卡片 */
  .news-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden card-hover;
  }
  
  .news-image {
    @apply aspect-video overflow-hidden bg-gray-100;
  }
  
  .news-image img {
    @apply w-full h-full object-cover;
  }
  
  .news-content {
    @apply p-5;
  }
  
  .news-date {
    @apply flex items-center text-sm text-gray-500 mb-3;
  }
  
  .news-title {
    @apply text-lg font-semibold text-gray-800 mb-3 hover:text-primary transition-colors;
  }
  
  .news-excerpt {
    @apply text-gray-600 mb-4 line-clamp-2;
  }
  
  .news-link {
    @apply inline-flex items-center text-primary hover:underline text-sm;
  }
  
  /* 联系信息卡片 */
  .contact-card {
    @apply text-center p-6;
  }
  
  .contact-icon {
    @apply w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4;
  }
  
  .contact-title {
    @apply text-lg font-semibold text-gray-800 mb-2;
  }
  
  /* 公司简介区域 */
  .about-image {
    @apply w-full h-[400px] rounded-lg shadow-md overflow-hidden bg-gray-100;
  }
  
  .about-image img {
    @apply w-full h-full object-cover;
  }
}

/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-grid {
    @apply grid-cols-2 gap-4;
  }
  
  .product-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .news-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .contact-grid {
    @apply grid-cols-1 gap-4;
  }
  
  .about-image {
    @apply h-[300px];
  }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .product-card,
  .news-card,
  .category-card,
  .contact-card {
    @apply bg-gray-800 border border-gray-700;
  }
  
  .product-title,
  .news-title,
  .contact-title,
  .category-name {
    @apply text-gray-100;
  }
  
  .product-content,
  .news-content,
  .news-excerpt {
    @apply text-gray-300;
  }
  
  .category-card {
    @apply bg-gray-700;
  }
  
  .category-card:hover {
    @apply bg-gray-600;
  }
}