/* ======================================================
   GPIR RESEARCH CHAPTER PAGES
   Shared template for pages/chapters/*.html
====================================================== */

/*=====================================================
  BREADCRUMB
======================================================*/

.chapter-breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:#8A94A6;

    margin-bottom:28px;

}

.chapter-breadcrumb a{

    color:#8A94A6;

    text-decoration:none;

}

.chapter-breadcrumb a:hover{

    color:var(--color-primary);

}

.chapter-breadcrumb span{

    color:#8A94A6;

    opacity:.5;

}

.chapter-breadcrumb strong{

    color:var(--hero-navy);

    font-weight:600;

}

/*=====================================================
  HERO
======================================================*/

.chapter-hero{

    position:relative;

    overflow:hidden;

    background:var(--hero-light-bg);

    padding:56px 0 64px;

    color:var(--hero-navy);

}

.chapter-part-tag{

    display:inline-block;

    padding:7px 16px;

    border-radius:999px;

    background:rgba(200,162,74,.12);

    border:1px solid var(--hero-light-border);

    color:var(--hero-navy);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.chapter-hero h1{

    font-family:var(--font-editorial);

    font-size:clamp(2.2rem,4vw,3rem);

    line-height:1.12;

    max-width:820px;

    margin-bottom:18px;

    color:var(--hero-navy);

}

.chapter-hero-intro{

    max-width:760px;

    font-size:17px;

    line-height:1.8;

    color:var(--hero-light-body);

    margin-bottom:36px;

}

.chapter-stat-row{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

    gap:16px;

    max-width:900px;

}

.chapter-stat{

    background:var(--hero-light-card);

    border:1px solid var(--hero-light-border);

    border-top:3px solid var(--hero-gold);

    border-radius:var(--radius-md);

    padding:18px 20px;

    box-shadow:0 4px 16px rgba(15,39,71,.05);

}

.chapter-stat strong{

    display:block;

    font-family:var(--font-editorial);

    font-size:26px;

    color:var(--hero-navy);

    line-height:1;

    margin-bottom:8px;

}

.chapter-stat span{

    display:block;

    font-size:12.5px;

    color:var(--hero-light-body);

    line-height:1.5;

}

/*=====================================================
  CONNECTED INTELLIGENCE PANEL
======================================================*/

.connected-intelligence-panel{

    margin:28px 0 32px;

    padding:22px 22px 18px;

    border:1px solid rgba(18,57,92,.12);

    background:rgba(255,255,255,.72);

    border-radius:var(--radius-lg);

    box-shadow:0 12px 26px rgba(15,39,71,.06);

}

.connected-intelligence-header{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-bottom:16px;

}

.connected-intelligence-label{

    font-size:11px;

    font-weight:700;

    letter-spacing:1.6px;

    text-transform:uppercase;

    color:var(--hero-light-body);

}

.connected-intelligence-header strong{

    font-size:1.05rem;

    color:var(--hero-navy);

}

.connected-intelligence-list{

    list-style:none;

    padding:0;

    margin:0;

    display:grid;

    gap:12px;

}

.connected-intelligence-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding:10px 12px;

    border:1px solid rgba(18,57,92,.08);

    border-radius:12px;

    background:rgba(244,248,252,.8);

}

.connected-intelligence-item a{

    color:var(--hero-navy);

    font-weight:600;

    text-decoration:none;

}

.connected-intelligence-item a:hover{

    color:var(--color-primary);

}

.connected-intelligence-item small{

    font-size:11px;

    color:var(--text-muted);

    letter-spacing:.04em;

    text-transform:uppercase;

    white-space:nowrap;

}

@media (max-width: 720px){

    .connected-intelligence-item{

        flex-direction:column;

        align-items:flex-start;

    }

}

/*=====================================================
  BODY LAYOUT
======================================================*/

.chapter-body{

    background:var(--hero-light-bg);

    padding:56px 0 90px;

}

/*=====================================================
  LEGAL / POLICY PAGES
  No stat-row beneath the intro, so the default hero/body
  padding (tuned for chapter pages with a stat-row) leaves
  excess empty space above the actual document content.
======================================================*/

body.legal-page .chapter-hero{

    padding:48px 0 32px;

}

body.legal-page .chapter-hero-intro{

    margin-bottom:0;

}

body.legal-page .chapter-body{

    padding-top:32px;

}

.chapter-layout{

    display:grid;

    grid-template-columns:240px minmax(0,1fr);

    gap:56px;

    align-items:start;

}

/*=====================================================
  TOC SIDEBAR
======================================================*/

.chapter-toc{

    position:sticky;

    top:100px;

}

.chapter-toc-label{

    display:block;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#8A94A6;

    margin-bottom:14px;

}

.chapter-toc ul{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:2px;

    border-left:1px solid var(--hero-light-border);

}

.chapter-toc a{

    display:block;

    padding:8px 0 8px 16px;

    margin-left:-1px;

    border-left:2px solid transparent;

    color:#8A94A6;

    font-size:13.5px;

    text-decoration:none;

    line-height:1.4;

    transition:color .2s ease, border-color .2s ease;

}

.chapter-toc a:hover{

    color:var(--hero-navy);

    border-left-color:var(--hero-gold);

}

/*=====================================================
  CONTENT
======================================================*/

.chapter-content{

    max-width:800px;

    min-width:0;

    color:var(--hero-light-body);

}

.chapter-content section{

    padding:0 0 48px;

    margin-bottom:48px;

    border-bottom:1px solid var(--hero-light-border);

}

/* Chapter and country pages run to a dozen-plus long-form sections.
   Deferring layout/paint for the ones not yet scrolled to keeps a very
   long research page no more expensive to first-render than a short
   one — content stays in the DOM and accessibility tree throughout,
   only rendering work is skipped until the reader nears each section. */
.chapter-content section:not(:first-of-type){

    content-visibility:auto;

    contain-intrinsic-size:auto 700px;

}

.chapter-content section:last-child{

    border-bottom:none;

    margin-bottom:0;

}

.chapter-content h2{

    font-family:var(--font-editorial);

    font-size:1.7rem;

    color:var(--hero-navy);

    margin-bottom:18px;

    scroll-margin-top:100px;

}

body.legal-page .chapter-content section{

    padding:0 0 32px;

    margin-bottom:32px;

}

body.legal-page .chapter-content h2{

    margin-bottom:10px;

}

.chapter-content h3{

    font-family:var(--font-editorial);

    font-size:1.25rem;

    color:var(--hero-navy);

    margin:28px 0 14px;

}

.chapter-content p{

    font-size:15.5px;

    line-height:1.85;

    color:var(--hero-light-body);

    text-align:justify;

    text-align-last:left;

    margin-bottom:16px;

}

.chapter-content ul{

    margin:0 0 16px;

    padding-left:20px;

    color:var(--hero-light-body);

}

.chapter-content ul li{

    font-size:15px;

    line-height:1.8;

    margin-bottom:6px;

}

/*=====================================================
  DATA TABLES
======================================================*/

.chapter-table-wrap{

    overflow-x:auto;

    max-width:100%;

    margin:20px 0 28px;

    border:1px solid var(--hero-light-border);

    border-radius:var(--radius-md);

}

.chapter-table{

    width:100%;

    border-collapse:collapse;

    font-size:14px;

    white-space:nowrap;

}

.chapter-table th{

    text-align:left;

    padding:12px 18px;

    background:rgba(200,162,74,.08);

    color:var(--hero-navy);

    font-weight:700;

    font-size:12px;

    letter-spacing:.5px;

    text-transform:uppercase;

    border-bottom:1px solid var(--hero-light-border);

}

.chapter-table td{

    padding:12px 18px;

    color:var(--hero-light-body);

    border-bottom:1px solid var(--hero-light-border);

}

.chapter-table tr:last-child td{

    border-bottom:none;

}

.chapter-table-caption{

    font-size:12.5px;

    color:#8A94A6;

    font-style:italic;

    margin:-16px 0 28px;

}

/*=====================================================
  SOURCES / CALLOUT
======================================================*/

.chapter-sources{

    background:var(--hero-light-card);

    border:1px solid var(--hero-light-border);

    border-left:3px solid var(--hero-gold);

    border-radius:var(--radius-md);

    padding:24px 28px;

}

.chapter-sources h4{

    color:var(--hero-navy);

    font-size:14px;

    margin:0 0 10px;

}

.chapter-sources p{

    font-size:13.5px;

    color:#8A94A6;

    line-height:1.7;

    margin:0;

}

/*=====================================================
  COUNTRY INTELLIGENCE PAGES
======================================================*/

.draft-notice{

    display:flex;

    gap:14px;

    align-items:flex-start;

    background:#FFF8E8;

    border:1px solid rgba(200,162,74,.4);

    border-left:3px solid var(--hero-gold);

    border-radius:var(--radius-md);

    padding:16px 20px;

    margin-bottom:40px;

}

.draft-notice-icon{

    flex-shrink:0;

    font-size:18px;

    line-height:1;

}

.draft-notice p{

    margin:0;

    font-size:13.5px;

    line-height:1.7;

    color:#6B5A28;

}

.draft-notice strong{

    color:#4A3D1B;

}

.dashboard-reader{

    margin-bottom:40px;

}

.dashboard-publication-status{

    margin:0 0 14px;

    color:var(--ink-muted);

    font-size:13px;

    letter-spacing:.02em;

}

.dashboard-publication-status strong{

    color:var(--ink);

}

.dashboard-publication-status span{

    margin-left:8px;

}

.country-meta-row{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.country-meta-chip{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 14px;

    border-radius:999px;

    background:var(--hero-light-card);

    border:1px solid var(--hero-light-border);

    font-size:12.5px;

    font-weight:600;

    color:var(--hero-navy);

}

.dashboard-embed{

    display:block;

    border-radius:var(--radius-md);

    overflow:hidden;

    border:1px solid var(--hero-light-border);

    box-shadow:0 12px 32px rgba(15,39,71,.08);

    margin-bottom:8px;

    contain:layout style;

}

.dashboard-embed img{

    display:block;

    width:100%;

    height:auto;
}

.dashboard-embed-caption{

    font-size:12.5px;

    color:#8A94A6;

    font-style:italic;

    margin:0 0 32px;

}

/*=====================================================
  CHAPTER FOOTER NAV
======================================================*/

.chapter-nav-footer{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-top:56px;

    padding-top:32px;

    border-top:1px solid var(--hero-light-border);

}

.chapter-nav-link{

    display:flex;

    flex-direction:column;

    gap:6px;

    max-width:320px;

    padding:16px 20px;

    border:1px solid var(--hero-light-border);

    border-radius:var(--radius-md);

    text-decoration:none;

    background:var(--hero-light-card);

    transition:border-color .2s ease, transform .2s ease;

}

.chapter-nav-link:hover{

    border-color:var(--hero-gold);

    transform:translateY(-2px);

}

.chapter-nav-link.next{

    margin-left:auto;

    text-align:right;

    align-items:flex-end;

}

.chapter-nav-link span{

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#8A94A6;

}

.chapter-nav-link strong{

    color:var(--hero-navy);

    font-size:15px;

}

/*=====================================================
  RESPONSIVE
======================================================*/

@media (max-width:900px){

    .chapter-layout{

        grid-template-columns:minmax(0,1fr);

    }

    .chapter-toc{

        position:static;

        margin-bottom:36px;

    }

    .chapter-toc ul{

        display:grid;

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:560px){

    .chapter-hero{

        padding:44px 0 48px;

    }

    .chapter-nav-footer{

        flex-direction:column;

    }

    .chapter-nav-link.next{

        margin-left:0;

        text-align:left;

        align-items:flex-start;

    }

}