/**
 * @file portfolio.css
 * @responsibility 定義作品集響應式網格 (CSS Grid Layout) 以及卡片內縮、圖片遮罩與科技光暈懸停動畫。
 */

/* 網格容器配置 */
.portfolio-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* 自動落點響應式分配 */
  gap: 2.5rem;
  width: 100%;
  margin-top: 1rem;
}

/* 獨立卡片主體 (Card Shell Component) */
.portfolio-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 11, 35, 0.45); /* 卡片底色 */
  border: 1px solid rgba(164, 140, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  transition: var(--transition-smooth);
  
  /* 關鍵修改：為卡片四周加上 16px 的內襯距，製造上下左右的間隙 */
  padding: 14px; 
  
  box-sizing: border-box; /* 確保 padding 不會撐大卡片原本設定的寬度 */
}

/* 圖片外殼與裁切機制 */
.card-image-wrapper {
  width: 100%;
  height: 200px;             /* 根據設計固定高度 */
  position: relative;
  
  /* 圓角框核心屬性 */
  border-radius: 20px;       /* 圓角弧度：可根據喜好微調 (8px~14px) */
  overflow: hidden;          /* 關鍵：強制切除內部圖片超出圓角的直角邊緣 */
  
  /* 質感提升：加入半透明深色邊框線 (Subtle Inner Border) */
  border: 1px solid rgba(164, 140, 255, 0.15); 
  
  /* 質感提升：加入細微暗部陰影，增加立體層次感 (Depth Shadow) */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
  
  transition: var(--transition-smooth);
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* 保持圖片比例並填滿容器 */
  display: block;
  
  /* 順應外框的過渡動畫 (隨卡片懸停時放大，增加互動質感) */
  transition: transform 0.4s ease-in-out;
}

/* 資訊層區塊 */
.card-info-pane {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 確保按鈕高度齊平 */
}

.card-project-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-stellar-white);
  transition: var(--transition-smooth);
}

.card-project-desc {
  font-size: 0.95rem;
  color: var(--text-nebula-gray);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* 標籤元件集 */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-token {
  font-size: 0.75rem;
  padding: 4px 10px;
  background: rgba(123, 181, 255, 0.1);
  border: 1px solid rgba(123, 181, 255, 0.25);
  border-radius: 4px;
  color: var(--accent-star-glow);
  letter-spacing: 0.5px;
}

/* 核心懸停動畫矩陣 (Micro-Interaction Hover Matrix) */
.portfolio-card:hover {
  transform: translateY(-8px); /* 卡片上浮 */
  border-color: var(--accent-star-glow); /* 邊框亮起 */
  box-shadow: 0 12px 30px rgba(123, 181, 255, 0.15); /* 擴散恆星藍光暈 */
}

.portfolio-card:hover .card-img {
  transform: scale(1.06); /* 圖片輕微放大 */
}

.portfolio-card:hover .card-project-title {
  color: var(--accent-star-glow); /* 標題變色 */
}

/* 錯誤降級顯示樣式 */
.error-fallback {
  color: #ff6b6b;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

/* 互動優化：當滑鼠懸停在整張卡片上時，圖片微放大且邊框微亮 */
.portfolio-card:hover .card-image-wrapper {
  border-color: var(--accent-star-glow); /* 邊框變為星光藍/白 */
  box-shadow: 0 0 15px rgba(123, 181, 255, 0.2); /* 外發光特效 */
}

.portfolio-card:hover .card-img {
  transform: scale(1.05);    /* 圖片稍微放大 5%，製造鏡頭拉近的視覺深淺感 */
}

.card-info-pane {
  /* 因為卡片整體加了 padding，原本緊貼邊緣的文字需要微調 margin */
  margin-top: 14px;  /* 圖片下緣與文字標題之間的精細間距 */
  padding: 0 4px;    /* 讓文字左右側比圖片再往內縮一點，更有層次感 */
}

.portfolio-card:hover {
  border-color: rgba(164, 140, 255, 0.3);
  background: rgba(20, 15, 45, 0.6);
  transform: translateY(-4px);
}