/* ================================================================
   style.css｜鼎峰投資管理顧問 — 股票代墊官網
   ----------------------------------------------------------------
   N5 flat HTML 視覺確認用樣式
   載入順序：tokens.css → tokens-preset.css → style.css → layout.css
   ================================================================ */

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin-bottom: var(--space-md); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-secondary); }

/* === Utility === */
.text-muted { color: var(--color-text-muted); font-size: var(--fs-small); }
.text-gold { color: var(--color-primary); }

.section-title {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-lg);
}
.section-title::before {
    content: '';
    position: absolute;
    left: 0; top: 0.15em;
    width: 3px;
    height: 1em;
    background: var(--color-secondary);
    border-radius: 2px;
}

/* === Layout Container === */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    border: none;
    text-decoration: none;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-bg);
    border: 1px solid var(--color-secondary);
}
.btn-primary:hover {
    background: var(--color-secondary);
    color: var(--color-bg);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-bg);
}
/* LINE 品牌按鈕：固定品牌綠 #06C755，不隨主題 token 變動 */
.btn-line {
    background: #06C755;
    color: #fff;
    border: 1px solid #06C755;
}
.btn-line:hover {
    background: #05a648;
    color: #fff;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* === Cards === */
.card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* === Call-out / Risk Warning Box === */
.callout {
    border-left: 4px solid var(--color-accent);
    background: rgba(232, 200, 74, 0.06);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
}
.callout-title {
    color: var(--color-accent);
    font-weight: 700;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

/* === Divider === */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-xl) 0;
}

/* === Badge === */
.badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-full);
    font-size: var(--fs-small);
    font-weight: 600;
    background: rgba(201, 169, 97, 0.12);
    color: var(--color-primary);
    border: 1px solid rgba(201, 169, 97, 0.3);
}

/* === Sticky CTA Bar === */
.sticky-cta {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 100;
}

/* === Sections === */
section { padding: 5rem 0; }
section:nth-child(even) { background: var(--color-bg-alt); }

/* === Article Content（WordPress 內文防溢出） === */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
    max-width: 100%;
    height: auto;
}
.entry-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
.entry-content {
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ================================================================
   R8 視覺精修：金 K 線品牌 motif + 雜誌式版面 + 破除等寬卡
   ================================================================ */

.kline-svg { width: 100%; height: auto; display: block; }

.section-head { margin-bottom: var(--space-xl); max-width: 42rem; }
.section-kicker {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--color-secondary);
    margin-bottom: var(--space-sm);
}
.section-kicker::before {
    content: ''; width: 2rem; height: 2px; border-radius: 2px;
    background: var(--color-secondary);
}
.section-head .section-title { padding-left: 0; }
.section-head .section-title::before { display: none; }

.pledge-list { margin-top: var(--space-lg); }
.pledge-item {
    display: grid;
    grid-template-columns: clamp(3rem, 7vw, 5rem) 1fr;
    gap: var(--space-sm) var(--space-xl);
    align-items: start;
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--color-border);
}
.pledge-item:last-child { border-bottom: 1px solid var(--color-border); }
.pledge-num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; line-height: 0.85;
    color: transparent; -webkit-text-stroke: 1.5px var(--color-accent);
    letter-spacing: -0.02em;
}
.pledge-body h3 { margin-bottom: var(--space-sm); }
.pledge-body p { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; max-width: 46rem; }
.pledge-tag { display: inline-block; margin-bottom: 0.4rem; font-size: var(--fs-small); font-weight: 600; color: var(--color-primary); letter-spacing: 0.04em; }

.feature-grid {
    display: grid; grid-template-columns: 1.25fr 1fr; grid-auto-rows: 1fr;
    gap: var(--grid-gap); margin-top: var(--space-xl);
}
.feature-lead { grid-row: span 2; }
.feature-lead.card {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, var(--color-bg-alt) 0%, #E7DCC0 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
}
.feature-lead .feature-motif {
    position: absolute; top: -8%; right: -10%; width: 72%; opacity: 0.5; pointer-events: none;
}
.feature-lead h3 { font-size: var(--fs-h2); }
.feature-lead-body { position: relative; z-index: 1; }

.concept-card {
    position: relative; overflow: hidden;
    background: linear-gradient(150deg, var(--color-bg-alt) 0%, #E7DCC0 100%);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-xl); min-height: 15rem;
    display: flex; flex-direction: column; justify-content: center;
    margin-top: var(--space-lg);
}
.concept-card .concept-big {
    font-family: var(--font-display); font-weight: 700; line-height: 0.95;
    font-size: clamp(3.5rem, 9vw, 5.5rem); color: var(--color-primary); position: relative; z-index: 1;
}
.concept-card .concept-label { margin: var(--space-sm) 0 0; color: var(--color-text-muted); font-size: var(--fs-small); max-width: 24rem; position: relative; z-index: 1; }
.concept-card .concept-motif { position: absolute; right: -4%; bottom: -14%; width: 56%; opacity: 0.45; pointer-events: none; }

.article-cover {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #14110A 0%, #2A2410 100%);
    border-radius: var(--radius-lg); aspect-ratio: 16 / 6.5;
    display: flex; align-items: flex-end; padding: var(--space-xl); margin-bottom: var(--space-xl);
}
.article-cover .cover-motif { position: absolute; inset: 0 0 0 auto; width: 58%; opacity: 0.4; pointer-events: none; }
.article-cover .badge { position: relative; z-index: 1; background: rgba(201,169,97,0.18); color: var(--color-accent); border-color: rgba(201,169,97,0.4); }

.hero-motif {
    position: absolute; top: 50%; right: -2%; transform: translateY(-50%);
    width: min(48vw, 600px); opacity: 0.6; pointer-events: none; z-index: 0;
}

@media (max-width: 768px) {
    .feature-grid { grid-template-columns: 1fr; }
    .feature-lead { grid-row: auto; }
    .hero-motif { width: 86vw; opacity: 0.22; right: -24%; }
    .pledge-item { grid-template-columns: 2.5rem 1fr; gap: var(--space-xs) var(--space-md); }
}

/* ================================================================
   R12 裝飾照：page-hero banner + 關於頁品牌故事配圖（文章卡已改回無圖）
   （金 K 線 motif 為品牌主視覺；照片以 filter 統一金色，與 motif 同色溫）
   ================================================================ */

/* — 金色 duotone：照片統一成品牌金（grayscale→sepia→金），與金 K 線 motif 同色溫。
     僅用於關於頁配圖 .media-split-img 與 page-hero .page-hero-bg（文章卡已移除縮圖）。 — */
.media-split-img {
    filter: grayscale(1) sepia(1) saturate(1.55) hue-rotate(2deg) brightness(1.02) contrast(1.02);
}

/* — 關於頁品牌故事：文字 + 圖片雙欄 — */
.media-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
    align-items: center;
}
.media-split-img {
    display: block;
    width: 100%;
    height: auto; /* 覆蓋 HTML height 屬性，讓 aspect-ratio 生效 */
    aspect-ratio: 4 / 3; /* 由直式 4/5 改橫式 4/3，避免右側圖過高、與文字欄較平衡 */
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--color-bg-alt);
}
@media (max-width: 767px) {
    .media-split { grid-template-columns: 1fr; gap: var(--space-lg); }
    .media-split-img { aspect-ratio: 16 / 10; }
}