/*
 * 945AI 升級頁 M2 桌機版專用 CSS（V21-14e）
 *
 * 設計原則：
 *   - 全部 @media (min-width: 768px) 包起來，手機 < 768px 完全不觸發
 *   - 跟 mobile m2-upgrade.css 各自獨立，互不干擾
 */

@media (min-width: 768px) {

  /* === 整頁外層 grid wrapper === */
  .md\:mx-auto { margin-left: auto; margin-right: auto; }
  .md\:w-full { width: 100%; }
  .md\:max-w-7xl { max-width: 80rem; }
  .md\:px-4 { padding-left: 1rem; padding-right: 1rem; }
  .md\:pt-4 { padding-top: 1rem; }
  .md\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }

  /* === Display utilities === */
  .md\:grid { display: grid; }
  .md\:flex { display: flex; }
  .md\:block { display: block; }

  /* === Grid columns === */
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-\[1fr_280px\] { grid-template-columns: 1fr 320px; } /* V21-6 加寬讓整張卡露出 */
  .md\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }

  /* === Spacing reset === */
  .md\:space-y-0 > :not([hidden]) ~ :not([hidden]) { margin-top: 0 !important; }

  /* === Vertical video 加大（AI 電影 + 金冠獎） === */
  .md\:max-w-\[380px\] { max-width: 380px !important; }

  /* === V21-5 Carousel 卡片改 3 個可見（從 4 改 3） === */
  .md\:w-\[31\%\] { width: 31% !important; }
  .md\:w-\[32\%\] { width: 32% !important; }
  .md\:w-\[24\%\] { width: 24% !important; }
  .md\:w-\[28\%\] { width: 28% !important; }

  /* === V21-4 顧問末位 col-span-2 + 置中 + 半寬 === */
  .md\:col-span-2-center {
    grid-column: span 2 / span 2;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }

  /* === V21-5 製作團隊/顧問 cards 等高 === */
  .md\:grid > .h-full,
  .md\:grid-cols-2 > div { height: 100%; }

  /* === Sticky rail 強化 (V21-7: top 5rem 避開 M2 navbar) === */
  .v21-sticky-rail {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 5rem !important;
  }

  /* === V21-12 cat 周圍空白終極版（H2 多重隱藏 + 前一 section padding-bottom 砍 + 全節點 margin 歸零） === */

  /* 1. 上一個 section（carousel 等）padding-bottom 砍 */
  *:has(+ #upgrade-plan) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* === V21-14c cat 暴力負 margin 法（V21-14b 的 padding 規則生效但空白依舊，源頭未明） ===
     既然找不到誰塞 padding，乾脆讓 cat 用負 margin 把上下空白吃掉。
     cat-dance.mp4 實際比例 720:960 = 3:4，aspect-ratio 鎖死避免 layout shift。
     -8rem 上 + -4rem 下 ≈ 192px 共，桌機看起來緊貼。
     z-index 5 確保 cat 蓋過鄰近 section 的背景 gradient。 */
  *:has(+ #v21-cat-block) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  *:has(+ #v21-cat-block) .v21-dots-row {
    padding-bottom: 0 !important;
    padding-top: 4px !important;
  }
  #v21-cat-block {
    margin-top: 1rem !important;        /* V21-14e: 從負 margin 改成正 margin，不蓋上方 cards */
    margin-bottom: 0.5rem !important;   /* V21-14e: 8px 呼吸感不蓋 animated-frame */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    position: relative !important;
    z-index: 5 !important;
  }
  #v21-cat-block > div {
    aspect-ratio: 3 / 4 !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 1rem !important;
    background: #000 !important;
  }
  #v21-cat-block video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  #v21-cat-block + #upgrade-plan,
  #v21-cat-block + section {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2. #upgrade-plan section 整個歸零 */
  #upgrade-plan {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  /* 3. content div（非 absolute 背景）padding/margin 歸零，水平置中 */
  #upgrade-plan > div:not(.absolute) {
    padding: 0 !important;
    margin: 0 auto !important;
    min-height: 0 !important;
  }

  /* 4. H2 標題用 4 種方式徹底隱藏（cat 圖內已有 branding） */
  #upgrade-plan h2,
  #upgrade-plan h2.gradient-title-anim,
  section#upgrade-plan h2 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* 5. Cat container 上下 margin 0、左右 mx-auto 置中 */
  #upgrade-plan .v21-cat-tight,
  #upgrade-plan div.max-w-sm,
  #upgrade-plan div.md\:max-w-md,
  #upgrade-plan div[class*="max-w-sm"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    display: block !important;
  }

  /* 6. 直接覆蓋 Tailwind mb-* mt-* */
  #upgrade-plan .mb-5,
  #upgrade-plan .mb-4,
  #upgrade-plan .mb-6 { margin-bottom: 0 !important; }
  #upgrade-plan .mt-5,
  #upgrade-plan .mt-4,
  #upgrade-plan .mt-6 { margin-top: 0 !important; }

  /* 7. 價格卡緊貼 cat */
  #upgrade-plan .animated-frame {
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* === V21-7 Carousel cards 取消 stretch（依內容自適應高度） === */
  .scrollbar-hide.flex {
    align-items: stretch; /* 保留：影片版面卡仍要等高 */
  }

  /* === V21-7 左右箭頭按鈕 === */
  .v21-carousel-wrap { position: relative; }
  .v21-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
  }
  .v21-arrow:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-50%) scale(1.1) !important;
  }
  .v21-arrow-prev { left: -12px !important; }
  .v21-arrow-next { right: -12px !important; }
  .v21-arrow:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
  }

  /* M2 wrapper 容器強制 overflow visible（不然 sticky / carousel 會被截斷） */
  .full_block,
  .content_module_wrap,
  .content_module_inner,
  .content_module_inner.html {
    overflow: visible !important;
  }

  /* === V21-4 CTA 按鈕重設計 === */
  .v21-cta-buy,
  .v21-cta-cart {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
  .v21-cta-buy {
    background: #FACC15 !important;  /* V21-6 黃底（同倒數計時數字） */
    color: #000 !important;          /* V21-6 黑字配黃底 */
    margin-bottom: 0.5rem !important;
  }
  .v21-cta-buy:hover { background: #EAB308 !important; }
  .v21-cta-cart {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
  }
  .v21-cta-cart:hover { background: rgba(255, 255, 255, 0.05) !important; }

  /* === V21-5 強制 carousel 可橫滑（M2 容器可能擋 overflow） === */
  .scrollbar-hide.overflow-x-auto,
  div[style*="scrollSnapType"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory;
  }

  /* === V21-5 Carousel dots（靜態 + active 可由 JS 切換） === */
  .v21-dots-row {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 8px 0;
  }
  .v21-dots-row > .v21-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .v21-dots-row > .v21-dot.active {
    background: #fff;
    transform: scale(1.2);
  }
  .v21-dots-row > .v21-dot:hover {
    background: rgba(255, 255, 255, 0.7);
  }

  /* === V21-5 敬請期待 title 往下移（之前 v21-coming-tight 縮太多，反而要加 padding） === */
  .v21-coming-spaced { padding-top: 2.5rem !important; }
  .v21-coming-spaced h2 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
}

/* === Base sticky rail (mobile aside hidden 不影響) === */
.v21-sticky-rail {
  position: sticky;
  top: 1rem;
}

/* === V21-5 dots 在手機也顯示 === */
.v21-dots-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 8px 0;
}
.v21-dots-row > .v21-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}
.v21-dots-row > .v21-dot.active {
  background: #fff;
  transform: scale(1.2);
}