/* Membrane Template — Feed Detail Styles */

.page-header { margin-bottom: var(--spacing-xl); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--border-color); position: relative; }
.page-header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 120px; height: 1px; background: var(--glow-gradient); box-shadow: var(--glow-md); }
.feed-description { color: var(--secondary-color); font-size: 16px; line-height: 1.7; margin: 0; }

.posts-list { display: flex; flex-direction: column; gap: var(--spacing-2xl); }
.post-item { border-bottom: 1px solid var(--border-color); padding-bottom: var(--spacing-xl); }
.post-item:last-child { border-bottom: none; padding-bottom: 0; }

.post-header { margin-bottom: var(--spacing-md); }
.post-title { margin: 0 0 var(--spacing-sm) 0; font-size: 20px; font-weight: 500; }
.post-title a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; }
.post-title a:hover { color: var(--accent-color); text-shadow: 0 0 8px rgba(139, 92, 246, 0.2); }

.post-meta { display: flex; 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-image { margin: var(--spacing-md) 0; }
.post-image img { width: 100%; height: auto; border: 1px solid var(--border-color); }
.post-image a { display: block; }

.post-excerpt { margin: var(--spacing-md) 0; }
.post-excerpt p { color: var(--secondary-color); line-height: 1.7; margin: 0; }

.post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-md); }
.read-more { color: var(--accent-color); text-decoration: none; font-weight: 500; font-size: 13px; transition: text-shadow 0.3s ease; }
.read-more:hover { text-shadow: 0 0 8px rgba(139, 92, 246, 0.3); }

.feed-actions { margin-top: var(--spacing-2xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--border-color); text-align: center; }
.feed-subscribe { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: 10px 24px; background: transparent; color: var(--primary-color); text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--border-color); transition: all 0.3s ease; }
.feed-subscribe:hover { border-color: var(--accent-color); box-shadow: var(--glow-sm); color: var(--accent-color); }

.empty-state { text-align: center; padding: var(--spacing-3xl) var(--spacing-md); color: var(--muted-color); }

@media (max-width: 768px) {
    .post-title { font-size: 18px; }
    .post-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
    .post-author::before { display: none; }
    .post-footer { flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
}