/* ============================================================
   newdgrie / default — _76_manual.css

   How to Order manual page — editorial timeline layout.

   Scope
   ─────
     • Hero with stats strip
     • Vertical timeline (5 steps) with gold line + dots
     • Pull quotes in story-moment steps (1, 3, 5)
     • Detail cards (payments, customize options)
     • Sub-option grid (measure paths)
     • Deeper guides — 4 cards grid (4 / 2x2 / 1)
     • Dark contact CTA

   Tokens reference: see _01_tokens.css
   Pattern reference: _75_faq.css (Phase 10 FAQ editorial)
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   ROOT CONTAINER
   Manual page is full-bleed (no col-main container constraint).
   Each section manages its own max-width.
   ──────────────────────────────────────────────────────────── */
.dg-manual {
    background: var(--dg-bg);
    color: var(--dg-ink);
    font-family: var(--dg-font-sans);
}


/* ────────────────────────────────────────────────────────────
   HERO
   ──────────────────────────────────────────────────────────── */
.dg-manual-hero {
    background: var(--dg-paper);
    padding: var(--dg-space-5xl) var(--dg-gutter) var(--dg-space-4xl);
    text-align: center;
    border-bottom: 0.5px solid var(--dg-line);
}

.dg-manual-hero__eyebrow {
    font-size: var(--dg-text-xxs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dg-gold);
    margin: 0 0 var(--dg-space-lg);
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.dg-manual-hero__eyebrow::before,
.dg-manual-hero__eyebrow::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--dg-gold);
}

.dg-manual-hero__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(40px, 6vw, 68px);
    font-weight: var(--dg-weight-regular);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0 auto var(--dg-space-lg);
    max-width: 760px;
    color: var(--dg-ink);
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
    text-wrap: balance;   /* กระจายบรรทัดสวย (modern browsers) */
}

.dg-manual-hero__intro {
    font-size: var(--dg-text-md);
    color: var(--dg-muted);
    line-height: var(--dg-leading-loose);
    max-width: 560px;
    margin: 0 auto var(--dg-space-2xl);
}

/* Stats strip — 3 columns separated by hairlines */
.dg-manual-hero__stats {
    display: inline-flex;
    gap: 0;
    background: var(--dg-cream);
    border: 0.5px solid var(--dg-line);
}

.dg-manual-hero__stat {
    padding: var(--dg-space-md) var(--dg-space-xl);
    text-align: center;
    border-right: 0.5px solid var(--dg-line);
}

.dg-manual-hero__stat:last-child {
    border-right: 0;
}

.dg-manual-hero__stat-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-faint);
    margin-bottom: 6px;
}

.dg-manual-hero__stat-value {
    font-family: var(--dg-font-serif);
    font-size: var(--dg-text-base);
    color: var(--dg-ink);
}


/* ────────────────────────────────────────────────────────────
   TIMELINE
   ──────────────────────────────────────────────────────────── */
.dg-manual-timeline {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--dg-space-5xl) var(--dg-gutter) var(--dg-space-3xl);
    position: relative;
}

/* Vertical gold line with fade in/out edges */
.dg-manual-timeline::before {
    content: '';
    position: absolute;
    left: 64px;
    top: var(--dg-space-5xl);
    bottom: var(--dg-space-3xl);
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #d4b888 8%,
        #d4b888 92%,
        transparent 100%
    );
}

.dg-manual-step {
    position: relative;
    padding-left: 128px;
    padding-bottom: var(--dg-space-4xl);
    min-height: 100px;
    scroll-margin-top: 32px;
}

.dg-manual-step:last-child {
    padding-bottom: 0;
}

/* Dot on timeline — hollow circle with gold center */
.dg-manual-step__dot {
    position: absolute;
    left: 56px;
    top: 18px;
    width: 17px;
    height: 17px;
    border-radius: var(--dg-radius-circle);
    background: var(--dg-bg);
    border: 1.5px solid var(--dg-gold);
    z-index: 2;
}

.dg-manual-step__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: var(--dg-radius-circle);
    background: var(--dg-gold);
}

/* Step number badge — has bg to break the timeline line cleanly */
.dg-manual-step__badge {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    text-align: center;
    font-family: var(--dg-font-serif);
    font-size: var(--dg-text-xl);
    letter-spacing: 0.18em;
    color: var(--dg-gold);
    text-transform: uppercase;
    background: var(--dg-bg);
    padding: 6px 0;
    z-index: 3;
}

/* Time pill */
.dg-manual-step__time {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-faint);
    background: var(--dg-paper);
    padding: 5px 14px;
    border: 0.5px solid var(--dg-line);
    margin-bottom: 18px;
}

.dg-manual-step__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: var(--dg-weight-regular);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 var(--dg-space-md);
    color: var(--dg-ink);
}

.dg-manual-step__body {
    font-size: var(--dg-text-base);
    color: var(--dg-ink-soft);
    line-height: 1.75;
    margin: 0 0 var(--dg-space-lg);
}

.dg-manual-step__body strong {
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
}

/* ── Pull quote — editorial italic, gold left border ───── */
.dg-manual-step__quote {
    border-left: 2px solid var(--dg-gold);
    padding: 8px 0 8px 28px;
    margin: var(--dg-space-xl) 0;
    font-family: var(--dg-font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.45;
    color: var(--dg-ink);
    letter-spacing: -0.005em;
}

/* ── Detail card — cream callout with bulleted list ───── */
.dg-manual-step__card {
    background: var(--dg-paper);
    border: 0.5px solid var(--dg-line);
    padding: 26px 28px;
    margin: var(--dg-space-xl) 0;
}

.dg-manual-step__card-title {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dg-gold);
    margin: 0 0 var(--dg-space-md);
    font-weight: var(--dg-weight-medium);
}

.dg-manual-step__card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-manual-step__card-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 0.5px solid var(--dg-cream);
    font-size: 14.5px;
    color: var(--dg-ink-soft);
    line-height: 1.55;
    list-style: none;
}

.dg-manual-step__card-list li:last-child {
    border-bottom: 0;
}

.dg-manual-step__card-list li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: var(--dg-radius-circle);
    background: var(--dg-gold);
    flex-shrink: 0;
    margin-top: 9px;
}

/* ── Sub-options grid (2 paths in Step 3) ─────────────── */
.dg-manual-step__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dg-space-md);
    margin: var(--dg-space-xl) 0;
}

.dg-manual-step__option {
    background: var(--dg-paper);
    border: 0.5px solid var(--dg-line);
    padding: var(--dg-space-lg);
    transition: border-color var(--dg-duration-fast) var(--dg-ease);
}

.dg-manual-step__option:hover {
    border-color: var(--dg-gold);
}

.dg-manual-step__option-icon {
    width: 24px;
    height: 24px;
    color: var(--dg-gold);
    margin-bottom: var(--dg-space-sm);
}

.dg-manual-step__option-title {
    font-size: var(--dg-text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
    margin: 0 0 var(--dg-space-xs);
}

.dg-manual-step__option-text {
    font-size: 13.5px;
    color: var(--dg-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Inline link with arrow ──────────────────────────── */
.dg-manual-step__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--dg-text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-ink);
    padding: 10px 0;
    border-bottom: 1px solid var(--dg-ink);
    margin-top: var(--dg-space-md);
    transition:
        gap var(--dg-duration-fast) var(--dg-ease),
        color var(--dg-duration-fast) var(--dg-ease),
        border-color var(--dg-duration-fast) var(--dg-ease);
}

.dg-manual-step__link:hover,
.dg-manual-step__link:focus-visible {
    gap: 14px;
    color: var(--dg-gold);
    border-color: var(--dg-gold);
    outline: none;
}


/* ────────────────────────────────────────────────────────────
   DEEPER GUIDES (4 cards grid)
   ──────────────────────────────────────────────────────────── */
.dg-manual-help {
    background: var(--dg-paper);
    padding: var(--dg-space-4xl) var(--dg-gutter);
    border-top: 0.5px solid var(--dg-line);
    border-bottom: 0.5px solid var(--dg-line);
}

.dg-manual-help__inner {
    max-width: var(--dg-container-max);
    margin: 0 auto;
}

.dg-manual-help__header {
    text-align: center;
    margin-bottom: var(--dg-space-3xl);
}

.dg-manual-help__eyebrow {
    font-size: var(--dg-text-xxs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dg-gold);
    margin: 0 0 var(--dg-space-sm);
}

.dg-manual-help__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    margin: 0;
}

/* Grid: 4 col desktop, 2x2 tablet, 1col mobile */
.dg-manual-help__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dg-space-md);
}

@media (max-width: 1024px) {
    .dg-manual-help__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .dg-manual-help__grid {
        grid-template-columns: 1fr;
    }
        .dg-manual-step__options {
        grid-template-columns: 1fr;
    }
}

.dg-manual-help__card {
    background: var(--dg-cream);
    border: 0.5px solid var(--dg-line);
    padding: 32px 28px;
    transition:
        border-color var(--dg-duration-base) var(--dg-ease),
        background var(--dg-duration-base) var(--dg-ease),
        transform var(--dg-duration-base) var(--dg-ease);
    display: block;
    text-decoration: none;
}

.dg-manual-help__card:hover,
.dg-manual-help__card:focus-visible {
    border-color: var(--dg-ink);
    background: var(--dg-paper);
    transform: translateY(-2px);
    outline: none;
}

.dg-manual-help__card-icon {
    width: 28px;
    height: 28px;
    margin-bottom: var(--dg-space-md);
    color: var(--dg-gold);
}

.dg-manual-help__card-title {
    font-family: var(--dg-font-serif);
    font-size: 20px;
    font-weight: var(--dg-weight-regular);
    margin: 0 0 var(--dg-space-xs);
    color: var(--dg-ink);
    line-height: 1.3;
}

.dg-manual-help__card-text {
    font-size: 13.5px;
    color: var(--dg-muted);
    line-height: 1.6;
    margin: 0 0 var(--dg-space-md);
}

.dg-manual-help__card-arrow {
    font-size: var(--dg-text-xxs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* ────────────────────────────────────────────────────────────
   CONTACT CTA (dark section)
   ──────────────────────────────────────────────────────────── */
.dg-manual-contact {
    background: var(--dg-ink);
    color: var(--dg-paper);
    padding: var(--dg-space-5xl) var(--dg-gutter);
    text-align: center;
}

.dg-manual-contact__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--dg-space-xl);
    border: 1px solid var(--dg-gold);
    border-radius: var(--dg-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dg-gold-soft, #b8956a);
}

.dg-manual-contact__eyebrow {
    font-size: var(--dg-text-xxs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dg-gold-soft, #b8956a);
    margin: 0 0 var(--dg-space-lg);
}

.dg-manual-contact__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(32px, 4vw, 44px);
    font-weight: var(--dg-weight-regular);
    line-height: 1.15;
    margin: 0 0 var(--dg-space-md);
    color: var(--dg-paper);
}

.dg-manual-contact__text {
    font-size: var(--dg-text-base);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--dg-leading-loose);
    max-width: 520px;
    margin: 0 auto var(--dg-space-2xl);
}

.dg-manual-contact__buttons {
    display: inline-flex;
    gap: var(--dg-space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.dg-manual-contact__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: var(--dg-space-md) 36px;
    font-size: var(--dg-text-xxs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: var(--dg-weight-medium);
    border: 1px solid;
    transition: all var(--dg-duration-base) var(--dg-ease);
    text-decoration: none;
}

.dg-manual-contact__btn--primary {
    background: var(--dg-paper);
    color: var(--dg-ink);
    border-color: var(--dg-paper);
}

.dg-manual-contact__btn--primary:hover,
.dg-manual-contact__btn--primary:focus-visible {
    background: transparent;
    color: var(--dg-paper);
    outline: none;
}

.dg-manual-contact__btn--ghost {
    background: transparent;
    color: var(--dg-paper);
    border-color: rgba(255, 255, 255, 0.35);
}

.dg-manual-contact__btn--ghost:hover,
.dg-manual-contact__btn--ghost:focus-visible {
    border-color: var(--dg-paper);
    background: rgba(255, 255, 255, 0.05);
    outline: none;
}


/* ────────────────────────────────────────────────────────────
   RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dg-manual-step__options {
        grid-template-columns: repeat(2, 1fr);
    }
    .dg-manual-hero {
        padding: var(--dg-space-3xl) var(--dg-gutter-mobile) var(--dg-space-2xl);
    }

    .dg-manual-hero__stats {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .dg-manual-hero__stat {
        border-right: 0;
        border-bottom: 0.5px solid var(--dg-line);
    }

    .dg-manual-hero__stat:last-child {
        border-bottom: 0;
    }

    .dg-manual-timeline {
        padding: var(--dg-space-3xl) var(--dg-gutter-mobile) var(--dg-space-2xl);
    }

    .dg-manual-timeline::before {
        left: 16px;
        top: var(--dg-space-3xl);
        bottom: var(--dg-space-2xl);
    }

    .dg-manual-step {
        padding-left: 56px;
        padding-bottom: var(--dg-space-3xl);
    }

    .dg-manual-step__dot {
        left: 8px;
    }

    .dg-manual-step__badge {
        position: static;
        display: block;
        width: auto;
        text-align: left;
        background: transparent;
        padding: 0;
        margin-bottom: var(--dg-space-sm);
        font-size: 28px;
    }

    .dg-manual-step__quote {
        font-size: 18px;
        padding-left: 20px;
        margin: var(--dg-space-lg) 0;
    }

    .dg-manual-step__card {
        padding: var(--dg-space-md);
    }

    .dg-manual-help {
        padding: var(--dg-space-3xl) var(--dg-gutter-mobile);
    }

    .dg-manual-contact {
        padding: var(--dg-space-3xl) var(--dg-gutter-mobile);
    }

    .dg-manual-contact__buttons {
        flex-direction: column;
        width: 100%;
    }

    .dg-manual-contact__btn {
        width: 100%;
        justify-content: center;
    }
}


/* ────────────────────────────────────────────────────────────
   END _76_manual.css
   ──────────────────────────────────────────────────────────── */