/**
 * Single Post Layout Styles
 * 
 * Grid layout and responsive design for single post pages.
 */

/* ===== Single Post Page Layout - Mobile First ===== */

/* Base styles - Mobile (320px+) */
.single-page {
    
}

.single-page__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

.single-page__sidebar {
    position: static;
    order: -1;
}

/* ===== Main Content Area ===== */
.single-page__content {
    min-width: 0; /* Prevents grid overflow */
}

.single-page__main {
    max-width: none; /* Remove max-width constraint */
}

.single-header__title {
    font-size: 1.8rem;
}

.single-header__meta {
    flex-direction: column;
    gap: var(--spacing-md);
}

.single-header__meta-item {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}

.single-header__meta-label {
    min-width: 80px;
    font-size: 0.8rem;
}

.single-header__meta-value {
    font-size: 0.9rem;
}

/* Small mobile (576px+) */
@media (min-width: 576px) {
    
    
    .single-header__title {
        font-size: 2rem;
    }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .single-page__layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .single-page__sidebar {
        position: static;
        order: -1;
    }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
    .single-page__layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .single-page__sidebar {
        position: static;
        order: -1;
    }
}

/* Large desktop (1200px+) */
@media (min-width: 1200px) {
    .single-page__layout {
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .single-page__sidebar {
        order: 0;
        position: sticky;
        top: 45px;
    }

    .single-post .container {
        max-width: 1200px;
        padding: 0;
    }
}

/* Extra large (1400px+) */
@media (min-width: 1400px) {
    /* 4K and very large screens */
}