/* 60-patterns.megamenu.css */
/* ========== Mega 覆寫（≥992px 且 .mnav--mega 啟用） ========== */
@media (min-width: 992px) {
  .mnav.mnav--mega .mnav-l1 > li.has-mega > .mnav-l2 {
    /* 面板外觀與位置，覆寫非 mega 的下拉 */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.14);
    padding: 18px 20px; /* 稍減 padding 以平衡整體 */
    z-index: 3200;
    min-width: 880px; /* ⬆️從640 → 880，可依網站寬度再調整 */
    display: none;
    gap: 4px 10px; /* ✅ 垂直 4px、水平 10px → 欄距再縮小 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden; /* ⬆️關鍵！讓 hover 底色不會超出邊界 */
  }
  .mnav.mnav--mega .mnav-l1 > li.has-mega:hover > .mnav-l2,
  .mnav.mnav--mega .mnav-l1 > li.has-mega:focus-within > .mnav-l2 {
    display: grid !important;
  }

  /* 分組為卡片容器 */
  .mnav.mnav--mega .mnav-l2 > li {
    background: #fff;
    border-radius: 10px;
    padding: 4px 6px;
    overflow: hidden; /* ⬆️裁切內層 hover 效果 */
  }
  .mnav.mnav--mega .mnav-l2 > li > .mnav-head {
    padding: 10px 12px 6px;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    cursor: default;
  }
  .mnav.mnav--mega .mnav-l2 > li > .mnav-head::after {
    display: none;
  }

  /* 第三層改為內嵌清單（不再右側浮出） */
  .mnav.mnav--mega .mnav-l2 > li > .mnav-l3 {
    position: static;
    display: block !important;
    padding: 0 6px 8px 6px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .mnav.mnav--mega .mnav-l3 > li > .mnav-sublink {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
  }
  .mnav.mnav--mega .mnav-l3 > li > .mnav-sublink:hover {
    background: #f6f7f9;
  }

  /* 沒有第三層的分組，直接當連結也好看 */
  .mnav.mnav--mega .mnav-l2 > li > .mnav-sublink {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .mnav.mnav--mega .mnav-l2 > li > .mnav-sublink:hover {
    background: #f6f7f9;
  }
}

/*只有一個分組時，整個 MegaMenu 變成單欄直排（不再分三欄）*/
@media (min-width: 992px) {
  /* 預設三欄 */
  .mnav.mnav--mega .mnav-l1 > li.has-mega > .mnav-l2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 只有 1 個分組 → 單欄直排 */
  .mnav.mnav--mega .mnav-l1 > li.has-mega > .mnav-l2:has(> li:only-child) {
    grid-template-columns: 1fr;
    gap: 6px 0; /* 水平間距歸零，純直排 */
    min-width: 560px; /* 視覺更集中，可自行調整 */
  }

  /* 只有 2 個分組 → 兩欄 */
  .mnav.mnav--mega
    .mnav-l1
    > li.has-mega
    > .mnav-l2:not(:has(> li:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 直接連結（沒有 .mnav-head 的那種）→ 讓每一列「吃滿整列」直向堆疊 */
  .mnav.mnav--mega .mnav-l2 > li:has(> .mnav-sublink):not(:has(> .mnav-head)) {
    grid-column: 1 / -1; /* 橫跨全部欄位，不會被分散到多欄 */
    padding: 0; /* 卡片邊距可酌量縮小，讓列表更緊實 */
    border-radius: 10px;
    overflow: hidden;
  }
  .mnav.mnav--mega
    .mnav-l2
    > li:has(> .mnav-sublink):not(:has(> .mnav-head))
    > .mnav-sublink {
    display: block;
    padding: 8px 10px; /* 單列的內距 */
    border-radius: 8px;
    color: var(--text-primary);
    font-weight: 700;
  }
  .mnav.mnav--mega
    .mnav-l2
    > li:has(> .mnav-sublink):not(:has(> .mnav-head))
    > .mnav-sublink:hover {
    background: #f6f7f9;
  }

  /* 成功業態這組 MegaMenu：(#mn-cases) 以多欄顯示 */
  .mnav.mnav--mega li.has-mega > ul#mn-cases {
    /* 覆蓋面板容器行為（僅此組） */
    display: none; /* 初始隱藏，hover 打開 */
    padding: 18px 20px;
    min-width: 820px; /* 可依需要調整 */
    border-radius: 16px;

    /* 多欄核心：讓長清單自動分欄，降低高度 */
    column-count: 2; /* 筆電/一般桌機 → 2 欄 */
    column-gap: 16px;
    max-height: min(72vh, 520px); /* 限高 + 內部捲動 */
    overflow-y: auto;
  }
  .mnav.mnav--mega li.has-mega:hover > ul#mn-cases,
  .mnav.mnav--mega li.has-mega:focus-within > ul#mn-cases {
    display: block !important; /* 蓋過原本 display:grid !important */
  }

  /* 列項在多欄中避免被切半，並微調間距 */
  ul#mn-cases > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 6px 0;
    padding: 0;
  }

  /* 連結樣式沿用你先前設定（可視需要保留顏色） */
  ul#mn-cases > li > .mnav-sublink {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-primary);
  }
  ul#mn-cases > li > .mnav-sublink:hover {
    background: #f6f7f9;
  }
}

/* 超寬螢幕加強：≥1400px 自動 3 欄（可要可不要） */
@media (min-width: 1400px) {
  .mnav.mnav--mega li.has-mega > ul#mn-cases {
    column-count: 3;
    min-width: 900px;
  }
}