/* ==========================================================================
   Viadivy — Product Family Brand Layer
   File: /css/viadivy.css
   Version: 1.0
   Updated: 2026-09-17
   Requires:
     1. Bootstrap 5.3.3
     2. /css/aiwitheveryone.css
   ========================================================================== */

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

   這是 Viadivy 產品家族的品牌層。

   它負責：
   1. Viadivy 專屬品牌 Token。
   2. Viadivy Product Hero、Product Card、品牌標籤等跨產品共用樣式。
   3. 未來 Canva Branding 定案後，承接正式 Logo、品牌色、Gradient、
      Pattern、Icon Style 與品牌視覺規則。

   [重要邊界]

   - 不放 VyCapture / VyScout 單一產品專屬 Layout。
   - 不重複定義 Navbar / Footer / Bootstrap 基礎能力。
   - 不把 Canva 主視覺中的文字直接做成網站正文圖片。
   - 品牌文字仍應使用 HTML，Canva 主要提供 Logo / Background / Pattern /
     Illustration / Social Asset 等視覺素材。
   - Viadivy 自訂 Token 使用 --via- 前綴。
   - Viadivy Class 使用 .via- 前綴。

   [未來 Canva Branding 導入方式]

   Canva 定案後，優先替換本檔案最上方的 Brand Tokens。
   Product Page Layout 不應因品牌換色而重寫。
*/


/* ==========================================================================
   1. VIADIVY BRAND TOKENS
   --------------------------------------------------------------------------
   目前為暫定值，沿用 AWE 的低飽和藍灰方向。
   Canva Branding 正式完成後，這裡是主要替換入口。
   ========================================================================== */

:root {
  --via-brand-primary: var(--awe-color-accent);
  --via-brand-primary-hover: var(--awe-color-accent-hover);

  --via-brand-secondary: #6f7f86;
  --via-brand-soft: rgba(63, 111, 140, .08);

  --via-hero-gradient-start: rgba(255, 255, 255, .96);
  --via-hero-gradient-end: rgba(226, 235, 240, .68);

  --via-product-card-radius: var(--awe-radius-large);
}


/* ==========================================================================
   2. VIADIVY PAGE FOUNDATION
   ========================================================================== */

/* 套在 Viadivy 品牌頁或產品頁的外層 body / wrapper。
   目前不強制改寫全站背景，只提供品牌層級的 CSS Scope。 */
.via-page {
  --bs-link-color: var(--via-brand-primary);
  --bs-link-hover-color: var(--via-brand-primary-hover);
}


/* ==========================================================================
   3. VIADIVY HERO
   --------------------------------------------------------------------------
   共用於 Viadivy 首頁與各產品 Hero 的視覺骨架。
   單一產品的 Grid 比例與 Screenshot 位置應留給 page-specific CSS。
   ========================================================================== */

.via-hero {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 85% 15%, var(--via-brand-soft), transparent 34%),
    linear-gradient(
      135deg,
      var(--via-hero-gradient-start) 0%,
      var(--via-hero-gradient-end) 100%
    );
}

.via-hero-content {
  position: relative;
  z-index: 1;
}

.via-product-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  color: var(--via-brand-primary);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.via-product-title {
  margin-bottom: 1rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.via-product-tagline {
  max-width: 760px;
  color: var(--awe-color-text-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.7;
}

.via-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}


/* ==========================================================================
   4. VIADIVY BRAND / PRODUCT MARK
   --------------------------------------------------------------------------
   適合放 Canva 匯出的 SVG / PNG Logo。
   網站不要在 CSS 裡寫死 logo 圖檔路徑，HTML 決定實際資產。
   ========================================================================== */

.via-brand-mark,
.via-product-mark {
  display: block;
  object-fit: contain;
}

.via-brand-mark {
  max-height: 44px;
}

.via-product-mark {
  max-height: 64px;
}


/* ==========================================================================
   5. VIADIVY PRODUCT CARD
   --------------------------------------------------------------------------
   用於 /viadivy/ 品牌首頁展示 VyCapture、VyScout 等產品。
   產品專屬色彩可透過 page/product scope 覆寫 --via-brand-primary。
   ========================================================================== */

.via-product-card {
  height: 100%;

  padding: 1.5rem;
  border: 1px solid var(--awe-color-line);
  border-radius: var(--via-product-card-radius);

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

  transition:
    transform var(--awe-transition-normal),
    box-shadow var(--awe-transition-normal),
    border-color var(--awe-transition-normal);
}

.via-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--awe-shadow-card-hover);
  border-color: rgba(63, 111, 140, .24);
}

.via-product-card-title {
  margin-bottom: .5rem;
  font-weight: 700;
}

.via-product-card-description {
  margin-bottom: 0;
  color: var(--awe-color-text-muted);
}


/* ==========================================================================
   6. VIADIVY BADGE / META
   ========================================================================== */

.via-badge {
  display: inline-flex;
  align-items: center;

  padding: .4rem .72rem;
  border: 1px solid rgba(63, 111, 140, .16);
  border-radius: var(--awe-radius-pill);

  background: var(--via-brand-soft);
  color: var(--via-brand-primary);

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


/* ==========================================================================
   7. VIADIVY CTA
   --------------------------------------------------------------------------
   CTA 是跨產品共用的「下載 / 查看產品」視覺骨架。
   實際文案、Store URL 與價格資訊由 HTML 決定。
   ========================================================================== */

.via-cta {
  padding: clamp(2rem, 5vw, 4rem);

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

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .96),
      var(--via-brand-soft)
    );

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


/* ==========================================================================
   8. BRAND ASSET HELPERS
   --------------------------------------------------------------------------
   Canva 匯出品牌背景或 Pattern 時，可搭配這些容器使用。
   真正圖檔由 HTML / page-specific CSS 指定，不在共用層綁死資產路徑。
   ========================================================================== */

.via-brand-art {
  position: relative;
  overflow: hidden;
}

.via-brand-art > img {
  display: block;
  width: 100%;
  height: 100%;

  /* cover 適合裝飾性視覺；若是 Logo 或產品 Screenshot 不應使用此 Class。 */
  object-fit: cover;
}


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

@media (max-width: 767.98px) {
  .via-product-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .via-product-actions .btn {
    width: 100%;
  }

  .via-product-card {
    padding: 1.25rem;
  }
}