/* 晶体矿物学习平台 - 首页响应式样式 */

/* 平板设备响应式样式优化 */
@media (max-width: 768px) {
  .main-content {
    padding: 12px;
  }
  
  .hero-slider {
    height: 300px;
  }
  
  .slide-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .experiment-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .posts-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .section-header .more-link {
    margin-top: 8px;
  }
  
  .experiment-card, .resource-card {
    flex-direction: column;
  }
  
  .experiment-preview, .resource-preview {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  /* 改进卡片内元素间距 */
  .experiment-info, .resource-info {
    padding: 0 5px;
  }
  
  /* 调整按钮大小和间距 */
  .cta-button, .more-link {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  /* 调整图片占位符高度 */
  .img-placeholder {
    padding-top: 60%;
  }
}

/* 小屏幕手机优化 */
@media (max-width: 480px) {
  .hero-slider {
    height: 200px;
  }
  
  .slide-content {
    left: 20px;
    bottom: 20px;
  }
  
  .slide-content h2 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .cta-button {
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .features-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .resources-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .section-header h2 {
    font-size: 20px;
  }
  
  .experiment-info h3, .resource-info h3 {
    font-size: 16px;
  }
  
  .experiment-info p, .resource-info p {
    font-size: 14px;
  }
  
  .experiment-meta, .resource-meta {
    flex-wrap: wrap;
  }
  
  .post-card {
    padding: 12px;
  }
  
  .post-title {
    font-size: 16px;
  }
  
  .post-content {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  
  .post-footer span {
    margin-right: 10px;
    font-size: 12px;
    padding: 5px 0;
  }
  
  /* 调整小屏幕上的图片占位符高度 */
  .img-placeholder {
    padding-top: 66.67%; /* 3:2的宽高比，更适合小屏幕 */
  }
  
  /* 调整功能卡片布局 */
  .feature-card {
    padding: 15px;
    text-align: center;
  }
  
  .feature-card h3 {
    font-size: 16px;
    margin: 8px 0 4px;
  }
  
  .feature-card p {
    font-size: 12px;
    margin: 0;
  }
  
  .feature-card i {
    font-size: 24px;
  }
  
  /* 优化小屏幕上的按钮和链接 */
  .more-link {
    padding: 6px 12px;
    font-size: 12px;
  }
}