/* ============================================
   Deep-Dive Article Layout
   ============================================
   A batch of long-form deep dives was authored against a template that was
   never implemented: they wrap their content in .university-content /
   .university-container and use ~50 element classes (.quick-stats,
   .comparison-table, .key-takeaways, .step-process, …) that had no CSS
   anywhere on the site. The result rendered as unstyled full-width text —
   no max-width, no padding, line lengths of 1400px+.

   This file supplies that missing template. It deliberately reuses the
   palette and radius/shadow tokens from /css/styles.css so these pages sit
   flush with the sidebar-based deep dives rather than becoming a second
   visual language.

   Pages using it:
     retirement-planning/deep-dives/sequence-of-returns-risk.html
     retirement-planning/deep-dives/longevity-insurance.html
     retirement-planning/deep-dives/social-security-optimization.html
     retirement-planning/deep-dives/roth-conversion-ladders.html
     investing-fundamentals/deep-dives/risk-parity-taxable.html
     investing-fundamentals/deep-dives/dynamic-risk-parity.html
   ============================================ */

/* --- Page shell --------------------------------------------------------- */

/* Both wrapper names appear across the batch; treat them as one thing. */
.university-content,
.university-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

/* These pages carry a plain <div class="breadcrumb"> rather than the
   <section class="breadcrumb"> + .breadcrumb-nav pair the rest of the site
   uses, so the shared full-bleed band styling does not apply. */
.university-content > .breadcrumb,
.university-container > .breadcrumb {
    background: none;
    padding: 1.5rem 0 0;
    font-size: 0.875rem;
    color: var(--gray);
}

.university-content > .breadcrumb a,
.university-container > .breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.university-content > .breadcrumb a:hover,
.university-container > .breadcrumb a:hover {
    text-decoration: underline;
}

.deep-dive,
.university-article {
    display: block;
}

/* --- Article header ----------------------------------------------------- */

.article-header {
    padding: 2rem 0 1.75rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2.5rem;
}

.article-header h1 {
    font-size: 2.35rem;
    line-height: 1.25;
    color: var(--dark);
    margin-bottom: 1rem;
}

.article-subtitle {
    font-size: 1.075rem;
    line-height: 1.7;
    color: var(--gray);
    margin-top: 1rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.article-meta > span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray);
    background: var(--light);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

.level-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1rem;
    background: var(--primary-color);
    color: var(--white);
}

.level-badge.intermediate {
    background: var(--accent-color);
}

.level-badge.advanced,
.level-badge.expert {
    background: var(--dark);
}

/* --- Body copy ---------------------------------------------------------- */

.deep-dive section,
.university-article section {
    margin-bottom: 2.5rem;
}

.deep-dive h2,
.university-article h2 {
    font-size: 1.75rem;
    color: var(--dark);
    margin: 2.5rem 0 1rem;
    line-height: 1.3;
}

.deep-dive h3,
.university-article h3 {
    font-size: 1.25rem;
    color: var(--dark);
    margin: 1.75rem 0 0.75rem;
}

.deep-dive h4,
.university-article h4 {
    font-size: 1.05rem;
    color: var(--dark);
    margin: 1.25rem 0 0.5rem;
}

.deep-dive p,
.university-article p {
    line-height: 1.75;
    margin-bottom: 1.15rem;
    color: #334155;
}

.deep-dive ul,
.deep-dive ol,
.university-article ul,
.university-article ol {
    margin: 0 0 1.25rem 1.35rem;
    line-height: 1.75;
    color: #334155;
}

.deep-dive li,
.university-article li {
    margin-bottom: 0.5rem;
}

/* --- Tables ------------------------------------------------------------- */
/* The heaviest element in this batch — 50+ instances. Wrapper scrolls on
   narrow screens so a wide table never widens the page itself. */

.comparison-table,
.data-table {
    overflow-x: auto;
    margin: 1.75rem 0;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
}

.comparison-table table,
.data-table table,
table.comparison-table,
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.comparison-table th,
.data-table th,
table.comparison-table th,
table.data-table th {
    background: var(--light);
    color: var(--dark);
    font-weight: 700;
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.comparison-table td,
.data-table td,
table.comparison-table td,
table.data-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    vertical-align: top;
}

.comparison-table tr:last-child td,
.data-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:hover,
.data-table tbody tr:hover {
    background: #f8fafc;
}

.total-row td,
tr.total-row td {
    font-weight: 700;
    background: var(--light);
    border-top: 2px solid #cbd5e1;
}

.table-caption {
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.5rem;
    font-style: italic;
}

/* --- Stat blocks -------------------------------------------------------- */

.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.75rem 0;
}

.quick-stats .stat,
.stat {
    background: var(--light);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.25rem 1rem;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--gray);
    line-height: 1.4;
}

/* --- Panels: takeaways, summaries, examples, formulas -------------------- */

.key-takeaways,
.executive-summary,
.summary,
.example,
.example-box,
.case-study,
.strategy-box,
.checklist,
.next-steps,
.note,
.warning,
.premium-notice,
.premium-checkpoint,
.table-of-contents {
    padding: 1.5rem;
    border-radius: var(--radius-md);
    margin: 2rem 0;
    border-left: 4px solid var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.key-takeaways h3,
.executive-summary h3,
.summary h3,
.example h3,
.case-study h3,
.strategy-box h3,
.checklist h3,
.next-steps h3,
.table-of-contents h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.key-takeaways ul,
.executive-summary ul,
.summary ul,
.checklist ul,
.next-steps ul,
.table-of-contents ul {
    margin-bottom: 0;
}

.key-takeaways,
.executive-summary {
    border-left-color: var(--secondary-color);
    background: rgba(16, 185, 129, 0.06);
}

.warning,
.premium-notice,
.premium-checkpoint {
    border-left-color: var(--accent-color);
    background: rgba(245, 158, 11, 0.07);
}

.case-study,
.example,
.example-box {
    border-left-color: var(--gray);
    background: var(--light);
}

/* Missing from university.css even though the class is used site-wide. */
.callout-success {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--secondary-color);
}

.formula,
.formula-box,
.code-block,
.code-example {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.65;
}

.formula code,
.formula-box code,
.code-block code,
.code-example code {
    background: none;
    color: inherit;
    padding: 0;
}

.formula h4,
.formula-box h4,
.code-block h4,
.code-example h4 {
    color: #94a3b8;
    font-family: var(--font-main);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.code-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.code-features > * {
    font-size: 0.75rem;
    background: var(--light);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    color: var(--gray);
}

/* --- Numbered process steps --------------------------------------------- */

.step-process {
    margin: 1.75rem 0;
}

.step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.15rem 0;
    border-bottom: 1px solid #eef2f7;
}

.step:last-child {
    border-bottom: none;
}

.step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}

.step-content {
    flex: 1 1 auto;
    min-width: 0;
}

.step-content h3,
.step-content h4 {
    margin-top: 0;
    margin-bottom: 0.4rem;
}

.step-content p:last-child {
    margin-bottom: 0;
}

/* --- Related content, CTAs, footer -------------------------------------- */

.related-content,
.related-articles,
.further-reading,
.article-grid {
    margin: 2.5rem 0;
}

.article-grid,
.related-articles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.related-card,
.article-grid .article-card {
    display: block;
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.related-card:hover,
.article-grid .article-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.further-reading ul {
    list-style: none;
    margin-left: 0;
}

.further-reading li {
    padding: 0.6rem 0;
    border-bottom: 1px solid #eef2f7;
}

.further-reading li:last-child {
    border-bottom: none;
}

.further-reading a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.further-reading a:hover {
    text-decoration: underline;
}

.cta-box {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin: 2.5rem 0;
    text-align: center;
}

.cta-box h2,
.cta-box h3 {
    color: var(--white);
    margin-top: 0;
}

.cta-box p {
    color: rgba(255, 255, 255, 0.92);
}

.cta-button {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.7rem 1.5rem;
    background: var(--white);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-decoration: none;
}

.cta-button:hover {
    background: var(--light);
}

.article-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.875rem;
    color: var(--gray);
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
    .university-content,
    .university-container {
        padding: 0 1rem 3rem;
    }

    .article-header h1 {
        font-size: 1.75rem;
    }

    .article-subtitle {
        font-size: 1rem;
    }

    .quick-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}