/**
 * 横向产品卡片样式
 * 实现16:9比例布局
 */

/* 横向产品卡片容器 */
.product-card.horizontal {
  display: flex;
  flex-direction: row;
  max-width: 100%;
  height: auto;
  min-height: 300px;
  margin-bottom: 2rem;
}

/* 16:9比例的图片容器 */
.product-card.horizontal .product-image {
  position: relative;
  width: 60%;
  min-height: 300px;
}

/* 确保图片按16:9比例显示 */
.product-card.horizontal .product-image::before {
  content: '';
  display: block;
  padding-top: 33.75%; /* 16:9 比例的高度百分比 */
}

.product-card.horizontal .product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}

/* 产品信息部分 */
.product-card.horizontal .product-info {
  width: 40%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 响应式设计 - 中等屏幕 */
@media (max-width: 992px) {
  .product-card.horizontal {
    flex-direction: column;
  }
  
  .product-card.horizontal .product-image {
    width: 100%;
    min-height: auto;
  }
  
  .product-card.horizontal .product-image::before {
    padding-top: 56.25%; /* 16:9 比例的高度百分比 */
  }
  
  .product-card.horizontal .product-image img {
    border-radius: 8px 8px 0 0;
  }
  
  .product-card.horizontal .product-info {
    width: 100%;
  }
}

/* 响应式设计 - 小屏幕 */
@media (max-width: 576px) {
  .product-card.horizontal .product-info {
    padding: 1.5rem;
  }
}