/* ==========================================================================
   CategoryTile — 產品總覽的 7 個分類卡片（3/4 深色卡，hover 展開子項目）
   ========================================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin-top: 40px;

  /* 磁磚是 JS 產生的。沒有這個佔位高度時，容器一開始是 0 高，
     內容進來瞬間把下方全部往下推 —— Lighthouse 量到的 CLS 0.459 主要來自這裡。
     數值對應 .tile 的 3/4 比例：兩列磁磚 + 間距。 */
  min-height: calc((100vw - var(--page-pad) * 2 - var(--grid-gap) * 3) / 4 * 4 / 3 * 2 + var(--grid-gap));
}
@media (min-width: 1521px) {
  /* 版面滿版後寬度固定，佔位高度也跟著固定 */
  .tile-grid { min-height: calc((1440px - var(--grid-gap) * 3) / 4 * 4 / 3 * 2 + var(--grid-gap)); }
}
@media (max-width: 1180px) { .tile-grid { grid-template-columns: repeat(3, 1fr); min-height: 1100px; } }
@media (max-width: 860px)  { .tile-grid { grid-template-columns: repeat(2, 1fr); min-height: 1420px; } }
/* 手機是單欄七張，每張至少 340px（見下方 hover: none 的規則）。
   Lighthouse 用手機寬度測試，這個斷點沒留位置的話 CLS 就降不下來。 */
@media (max-width: 560px)  { .tile-grid { grid-template-columns: 1fr; min-height: calc((340px + var(--grid-gap)) * 7); } }

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(184, 190, 200, .38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform var(--t-surface) var(--ease), box-shadow var(--t-surface) var(--ease),
              border-color var(--t-surface) var(--ease);
}
.tile:hover,
.tile:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadow-panel), inset 0 0 0 1px rgba(255,255,255,.08);
}
.tile__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .5;
  transform: scale(1);
  transition: opacity var(--t-surface) var(--ease), transform var(--t-surface) var(--ease);
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.tile:hover .tile__bg,
.tile:focus-within .tile__bg { opacity: .28; transform: scale(1.04); }

.tile::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14,16,19,.05) 0%, rgba(14,16,19,.42) 46%, rgba(14,16,19,.94) 100%),
    var(--blueprint-grid);
  background-size: auto, 34px 34px;
  pointer-events: none;
}
.tile::before {
  content: "";
  position: absolute; inset: 14px; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.18);
  border-left: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}

/* 整張卡的可點擊區（連到型錄該分類） */
.tile__cover { position: absolute; inset: 0; z-index: 2; }

.tile__inner {
  position: relative; z-index: 3;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px;
  pointer-events: none;
}
.tile__no {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--ys-red-onDark);
}
.tile__no::after {
  content: ""; display: block; width: 28px; height: 2px;
  background: var(--ys-red-onDark); margin-top: 8px;
  transition: width var(--t-surface) var(--ease);
}
.tile:hover .tile__no::after, .tile:focus-within .tile__no::after { width: 48px; }

.tile__foot { display: flex; flex-direction: column; }
.tile__title {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  line-height: 1.3; color: var(--white);
  text-wrap: balance;
}
.tile__en {
  margin-top: 4px;
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.58);
}
.tile__count {
  margin-top: 10px;
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.74);
  border: 1px solid rgba(255,255,255,.22);
  padding: 4px 7px;
  background: rgba(14,16,19,.2);
}

/* hover 展開的子項目清單 */
.tile__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height var(--t-surface) var(--ease),
              opacity var(--t-surface) var(--ease),
              margin-top var(--t-surface) var(--ease);
}
.tile:hover .tile__list,
.tile:focus-within .tile__list {
  max-height: 260px;
  opacity: 1;
  margin-top: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}
.tile__list::-webkit-scrollbar { width: 4px; }
.tile__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
.tile__list li + li { border-top: 1px solid rgba(255,255,255,.14); }
.tile__list a {
  display: block; padding: 8px 0;
  font-size: var(--fs-xs); line-height: 1.5; color: rgba(255,255,255,.78);
  transition: color var(--t-control) var(--ease), padding-left var(--t-control) var(--ease);
}
.tile__list a:hover, .tile__list a:focus-visible { color: var(--white); padding-left: 6px; }

.tile img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* 觸控裝置：無 hover，預設就展開一部分 */
@media (hover: none) {
  .tile { aspect-ratio: auto; min-height: 340px; }
  .tile__list { max-height: 200px; opacity: 1; margin-top: 14px; overflow-y: auto; pointer-events: auto; }
}