/* Project Details Page Styles */
.project-details-page {
    background: #F8F8F8;
    min-height: 100vh;
    padding: 0;
    font-family: inherit;
}

/* --- Added mapping for new spm-* class based single template --- */
.spm-project-details { background:#F8F8F8; padding:40px 20px; font-family:inherit; }
.spm-project-container { max-width:1200px; margin:0 auto; }
.spm-back-button { background:#0D2B52; color:#fff; border:none; padding:12px 24px; border-radius:6px; font-size:16px; cursor:pointer; text-decoration:none; display:inline-block; margin-bottom:30px; }
.spm-back-button:hover { background:#143b6d; color:#fff; }
.spm-details-header { margin-bottom:24px; }
.spm-details-title { font-size:40px; font-weight:600; margin:0 0 12px; color:#0D2B52; line-height:1.2; }
.spm-details-meta { display:flex; flex-wrap:wrap; gap:16px; font-size:14px; color:#4B5563; }
.spm-details-meta span { display:flex; align-items:center; gap:6px; }
.spm-details-content { display:flex; gap:32px; align-items:flex-start; }
@media(max-width:1000px){ .spm-details-content { flex-direction:column; } }
.spm-details-main { flex:1 1 65%; display:flex; flex-direction:column; gap:28px; }
.spm-details-text{margin:0 0 54px;}
.spm-details-text p{font-size:13px;line-height:1.6;margin:0 0 16px;color:#1f2430;}
.spm-details-sidebar { flex:1 1 35%; display:flex; flex-direction:column; gap:28px; }

/* Card base */
.spm-summary-card, .spm-timeline-card, .spm-impact-card, .spm-loan-details, .spm-project-status { background:#fff; border-radius:14px; padding:28px 32px; box-shadow:0 4px 14px rgba(0,0,0,0.08); }
.spm-summary-card h2, .spm-timeline-card h3, .spm-impact-card h3, .spm-loan-details h3, .spm-project-status h3 { margin:0 0 20px; font-size:20px; font-weight:600; color:#0D2B52; }

/* Summary grid */
.spm-summary-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.spm-summary-item { display:flex; flex-direction:column; gap:6px; }
.spm-summary-label { font-size:12px; letter-spacing:.5px; font-weight:600; color:#6B7280; text-transform:uppercase; }
.spm-summary-value { font-size:18px; font-weight:600; color:#111827; }
.spm-summary-value.spm-irr-high { color:#047857; }
.spm-summary-value.spm-irr-medium { color:#d97706; }
.spm-summary-value.spm-irr-low { color:#b91c1c; }

/* Timeline */
.spm-timeline-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.spm-timeline-item { background:#F9FAFB; padding:16px 18px; border-radius:10px; }
.spm-timeline-label { font-size:12px; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:.5px; }
.spm-timeline-value { display:block; margin-top:6px; font-size:16px; font-weight:600; color:#0D2B52; }

/* Impact */
.spm-impact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.spm-impact-item { background:#F9FAFB; padding:18px 16px 20px; border-radius:12px; text-align:center; display:flex; flex-direction:column; gap:8px; }
.spm-impact-icon { font-size:26px; line-height:1; }
.spm-impact-value { font-size:18px; font-weight:600; color:#0D2B52; }
.spm-impact-label { font-size:12px; line-height:1.3; color:#6B7280; }

/* Loan details */
.spm-loan-table { display:flex; flex-direction:column; gap:10px; }
.spm-loan-row { display:flex; justify-content:space-between; font-size:14px; background:#F9FAFB; padding:12px 14px; border-radius:8px; }
.spm-loan-label { font-weight:600; color:#374151; }
.spm-loan-value { font-weight:600; color:#0D2B52; }
.spm-loan-highlight { background:#0D2B52; color:#fff; }
.spm-loan-highlight .spm-loan-label, .spm-loan-highlight .spm-loan-value { color:#fff; }

/* Status */
.spm-status-items { display:flex; flex-direction:column; gap:14px; }
.spm-status-item { display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.spm-status-label { font-weight:600; color:#374151; }
.spm-status-value { font-weight:600; padding:6px 12px; border-radius:20px; font-size:12px; letter-spacing:.5px; text-transform:uppercase; }
.spm-status-secured { background:#D1FAE5; color:#065F46; }
.spm-status-pending { background:#FEF3C7; color:#92400E; }

/* Utility */
.spm-details-sidebar .spm-project-status, .spm-details-sidebar .spm-loan-details { position:relative; }
.spm-details-sidebar > * { animation:fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

/* Responsive */
@media (max-width: 640px){
    .spm-details-title { font-size:32px; }
    .spm-summary-grid { grid-template-columns:1fr 1fr; }
    .spm-impact-grid { grid-template-columns:1fr 1fr; }
    .spm-timeline-grid { grid-template-columns:1fr; }
}

/* === New detailed single design === */
.spm-layout-v2{--spm-font-head:#0d0d0d;--spm-gray:#647184;--spm-sep:#d8dde2;--spm-accent:#0D2B52;--spm-status-green:#07b25d;}
.spm-breadcrumb{font-size:11px;letter-spacing:.5px;text-transform:uppercase;display:flex;gap:6px;align-items:center;color:#97a4b2;margin:0 0 20px;}
.spm-breadcrumb a{color:#97a4b2;text-decoration:none;}
.spm-breadcrumb a:hover{color:#0D2B52;}
.spm-breadcrumb .sep{opacity:.5;}
.spm-hero-bar{background:#0D2B52;color:#fff;padding:30px 0 40px;margin:0 0 46px;}
.spm-hero-bar .spm-breadcrumb{color:#c3ced7;margin-bottom:16px;}
.spm-hero-bar .spm-breadcrumb a{color:#c3ced7;}
.spm-hero-bar .spm-breadcrumb a:hover{color:#fff;}
.spm-hero-inner{max-width:1180px;margin:0 auto;padding:0 48px;}
.spm-hero-bar .spm-hero-title{color:#fff;margin:0;}
.spm-hero-title{font-size:38px;line-height:1.18;font-weight:600;margin:0 0 26px;max-width:640px;letter-spacing:.3px;color:var(--spm-font-head);} 
.spm-main-wrap{max-width:1180px;margin:0 auto;padding:0 48px 80px;} 
.spm-top-grid{display:grid;grid-template-columns:minmax(480px,1fr) 420px;gap:72px;align-items:start;margin:12px 0 54px;} 
@media(max-width:960px){.spm-top-grid{grid-template-columns:1fr;gap:40px;}}
.spm-top-text p{margin:0 0 14px;font-size:16px;line-height:1.55;color:#1f2430;} 
.spm-intro-primary{font-size:34px;line-height:1.25;font-weight:600;margin:0 0 18px;color:#111827;letter-spacing:.2px;}
.spm-intro-secondary{font-size:16px;line-height:1.6;color:#1f2430;margin:0 0 22px;font-weight:400;}
.spm-top-media img.spm-hero-image{width:100%;height:340px;border-radius:2px;object-fit:cover;box-shadow:0 2px 4px rgba(0,0,0,.12);} 
@media(max-width:960px){.spm-top-media img.spm-hero-image{height:260px;}}
.spm-meta-bar{display:flex;flex-wrap:wrap;gap:0;padding:0;margin:0 0 50px;} 
.spm-meta-bar.spm-meta-v2 .spm-meta-item{padding:0 42px 0 0;margin:0 42px 0 0;border-right:1px solid var(--spm-sep);display:flex;flex-direction:column;gap:6px;min-height:54px;justify-content:flex-end;} 
.spm-meta-bar.spm-meta-v2 .spm-meta-item:last-child{border-right:none;margin-right:0;padding-right:0;} 
.spm-meta-item .label{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--spm-gray);text-transform:uppercase;} 
.spm-meta-item .value{font-size:13px;font-weight:500;color:#111827;} 
.spm-status-pill{background:#E2F8EE;color:#058447;font-size:11px;font-weight:600;padding:6px 20px;border-radius:40px;display:inline-block;letter-spacing:.5px;} 

/* Impact cards */
.spm-impact-section{margin-bottom:52px;}
.section-title{font-size:34px;font-weight:600;margin:0 0 34px;color:#0d0d0d;letter-spacing:.3px;}
.spm-impact-title{margin-top:0;}
.spm-impact-cards.impact-v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;}
@media (min-width: 1020px){
    .spm-impact-cards.impact-v2{grid-template-columns:repeat(4,1fr);gap:32px;}
}
.impact-card{background:#f4f5f5;border:1px solid #f0f2f3;border-radius:0;padding:26px 28px 30px;display:flex;flex-direction:column;gap:18px;box-shadow:none;min-height:340px;}
.impact-heading{font-size:15px;font-weight:700;letter-spacing:.8px;color:#07b25d;margin:0;text-transform:uppercase;}
.impact-icon{font-size:34px;line-height:1;margin-top:4px;display:flex;align-items:center;justify-content:flex-start;height:44px;}
.impact-icon svg{display:block;width:44px;height:44px;}
.impact-desc-line{font-size:17px;line-height:1.45;margin:0;color:#0b0f17;font-weight:400;max-width:240px;}
.impact-number{font-size:18px;font-weight:700;margin:0;color:#0b0f17;}
.impact-number.strong-line{font-size:20px;}
.impact-number .unit{font-size:18px;font-weight:600;margin-left:6px;color:#0b0f17;text-transform:none;}
.impact-foot.citation{font-size:13px;line-height:1.35;margin:0;color:#0b0f17;font-weight:400;max-width:250px;}

/* Details text */
.spm-details-text{margin:0 0 54px;}
.spm-details-text p{font-size:13px;line-height:1.6;margin:0 0 16px;color:#1f2430;}

/* Loan section */
.spm-loan-section{margin-bottom:40px;}
.spm-loan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:34px;}
.loan-col{display:flex;flex-direction:column;gap:14px;}
.loan-row{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f0f2f4;}
.loan-row:last-child{border-bottom:none;}
.loan-label{font-size:10px;font-weight:700;letter-spacing:.6px;color:#647184;text-transform:uppercase;line-height:1.4;}
.loan-value{font-size:13px;font-weight:500;color:#111827;line-height:1.45;}
.loan-note{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:10px;}
.loan-value-full{font-size:12px;line-height:1.55;color:#374151;display:block;}
.loan-label{font-size:10px;font-weight:700;letter-spacing:.6px;color:#647184;text-transform:uppercase;line-height:1.4;}
.loan-value{font-size:13px;font-weight:500;color:#111827;line-height:1.45;}
.loan-value-full{font-size:12px;line-height:1.55;color:#374151;display:block;}
@media(max-width:640px){.spm-meta-bar{gap:28px;} .spm-loan-grid{grid-template-columns:1fr;} }

/* --- New Loan Card Design --- */
.spm-loan-card{background:#fafbfb;border:1px solid #eef1f2;border-radius:10px;padding:36px 40px 44px;box-shadow:0 1px 3px rgba(0,0,0,.04);} 

/* === Overrides: unify typography color to black & align meta labels === */
.spm-meta-bar.spm-meta-v2{align-items:flex-start;}
.spm-meta-bar.spm-meta-v2 .spm-meta-item{gap:4px;justify-content:flex-start;}

/* Set all textual elements (except where explicit contrast like on dark backgrounds) to black */
.spm-meta-item .label,
.spm-meta-item .value,
.impact-heading,
.impact-desc-line,
.impact-number,
.impact-number .unit,
.impact-foot.citation,
.loan-detail-label,
.loan-detail-value,
.loan-intro,
.loan-title,
.section-title,
.spm-intro-primary,
.spm-intro-secondary,
.spm-top-text p,
.loan-detail-value .unit,
.loan-value,
.loan-label,
.loan-value-full {color:#000 !important;}

/* Breadcrumb keep subtle difference if inside hero, else black */
.spm-breadcrumb, .spm-breadcrumb a {color:#000;}

/* Status pill: neutralize colors to black text */
/* status pill: keep original green styling (override removed) */

/* Remove green heading color for impact cards */
.impact-heading{letter-spacing:.8px;text-transform:uppercase;}
.spm-loan-card .loan-top-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:60px;margin:0 0 26px;} 
.loan-top-label{font-size:14px;letter-spacing:.6px;font-weight:600;color:#111827;text-transform:uppercase;margin:0 0 8px;} 
.loan-top-value{font-size:19px;font-weight:600;color:#0d0d0d;letter-spacing:.2px;} 
.loan-intro{font-size:16px;line-height:1.55;color:#495160;margin:0 0 28px;max-width:760px;} 
.loan-detail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;} 
.loan-detail-label{font-size:17px;font-weight:700;color:#0d0d0d;} 
.loan-detail-value{font-size:17px;font-weight:500;color:#0d0d0d;} 
@media(max-width:720px){.spm-loan-card{padding:28px 26px 34px;} .spm-loan-card .loan-top-grid{gap:34px;} .loan-top-value{font-size:16px;} }

/* Loan details v2 */
.loan-title{font-size:34px;font-weight:600;margin:60px 0 34px;color:#0d0d0d;}
.loan-details-table-v2{display:grid;grid-template-columns:1fr;row-gap:18px;margin:0 0 20px;max-width:1040px;}
.loan-details-table-v2 .loan-row-v2{display:grid;grid-template-columns:repeat(2, minmax(200px, 320px));column-gap:90px;}
.loan-details-table-v2 .loan-head{font-size:14px;font-weight:600;}
.loan-details-table-v2 .loan-cell{font-size:14px;line-height:1.5;color:#0b0f17;}
.loan-details-table-v2 .loan-note-full .loan-cell{font-size:14px;font-weight:400;line-height:1.55;margin-top:6px;padding-top:10px;}
.loan-details-table-v2 .key-val{grid-template-columns:auto 1fr;column-gap:14px;}
.loan-details-table-v2 .key-val .key{font-size:14px;line-height:1.5;}
.loan-details-table-v2 .key-val .val{font-size:14px;line-height:1.5;}
@media(max-width:900px){.loan-details-table-v2 .loan-row-v2{grid-template-columns:1fr;row-gap:4px;} .loan-details-table-v2{row-gap:24px;} }

/* Header Section */
.project-header {
    background: #0D2B52;
    color: white;
    padding: 20px 40px;
}

.project-nav {
    font-size: 14px;
    margin-bottom: 10px;
}

.project-nav .nav-item {
    color: #ccc;
}

.project-nav .nav-item.active {
    color: white;
}

.project-nav .nav-separator {
    margin: 0 8px;
    color: #666;
}

.project-main-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color: white;
}

/* Project Summary Card */
.project-summary-card {
    background: white;
    margin: 30px 40px;
    padding: 30px;
    display: flex;
    gap: 40px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summary-content {
    flex: 1;
}

.summary-title {
    font-size: 22px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px;
    line-height: 1.4;
}

.summary-description {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.summary-meta {
    display: flex;
    gap: 40px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meta-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
}

.meta-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

.summary-image {
    width: 300px;
    flex-shrink: 0;
}

.summary-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Status Badge */
.status-badge {
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.status-badge.operational {
    background: #10b981;
}

.status-badge.under-construction {
    background: #f59e0b;
}

.status-badge.planning {
    background: #3b82f6;
}

/* Section Titles */
.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px;
}

/* Project Impact Section */
.project-impact-section {
    background: white;
    margin: 30px 40px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.impact-grid {
/* (Removed legacy emoji-based .impact-icon styles) */
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.impact-description {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 15px;
}

.impact-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

/* Project Details Section */
.project-details-section {
    background: white;
    margin: 30px 40px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.details-content {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

/* Loan Details Section */
.loan-details-section {
    background: white;
    margin: 30px 40px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.loan-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.loan-details-table th,
.loan-details-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.loan-details-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.loan-details-table td {
    color: #6b7280;
}

.loan-details-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.detail-value {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .project-header {
        padding: 15px 20px;
    }
    
    .project-main-title {
        font-size: 24px;
    }
    
    .project-summary-card {
        margin: 20px;
        padding: 20px;
        flex-direction: column;
    }
    
    .summary-image {
        width: 100%;
    }
    
    .summary-meta {
        flex-direction: column;
        gap: 15px;
    }
    
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .project-impact-section,
    .project-details-section,
    .loan-details-section {
        margin: 20px;
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .impact-grid {
        grid-template-columns: 1fr;
    }
}