/* ================================================================
   home.css — 首頁專屬樣式（1:1 對齊正式站 Elementor 輸出）
   deploy-marker: fix2-0609  ← 部署驗證標記
================================================================ */

/* ── 共用 section 工具 ─────────────────────────────────────────── */
.gc-section-heading {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 2px;
  color: var(--gc-text);
  margin-bottom: 40px;
}
.gc-section-cta {
  text-align: center;
  margin-top: 48px;
}

/* ================================================================
   SECTION 1: Hero
   對齊 elementor-492 .elementor-element-365216be
================================================================ */
.gc-hero {
  position: relative;
  min-height: 720px;
  /* Hero 背景：用 JPG（WebP 交由正式站 EWWW 自動處理，避免缺檔 404 破圖）
     相對路徑 → 跨網域可攜（css/ 往上三層到 wp-content/uploads） */
  background-image: url(../../../uploads/home_bn_bg04.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: -15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 底部淡出 overlay（白色 fade in from bottom） */
.gc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #FFFFFF00 50%, #FFFFFF 90%);
  pointer-events: none;
}

.gc-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--gc-max-w);
  margin-inline: auto;
  padding: 72px 24px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 470px;
}

/* Hero 文字（白色，左對齊） */
.gc-hero-text { align-self: center; }

.gc-hero-title {
  /* elementor-element-754a8391: 40px bold, line-height 2em, letter-spacing 2px, #FFFFFF */
  font-size: 40px;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 2px;
  color: #FFFFFF;
  margin: 0;
}

.gc-hero-subtitle {
  /* elementor-element-58a6bd7e: 32px, weight 400, line-height 2em, #FFFFFF */
  font-size: 32px;
  font-weight: 400;
  line-height: 2;
  color: #FFFFFF;
  margin: 0;
}

.gc-hero-desc {
  /* elementor-element-7b10eafe: 24px, line-height 1.5em, #FFFFFF */
  font-size: 24px;
  line-height: 1.5;
  color: #FFFFFF;
  margin-top: 8px;
}

/* Hero Lottie（右欄） */
.gc-hero-lottie {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#gc-lottie-hero { width: 100%; max-width: 500px; }

/* SCROLL 提示 */
.gc-scroll-hint {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px 24px 32px;
}
.gc-hero-eyebrow {
  /* elementor-element-ba7cb42: 28px, 600, 2em, letter-spacing 2px, color text */
  font-size: 28px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 2px;
  color: var(--gc-text);
  margin-bottom: 8px;
}
#gc-lottie-scroll { width: 60px; margin: 0 auto; }


/* ================================================================
   SECTION 2/3/4: 服務 Section 共用
================================================================ */
.gc-service-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

.gc-service-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.gc-service-inner--reverse { }

/* 左圖 */
.gc-service-img img {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
}

/* 服務 section 標題（在右欄頂部，置中對齊右欄）
   對齊 elementor-element-2b70096a: 28px, 600, 2em, letter-spacing 2px, center */
.gc-service-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 2px;
  text-align: center;
  color: var(--gc-text);
  margin-bottom: 24px;
}

/* 服務項目列表 */
.gc-service-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.gc-service-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.gc-service-item-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
.gc-service-item-icon img { width: 48px; height: 48px; object-fit: contain; }

.gc-service-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gc-text);
  margin-bottom: 6px;
  line-height: 1.4;
}

.gc-service-item p {
  /* elementor-element-63af23f8: 16px, line-height 1.5em, color text, text-align justify */
  font-size: 16px;
  line-height: 1.5;
  color: var(--gc-text);
  text-align: justify;
  margin: 0;
}

.gc-service-btn { display: inline-flex; }

/* 服務 section 背景，無斜切 overlay */
.gc-service-web,
.gc-service-seo,
.gc-service-app { background-color: #fff; }

/* 版面（依 DOM 順序自然呈現）：
   web/app DOM=[圖,文] → 左圖右文
   seo     DOM=[文,圖] → 左文右圖
   無需 direction 反轉 */

/* 服務圖片：最大 55% 欄寬，限制高度避免過大 */
.gc-service-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* picture 包裹層「穿透」→ 內部 img 仍是 flex 直接子元素，置中與 55% 寬度維持原樣 */
.gc-service-img picture { display: contents; }
.gc-service-img img {
  width: 55%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}


/* ================================================================
   SECTION 5: 知識分享
   對齊 elementor-element-e409386: bg #F6F6F6, padding 50px 0 100px
================================================================ */
.gc-blog-section {
  background: #F6F6F6;
  padding: 50px 0 100px;
}

.gc-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gc-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gc-post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* 文章縮圖：16:9（1200×720，與正式站一致） */
.gc-post-thumb { overflow: hidden; line-height: 0; }
.gc-post-thumb img {
  width: 100%; height: auto;
  aspect-ratio: 1200 / 720;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gc-post-card:hover .gc-post-thumb img { transform: scale(1.03); }
.gc-post-thumb-placeholder { width: 100%; aspect-ratio: 1200/720; background: var(--gc-surface); }

.gc-post-info { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.gc-post-info h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gc-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gc-post-info p { font-size: 13px; color: var(--gc-gray-dark); line-height: 1.6; }


/* ================================================================
   SECTION 6: 成功案例
   對齊 elementor-element-922b2cf: padding-bottom 50px
================================================================ */
.gc-cases-section {
  padding: 60px 0 50px;
  background: #fff;
}

.gc-cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.gc-case-card {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gc-case-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* 成功案例縮圖：750×400（15:8）與正式站一致 */
.gc-case-thumb { overflow: hidden; line-height: 0; }
.gc-case-thumb img {
  width: 100%; height: auto;
  aspect-ratio: 750 / 400;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gc-case-card:hover .gc-case-thumb img { transform: scale(1.04); }
.gc-case-thumb-empty { width: 100%; aspect-ratio: 750/400; background: #fff; }

/* 下方標題區：藍底白字 */
.gc-case-title {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--gc-blue);
  transition: color var(--gc-ease);
}
.gc-case-card:hover .gc-case-title { color: var(--gc-yellow); }

/* Logo 卡（SVG 公司標誌）：上方白底 */
.gc-case-logo-wrap {
  width: 100%;
  aspect-ratio: 750 / 400;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-bottom: 1px solid var(--gc-surface);
}
.gc-case-logo {
  max-width: 70%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* ================================================================
   Responsive
================================================================ */
@media (max-width: 1024px) {
  .gc-hero-title   { font-size: 32px; }
  .gc-hero-subtitle { font-size: 26px; }
  .gc-hero-desc    { font-size: 20px; }
  .gc-cases-grid   { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  /* Hero：加深色遮罩讓白字在任何背景上都清楚，白色淡出延到最底避開文字 */
  .gc-hero { min-height: auto; margin-bottom: 0; }
  /* 深色遮罩（蓋在背景圖上、文字下方）：上深下淺，確保白字可讀 */
  .gc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,26,55,.55) 0%, rgba(2,26,55,.42) 55%, rgba(2,26,55,.10) 82%);
    z-index: 0;
    pointer-events: none;
  }
  /* 白色淡出只在最底 10%，不與文字重疊 */
  .gc-hero::after { background: linear-gradient(180deg, #FFFFFF00 90%, #FFFFFF 100%); }
  .gc-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 40px 20px 60px;
    align-items: start;
  }
  .gc-hero-text { align-self: start; }
  .gc-hero-lottie { display: none; }
  /* 文字陰影：再加一層保險，避免落在較亮處時糊掉 */
  .gc-hero-title, .gc-hero-subtitle, .gc-hero-desc {
    text-shadow: 0 1px 10px rgba(0,18,42,.45);
  }
  .gc-hero-title   { font-size: 28px; line-height: 1.5; }
  .gc-hero-subtitle { font-size: 22px; line-height: 1.6; }
  .gc-hero-desc    { font-size: 17px; line-height: 1.7; }
  .gc-hero-eyebrow { font-size: 16px; }

  .gc-service-section { padding: 40px 0; }
  .gc-service-inner { grid-template-columns: 1fr; gap: 32px; }
  /* 手機版：所有區塊統一「圖上文下」（圖文圖文）。
     seo 的 DOM 是文先 → 把圖片 order 提到最前 */
  .gc-service-seo .gc-service-img { order: -1; }

  .gc-posts-grid   { grid-template-columns: 1fr; }
  .gc-cases-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .gc-cases-grid { grid-template-columns: 1fr; }
}