/* ================================
   RESPONSIVE STYLES
   Mobile-First Approach
   ================================ */

/* ================================
   TABLET (768px - 1024px)
   ================================ */
@media (max-width: 1024px) {
    :root {
        --spacing-xl: 32px;
        --spacing-lg: 24px;
    }

    .container {
        grid-template-columns: 180px 1fr 300px;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg) var(--spacing-md);
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.375rem;
    }
}

/* ================================
   TABLET - SMALL (768px - 900px)
   Two Column Layout
   ================================ */
@media (max-width: 900px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "sidebar-right";
    }

    .sidebar-left {
        display: none; /* Hidden on smaller tablets */
    }

    .content {
        grid-area: content;
        max-width: 100%;
    }

    .sidebar-right {
        grid-area: sidebar-right;
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }

    /* Show mobile footer on tablets */
    .mobile-footer {
        display: flex;
        justify-content: space-around;
    }

    /* Add bottom padding to content to account for mobile footer */
    body {
        padding-bottom: 70px;
    }
}

/* ================================
   MOBILE (< 768px)
   Single Column Layout
   ================================ */
@media (max-width: 768px) {
    :root {
        --font-size-base: 1rem;
        --spacing-xl: 24px;
        --spacing-lg: 20px;
        --spacing-md: 16px;
    }

    html {
        font-size: 15px;
    }

    .container {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    /* Typography adjustments */
    h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .lead {
        font-size: 1.125rem;
    }

    /* Show mobile header */
    .mobile-header {
        display: block;
    }

    /* Hide left sidebar completely */
    .sidebar-left {
        display: none;
    }

    /* Content takes full width */
    .content {
        max-width: 100%;
        width: 100%;
    }

    /* Post adjustments */
    .post {
        padding: var(--spacing-lg);
        border-radius: var(--radius-sm);
    }

    /* Right sidebar stacks below content */
    .sidebar-right {
        position: static;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .promo-card img {
        height: 180px;
    }

    /* Post navigation stacks */
    .post-navigation {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .post-navigation .next {
        text-align: left;
    }

    /* Cards for blog listing */
    .card-image {
        height: 200px;
    }

    .card-content {
        padding: var(--spacing-md);
    }

    .card-title {
        font-size: 1.25rem;
    }

    /* Pagination adjustments */
    .pagination {
        gap: var(--spacing-xs);
        margin: var(--spacing-lg) 0;
    }

    .pagination a,
    .pagination span {
        padding: 6px 10px;
        min-width: 36px;
        font-size: 0.813rem;
    }

    .pagination .arrow {
        padding: 6px 12px;
    }

    /* Hide some pagination numbers on very small screens */
    .pagination .page-number:not(.current) {
        display: none;
    }

    .pagination .page-number.current,
    .pagination .page-number:first-of-type,
    .pagination .page-number:last-of-type {
        display: inline-block;
    }

    /* Mobile footer visible */
    .mobile-footer {
        display: flex;
        justify-content: space-around;
    }

    /* Add bottom padding to body for mobile footer */
    body {
        padding-bottom: 70px;
    }

    /* Footer adjustments for mobile */
    .site-footer {
        padding: var(--spacing-md) var(--spacing-sm);
        margin-bottom: 70px; /* Space above sticky mobile footer */
    }

    .footer-copyright {
        font-size: 0.75rem;
        margin-bottom: var(--spacing-xs);
    }

    .footer-links {
        font-size: 0.75rem;
    }

    /* Dividers */
    .divider {
        margin: var(--spacing-md) 0;
    }

    /* View stats */
    .view-stats {
        font-size: 0.688rem;
    }

    /* Buttons */
    .btn {
        width: 100%;
        display: block;
    }
}

/* ================================
   MOBILE - SMALL (< 480px)
   Extra small phones
   ================================ */
@media (max-width: 480px) {
    .container {
        padding: var(--spacing-sm);
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .post {
        padding: var(--spacing-md);
    }

    .promo-card img {
        height: 160px;
    }

    .card-image {
        height: 180px;
    }

    /* Tighter spacing */
    .post-navigation a {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.813rem;
    }

    .mobile-footer a {
        padding: 6px;
    }

    .mobile-footer svg {
        width: 20px;
        height: 20px;
    }
}

/* ================================
   DESKTOP - LARGE (> 1400px)
   Wider screens
   ================================ */
@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
        grid-template-columns: 220px 1fr 380px;
    }

    .content {
        max-width: 750px;
    }
}

/* ================================
   PRINT STYLES
   ================================ */
@media print {
    .sidebar-left,
    .sidebar-right,
    .mobile-footer,
    .back-link,
    .post-navigation,
    .view-stats {
        display: none !important;
    }

    .container {
        display: block;
        max-width: 100%;
    }

    .post {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    body {
        background-color: white;
        color: black;
        padding-bottom: 0;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .divider {
        border-bottom: 1px solid #ccc;
        background: none;
    }
}

/* ================================
   REDUCED MOTION
   Accessibility for users who prefer reduced motion
   ================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-group {
        opacity: 1;
        transform: none;
    }
}

/* ================================
   LANDSCAPE ORIENTATION (Mobile)
   ================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .mobile-footer {
        padding: 6px var(--spacing-sm);
    }

    .mobile-footer a {
        padding: 4px;
    }

    .mobile-footer svg {
        width: 20px;
        height: 20px;
    }

    body {
        padding-bottom: 56px;
    }
}

/* ================================
   DARK MODE SUPPORT (Optional)
   Uncomment if you want to add dark mode
   ================================ */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --text-primary: #fafafa;
        --text-secondary: #d1d1d1;
        --text-muted: #9ca3af;
        --border-color: #404040;
        --accent-color: #ffffff;
    }

    .shadow-sm {
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .shadow-md {
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .shadow-lg {
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}
*/