/**


 * Philosophy Chain - Frontend Styles


 * 


 * @package Philosophy_Chain


 * @version 1.0.0


 */





/* ==========================================================================


   CSS Custom Properties (Variables)


   ========================================================================== */





:root {


    /* Colors */


    --pc-primary: #1a3a52;


    --pc-secondary: #2e5a7c;


    --pc-accent: #c9a959;


    --pc-text: #333;


    --pc-text-light: #666;


    --pc-text-muted: #888;


    --pc-bg: #fff;


    --pc-bg-alt: #f8f9fa;


    --pc-border: #e0e0e0;


    


    /* Epoch Colors */


    --pc-epoch-1: #8B4513; /* Awakening - earthy brown */


    --pc-epoch-2: #4A6741; /* Classical - olive */


    --pc-epoch-3: #6B4C9A; /* Faith & Reason - purple */


    --pc-epoch-4: #B8860B; /* Rediscovery - gold */


    --pc-epoch-5: #2F5496; /* Enlightenment - blue */


    --pc-epoch-6: #8B0000; /* Crisis - dark red */


    --pc-epoch-7: #4A4A4A; /* Fragmentation - grey */


    


    /* Spacing */


    --pc-space-xs: 0.25rem;


    --pc-space-sm: 0.5rem;


    --pc-space-md: 1rem;


    --pc-space-lg: 2rem;


    --pc-space-xl: 4rem;


    


    /* Typography */


    --pc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


    --pc-font-heading: Georgia, 'Times New Roman', serif;


    


    /* Transitions */


    --pc-transition: 0.3s ease;


}





/* ==========================================================================


   Base Styles


   ========================================================================== */





.philosophy-chain {


    font-family: var(--pc-font-body);


    color: var(--pc-text);


    line-height: 1.6;


}





/* ==========================================================================


   Single Philosopher Page


   ========================================================================== */





.philosopher-single {


    max-width: 900px;


    margin: 0 auto;


    padding: var(--pc-space-lg);


}





/* Header */


.philosopher-header {


    text-align: center;


    margin-bottom: var(--pc-space-xl);


    padding-bottom: var(--pc-space-lg);


    border-bottom: 1px solid var(--pc-border);


}





.philosopher-portrait {


    width: 200px;


    height: 200px;


    border-radius: 50%;


    object-fit: cover;


    margin-bottom: var(--pc-space-md);


    border: 4px solid var(--pc-bg-alt);


    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);


}





.philosopher-name {


    font-family: var(--pc-font-heading);


    font-size: 2.5rem;


    color: var(--pc-primary);


    margin: 0 0 var(--pc-space-xs);


}





.philosopher-dates {


    font-size: 1.25rem;


    color: var(--pc-text-light);


    margin-bottom: var(--pc-space-md);


}





.philosopher-nutshell {


    font-style: italic;


    font-size: 1.125rem;


    max-width: 600px;


    margin: 0 auto;


}





/* Meta badges */


.philosopher-meta {


    display: flex;


    flex-wrap: wrap;


    gap: var(--pc-space-sm);


    justify-content: center;


    margin-top: var(--pc-space-md);


}





.philosopher-badge {


    display: inline-block;


    padding: var(--pc-space-xs) var(--pc-space-sm);


    font-size: 0.75rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


    border-radius: 3px;


    background: var(--pc-bg-alt);


    color: var(--pc-text-light);


}





.philosopher-badge--epoch {


    background: var(--pc-primary);


    color: #fff;


}





.philosopher-badge--container {


    background: var(--pc-secondary);


    color: #fff;


}





.philosopher-badge--difficulty {


    background: var(--pc-accent);


    color: var(--pc-primary);


}





/* Content sections */


.philosopher-section {


    margin-bottom: var(--pc-space-xl);


}





.philosopher-section__title {


    font-family: var(--pc-font-heading);


    font-size: 1.5rem;


    color: var(--pc-primary);


    margin-bottom: var(--pc-space-md);


    padding-bottom: var(--pc-space-sm);


    border-bottom: 2px solid var(--pc-accent);


}





/* Quotes */


.philosopher-quotes {


    list-style: none;


    padding: 0;


    margin: 0;


}





.philosopher-quote {


    position: relative;


    padding: var(--pc-space-md) var(--pc-space-lg);


    margin-bottom: var(--pc-space-md);


    background: var(--pc-bg-alt);


    border-left: 4px solid var(--pc-accent);


}





.philosopher-quote__text {


    font-style: italic;


    font-size: 1.125rem;


    margin-bottom: var(--pc-space-sm);


}





.philosopher-quote__context {


    font-size: 0.875rem;


    color: var(--pc-text-muted);


}





/* Connections */


.philosopher-connections {


    display: grid;


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


    gap: var(--pc-space-md);


}





.philosopher-connection-group__title {


    font-size: 0.875rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


    color: var(--pc-text-muted);


    margin-bottom: var(--pc-space-sm);


}





.philosopher-connection-list {


    list-style: none;


    padding: 0;


    margin: 0;


}





.philosopher-connection-link {


    display: inline-block;


    padding: var(--pc-space-xs) var(--pc-space-sm);


    margin: var(--pc-space-xs) var(--pc-space-xs) var(--pc-space-xs) 0;


    background: var(--pc-bg-alt);


    color: var(--pc-secondary);


    text-decoration: none;


    border-radius: 3px;


    font-size: 0.875rem;


    transition: var(--pc-transition);


}





.philosopher-connection-link:hover {


    background: var(--pc-secondary);


    color: #fff;


}





/* Works */


.philosopher-masterwork {


    background: var(--pc-bg-alt);


    padding: var(--pc-space-lg);


    margin-bottom: var(--pc-space-md);


}





.philosopher-masterwork__title {


    font-family: var(--pc-font-heading);


    font-size: 1.25rem;


    font-style: italic;


    margin-bottom: var(--pc-space-sm);


}





.philosopher-other-works {


    list-style: none;


    padding: 0;


    margin: 0;


}





.philosopher-other-works li {


    padding: var(--pc-space-sm) 0;


    border-bottom: 1px solid var(--pc-border);


}





.philosopher-work-title {


    font-style: italic;


    color: var(--pc-primary);


}





/* Personal Details Section */


.philosopher-personal__character {


    line-height: 1.7;


}





.philosopher-personal__death {


    margin-top: var(--pc-space-md);


    padding-top: var(--pc-space-md);


    border-top: 1px solid var(--pc-border);


    color: var(--pc-text-light);


}





/* Anecdote Section */


.philosopher-anecdote__content {


    border-left: 5px solid var(--pc-accent);


    padding: 28px 32px;


    background: rgba(201, 169, 89, 0.08);


    border-radius: 0 8px 8px 0;


    line-height: 1.8;


}





/* Anecdote paragraphs - better spacing */


.philosopher-anecdote__content p {


    font-size: 16px;


    line-height: 1.8;


    margin-bottom: 20px;


    color: #333;


}





.philosopher-anecdote__content p:last-child {


    margin-bottom: 0;


}





/* Quote blocks within anecdote - make them stand out */


.philosopher-anecdote__content blockquote {


    font-style: italic;


    font-size: 17px;


    line-height: 2;


    color: #555;


    padding: 20px 28px;


    margin: 24px 0;


    background: rgba(255, 255, 255, 0.6);


    border-left: 4px solid #c9a959;


    border-radius: 0 6px 6px 0;


    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);


}





/* Emphasized text (quotes) should be more prominent */


.philosopher-anecdote__content em {


    font-style: italic;


    color: #4a4a4a;


    font-weight: 500;


}





/* Visual Simile Section */


.philosopher-simile__content {


    font-size: 1.1rem;


    color: var(--pc-secondary);


    border: 2px dashed var(--pc-accent);


    padding: var(--pc-space-lg);


    border-radius: 8px;


    text-align: center;


    background: rgba(201, 169, 89, 0.05);


}





/* Lasting Influence Section */


.philosopher-influence .philosopher-section__content {


    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);


    padding: var(--pc-space-lg);


    border-radius: 8px;


}





/* ================================


   RATINGS & VERDICT


   ================================ */





.philosopher-ratings {


    background: linear-gradient(135deg, var(--pc-primary) 0%, var(--pc-secondary) 100%);


    color: #fff;


    padding: var(--pc-space-xl);


    border-radius: 12px;


    margin-top: var(--pc-space-xl);


}





.philosopher-ratings .philosopher-section__title {


    color: var(--pc-accent);


    border-bottom-color: rgba(255,255,255,0.2);


}





.philosopher-verdict {


    font-size: 1.4rem;


    font-style: italic;


    text-align: center;


    margin-bottom: var(--pc-space-lg);


    color: var(--pc-accent);


}





.philosopher-ratings-grid {


    max-width: 400px;


    margin: 0 auto;


}





.philosopher-rating-row {


    display: flex;


    align-items: center;


    justify-content: space-between;


    padding: var(--pc-space-sm) 0;


    border-bottom: 1px solid rgba(255,255,255,0.1);


}





.philosopher-rating-label {


    flex: 0 0 120px;


    font-size: 0.9rem;


    opacity: 0.9;


}





.philosopher-rating-dots {


    flex: 1;


    text-align: center;


    letter-spacing: 4px;


}





.philosopher-rating-dot {


    color: rgba(255,255,255,0.3);


    font-size: 0.8rem;


}





.philosopher-rating-dot.filled {


    color: var(--pc-accent);


}





.philosopher-rating-value {


    flex: 0 0 50px;


    text-align: right;


    font-weight: 600;


    font-size: 0.9rem;


}





.philosopher-rating-overall {


    margin-top: var(--pc-space-lg);


    display: flex;


    align-items: center;


    gap: var(--pc-space-md);


}





.philosopher-rating-overall-bar {


    flex: 1;


    height: 12px;


    background: rgba(255,255,255,0.2);


    border-radius: 6px;


    overflow: hidden;


}





.philosopher-rating-overall-fill {


    height: 100%;


    background: linear-gradient(90deg, var(--pc-accent), #e0c068);


    border-radius: 6px;


    transition: width 0.5s ease;


}





.philosopher-rating-overall-score {


    font-size: 1.5rem;


    font-weight: 700;


    color: var(--pc-accent);


}





.philosopher-tier {


    text-align: center;


    margin-top: var(--pc-space-md);


    padding: var(--pc-space-sm) var(--pc-space-md);


    border-radius: 20px;


    font-size: 0.85rem;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 1px;


}





.philosopher-tier.tier-1 {


    background: linear-gradient(90deg, #ffd700, #ffb800);


    color: #1a1a1a;


}





.philosopher-tier.tier-2 {


    background: linear-gradient(90deg, #c0c0c0, #a8a8a8);


    color: #1a1a1a;


}





.philosopher-tier.tier-3 {


    background: linear-gradient(90deg, #cd7f32, #b87333);


    color: #fff;


}





.philosopher-tier.tier-4 {


    background: rgba(255,255,255,0.2);


    color: #fff;


}





/* Ratings & Verdict Section */


.philosopher-ratings {


    background: var(--pc-primary);


    color: #fff;


    padding: var(--pc-space-xl);


    border-radius: 12px;


    margin-top: var(--pc-space-xl);


}





.philosopher-ratings .philosopher-section__title {


    color: var(--pc-accent);


    border-color: var(--pc-accent);


}





.philosopher-verdict {


    font-size: 1.4rem;


    font-style: italic;


    text-align: center;


    margin-bottom: var(--pc-space-lg);


    color: #fff;


    line-height: 1.5;


}





.philosopher-ratings-grid {


    max-width: 400px;


    margin: 0 auto;


}





.philosopher-rating-row {


    display: flex;


    align-items: center;


    padding: var(--pc-space-sm) 0;


    border-bottom: 1px solid rgba(255,255,255,0.1);


}





.philosopher-rating-label {


    flex: 0 0 120px;


    font-size: 0.9rem;


    color: rgba(255,255,255,0.8);


}





.philosopher-rating-dots {


    flex: 1;


    display: flex;


    gap: 4px;


}





.philosopher-rating-dot {


    color: rgba(255,255,255,0.2);


    font-size: 1rem;


}





.philosopher-rating-dot.filled {


    color: var(--pc-accent);


}





.philosopher-rating-value {


    flex: 0 0 45px;


    text-align: right;


    font-size: 0.85rem;


    color: rgba(255,255,255,0.6);


}





.philosopher-rating-overall {


    display: flex;


    align-items: center;


    gap: var(--pc-space-md);


    margin-top: var(--pc-space-lg);


    padding-top: var(--pc-space-md);


}





.philosopher-rating-overall-bar {


    flex: 1;


    height: 12px;


    background: rgba(255,255,255,0.2);


    border-radius: 6px;


    overflow: hidden;


}





.philosopher-rating-overall-fill {


    height: 100%;


    background: linear-gradient(90deg, var(--pc-accent), #e8c547);


    border-radius: 6px;


    transition: width 0.5s ease;


}





.philosopher-rating-overall-score {


    font-size: 1.5rem;


    font-weight: bold;


    color: var(--pc-accent);


}





.philosopher-tier {


    text-align: center;


    margin-top: var(--pc-space-md);


    padding: var(--pc-space-sm) var(--pc-space-md);


    border-radius: 20px;


    font-size: 0.9rem;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





.philosopher-tier.tier-1 {


    background: linear-gradient(135deg, #ffd700, #ffec8b);


    color: #333;


}





.philosopher-tier.tier-2 {


    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);


    color: #333;


}





.philosopher-tier.tier-3 {


    background: linear-gradient(135deg, #cd7f32, #daa06d);


    color: #fff;


}





.philosopher-tier.tier-4 {


    background: rgba(255,255,255,0.1);


    color: rgba(255,255,255,0.8);


}





/* Threads / Tags */


.philosopher-threads {


    display: flex;


    flex-wrap: wrap;


    gap: var(--pc-space-sm);


}





.philosopher-thread {


    padding: var(--pc-space-xs) var(--pc-space-md);


    background: var(--pc-primary);


    color: #fff;


    font-size: 0.75rem;


    text-transform: uppercase;


    letter-spacing: 0.05em;


    border-radius: 20px;


}





/* ==========================================================================


   Archive / Grid View


   ========================================================================== */





.philosophers-archive {


    max-width: 1200px;


    margin: 0 auto;


    padding: var(--pc-space-lg);


}





.philosophers-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));


    gap: var(--pc-space-lg);


}





.philosopher-card {


    background: var(--pc-bg);


    border: 1px solid var(--pc-border);


    border-radius: 8px;


    overflow: hidden;


    transition: var(--pc-transition);


}





.philosopher-card:hover {


    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);


    transform: translateY(-2px);


}





.philosopher-card__portrait {


    width: 100%;


    height: 200px;


    object-fit: cover;


}





.philosopher-card__content {


    padding: var(--pc-space-md);


}





.philosopher-card__name {


    font-family: var(--pc-font-heading);


    font-size: 1.25rem;


    margin: 0 0 var(--pc-space-xs);


}





.philosopher-card__name a {


    color: var(--pc-primary);


    text-decoration: none;


}





.philosopher-card__name a:hover {


    color: var(--pc-secondary);


}





.philosopher-card__dates {


    font-size: 0.875rem;


    color: var(--pc-text-muted);


    margin-bottom: var(--pc-space-sm);


}





.philosopher-card__nutshell {


    font-size: 0.875rem;


    color: var(--pc-text-light);


    font-style: italic;


}





/* ==========================================================================


   Epoch-specific colors


   ========================================================================== */





.epoch-the-awakening .philosopher-badge--epoch { background: var(--pc-epoch-1); }


.epoch-classical-foundations .philosopher-badge--epoch { background: var(--pc-epoch-2); }


.epoch-faith-and-reason .philosopher-badge--epoch { background: var(--pc-epoch-3); }


.epoch-the-rediscovery .philosopher-badge--epoch { background: var(--pc-epoch-4); }


.epoch-the-enlightenment-project .philosopher-badge--epoch { background: var(--pc-epoch-5); }


.epoch-crisis-and-critique .philosopher-badge--epoch { background: var(--pc-epoch-6); }


.epoch-the-fragmentation .philosopher-badge--epoch { background: var(--pc-epoch-7); }





/* ==========================================================================


   Responsive


   ========================================================================== */





@media (max-width: 768px) {


    .philosopher-single {


        padding: var(--pc-space-md);


    }


    


    .philosopher-name {


        font-size: 1.75rem;


    }


    


    .philosopher-portrait {


        width: 150px;


        height: 150px;


    }


    


    .philosopher-connections {


        grid-template-columns: 1fr;


    }


}