/* ===================================================================
   RetroShell Neo-Chrono Archive — screen.css v4
   Enhancement layer for Ghost content, responsive, and animations.
   Core styles are inline in page-start.hbs for reliability.
   =================================================================== */

/* --- Ghost Content Styles (.gh-content) --- */
.gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4 {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    color: var(--text-primary, #e2e0fc);
    margin: 2rem 0 0.75rem 0;
    line-height: 1.25;
}
.gh-content h2 {
    font-size: 1.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-cyan, #00D4FF);
}
.gh-content h3 { font-size: 1.35rem; }
.gh-content h4 { font-size: 1.1rem; }
.gh-content p { margin: 0 0 1.25rem 0; }
.gh-content a {
    color: var(--accent-cyan, #00D4FF);
    text-decoration: underline;
    text-decoration-color: rgba(0, 212, 255, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.gh-content a:hover { text-decoration-color: var(--accent-cyan, #00D4FF); }
.gh-content img { max-width: 100%; height: auto; border-radius: 2px; margin: 1.5rem 0; }
.gh-content blockquote {
    margin: 1.5rem 0; padding: 1.25rem 1.5rem;
    background: var(--bg-surface, #1A1A2E);
    border-left: 4px solid var(--accent-magenta, #E50363);
    color: var(--text-secondary, #bbc9cf);
    font-style: italic;
}
.gh-content blockquote p:last-child { margin-bottom: 0; }
.gh-content pre {
    margin: 1.5rem 0; padding: 1.25rem;
    background: var(--bg-surface, #1A1A2E);
    border: 1px solid var(--border-subtle, rgba(0,212,255,0.15));
    overflow-x: auto; font-size: 0.875rem; line-height: 1.6;
}
.gh-content code { background: var(--bg-elevated, #28283d); padding: 0.15rem 0.4rem; border-radius: 2px; font-size: 0.875em; }
.gh-content pre code { background: none; padding: 0; }
.gh-content ul, .gh-content ol { margin: 0 0 1.25rem 1.5rem; }
.gh-content li { margin-bottom: 0.4rem; }
.gh-content li::marker { color: var(--accent-magenta, #E50363); }
.gh-content hr {
    border: none; height: 2px; margin: 2.5rem 0;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta), var(--accent-gold));
}
.gh-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.gh-content th, .gh-content td { padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); text-align: left; }
.gh-content th {
    background: var(--bg-surface); font-family: var(--font-display);
    font-weight: 600; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--accent-cyan);
}
.gh-content figcaption { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; font-style: italic; }
.gh-content .kg-width-wide { margin-left: -5rem; margin-right: -5rem; max-width: calc(100% + 10rem); }
.gh-content .kg-width-full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; }
.gh-content .kg-image-card img, .gh-content .kg-gallery-image img { width: 100%; }
.gh-content .kg-bookmark-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 3px; overflow: hidden; margin: 1.5rem 0; }
.gh-content .kg-bookmark-container { display: flex; text-decoration: none; color: inherit; }
.gh-content .kg-bookmark-content { flex: 1; padding: 1rem; }
.gh-content .kg-bookmark-title { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.gh-content .kg-bookmark-description { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-content .kg-bookmark-thumbnail { width: 200px; flex-shrink: 0; }
.gh-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

/* --- Pagination --- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem 0; font-family: var(--font-display); font-size: 0.8rem; color: var(--text-secondary); }
.pagination a { display: inline-block; padding: 0.5rem 1rem; background: var(--bg-surface); color: var(--accent-cyan); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; text-decoration: none; transition: all 0.2s; }
.pagination a:hover { background: var(--accent-cyan); color: var(--bg-base); transform: translateY(-1px); }

/* --- Responsive Card Grid --- */
@media (max-width: 768px) {
    article[style*="grid-template-columns:1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .gh-content .kg-width-wide { margin-left: -1rem; margin-right: -1rem; max-width: calc(100% + 2rem); }
}
@media (max-width: 768px) {
    .gh-content .kg-width-wide { margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* --- Responsive Homepage Grid --- */
@media (max-width: 900px) {
    section[style*="grid-template-columns:1fr 320px"] {
        grid-template-columns: 1fr !important;
    }
    section[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
    }
    section[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* --- Footer Grid Responsive --- */
@media (max-width: 768px) {
    footer [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}
@media (max-width: 480px) {
    footer [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }
    section[style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* --- Post Navigation Responsive --- */
@media (max-width: 600px) {
    div[style*="grid-template-columns:1fr 1fr"][aria-label="Post navigation"] {
        grid-template-columns: 1fr !important;
    }
}

/* --- Print --- */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .rs-header, .rs-breaking, .rs-categories, footer, .skip-link { display: none !important; }
    a { color: #000 !important; }
}