/* ==========================================================================
   VyCapture — Product Page Styles
   File: /css/pages/vycapture.css
   Version: 1.0
   Updated: 2026-09-17
   Requires:
     1. Bootstrap 5.3.3
     2. /css/aiwitheveryone.css
     3. /css/viadivy.css
   ========================================================================== */

/*
   [這個檔案負責什麼？]

   只負責 VyCapture 產品頁的「頁面專屬 Layout 與產品呈現」。

   預期頁面：
   /viadivy/vycapture/

   [這裡可以放]

   - VyCapture Hero 的 Grid / Screenshot 位置。
   - Feature 區塊排列。
   - Use Case / Privacy / Download CTA 的頁面配置。
   - VyCapture 專屬品牌 Accent 覆寫。

   [這裡不要放]

   - 全站 Navbar / Footer。
   - Viadivy 全產品共用 Product Card。
   - Bootstrap 本身已有的 spacing / flex / grid utility。
   - 其他產品（例如 VyScout）的樣式。

   [Canva Branding 注意]

   未來若 Canva 提供 VyCapture 專屬 Hero Background、Pattern 或 Illustration，
   應優先作為裝飾素材使用；產品名稱、標語、功能描述仍以 HTML 文字呈現。
*/


/* ==========================================================================
   1. VYCAPTURE PRODUCT TOKENS
   --------------------------------------------------------------------------
   目前沿用 Viadivy / AWE 主色。
   未來若 VyCapture 在 Canva Branding 中有自己的產品識別色，只需在此覆寫。
   ========================================================================== */

.page-vycapture {
  --vycapture-accent: var(--via-brand-primary);
  --vycapture-accent-soft: var(--via-brand-soft);
}


/* ==========================================================================
   2. HERO
   ========================================================================== */

.vycapture-hero {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

.vycapture-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.vycapture-hero-copy {
  max-width: 620px;
}

.vycapture-hero-title {
  margin-bottom: 1rem;

  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.vycapture-hero-lead {
  max-width: 620px;

  color: var(--awe-color-text-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.75;
}

/* 真實產品 Screenshot 外框。
   Screenshot 本身仍搭配 .awe-product-screenshot，
   此 Class 只負責 VyCapture Hero 中的呈現方式。 */
.vycapture-hero-visual {
  position: relative;

  padding: clamp(.75rem, 2vw, 1.25rem);
  border: 1px solid var(--awe-color-line);
  border-radius: calc(var(--awe-radius-large) + 4px);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .96),
      var(--vycapture-accent-soft)
    );

  box-shadow: var(--awe-shadow-card);
}

.vycapture-hero-visual .awe-product-screenshot {
  border-radius: var(--awe-radius-medium);
}


/* ==========================================================================
   3. PRODUCT PRINCIPLE / CORE MESSAGE
   --------------------------------------------------------------------------
   適合「先存下來，以後再找」這類核心產品概念區塊。
   ========================================================================== */

.vycapture-principle {
  max-width: 900px;
  margin-inline: auto;

  text-align: center;
}

.vycapture-principle strong {
  color: var(--vycapture-accent);
}


/* ==========================================================================
   4. FEATURE GRID
   --------------------------------------------------------------------------
   Bootstrap 可負責外層 container，
   這裡只定義 VyCapture Feature Card 的細節。
   ========================================================================== */

.vycapture-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.vycapture-feature-card {
  height: 100%;
  padding: 1.5rem;

  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-large);

  background: var(--awe-color-surface);
  box-shadow: var(--awe-shadow-card);
}

.vycapture-feature-icon {
  display: inline-grid;
  place-items: center;

  width: 44px;
  height: 44px;
  margin-bottom: 1rem;

  border-radius: var(--awe-radius-medium);

  background: var(--vycapture-accent-soft);
  color: var(--vycapture-accent);
}

.vycapture-feature-title {
  margin-bottom: .5rem;
  font-size: 1.08rem;
  font-weight: 700;
}

.vycapture-feature-text {
  margin-bottom: 0;
  color: var(--awe-color-text-muted);
}


/* ==========================================================================
   5. USE CASES
   --------------------------------------------------------------------------
   使用簡單 Chip 呈現「AI 回覆、Email、工作筆記、Prompt…」。
   不建立複雜分類 UI，避免產品頁看起來像知識管理系統。
   ========================================================================== */

.vycapture-usecases {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.vycapture-usecase {
  padding: .52rem .82rem;

  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-pill);

  background: var(--awe-color-surface);
  color: var(--awe-color-text-muted);

  font-size: .9rem;
}


/* ==========================================================================
   6. LOCAL-FIRST / PRIVACY BLOCK
   --------------------------------------------------------------------------
   用來表達「不用帳號、資料留在本機」。
   這裡只處理視覺，正式 Privacy 說明仍應連到 Privacy 文件。
   ========================================================================== */

.vycapture-local-block {
  padding: clamp(1.5rem, 4vw, 2.5rem);

  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-large);

  background:
    linear-gradient(
      135deg,
      var(--awe-color-surface) 0%,
      var(--awe-color-surface-soft) 100%
    );
}

.vycapture-local-block p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   7. SCREENSHOT SECTION
   ========================================================================== */

.vycapture-screenshot-wrap {
  max-width: 1100px;
  margin-inline: auto;
}

.vycapture-screenshot-caption {
  margin-top: .9rem;
  margin-bottom: 0;

  color: var(--awe-color-text-muted);
  font-size: .9rem;
  text-align: center;
}


/* ==========================================================================
   8. DOWNLOAD CTA
   --------------------------------------------------------------------------
   真正的 Microsoft Store URL、免費推廣期文案、價格資訊都放 HTML。
   CSS 不寫死商業資訊，避免未來改價格還要改 Stylesheet。
   ========================================================================== */

.vycapture-download {
  text-align: center;
}

.vycapture-download-note {
  margin-top: .85rem;
  margin-bottom: 0;

  color: var(--awe-color-text-muted);
  font-size: .92rem;
}


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {
  .vycapture-hero-grid {
    grid-template-columns: 1fr;
  }

  .vycapture-hero-copy {
    max-width: 760px;
  }

  .vycapture-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .vycapture-hero {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .vycapture-hero-title {
    font-size: clamp(2.25rem, 13vw, 3.4rem);
  }

  .vycapture-feature-grid {
    grid-template-columns: 1fr;
  }

  .vycapture-feature-card {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   10. PRODUCT PAGE V1 — NAVIGATION / CONTENT DETAILS
   --------------------------------------------------------------------------
   以下樣式屬於第一版 VyCapture Product Page 的頁面細節。
   若未來第二個 Viadivy 產品也出現完全相同模式，再評估是否上移 viadivy.css。
   ========================================================================== */

/* 語言切換沿用 Bootstrap Button 結構，只補充產品頁需要的最小視覺。 */
.vycapture-language-switch {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.vycapture-language-switch .btn {
  min-width: 54px;
  border-radius: var(--awe-radius-pill);
  font-size: .82rem;
  font-weight: 600;
}

/* Hero 產品小標，讓「Viadivy / Windows Utility」與主標題保持清楚層級。 */
.vycapture-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;

  margin-top: 1.25rem;

  color: var(--awe-color-text-muted);
  font-size: .9rem;
}

/* 讓功能 Card 中的文字在不同翻譯長度下維持穩定閱讀。 */
.vycapture-feature-card p {
  line-height: 1.7;
}

/* 首頁核心流程採水平 Step，手機再自動換行。 */
.vycapture-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .7rem;

  margin-top: 1.75rem;
}

.vycapture-flow-step {
  padding: .55rem .85rem;

  border: 1px solid var(--awe-color-line);
  border-radius: var(--awe-radius-pill);

  background: var(--awe-color-surface);

  font-size: .92rem;
  font-weight: 600;
}

.vycapture-flow-arrow {
  color: var(--awe-color-text-muted);
}

/* Footer 中的產品連結群組保持簡單，避免 Footer 變成另一個大型導覽。 */
.vycapture-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
}

@media (max-width: 767.98px) {
  .vycapture-language-switch {
    margin-top: .75rem;
  }

  .vycapture-flow-arrow {
    display: none;
  }
}