/* ===== RESPONSIVE DESIGN ===== */

/* Large desktop screens (≥ 1400px) */
@media (min-width: 1400px) {
    .blog-container,
    .editor-container,
    .post-container {
        max-width: 1400px;
    }
    .post-card {
        transition: transform 0.2s;
    }
    .post-card:hover {
        transform: translateY(-6px);
    }
}

/* Tablet landscape and small desktops (768px – 1399px) */
@media (max-width: 1399px) and (min-width: 768px) {
    .sidebar {
        width: 280px;
    }
    .blog-container,
    .editor-container,
    .post-container {
        padding: 0 var(--size-4);
    }
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-5);
    }
}

/* Tablet portrait (≤ 768px) */
@media (max-width: 768px) {
    /* General spacing */
    .blog-container,
    .editor-container,
    .post-container {
        margin: var(--size-4) auto;
        padding: 0 var(--size-3);
    }
    .post-card,
    .editor-form,
    .post-form {
        padding: var(--size-4);
    }
    .post-title {
        font-size: var(--font-size-5);
    }
    
    /* Blog list – single column */
    .posts-grid {
        grid-template-columns: 1fr;
        gap: var(--size-4);
    }
    .post-card-image {
        height: 180px;
    }
    
    /* Header stacking */
    .site-header .container {
        flex-direction: column;
        gap: var(--size-3);
    }
    .site-header .container > div {
        justify-content: center;
        flex-wrap: wrap;
    }
    .filter-tabs {
        order: 2;
        margin-top: var(--size-2);
    }
    .site-nav {
        order: 1;
    }
    .user-menu {
        order: 3;
        margin-left: 0;
    }
    
    /* Journey edit page – markers stack */
    .marker-card {
        padding: var(--size-3);
    }
    .marker-header h4 {
        font-size: var(--font-size-2);
    }
    
    /* Buttons – full width on mobile for better touch */
    .button-group {
        flex-direction: column;
    }
    .button-group .btn,
    .button-group a.btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Map page adjustments */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 85%;
        max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.3s;
        box-shadow: var(--shadow-5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 10;
    }
    .sidebar:not(.collapsed) {
        transform: translateX(0);
    }
    /* Map controls */
    .map-controls {
        position: absolute;
        top: var(--size-4);
        right: var(--size-4);
        display: flex;
        flex-direction: column;
        gap: var(--size-2);
        z-index: 400;
    }
    .mode-indicator {
        top: var(--size-4);
        left: var(--size-4);
        font-size: var(--font-size-0);
        padding: var(--size-1) var(--size-2);
    }
    
    /* Blog post – chapters */
    .chapter {
        padding-left: var(--size-3);
        margin-bottom: var(--size-4);
    }
    .chapter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-1);
    }
    .chapter-header h3 {
        font-size: var(--font-size-3);
    }
    
    /* Comments */
    .comment-meta {
        font-size: var(--font-size-0);
        flex-wrap: wrap;
    }
    .delete-comment {
        margin-left: 0;
        margin-top: var(--size-1);
        display: inline-block;
    }
    
    /* Login page */
    .login-container {
        width: 90%;
        padding: var(--size-4);
        margin: var(--size-4);
    }
}

/* Extra small devices (≤ 480px) */
@media (max-width: 480px) {
    .post-title {
        font-size: var(--font-size-4);
    }
    .post-meta {
        font-size: var(--font-size-0);
    }
    .chapter-header h3 {
        font-size: var(--font-size-3);
    }
    .marker-card .form-group label {
        font-size: var(--font-size-0);
    }
    .btn {
        padding: var(--size-2) var(--size-3);
        font-size: var(--font-size-1);
    }
    .toast {
        bottom: var(--size-2);
        right: var(--size-2);
        left: var(--size-2);
        width: auto;
        text-align: center;
    }
}