/* ===========================================================
   RAY Audio Website
   home.css

   首頁專用樣式
   Version : 1.0
   Updated : 2026-07-15

   包含：
   1.Welcome
   2.Knowledge
   3.Product Grid
   4.Responsive

=========================================================== */

/* ==========================================
   1. 歡迎區塊 (Welcome Section)
   ========================================== */
.welcome { 
  margin: 0px 20px 20px 20px; 
  padding: 30px; 
  background: #F0F0F0; 
  font-size: 20px; 
  text-align: left; 
}

/* ==========================================
   2. 知識網格區塊 (Knowledge Grid Section)
   ========================================== */
a[href="audio-knowledge.html"] {
  text-decoration: none;
}
.knowledge-header { 
  text-align: center; 
  max-width: 900px; 
  margin: 70px auto 50px auto; 
  padding: 0 20px; 
}
.knowledge-header h2 { 
  font-size: 38px; 
  font-weight: 600; 
  color: #000000; 
  margin-bottom: 20px; 
  letter-spacing: 2px; 
  transition: color 0.2s ease; /* 滑鼠移入移出時，顏色會有平滑漸變 */
}
a[href="audio-knowledge.html"]:hover .knowledge-header h2 {
  color: #7b1d00;              /* 變為您的專屬色碼 */
}
.knowledge-header p { 
  font-size: 18px; 
  line-height: 1.9; 
  color: #202020; 
  max-width: 800px; 
  margin: auto; 
}
.section-en { 
  display: block; 
  color: #888; 
  font-size: 13px; 
  letter-spacing: 4px; 
  margin-bottom: 10px; 
}
.knowledge-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px; 
  margin: 40px auto; 
  max-width: 1200px; 
}
.knowledge-card { 
  position: relative; /* 確保 overlay 絕對定位正確 */
  background: #222; 
  border-radius: 12px; 
  overflow: hidden; 
  text-decoration: none; 
  transition: all 0.3s ease; 
}
.knowledge-card:hover { 
  transform: translateY(-5px); 
}
.knowledge-card img { 
  width: 100%; 
  display: block; 
}
.knowledge-card h3 { 
  color: white; 
  padding: 15px; 
  text-align: center; 
  margin: 0; 
  font-size: 18px; 
}
.knowledge-overlay { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,.8); 
  color: white; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 20px; 
  box-sizing: border-box; 
  opacity: 0; 
  transition: .3s ease; 
}
.knowledge-card:hover .knowledge-overlay { 
  opacity: 1; 
}
.image-wrapper img { 
  width: 100%; 
  display: block; 
  position:relative;
  overflow:hidden;
}

/* ==========================================
   3. 商品網格卡片區塊 (Product Grid Section)
   ========================================== */
.product-header { 
  text-align: center; 
  padding: 30px 0 50px 0; 
}
.product-header h2 { 
  color: #000000; 
  font-size: 46px; 
  font-weight: 600; 
  letter-spacing: 2px; 
  margin-top: 20px; 
  float: none !important; 
  width: auto !important; 
}
.product-header p { 
  font-size: 20px; 
  margin-top: 25px; 
  color: #202020; 
}
.product-grid-card { 
  background-color: #f2f2f2 !important; 
  border-radius: 12px !important; 
  overflow: hidden !important; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; 
  transition: all 0.3s ease-in-out !important; 
  margin-bottom: 30px !important; 
  padding: 0 !important; 
  border: none !important; 
}
.product-grid-card:hover { 
  transform: translateY(-8px) !important; 
}
.product-grid-card .card-link { 
  display: block !important; 
  text-decoration: none !important; 
  width: 100% !important; 
}
.product-grid-card .card-link img, 
.js-global-products img { 
  border-radius: 12px 12px 0 0 !important; /* 保持原圖上方圓角設定 */
}
.product-grid-card .card-link img { 
  width: 100% !important; 
  height: auto !important; 
  display: block !important; 
  box-shadow: none !important; 
  margin: 0 !important; 
}
.product-grid-card .card-link .card-title { 
  display: block !important; 
  color: #333333 !important; 
  font-size: 1.1em !important; 
  font-weight: bold !important; 
  text-align: center !important; 
  padding: 15px 10px !important; 
  line-height: 1.4 !important; 
}
/* ==========================================
   4. Responsive
   ========================================== */

@media (max-width:768px){

    .knowledge-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .welcome{
        flex-direction:column;
        text-align:center;
    }

    .product-header h2{
        font-size:34px;
    }

    .knowledge-header h2{
        font-size:30px;
    }

}