@import url('page-landing-profilecard.css');

/* =====================================================================
   /page/profile/（數位名片介紹頁）專用主色覆寫：#6D01BE → #7F56D9

   只有 templates/{zh_tw,en}/page/profile.html 會載入本檔，因此下列覆寫
   不會影響共用的 page-landing.css（約 12 個 landing 頁共用）與
   page-landing-profilecard.css（/page/profile-overview/ 也在用）。
   載入順序：page-landing.css → page-landing-profilecard.css → 本檔，
   同 specificity 時後者勝出。

   之後要再調整此頁主紫色，只需改 --profilecard-purple 一個值。
   備註：FAQ 箭頭等處的淺紫底 #F9F1FF 維持原樣，未在調整範圍。
   ===================================================================== */

.landing.profilecard {
    --profilecard-purple: #7F56D9;
    /* icon 底板用的淺紫，較 #F9F1FF 偏冷，搭配新主色 */
    --profilecard-icon-bg: #F5F4FE;
}

/* --- 螢光筆重點字（Hero「記住你」、各段落標題 .point / .spotlight） --- */
.landing.profilecard .point {
    color: var(--profilecard-purple);
}

/* --- CTA 按鈕：外框、深色底、hover 底色 --- */
.landing.profilecard p>button,
.landing.profilecard p>.button {
    border-color: var(--profilecard-purple);
}

.landing.profilecard p>button.dark,
.landing.profilecard p>.button.dark,
.landing.profilecard p>button.light:hover,
.landing.profilecard p>.button.light:hover,
.landing.profilecard p>button:hover,
.landing.profilecard p>.button:hover {
    background: var(--profilecard-purple);
}

/* --- 常見問題（FAQ）右側展開箭頭：icon 新主色 + 圓形底板 --- */
.landing.profilecard .question-item .act-btn::after {
    color: var(--profilecard-purple);
    background: var(--profilecard-icon-bg);
}

/* 展開狀態要維持白色箭頭；此規則 specificity 需高於上面的未展開狀態 */
.landing.profilecard .question-item.active .act-btn::after {
    color: #fff;
    background: var(--profilecard-purple);
}

/* --- 版型樣式卡片上的標籤 --- */
.landing.profilecard .cardstyle .style-box span {
    background: var(--profilecard-purple);
}

/* --- 製作步驟 1／2／3 的圓形序號 --- */
.landing.profilecard ul.text-step li span.tag {
    color: var(--profilecard-purple);
    background: var(--profilecard-icon-bg);
}

/* --- 下方紫色 CTA 區塊底色（圖片疊在紫底上） --- */
.landing.profilecard .asker {
    background-color: var(--profilecard-purple);
}

/* --- 輪播指示點（slick 於執行時產生） --- */
.landing.profilecard .slick-dots li.slick-active,
.landing.profilecard .slick-dots li:after {
    background-color: var(--profilecard-purple);
}

/* =====================================================================
   按鈕：拿掉全部特效，整頁按鈕統一為乾淨的純色／線框樣式

   兩種特效來源：
   1) 動態光點 — page-landing.css 的 .button.dark::before，一顆模糊光點
      以 lightmove 動畫從左下往右上不斷跑
   2) 紫色投影 — 全站色票 colors/purple.css 的
      `span.button, button.button, input[type=button], input[type=submit], a.button`
      box-shadow: 0 4px 12px rgba(146,55,203,0.15)
      這是全站共用檔，絕對不能直接改，只能在本頁 scope 覆寫
   ===================================================================== */

.landing.profilecard .button.dark::before {
    content: none;
}

.landing.profilecard span.button,
.landing.profilecard button.button,
.landing.profilecard a.button {
    box-shadow: none;
}

/* =====================================================================
   Icon 底板：淺紫底 #F9F1FF → #F5F4FE，icon 本身改用新主色
   icon 本身是 SVG 圖檔（profilecard-icon01~09.svg），色碼已直接改在
   檔案裡；那幾個檔案只有本頁在用，不影響其他頁。
   ===================================================================== */

/* 「即時更新／專業形象／一秒分享」三欄特色區 */
.landing.profilecard .iconmode .landing-aditembox.three-column .picbox {
    background: var(--profilecard-icon-bg);
}

/* 底板右上角原本有一顆模糊紫光暈，會讓底色不是純色，一併移除 */
.landing.profilecard .landing-aditembox.three-column .picbox::before {
    content: none;
}

/* 「各行各業都在用」職業清單 */
.landing.profilecard .special-list ul li .special-iconbox {
    background: var(--profilecard-icon-bg);
}

/* 「夯卡 - 數位名片的實體分享卡」的打勾清單。
   原圖 listicon-check.svg 是 talents／employer／recruiter／corporate 共用，
   不能直接改色，改指向本頁專屬的 profilecard-listicon-check.svg。 */
.landing.profilecard ul.icon.checkround li:before {
    background: url(../images/landing/profilecard-listicon-check.svg) center center no-repeat var(--profilecard-icon-bg);
}

/* =====================================================================
   Hero 右側主視覺（電腦版是 .banner .container::after 的背景圖）

   換成 2026-10 的新圖，並依螢幕像素密度給不同檔案：
   一般螢幕拿 800px 檔（133 KB），Retina 拿 1560px 檔（400 KB）。
   三行是漸進式寫法，舊瀏覽器吃第一行、舊 Safari 吃第二行。

   原本 1241px 以上沒寫 background-size，是直接用圖的原始尺寸（780px）。
   新圖尺寸不同，所以要明確指定 100%（＝容器寬 780px），
   維持跟改版前一樣的視覺大小。
   1240px 以下的 80%／70%／40% 是相對容器寬度，不受換圖影響，無需調整。
   ===================================================================== */

.landing.profilecard .banner .container::after {
    background-image: url("../images/landing/profilecard-ad01-800.webp");
    background-image: -webkit-image-set(
        url("../images/landing/profilecard-ad01-800.webp") 1x,
        url("../images/landing/profilecard-ad01-1560.webp") 2x);
    background-image: image-set(
        url("../images/landing/profilecard-ad01-800.webp") 1x,
        url("../images/landing/profilecard-ad01-1560.webp") 2x);
}

@media (min-width: 1241px) {
    .landing.profilecard .banner .container::after {
        background-size: 100% auto;
    }
}

/* =====================================================================
   平板區間的大標題字級

   `.landing .landing-h1` 在共用的 page-landing.css 只有兩段：
   768px 以上 64px、767px 以下 40px，中間沒有過渡。
   64px 是為 1200px 以上的畫布設計的，在 768px 平板上文字區只有 720px 寬，
   會顯得過擠，所以補一段 48px。

   影響這頁的兩個標題：Hero 的 h1，以及紫色橫幅
   「想讓你的數位名片走進現實世界？」（它是 h2 但套 landing-h1 樣式）。
   區塊標題 .landing-h2 的 40px 平板上大小剛好，不動。

   注意：字級本體在全站共用檔，這裡只覆寫本頁，
   其他 landing 頁在平板上仍是 64px。若要全站一致需另開任務處理。
   ===================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
    .landing.profilecard .landing-h1 {
        font-size: 48px;
    }
}

/* =====================================================================
   版型預覽：兩張卡（社群風格／商務風格）等高

   兩張卡的標題與說明字數不同，在平板到小筆電寬度（約 768–1199px）會折成
   不同行數，導致卡片高度差 72px、下方的手機圖與按鈕上下錯開。
   （1200px 以上兩邊折行數剛好相同，本來就等高。）

   做法：外層 flex 改 stretch 讓兩張卡拉到同高，卡片本身改直向 flex，
   文字區 flex-grow 吃掉多出來的空間 —— 標題從頂端對齊，圖片與按鈕則一起
   被推到同一條基準線。
   ===================================================================== */

@media (min-width: 768px) {

    .landing.profilecard .cardstyle .landing-aditem {
        align-items: stretch;
    }

    .landing.profilecard .cardstyle .landing-aditembox .style-box {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* 原本 .cardstyle .text-box 是 justify-content: center，
       撐高之後會讓文字浮在中間、兩張卡的標籤對不齊，改為靠上 */
    .landing.profilecard .cardstyle .style-box .text-box {
        flex-grow: 1;
        justify-content: flex-start;
    }
}

/* 三步驟區塊：左側手機圖後方的大圓形底色
   （原 #F9F1FF，定義在 page-landing-profilecard.css 的 .recommender-box::after；
   其他斷點只調整尺寸與位置，沒有再設色，所以這一條就涵蓋全尺寸） */
.landing.profilecard .recommender-box::after {
    background: var(--profilecard-icon-bg);
}

/* =====================================================================
   常見問題的分類切換（數位名片／夯卡）

   改用 page-landing.css 的共用 switch 元件（`.switch-box`／`.switch-box-btn`），
   與 /page/recruiter/「你可以預期的收益結構」的「獵才顧問／推薦人」同一套樣式：
   外框膠囊 + 選中那顆填滿主色。

   共用元件的外框與文字色是舊紫，一樣在本頁 scope 換成新主色。
   置中與手機滿版則是 recruiter 頁自己的 CSS（page-landing-recruiter.css，
   本頁沒載入），所以要在這裡補上。
   ===================================================================== */

.landing.profilecard .question .switch-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing.profilecard .switch-box .switch-box-btn {
    border-color: var(--profilecard-purple);
}

.landing.profilecard .switch-box .switch-box-btn button {
    color: var(--profilecard-purple);
}

/* 選中狀態要維持白字（specificity 需高於上面那條） */
.landing.profilecard .switch-box .switch-box-btn button.active {
    color: #fff;
    background: var(--profilecard-purple);
}

/* ---------------------------------------------------------------------
   以下為 page-landing.css 的共用版型元件，此頁目前未使用。
   一併覆寫，避免日後在此頁加入這些區塊時出現舊紫色。
   --------------------------------------------------------------------- */

.landing.profilecard .evolution-list .evolution-dot {
    background: color-mix(in srgb, var(--profilecard-purple) var(--dot-pct, 0%), #F9F1FF);
    color: color-mix(in srgb, #fff var(--dot-pct, 0%), var(--profilecard-purple));
}

.landing.profilecard .evolution-list li.active .evolution-text h5,
.landing.profilecard .evolution-list li.active h3 {
    color: var(--profilecard-purple);
}

.landing.profilecard .evolution-list .evolution-text::after {
    background: repeating-linear-gradient(to bottom, var(--profilecard-purple), var(--profilecard-purple) 10px, transparent 10px, transparent 20px);
}

.landing.profilecard .compare-item .landing-aditembox.huntbyte .compare-tit {
    background: var(--profilecard-purple);
}

.landing.profilecard .list-itembox ul li.list-tit {
    color: var(--profilecard-purple);
}

/* =====================================================================
   手機版排版
   ===================================================================== */

@media (max-width: 767px) {

    /* 「即時更新／專業形象／一秒分享」三欄特色區：
       改為比照「各行各業都在用」的清單排法 —— 圖左、文右、靠左對齊。
       原本 page-landing-profilecard.css 在此斷點把它改成圖上文下置中
       （.feature .landing-aditem > div.three-column 的 column + center），
       這裡用較高 specificity 覆寫回橫向。
       兩區塊的圖框尺寸本來就一致（80x80 底板、48x48 icon、圓角 16px），
       所以只要改方向與間距就會對齊。 */

    .landing.profilecard .feature .landing-aditem > div.three-column {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .landing.profilecard .feature .iconmode .landing-aditembox.three-column .picbox {
        margin-bottom: 0;
        margin-right: 24px;
    }

    .landing.profilecard .feature .iconmode .landing-aditembox h5,
    .landing.profilecard .feature .iconmode .landing-aditembox p {
        text-align: left;
    }

    /* 各區塊的標題與副標題改為靠左對齊。
       原本置中來自兩處：
       - page-landing.css 的 `.landing .landing-h1 / .landing-h2 / .landing-h5`
       - page-landing-profilecard.css 在此斷點把 `.profilecard .landing-aditem h2`
         由桌機的靠左改回置中
       兩處都是共用檔，這裡以較高 specificity 局部覆寫。

       涵蓋的區塊標題：
       .landing-aditem h2      → featuread「一張數位名片…」、senserole「各行各業都在用」、
                                 sharecard「夯卡 - 數位名片的實體分享卡」
       .landing-adbox > h2/h3  → cardstyle「找到最適合你的專業形象」＋其副標、
                                 recommender-list「三步驟…」、asker「想讓你的數位名片…」
       .kol-adbox > h2         → question「常見問題」 */

    .landing.profilecard .landing-aditem h2,
    .landing.profilecard .landing-adbox > h2,
    .landing.profilecard .landing-adbox > h3,
    .landing.profilecard .kol-adbox > h2 {
        text-align: left;
    }

    /* 版型預覽卡：「社群風格」「商務風格」標籤、卡片標題與說明一併靠左。
       .text-box 是 flex 直向排列且 align-items: center，光改 text-align
       不會讓標籤那顆膠囊移動，要一起改成 flex-start。 */
    .landing.profilecard .cardstyle .style-box .text-box {
        align-items: flex-start;
    }

    .landing.profilecard .cardstyle .style-box .text-box,
    .landing.profilecard .cardstyle .style-box .text-box h5,
    .landing.profilecard .cardstyle .style-box .text-box p {
        text-align: left;
    }

    /* 「準備好進入數位連結的新時代了嗎？」CTA 區塊：
       原本 HTML 是圖片在前、文字在後，手機版堆疊後圖片會在上面。
       改成 column-reverse，讓文字在上、圖片在下。 */
    .landing.profilecard .readygo .landing-aditem {
        flex-direction: column-reverse;
        /* 按鈕與下方圖片之間留 40px（原本兩者是貼齊的） */
        gap: 40px;
    }

    /* 三步驟區塊左側手機圖等比縮小：原本固定 280x580，
       在手機版顯得過高（圖高是背後圓圈 345px 的 1.68 倍，
       桌機只有 1.21 倍）。改為 200px 寬、高度自動 ≈ 414px，
       讓圖與圓圈的比例回到跟桌機一致。 */
    .landing.profilecard .recommender-stepitem img {
        width: 200px;
        height: auto;
    }
}