/* assets/css/korenine.css */

/* --- Remove body background to respect global theme --- */
/* body.korenine-page {} */

/* --- Layout --- */
/* Use global main container styles (max-width: 1100px, padding with header offset) */
.newspaper-wrapper {
    /* Inherit global main styles */
}

/* --- Header (Masthead) --- */
.newspaper-header {
    text-align: center;
    margin-bottom: 60px;
    border-bottom: 3px double #ffffff; /* Changed to white */
    padding-bottom: 20px;
}

.header-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff !important; /* Forced white */
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Lighter border */
    padding-bottom: 5px;
}

.newspaper-title {
    font-family: 'Libre Baskerville', serif; /* Changed from Playfair Display */
    font-size: 5rem;
    font-weight: 700; /* Bold for hierarchy */
    margin: 10px 0;
    letter-spacing: -2px;
    line-height: 1;
    color: #ffffff !important; /* Forced white */
}

.header-divider {
    display: flex;
    flex-direction: column; /* Stacked vertically */
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.divider-line {
    height: 3px;
    background: #ffffff !important; /* Forced white */
    width: 100%; /* Full width */
    max-width: 300px; /* Visible length */
}

.divider-text {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: none; /* Changed from uppercase to none for sentence case */
    letter-spacing: 2px;
    font-size: 1.2rem; /* Increased from 0.9rem */
    color: #ffffff !important; /* Forced white */
    font-style: italic; /* Added italic style */
}

/* --- Grid System (Uniform Cards) --- */
.newspaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* --- New Vintage Card Style (contained photo) --- */
.story-card.korenine-card {
    background: #fffcf5; /* Floral White for vintage feel */
    border: 3px double #d3d1cb; /* Double border for vintage news feel */
    border-radius: 24px; /* MATCH ZGODBE: Radius */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* MATCH ZGODBE: Shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure full width in grid */
    margin-bottom: 0;
}

.story-card.korenine-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.article-image-container {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    /* Vintage filter optional, can be removed if user wants clean photo */
    filter: sepia(15%) contrast(1.05); 
}

.article-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.2) grayscale(0.1) contrast(1.1); /* Vintage photo filter */
}

.article-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.separator {
    margin: 0 5px;
    color: var(--primary-color);
}

.story-title {
    font-family: 'Libre Baskerville', serif !important; /* Changed from Inter */
    font-size: 1.25rem; /* MATCH ZGODBE: Size */
    font-weight: 700; /* Bold for hierarchy */
    margin: 0 0 8px 0;
    color: #111111 !important; /* Soft Black */
    line-height: 1.2;
    text-transform: none; /* Changed from uppercase to none for sentence case */
    text-align: center; /* CENTERED */
}

.title-separator {
    width: 100%; /* Full width within container */
    max-width: 300px; /* Cap width for aesthetics, similar to header divider */
    height: 1px; /* Thinner */
    background-color: var(--primary-color);
    margin: 8px auto 12px auto;
    border-radius: 0;
    opacity: 0.5; /* Lighter opacity */
}

.subheadline {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px; /* Increased from 13px per user request */
    font-weight: 600;
    color: #666 !important;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-style: normal;
    text-align: center;
}
.story-text {
    font-family: 'Libre Baskerville', serif !important; /* Changed from Inter */
    font-size: 15px;
    line-height: 1.6;
    color: #333; /* Removed !important to allow overrides */
    margin-bottom: 20px;
    flex-grow: 1;
    text-align: justify; /* Changed to justify */
}

/* Drop Cap for the preview card text as well */
.story-text::first-letter {
    float: left;
    font-size: 3.5rem;
    line-height: 1; /* Increased to fix ŠČŽ clipping */
    padding-right: 8px;
    padding-top: 0;
    font-weight: 700;
    color: #111111;
    margin-top: 0.1em;
}

/* Remove Drop Cap for card view to save space */
.drop-cap-wrapper {
    display: block;
}

/* --- Functional Tags (Stamps inside card) --- */
.article-tags {
    margin-top: 15px; /* Removed auto to fix gap */
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center; /* Prevent stretching */
    justify-content: center; /* Center tags */
}

.tags-label {
    display: none; /* Hide label in card to save space */
}

.tag-stamp {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    color: #555;
    border: 1px solid #ccc;
    padding: 2px 6px;
    text-decoration: none;
    background: #fff;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.tag-stamp:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.continue-reading {
    display: inline-block;
    margin-top: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.continue-reading:hover {
    text-decoration: underline;
}

/* --- Single Article View Redesign --- */
.single-article-view {
    background: #fffcf5; /* Floral White for vintage feel */
    padding: 0; /* Removed padding to let image flush */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    max-width: 500px; /* Matched Zgodbe width */
    margin: 0 auto;
    border: 3px double #d3d1cb; /* Double border for vintage news feel */
    overflow: hidden; /* For image corners */
}

.single-header {
    padding: 20px 20px 10px 20px;
    text-align: center;
}

.single-header .headline {
    font-size: 2rem; /* Increased from 1.6rem to match Zgodbe */
    color: #111111 !important; /* Soft Black */
    font-weight: 800; /* Ensure bold */
    line-height: 1.2;
    text-transform: none; /* Changed from uppercase to none for sentence case */
    margin-bottom: 8px;
    margin-top: 5px; /* Increased from 0 to 5px */
    text-align: center; /* Reverted to center for better aesthetics */
}

.single-image-container {
    margin-bottom: 0;
    width: 100%;
    height: auto;
    max-height: 400px;
    overflow: hidden;
}

.single-image-container img {
    border-radius: 0;
    box-shadow: none;
    border: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.2) grayscale(0.1) contrast(1.1); /* Vintage photo filter */
}

.single-content {
    padding: 0 15px 15px 15px; /* Reduced padding to match Zgodbe expanded */
    font-family: 'Libre Baskerville', serif !important; /* Changed from Merriweather */
    font-size: 18px; /* Increased from 16px per user request */
    line-height: 1.6; /* Standard line height */
    color: #000000 !important;
}

/* Tighter margins for paragraphs */
.single-content p {
    margin-bottom: 10px;
    font-family: 'Libre Baskerville', serif !important; /* Ensure Paragraphs use new font */
}

/* Robust Drop Cap using PHP-inserted span */
.drop-cap {
    float: left;
    font-size: 3.5rem;
    line-height: 0.8; /* Reduced line-height for better vertical alignment */
    padding-right: 8px;
    padding-top: 10px; /* Push down slightly */
    font-weight: 700;
    color: #111111;
    margin-top: 0; /* Remove top margin */
    margin-bottom: -5px; /* Pull text up */
}

/* Remove old CSS selectors to avoid double styling */
/* .single-content > p:first-child::first-letter, ... */

/* Force inner content headers/bold to be black (override global white) and smaller */
.single-content h1, 
.single-content h2, 
.single-content h3, 
.single-content h4, 
.single-content h5, 
.single-content h6 {
    color: #000000 !important;
    font-family: 'Libre Baskerville', serif !important; /* Changed from Inter */
    margin-top: 15px;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Specific heading sizes to match Zgodbe compact style */
.single-content h1 { font-size: 1.6rem; font-weight: 800; } /* Increased from 1.4rem */
.single-content h2 { font-size: 1.4rem; font-weight: 700; } /* Increased from 1.25rem */
.single-content h3 { font-size: 1.25rem; font-weight: 700; } /* Increased from 1.1rem */
.single-content h4 { font-size: 1.1rem; font-weight: 600; text-transform: uppercase; } /* Increased from 1rem */

/* Style lists for vintage feel */
.single-content ul {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 20px;
}

.single-content ul li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 10px;
}

.single-content ul li::before {
    content: "—"; /* Em Dash */
    position: absolute;
    left: -15px;
    color: #111111;
    font-weight: 700;
}

/* Style Bold text for vintage emphasis */
.single-content strong,
.single-content b {
    font-weight: 700;
    color: #111111 !important;
    letter-spacing: 0.5px; /* Ink spread simulation */
}

/* Style Blockquotes */
.single-content blockquote {
    margin: 30px 0;
    padding: 20px;
    border-top: 1px solid #d3d1cb;
    border-bottom: 1px solid #d3d1cb;
    text-align: center;
    font-style: italic;
    font-family: 'Libre Baskerville', serif;
    font-size: 1.2rem;
    color: #111111;
    background: transparent;
}

/* --- Vintage Ornament Style (Applied via TinyMCE) --- */
.vintage-ornament {
    text-align: center;
    font-size: 2rem;
    color: #8b0000; /* Dark Red Accent */
    margin: 30px 0;
    line-height: 1;
    font-family: 'Libre Baskerville', serif;
}

.vintage-ornament::before {
    content: "❦"; /* Floral Heart / Fleuron */
    display: block;
}

/* New Tilde Ornament Line */
.ornament-line {
    text-align: center;
    font-size: 2rem;
    color: #000000 !important; /* Changed to Black */
    margin: 20px 0;
    font-family: 'Libre Baskerville', serif;
    line-height: 1;
    width: 100%;
    display: flex; /* Flexbox for lines */
    align-items: center;
    justify-content: center;
}

.ornament-line::before,
.ornament-line::after {
    content: '';
    flex: 1; /* Stretch to fill width */
    border-bottom: 1px solid #000000; /* Black line */
    margin: 0 15px; /* Spacing around the tilde */
    height: 1px;
    opacity: 0.3; /* Subtle line */
}

/* Alternate Quote Style for TinyMCE */
.vintage-quote {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: 1.3rem;
    text-align: center;
    border-left: none;
    border-top: 3px double #d3d1cb;
    border-bottom: 3px double #d3d1cb;
    padding: 20px;
    margin: 40px 0 20px 0; /* Reduced bottom margin to 20px */
    background: #fffcf5;
    box-sizing: border-box; /* Ensure padding doesn't increase width */
    max-width: 100%; /* Prevent overflow */
    clear: both; /* Clear floats */
}

/* --- Responsive --- */
.story-interactions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px; /* Reduced from 40px */
    margin-bottom: 20px; /* Reduced from 30px */
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 15px;
    padding-left: 15px;  /* Increased spacing */
    padding-right: 15px; /* Increased spacing */
    clear: both; /* Ensure interactions start below all content */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Handle padding correctly */
}

.interaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: white;
    color: #333; /* Fallback for text-main */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.interaction-btn:hover {
    background: #f9f9f9;
    border-color: #3D405B; /* Replaced var(--primary-color) with hex */
    transform: translateY(-1px);
}

.like-btn.active {
    color: #e0245e;
    border-color: #e0245e;
    background: #fff0f5;
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.share-btn {
    padding: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .newspaper-grid {
        grid-template-columns: 1fr;
    }
    
    .single-article-view {
        padding: 0; 
        /* WIDER CARD FOR MOBILE (Fixed "Too Narrow" Issue) */
        margin: 5px; /* Reduced from 15px */
        width: calc(100% - 10px); /* Reduced from 30px subtraction */
        border: 3px double #d3d1cb;
        border-radius: 12px;
        overflow: hidden; 
        background: #fffcf5;
    }

    /* Force image to be full width and top-aligned */
    .single-image-container {
        width: 100%;
        height: 250px; /* Fixed height for mobile */
        border-radius: 0; /* Let overflow:hidden handle corners */
        margin-bottom: 0;
        border-bottom: 1px solid #eee;
    }

    .single-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }

    .single-header {
        padding: 20px 15px 10px 15px; /* Adjust padding */
    }

    .single-content {
        padding: 0 15px 15px 15px;
    }

    /* Optimize Interactions for Mobile to stay in one row */
    .story-interactions {
        flex-wrap: nowrap; /* Force one row */
        gap: 8px; /* Reduced gap */
        padding-left: 15px; /* Restore padding */
        padding-right: 15px; /* Restore padding */
    }

    .interaction-btn {
        padding: 6px 10px; /* Smaller button padding */
        font-size: 13px; /* Smaller font */
    }

    .share-buttons {
        gap: 5px; /* Tighter share buttons */
    }
    
    .single-header .headline {
        font-size: 1.6rem; /* Increased from 1.3rem to differentiate from body text */
        line-height: 1.25; /* Adjusted line-height for readability */
    }
    
    .newspaper-title {
        font-size: 3rem;
    }
}

/* --- Issue Interactions (Like/Share at bottom) --- */
.issue-interactions-footer {
    margin-top: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: flex;
    justify-content: center;
}

.issue-interactions-container {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.issue-like-btn {
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 1.1rem;
    border-width: 2px;
}

.share-label.text-white-force {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* --- Archive Section --- */
.korenine-archive-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 3px double rgba(255,255,255,0.3);
}

.archive-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 2rem;
    color: #ffffff !important; /* Forced White */
    text-align: center;
    margin-bottom: 30px;
}

.archive-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.archive-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.archive-item:hover,
.archive-item.active {
    background: #ffffff;
    border-color: #ffffff;
}

.archive-number {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #ffffff;
    opacity: 0.7;
}

.archive-name {
    font-family: 'Libre Baskerville', serif;
    color: #ffffff;
    font-size: 1rem;
}

/* Hover/Active states invert colors */
.archive-item:hover .archive-number,
.archive-item:hover .archive-name,
.archive-item.active .archive-number,
.archive-item.active .archive-name {
    color: #111111;
    opacity: 1;
}