/* Membrane Template — Post Detail Styles */

.post-detail { max-width: 720px; }

.breadcrumb { margin-bottom: var(--spacing-lg); font-size: 13px; color: var(--muted-color); }
.breadcrumb a { color: var(--accent-color); text-decoration: none; }
.breadcrumb a:hover { text-shadow: 0 0 8px rgba(139, 92, 246, 0.3); }
.breadcrumb-separator { margin: 0 var(--spacing-sm); color: var(--border-color); }
.current-page { color: var(--muted-color); }

.post-header { margin-bottom: var(--spacing-xl); }

.post-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--primary-color);
    line-height: 1.15;
    text-shadow: 0 0 30px rgba(139, 92, 246, 0.12);
}

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); font-size: 13px; color: var(--muted-color); }
.post-date { font-weight: 500; }
.post-author { position: relative; }
.post-author::before { content: "\00b7"; position: absolute; left: -10px; }
.post-feed a { color: var(--accent-color); text-decoration: none; }

.post-title-image { margin: var(--spacing-xl) 0 var(--spacing-2xl) 0; overflow: hidden; border: 1px solid var(--border-color); }
.post-title-image img { width: 100%; height: auto; max-height: 60vh; object-fit: cover; display: block; }

.post-content { font-size: 16px; line-height: 1.8; color: var(--text-color); margin: var(--spacing-xl) 0; }
.post-content h2 { font-size: 24px; margin: var(--spacing-xl) 0 var(--spacing-md) 0; }
.post-content h3 { font-size: 20px; margin: var(--spacing-xl) 0 var(--spacing-md) 0; }
.post-content a { color: var(--accent-color); text-decoration: underline; text-decoration-color: rgba(139, 92, 246, 0.3); text-underline-offset: 3px; }
.post-content blockquote { border-left: 2px solid var(--accent-color); padding-left: var(--spacing-lg); margin: var(--spacing-xl) 0; font-style: italic; color: var(--secondary-color); box-shadow: -2px 0 12px rgba(139, 92, 246, 0.1); }
.post-content code { background: var(--placeholder-bg); padding: 2px 6px; font-size: 0.9em; font-family: 'Monaco', monospace; border: 1px solid var(--border-color); }
.post-content pre { background: var(--placeholder-bg); padding: var(--spacing-md); overflow-x: auto; margin: var(--spacing-lg) 0; border: 1px solid var(--border-color); }
.post-content pre code { background: none; padding: 0; border: none; }
.no-content { color: var(--muted-color); font-style: italic; text-align: center; padding: var(--spacing-2xl); }

.post-footer { margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--border-color); }
.post-tags { margin-bottom: var(--spacing-xl); }
.tags-label { font-weight: 500; color: var(--primary-color); margin-right: var(--spacing-sm); font-size: 13px; }
.tag { display: inline-block; background: var(--placeholder-bg); color: var(--muted-color); padding: 4px 12px; font-size: 12px; margin: 0 var(--spacing-sm) var(--spacing-sm) 0; border: 1px solid var(--border-color); }

.post-navigation { display: flex; justify-content: space-between; align-items: center; }
.back-to-feed, .external-link { color: var(--accent-color); text-decoration: none; font-weight: 500; font-size: 13px; }
.back-to-feed:hover, .external-link:hover { text-shadow: 0 0 8px rgba(139, 92, 246, 0.3); }

.related-posts { margin-top: var(--spacing-3xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--border-color); }
.related-title { font-size: 20px; font-weight: 500; color: var(--primary-color); margin-bottom: var(--spacing-lg); }
.related-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-lg); }
.related-item { border: 1px solid var(--border-color); overflow: hidden; transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.related-item:hover { border-color: rgba(139, 92, 246, 0.3); box-shadow: var(--glow-sm); }
.related-item a { display: block; text-decoration: none; color: inherit; }
.related-image { aspect-ratio: 16/9; overflow: hidden; }
.related-image img { width: 100%; height: 100%; object-fit: cover; }
.related-content { padding: var(--spacing-md); }
.related-post-title { font-size: 14px; font-weight: 500; color: var(--primary-color); margin: 0 0 var(--spacing-xs) 0; line-height: 1.4; }
.related-date { font-size: 12px; color: var(--muted-color); }

@media (max-width: 768px) {
    .post-title { font-size: 28px; }
    .post-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
    .post-author::before { display: none; }
    .post-navigation { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
    .related-list { grid-template-columns: 1fr; }
}