/* =========================================================
   首頁介紹區（#about.learn-section）— 參考 82trade 的 Bento 卡：
   左大標＋右小字，三張整張可點的卡片；上半部是會動的預覽，
   滑過時標題變金、內容上移、露出「→」連結列。
   ========================================================= */
.learn-section{ padding:120px 0 110px; }
.learn-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  margin-bottom:44px;
}
.learn-eyebrow{
  display:block; margin-bottom:16px;
  font-family:'Orbitron','Noto Sans TC',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.28em; color:#d9bf7a;
}
.learn-title{
  font-family:'Noto Sans TC',sans-serif; font-weight:900;
  font-size:clamp(34px,5.2vw,64px); line-height:1.12; letter-spacing:.01em; color:#fff;
}
.learn-br{ display:none; }
.learn-hl{
  background:linear-gradient(120deg,#ffffff 0%,#ecdcae 55%,#bd9530 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.learn-aside{
  max-width:300px; text-align:right; padding-bottom:10px;
  font-size:14px; line-height:1.85; color:#a59bb3;
}

.learn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.learn-card{
  position:relative; display:flex; flex-direction:column;
  min-height:430px; overflow:hidden; border-radius:24px;
  background:linear-gradient(180deg,rgba(18,14,26,.92),rgba(8,7,12,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 -20px 80px -20px rgba(255,255,255,.10) inset;
  color:inherit; text-decoration:none; isolation:isolate;
  transition:border-color .35s ease, box-shadow .35s ease, transform .35s var(--ease);
}
/* 滑過時的金色光暈 */
.learn-card::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 70% at 50% 100%, rgba(212,178,106,.13), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
.learn-card:hover,
.learn-card:focus-visible{
  border-color:rgba(236,220,174,.32);
  box-shadow:0 -20px 80px -20px rgba(255,255,255,.12) inset, 0 24px 60px -30px rgba(212,178,106,.35);
  transform:translateY(-4px);
  outline:none;
}
.learn-card:hover::after,
.learn-card:focus-visible::after{ opacity:1; }

.learn-preview{ position:relative; height:240px; flex:none; overflow:hidden; }
.learn-body{ padding:4px 26px 0; transition:transform .4s var(--ease); }
.learn-card-title{
  font-size:19px; font-weight:700; color:#fff; margin-bottom:10px;
  transition:color .3s ease;
}
.learn-body p{ font-size:13.5px; line-height:1.85; color:#a59bb3; }
.learn-cta{
  position:absolute; left:26px; right:26px; bottom:24px;
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:#ecdcae; letter-spacing:.04em;
  opacity:0; transform:translateY(12px);
  transition:opacity .35s ease, transform .4s var(--ease);
}
.learn-arrow{ display:inline-block; transition:transform .3s var(--ease); }
.learn-card:hover .learn-body,
.learn-card:focus-visible .learn-body{ transform:translateY(-14px); }
.learn-card:hover .learn-card-title,
.learn-card:focus-visible .learn-card-title{ color:#ecdcae; }
.learn-card:hover .learn-cta,
.learn-card:focus-visible .learn-cta{ opacity:1; transform:none; }
.learn-card:hover .learn-arrow{ transform:translateX(4px); }

/* ---- 預覽 1：學習路徑（線上→一階→二階→延伸，learn.js 依序點亮；
        點亮的那一階會展開，列出這階段在學什麼） ---- */
.lp-path{ display:flex; align-items:center; padding:14px 22px 4px 24px; }
.lp-steps{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:8px; }
.lp-step{ position:relative; display:flex; align-items:flex-start; gap:12px; }
/* 節點之間的連線：每一階自己畫到下一階的節點（最後一階不畫） */
.lp-step:not(:last-child)::after{
  content:""; position:absolute; left:15px; top:16px; bottom:-24px; width:1px;
  background:rgba(255,255,255,.12); transition:background .5s ease, box-shadow .5s ease;
}
.lp-step.is-done::after{
  background:linear-gradient(180deg,#ecdcae,#bd9530); box-shadow:0 0 8px rgba(236,220,174,.55);
}
.lp-node{
  position:relative; z-index:1; flex:none; width:31px; height:31px; margin-top:1px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; color:#8a7f99;
  background:#120e19; border:1px solid rgba(255,255,255,.14);
  transition:all .45s ease;
}
.lp-step-txt{
  flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:10px;
  padding:7px 12px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  transition:background .45s ease, border-color .45s ease;
}
.lp-step-txt b{ font-size:13.5px; line-height:19px; font-weight:600; color:#cfc6da; white-space:nowrap; }
.lp-step-txt small{ font-size:11px; color:#7f748f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 這階段學什麼：平常收起，點亮時展開 */
.lp-tags{
  flex-basis:100%; display:flex; flex-wrap:wrap; gap:5px;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .35s ease, margin-top .5s var(--ease);
}
.lp-tags em{
  font-style:normal; font-size:10.5px; line-height:1; white-space:nowrap;
  padding:4px 8px; border-radius:999px;
  color:#ecdcae; background:rgba(236,220,174,.08); border:1px solid rgba(236,220,174,.22);
}
.lp-step.is-on .lp-tags{ max-height:52px; opacity:1; margin-top:7px; }
.lp-step.is-done .lp-node{ color:#120e18; background:#bd9530; border-color:#bd9530; }
.lp-step.is-on .lp-node{
  color:#120e18; background:linear-gradient(120deg,#fff,#ecdcae 55%,#bd9530);
  border-color:#ecdcae; box-shadow:0 0 0 4px rgba(236,220,174,.12), 0 0 16px rgba(236,220,174,.5);
}
.lp-step.is-on .lp-step-txt{
  background:linear-gradient(90deg,rgba(212,178,106,.16),rgba(212,178,106,.03));
  border-color:rgba(236,220,174,.35);
}
.lp-step.is-on .lp-step-txt b{ color:#fff; }
.lp-step.is-on .lp-step-txt small{ color:#d9bf7a; }

/* ---- 預覽 2：行情分析的 YouTube 影片縮圖輪播（learn.js 輪流換到中間） ---- */
.lp-vid{
  position:absolute; left:50%; top:50%; width:72%; aspect-ratio:16 / 9; margin:0;
  border-radius:12px; overflow:hidden; background:#120e18;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 40px -14px rgba(0,0,0,.9);
  transform:translate(-50%,-50%) scale(.6); opacity:0;
  transition:transform .8s var(--ease), opacity .8s ease, filter .8s ease;
}
.lp-vid img{ width:100%; height:100%; object-fit:cover; display:block; }
.lp-vid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px;
  font-size:12px; font-weight:600; line-height:1.4; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);
  opacity:0; transition:opacity .5s ease .3s;
}
.lp-vid::after{   /* 中間的播放鍵 */
  content:""; position:absolute; left:50%; top:44%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%; background:rgba(10,8,14,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23ecdcae'/%3E%3C/svg%3E") center/22px no-repeat;
  border:1px solid rgba(236,220,174,.6); backdrop-filter:blur(4px);
  opacity:0; transform:scale(.8); transition:opacity .4s ease .3s, transform .4s var(--ease) .3s;
}
.lp-vid.is-front{ z-index:3; opacity:1; transform:translate(-50%,-54%); }
.lp-vid.is-right{ z-index:2; opacity:.45; transform:translate(-14%,-50%) scale(.74); filter:brightness(.6); }
.lp-vid.is-left{  z-index:1; opacity:.45; transform:translate(-86%,-50%) scale(.74); filter:brightness(.6); }
.lp-vid.is-front figcaption, .lp-vid.is-front::after{ opacity:1; transform:none; }
.learn-card:hover .lp-vid.is-front{ transform:translate(-50%,-56%) scale(1.03); }
.learn-card:hover .lp-vid.is-front::after{ background-color:rgba(212,178,106,.35); }

/* ---- 預覽 3：社群互助的 LINE 對話截圖疊卡（learn.js 輪流換到最前面）。
        換到最前面的那張會從上方的圖表慢慢往下捲到老師的文字說明 ---- */
.lp-shot{
  position:absolute; left:50%; top:16px; width:46%; height:calc(100% - 20px);
  object-fit:cover; object-position:50% 0%;
  border-radius:14px; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.85);
  opacity:0; transform:translateX(-50%) scale(.7);   /* 第 4 張以後先藏在後面 */
  transition:transform .8s var(--ease), opacity .8s ease, filter .8s ease, width .8s var(--ease),
             object-position 1.9s cubic-bezier(.45,0,.25,1) .7s;
}
.lp-shot.is-front{ z-index:3; width:58%; transform:translateX(-50%); opacity:1; filter:none; object-position:50% 100%; }
.lp-shot.is-left{  z-index:1; transform:translateX(-118%) rotate(-7deg) scale(.86); opacity:.5; filter:brightness(.55); }
.lp-shot.is-right{ z-index:2; transform:translateX(18%) rotate(7deg) scale(.86);   opacity:.5; filter:brightness(.55); }
.lp-shot.is-left, .lp-shot.is-right{ transition-delay:0s; }   /* 退到後面時立刻回到圖表位置 */
.learn-card:hover .lp-shot.is-front{ transform:translateX(-50%) translateY(-3px) scale(1.02); }

/* ---- 右下角「↗」小按鈕：讓人一眼知道卡片可以點 ---- */
.learn-go{
  position:absolute; right:20px; bottom:18px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#ecdcae; background:rgba(236,220,174,.08);
  border:1px solid rgba(236,220,174,.38);
  transition:background .35s ease, color .35s ease, transform .4s var(--ease), box-shadow .35s ease;
}
.learn-go svg{ width:16px; height:16px; }
.learn-go::before{   /* 呼吸光圈 */
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(236,220,174,.55);
  animation:lpGoPing 2.4s ease-out infinite;
}
@keyframes lpGoPing{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.55); opacity:0; } }
.learn-card:hover .learn-go,
.learn-card:focus-visible .learn-go{
  color:#120e18; background:linear-gradient(120deg,#fff 0%,#ecdcae 55%,#bd9530 100%);
  border-color:transparent; transform:rotate(45deg);
  box-shadow:0 0 18px rgba(236,220,174,.45);
}
.learn-card:hover .learn-go::before{ animation:none; opacity:0; }

/* 平板：兩欄，第三張橫跨 */
@media (max-width:1023px){
  .learn-grid{ grid-template-columns:repeat(2,1fr); }
  .learn-card:last-child{ grid-column:1 / -1; }
}
/* 手機：單欄、標題置左、連結列常駐（手機沒有滑鼠滑過） */
@media (max-width:720px){
  .learn-section{ padding:90px 0 70px; }
  .learn-head{ flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:28px; }
  .learn-br{ display:inline; }
  .learn-aside{ text-align:left; max-width:none; padding:0; }
  .learn-grid{ grid-template-columns:1fr; gap:14px; }
  .learn-card:last-child{ grid-column:auto; }
  .learn-card{ min-height:0; padding-bottom:64px; }
  .learn-preview{ height:224px; }
  .learn-preview.lp-path{ height:240px; }   /* 展開的主題標籤在窄螢幕會換兩行 */
  .lp-vid{ width:84%; }                      /* 窄螢幕縮圖放大，填滿預覽區 */
  .learn-body{ padding:0 20px; }
  .learn-cta{ left:20px; right:20px; bottom:22px; }
}
@media (hover:none){
  .learn-card{ padding-bottom:64px; min-height:0; }
  .learn-cta{ opacity:1; transform:none; }
  .learn-card:hover{ transform:none; }
  .learn-card:hover .learn-body{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .learn-go::before{ animation:none; }
  .lp-shot, .lp-vid{ transition:none; }
}