/* ════════════════════════════════════════════════════════════════════════
   Lumos Aloha Reading ── 首頁 Default.aspx
   ────────────────────────────────────────────────────────────────────────
   顏色、字體、圓角沿用 css/aloha.css 的設計變數(A1 Keiki 海灘配色);
   程度卡片直接使用選教材頁的 .aloha-level(各自套用該程度的配色)。
   本檔只放首頁才有的東西,類別一律以 lp- 開頭:
     1. 版面:首頁使用整個視窗寬度
     2. 主視覺(海灘圖片 images/landing-hero-*)
     3. 程度卡片的位置
     4. 一堂課怎麼進行 + 可點字的範例
     5. 每篇閱讀包含什麼
     6. 方案、捐贈、教師、結尾
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. 版面 ── */
html { scroll-behavior: smooth; }
.aloha-wide .aloha-main { width: 100%; padding: 0; gap: 0; }
/* 上方選單的波浪下緣:首頁的主視覺是圖片,所以改成「選單顏色的波浪蓋在圖片上」 */
.aloha-wide .aloha-topbar { z-index: 5; }
.aloha-wide .aloha-topbar::after {
    bottom: -15px;
    background: var(--primary);
    -webkit-mask: radial-gradient(circle at 18px -6px, #000 20px, transparent 21px) repeat-x;
            mask: radial-gradient(circle at 18px -6px, #000 20px, transparent 21px) repeat-x;
    -webkit-mask-size: 36px 16px;
            mask-size: 36px 16px;
}

.lp {
    --lp-deep: #06656b;
    --lp-pop-deep: #c21f5d;   /* 粉紅底上的小字用較深的粉紅,對比才夠 */
    color: var(--ink);
}
.lp-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.lp section { scroll-margin-top: 12px; }

.lp-h1, .lp-h2 { font-family: var(--display); font-weight: 800; color: var(--lp-deep); margin: 0; text-wrap: balance; }
.lp-h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1.02; letter-spacing: -.01em; }
.lp-h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; }
.lp-p { margin: 12px 0 0; max-width: 62ch; font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); }
.lp-p strong { color: var(--ink); }

.aloha .lp-btn-lg { padding: 12px 34px; font-size: 1.3rem; }
.aloha .lp-jump {
    font-weight: 800; font-size: 1.02rem; color: var(--lp-deep);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.aloha .lp-jump:hover { color: var(--pop); }

/* ── 2. 主視覺 ── */
.lp-hero {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    background: #bfe9fb;                       /* 圖片載入前的底色(與圖中的天空相近)*/
    min-height: min(56.25vw, 820px);           /* 圖片是 16:9;很寬的螢幕最高 820px */
}
/* 圖片鋪滿整個區塊;裁切時保留右下角(椰子樹與扶桑花)*/
.lp-hero-art { position: absolute; inset: 0; z-index: 0; }
.lp-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
/* 文字後面加一層由左而右淡出的白色,文字在天空與雲上都清楚 */
.lp-hero::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .3) 36%, rgba(255, 255, 255, 0) 58%);
}
/* 下緣的波浪:與下一區的底色相同 */
.lp-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px; z-index: 1; pointer-events: none;
    background: radial-gradient(circle at 18px 22px, var(--bg) 20px, transparent 21px) repeat-x;
    background-size: 36px 16px;
}
.lp-hero > .lp-wrap { position: relative; z-index: 2; }
.lp-hero-text {
    /* 寬度同時受視窗寬度限制:文字不會壓到右邊的椰子樹 */
    max-width: min(39rem, 52vw);
    /* 下方留給沙灘,以及疊上來的程度卡片 */
    padding: clamp(40px, 5vw, 70px) 0 clamp(120px, 15vw, 230px);
}
.lp-lead { margin: 18px 0 0; max-width: 34rem; font-size: clamp(1.08rem, 1.5vw, 1.28rem); font-weight: 700; line-height: 1.5; color: var(--ink); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
/* 文字連結可能落在海平面或遠方的島上:加一圈白色光暈 */
.lp-hero .lp-jump { text-shadow: 0 0 2px #ffffff, 0 0 8px rgba(255, 255, 255, .9); }
/* 館藏數字:白底的膠囊,在海面上也看得清楚 */
.lp-count {
    display: inline-block; margin: 24px 0 0; padding: 6px 18px;
    background: rgba(255, 255, 255, .86); border-radius: 22px;
    font-weight: 700; color: var(--ink);
}
.lp-count strong { font-family: var(--display); font-weight: 800; font-size: 1.3em; color: var(--lp-deep); font-variant-numeric: tabular-nums; }

/* ── 3. 程度卡片:疊在主視覺的沙灘上 ── */
.lp-levels { position: relative; z-index: 2; background: var(--bg); padding-bottom: clamp(48px, 6vw, 84px); }
.lp-levels-wrap { display: flex; flex-direction: column; }
.lp-levels-text { order: 2; }
.lp-level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: -62px; }
.lp-level-grid .aloha-level-name { margin-top: 14px; }
.lp-levels-text { margin-top: clamp(30px, 4vw, 52px); }

/* ── 4. 一堂課怎麼進行 ── */
.lp-how { background: var(--panel); padding: clamp(56px, 8vw, 108px) 0; }
.lp-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: lp-step; display: grid; gap: 22px; }
.lp-steps li { counter-increment: lp-step; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; }
.lp-steps li::before {
    content: counter(lp-step);
    grid-row: 1 / span 2;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pop); color: var(--pop-ink);
    font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .16);
}
.lp-steps h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; color: var(--lp-deep); }
.lp-steps p { margin: 4px 0 0; font-weight: 700; color: var(--ink-soft); max-width: 46ch; }

/* 範例:縮小版的學習頁 */
.lp-demo {
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px; display: grid; gap: 14px;
}
.lp-demo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lp-demo-tag { background: var(--pop-soft); color: var(--lp-pop-deep); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: .82rem; }
.lp-demo-title { font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.1; color: var(--lp-deep); }
.lp-demo-level { margin-left: auto; background: var(--sun); color: var(--sun-ink); border-radius: 999px; padding: 1px 12px; font-weight: 800; font-size: .86rem; }
.lp-demo-video {
    position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius-sm);
    background: radial-gradient(circle at 50% 40%, #1b5560 0, #0d3239 70%);
    display: grid; place-items: center;
}
.lp-demo-play {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--pop); color: #ffffff; font-size: 2.1rem; line-height: 1;
    display: grid; place-items: center; padding-left: 4px;
}
.lp-demo-caption { position: absolute; left: 14px; bottom: 10px; color: #ffffff; font-weight: 800; font-size: .95rem; }
.lp-demo-read {
    position: relative;
    background: var(--panel); border-radius: var(--radius-sm);
    padding: 16px 18px;
    font-family: var(--read); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.75; color: var(--ink);
}
.lp-demo-sent { display: inline; }
/* details 要用 inline-block 才會留在句子裡(inline 會被瀏覽器當成區塊而換行)*/
.lp-word { display: inline-block; }
.lp-word > summary {
    list-style: none; cursor: pointer; line-height: 1.3;
    color: var(--lp-pop-deep); font-weight: 700;
    border-bottom: 3px solid var(--pop-soft);
}
.lp-word > summary::-webkit-details-marker { display: none; }
.lp-word > summary:hover,
.lp-word[open] > summary { border-bottom-color: var(--pop); }
/* 說明固定出現在文字區塊的下緣(與區塊同寬):不會超出畫面,也不會蓋住其他可以點的字 */
.lp-word-pop {
    position: absolute; z-index: 4; left: 12px; right: 12px; top: calc(100% - 8px);
    background: var(--ink); color: #ffffff; border-radius: 14px; padding: 10px 14px;
    font-family: var(--ui); font-size: .98rem; font-weight: 700; line-height: 1.4; text-align: left;
    box-shadow: 0 8px 18px rgba(35, 66, 75, .28);
}
.lp-word-pop b { font-family: var(--display); font-size: 1.15rem; color: var(--sun); }
.lp-word-pop i { opacity: .8; }
.lp-word-kk { opacity: .85; font-weight: 500; }
.lp-demo-hint { margin: 0; font-weight: 800; font-size: .95rem; color: var(--lp-pop-deep); }
.lp-demo-note {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    background: var(--pop-soft); border-left: 5px solid var(--pop); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 14px; font-weight: 700;
}
.lp-demo-note b { color: var(--lp-pop-deep); }
.lp-demo-note-type { font-family: var(--display); font-weight: 800; color: var(--lp-deep); }

/* 尚未完成的功能 */
.lp-soon {
    display: inline-block; vertical-align: middle; margin-left: 6px;
    border: 2px dashed var(--line); border-radius: 999px; padding: 1px 10px;
    font-family: var(--ui); font-weight: 800; font-size: .76rem; line-height: 1.5; color: var(--ink-soft); white-space: nowrap;
}

/* ── 5. 每篇閱讀包含什麼 ── */
.lp-inside { background: var(--card); padding: clamp(56px, 8vw, 108px) 0; }
.lp-features {
    list-style: none; margin: clamp(26px, 3.4vw, 44px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 48px) clamp(24px, 4vw, 56px);
}
.lp-features li { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.lp-features i {
    grid-row: 1 / span 2;
    width: 50px; height: 50px; border-radius: 16px;
    display: grid; place-items: center;
    background: var(--sun); color: var(--sun-ink); font-size: 1.5rem;
}
.lp-features li:nth-child(3n + 2) i { background: var(--bg-deep); color: var(--lp-deep); }
.lp-features li:nth-child(3n) i { background: var(--pop-soft); color: var(--pop); }
.lp-features h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--lp-deep); }
.lp-features p { margin: 4px 0 0; font-weight: 700; color: var(--ink-soft); }

/* ── 6. 方案 ── */
.lp-pricing { background: var(--bg); padding: clamp(56px, 8vw, 108px) 0; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(26px, 3.4vw, 40px); align-items: stretch; }
.lp-plan {
    position: relative;
    background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
    padding: 24px 26px 26px;
}
.lp-plan h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--lp-deep); }
.lp-plan-price { margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-plan-text { margin: 12px 0 0; font-weight: 700; color: var(--ink-soft); }
.lp-plan-text strong { color: var(--ink); }
.lp-plan-pack { border: 3px solid var(--pop); box-shadow: 0 6px 0 rgba(238, 69, 128, .22); }
.lp-plan-save {
    position: absolute; right: 18px; top: -16px;
    background: var(--sun); color: var(--sun-ink); border-radius: 999px; padding: 4px 16px;
    font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.lp-plan-give { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 700; color: var(--ink); }
.lp-plan-give svg { width: 30px; height: 30px; flex: none; color: var(--pop); }
.lp-plans-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.lp-foot-note { font-weight: 700; color: var(--ink-soft); }
.lp-foot-note i { color: var(--pop); }

/* 捐贈:第三張卡片 */
.lp-plan-share { background: var(--pop-soft); border-color: transparent; display: flex; flex-direction: column; }
.lp-plan-share svg { width: 84px; height: 84px; color: var(--pop); margin: -4px 0 6px -6px; }
.lp-plan-share p { margin: 8px 0 0; font-weight: 700; color: var(--ink); }

/* 教師 */
.lp-teachers { background: var(--panel); padding: clamp(56px, 8vw, 108px) 0 clamp(64px, 8vw, 116px); }
.lp-teach-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(26px, 5vw, 72px); align-items: center; }
.lp-teachers .lp-jump { display: inline-block; margin-top: 16px; }
.lp-teach-stats { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.lp-teach-count { margin: 0; font-weight: 700; color: var(--ink-soft); font-size: 1.05rem; }
.lp-teach-count strong { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--lp-deep); }
.lp-teach-names { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-teach-names li {
    background: var(--bg); color: var(--ink); border-radius: 999px; padding: 4px 14px;
    font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 結尾:與上方選單相同的顏色與波浪 */
.lp-end { position: relative; background: var(--primary); padding: clamp(60px, 8vw, 104px) 0 clamp(52px, 7vw, 88px); text-align: center; }
.lp-end::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16px;
    background: radial-gradient(circle at 18px -6px, var(--panel) 20px, transparent 21px) repeat-x;
    background-size: 36px 16px;
}
.lp-end .lp-h2 { color: var(--primary-ink); margin-bottom: 24px; }

/* ── 中型螢幕 ── */
@media (max-width: 1000px) {
    .lp-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -34px; }
    .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-plan-share { grid-column: 1 / -1; }
}
/* ── 小螢幕:文字在上,圖片在下 ── */
@media (max-width: 820px) {
    .lp-hero { min-height: 0; background: var(--bg); }
    .lp-hero::before { display: none; }
    .lp-hero-text { max-width: none; padding: 34px 0 18px; }
    .lp-hero-art { position: relative; inset: auto; }
    .lp-hero-art img { height: auto; aspect-ratio: 16 / 9; }
    /* 圖片上緣淡入頁面底色,不會有一條明顯的邊界 */
    .lp-hero-art::before {
        content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%;
        background: linear-gradient(180deg, var(--bg) 0, rgba(217, 245, 242, 0) 100%);
    }
    .lp-how-grid, .lp-teach-grid, .lp-plans { grid-template-columns: minmax(0, 1fr); }
    .lp-level-grid { margin-top: -26px; }
}
@media (max-width: 600px) {
    .lp-wrap { width: calc(100% - 28px); }
    .lp-level-grid, .lp-features { grid-template-columns: minmax(0, 1fr); }
    .lp-actions .aloha-btn { width: 100%; }
    .lp-plans-foot .aloha-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}