/* ---------------------------------------------------------
   PAGE SPECIFIC STYLES (Boxed Layout)
   --------------------------------------------------------- */

/* --- 1. Main Content Box (Contains Title + Content) --- */
.pe-boxed-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 60px 80px; /* Spacious padding for desktop */
    max-width: 860px;   /* Optimal reading width */
    margin: 0 auto;     /* Centers the box */
    box-shadow: 0 10px 30px -5px var(--shadow-color);
    
    /* Optional: Subtle top gradient inside the card */
    background-image: linear-gradient(to bottom, var(--bg-subtle) 0%, transparent 150px);
}

/* Title Styles */
.page-title-centered {
    font-size: 2.8rem;
    margin: 0 0 10px 0;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
    line-height: 1.1;
}

/* --- 2. Typography (Prose) --- */
.pe-prose {
    font-size: 1.06rem;
    color: var(--text-main);
    line-height: 1.8;
}

.pe-prose h1, .pe-prose h2, .pe-prose h3, .pe-prose h4 {
    color: var(--text-main);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    line-height: 1.3;
    font-weight: 700;
}

.pe-prose h2 { 
    font-size: 1.8rem; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 0.3em; 
}
.pe-prose h3 { font-size: 1.4rem; }
.pe-prose h4 { font-size: 1.15rem; }

.pe-prose p { 
    margin-bottom: 1.5em; 
    line-height: 1.75; 
    color: var(--text-muted); 
}

.pe-prose ul, .pe-prose ol { 
    margin-bottom: 1.5em; 
    padding-left: 1.5em; 
    color: var(--text-muted); 
}
.pe-prose li { margin-bottom: 0.5em; }

/* Links inside content */
.pe-prose a { 
    color: var(--primary); 
    text-decoration: underline; 
    text-underline-offset: 3px; 
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}
.pe-prose a:hover { 
    color: var(--primary-hover); 
    text-decoration-color: var(--primary);
}

/* Blockquotes */
.pe-prose blockquote {
    border-left: 4px solid var(--primary);
    margin: 2em 0;
    padding: 1.2em 1.5em;
    background: var(--bg-subtle);
    font-style: italic;
    border-radius: 0 12px 12px 0;
    color: var(--text-main);
}

/* Code blocks */
.pe-prose pre {
    background: #1e293b;
    color: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.9rem;
}

/* --- 3. Responsive Adjustments --- */
@media (max-width: 768px) {
    .pe-boxed-content { 
        padding: 40px 24px; 
        border-radius: 16px; 
    }
    
    .page-title-centered { 
        font-size: 2.2rem; 
    }
}