/* ------------------------------------------------------------------
 * Intuition - Art of Perfumery :: GIP 先修認證班銷售頁
 * 設計 token + Elementor 原生控制項無法直接產生的輔助樣式。
 * 僅於套用 .gip-page body class 的頁面載入。
 * ------------------------------------------------------------------ */

.gip-page{
  --blush-50:#fbf1ec; --blush-100:#f3ddd2; --blush-200:#eac9b9; --blush-300:#deae98;
  --blush-400:#cf9278; --blush-500:#bd775b; --blush-600:#a5614a; --blush-700:#874f3d;
  --cream-0:#fbf8f3; --cream-50:#f6f0e7; --cream-100:#efe6d8;
  --taupe-200:#ddd2c1; --taupe-300:#c7b8a3; --taupe-400:#ab9a83;
  --taupe-500:#8c7c68; --taupe-600:#6f5f4e; --taupe-700:#584a3c;
  --sage-300:#a8ae8f; --sage-500:#828a68;
  --ink-900:#2a2420; --ink-800:#3a332c; --ink-700:#4c443a; --ink-500:#736657;
  --line-100:#e9ded0; --line-200:#ddccb8; --gold:#896A33;

  --surface-page:var(--cream-0); --surface-page-alt:var(--cream-50);
  --surface-card:#ffffff; --surface-sunken:var(--cream-100); --surface-inverse:var(--ink-900);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-500); --text-muted:var(--taupe-400);
  --text-on-accent:var(--cream-0); --text-on-inverse:var(--cream-50);
  --accent-primary:var(--blush-500); --accent-primary-hover:var(--blush-600);
  --accent-primary-active:var(--blush-700); --accent-soft:var(--blush-50);
  --border-subtle:var(--line-100); --border-strong:var(--line-200);

  --font-display:'Noto Serif TC',serif;
  --font-body:'Noto Serif TC',serif;
  --font-label:'Jost','Noto Sans TC',sans-serif;

  --radius-l:14px; --radius-pill:999px;
  --container-max:1180px; --container-narrow:760px;

  --shadow-card:0 1px 2px rgba(42,36,32,.04), 0 8px 24px -12px rgba(42,36,32,.12);
  --shadow-card-hover:0 4px 10px rgba(42,36,32,.06), 0 20px 40px -16px rgba(42,36,32,.16);
  --shadow-bubble:0 2px 10px rgba(42,36,32,.08);
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --duration-fast:150ms; --duration-base:260ms;
}

/* ---------- 1. 自適應網格 ----------------------------------------
 * Elementor Grid Container 只能設固定欄數，無法表達
 * repeat(auto-fit, minmax(Npx, 1fr))。以下為設計稿原值。
 * ---------------------------------------------------------------- */
.gip-page .gip-autofit{ display:grid !important; }
.gip-page .gip-autofit > .e-con,
.gip-page .gip-autofit > .elementor-widget{ width:auto !important; max-width:none !important; }

.gip-autofit-200{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.gip-autofit-260{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.gip-autofit-280{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.gip-autofit-300{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.gip-autofit-340{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); align-items:stretch; }

/* 見證截圖牆：固定 220-260px 卡片並置中 */
.gip-page .gip-shots{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,260px)) !important;
  gap:20px; justify-content:center;
  max-width:960px; margin-left:auto; margin-right:auto;
}
.gip-shots .elementor-widget-image{ width:100%; }
.gip-shots img{
  width:100%; aspect-ratio:9/16; object-fit:cover; object-position:top;
  border-radius:var(--radius-l); display:block; box-shadow:var(--shadow-card);
}

/* ---------- 2. SectionLabel（小標 + 40px 短線）------------------- */
.gip-label .elementor-heading-title,
.gip-label{
  font-family:var(--font-label);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:400; color:var(--accent-primary-active);
}
.gip-label::after{
  content:''; display:block; width:40px; height:1px;
  background:var(--border-strong); margin-top:10px;
}
.gip-label.gip-label-center::after{ margin-left:auto; margin-right:auto; }
.gip-label.gip-label-inverse{ color:var(--text-on-inverse); }
.gip-label.gip-label-inverse::after{ background:rgba(251,248,243,.22); }

/* ---------- 3. Card / Badge / Bubble ----------------------------- */
.gip-card{
  border-radius:var(--radius-l);
  background:var(--surface-card);
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard);
}
.gip-card:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-3px); }
.gip-card-sunken{ background:var(--surface-sunken); }

.gip-badge .elementor-heading-title, .gip-badge{
  display:inline-flex; align-items:center;
  font-family:var(--font-label); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:var(--accent-soft); color:var(--accent-primary-active);
  border:1px solid var(--blush-200);
}
.gip-badge-outline .elementor-heading-title, .gip-badge-outline{
  background:transparent; color:var(--text-secondary);
  border:1px solid var(--border-strong);
}

/* 對話泡泡（疊在照片上的學員回饋） */
.gip-bubble-wrap{
  position:relative; border-radius:var(--radius-l); overflow:hidden;
  display:flex; align-items:flex-end; padding:20px;
}
.gip-bubble-wrap::after{
  content:''; position:absolute; inset:0; background:rgba(42,36,32,.1); pointer-events:none;
}
.gip-bubble-wrap.gip-scrim-strong::after{ background:rgba(42,36,32,.25); }
.gip-bubble-wrap.gip-scrim-stronger::after{ background:rgba(42,36,32,.3); }
.gip-bubble-wrap > .elementor-widget-text-editor{ position:relative; z-index:2; width:100%; }
.gip-bubble .elementor-widget-container{
  background:var(--surface-card); color:var(--text-primary);
  border-radius:var(--radius-l); padding:18px 20px;
  box-shadow:var(--shadow-bubble);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  max-width:420px;
}
.gip-bubble-right .elementor-widget-container{ margin-left:auto; }

/* ---------- 4. 條列項目（圓點 bullet）--------------------------- */
.gip-list ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.gip-list li{ display:flex; gap:10px; font-family:var(--font-body); font-size:15px; color:var(--text-primary); }
.gip-list li::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--accent-primary); margin-top:8px; flex-shrink:0;
}
.gip-list-muted li{ color:var(--text-secondary); }
.gip-list-muted li::before{ background:var(--taupe-400); }
.gip-list-lg ul{ gap:16px; }
.gip-list-lg li{ font-size:17px; }
.gip-list-lg li::before{ width:6px; height:6px; background:var(--gold); margin-top:9px; }

/* ---------- 5. 課程大綱編號列 ----------------------------------- */
.gip-chapter{ border-top:1px solid var(--border-subtle); }
.gip-chapter:last-of-type{ border-bottom:1px solid var(--border-subtle); }
.gip-chapter-num .elementor-heading-title{
  font-family:var(--font-display); font-weight:700; font-size:34px;
  color:var(--gold); line-height:1;
}

/* ---------- 6. FAQ 手風琴 --------------------------------------- */
.gip-faq .e-n-accordion-item{
  background:var(--surface-card);
  border:0; border-bottom:1px solid var(--border-subtle);
}
.gip-faq .e-n-accordion-item:last-child{ border-bottom:0; }
.gip-faq .e-n-accordion-item-title{
  font-family:var(--font-label); font-size:16px; color:var(--ink-900);
  padding:24px 28px;
}
.gip-faq .e-n-accordion-item-title-text{ font-family:var(--font-label); }
.gip-faq .e-n-accordion-item > .e-con{ padding:0 28px 24px; }
.gip-faq{ border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--border-subtle); }

/* ---------- 7. 進場淡入 ----------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .gip-page .gip-fade{ animation:gipFadeIn .7s var(--ease-standard) both; }
  @keyframes gipFadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
}

/* ---------- 8. 雜項 --------------------------------------------- */
.gip-page{ background:var(--surface-page); }
.gip-hero-img img{ width:100%; height:100%; object-fit:cover; }
.gip-scrim-gradient{ position:relative; }
.gip-scrim-gradient::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(42,36,32,0),rgba(42,36,32,.2));
}
.gip-trust span{ font-family:var(--font-label); font-size:13px; color:var(--text-secondary); }
.gip-dot{ color:var(--gold); }

/* 手機微調 */
@media (max-width:767px){
  .gip-shots{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
  .gip-chapter-num .elementor-heading-title{ font-size:28px; }
}

/* 防禦：Elementor 容器的 --display 不得覆寫網格區塊 */
.gip-page .gip-shots > .elementor-widget-image{ width:100% !important; max-width:none !important; }
@media (max-width:767px){ .gip-page .gip-shots{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important; } }