/* Mobile responsive header */
@media (max-width: 768px) {
    .header {
        flex-wrap: wrap;
        padding: 15px;
        gap: 10px;
    }

    .header-title {
        font-size: 1.4rem;
    }

    .header-controls {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        gap: 10px;
    }

    .search-box {
        min-width: 120px;
    }

    .category-filter {
        min-width: 120px;
    }

    .add-btn {
        padding: 8px 15px;
        font-size: 13px;
    }

    .profile-pic {
        width: 35px;
        height: 35px;
    }

    .login-btn, .signup-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* Mobile main content layout */
@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .container {
        padding: 15px;
    }
}

/* Mobile place cards - thumbnail layout */
@media (max-width: 768px) {
    .place-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
        min-height: 100px;
    }

    .place-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }

    .photo-container {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        margin-bottom: 0;
        order: 2;
    }

    .place-photo {
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 0;
    }

    .place-name {
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

    .place-category {
        font-size: 0.75rem;
        margin-bottom: 4px;
        width: auto;
        display: inline-block;
        align-self: flex-start;
    }

    .place-address {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .place-rating {
        font-size: 0.9rem;
    }

    .edit-btn {
        bottom: 5px;
        right: 35px;
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .delete-btn {
        bottom: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .instagram-link {
        font-size: 0.75rem;
        padding: 3px 8px;
        margin-top: 4px;
        width: auto;
        display: inline-block;
        align-self: flex-start;
    }
}

/* Mobile modal adjustments */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 5% auto;
        padding: 20px;
        max-height: 85vh;
    }

    .close {
        font-size: 24px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px;
        font-size: 14px;
    }

    .submit-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .photo-upload-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .photo-upload-container span {
        text-align: center;
        font-size: 12px;
    }

    #previewImage {
        height: 100px;
    }
}

/* Mobile map adjustments */
@media (max-width: 768px) {
    #map {
        min-height: 400px;
    }

    .map-controls {
        position: absolute;
        top: 5px;
        left: 5px;
        flex-direction: column;
        gap: 5px;
    }

    .map-control-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .map-loading,
    .map-error {
        padding: 15px;
    }

    .map-loading i,
    .map-error i {
        font-size: 2rem;
    }
}

/* Small mobile devices (phones in portrait) */
@media (max-width: 480px) {
    .header-title {
        font-size: 1.2rem;
    }

    .header-controls {
        flex-direction: column;
        gap: 8px;
    }

    .search-box,
    .category-filter,
    .add-btn {
        width: 100%;
        min-width: auto;
    }

    .main-content {
        height: calc(100vh - 180px);
    }

    .place-card {
        padding: 15px;
        gap: 10px;
    }

    .photo-container {
        width: 60px;
        height: 60px;
    }

    .place-photo {
        width: 60px;
        height: 60px;
    }

    .place-name {
        font-size: 1rem;
    }

    .place-category {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .place-address {
        font-size: 0.8rem;
    }

    .instagram-link {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .edit-btn,
    .delete-btn {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .edit-btn {
        right: 28px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .main-content {
        height: calc(100vh - 160px);
    }

    .modal-content {
        max-height: 90vh;
    }

    #map {
        min-height: 300px;
    }
}

/* High DPI display adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .place-photo,
    #previewImage {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 18px;
    }

    .header-title {
        font-size: 1.6rem;
    }

    .main-content {
        grid-template-columns: 1fr 1.5fr;
    }

    .search-box {
        min-width: 180px;
    }

    .category-filter {
        min-width: 140px;
    }
}

/* Print styles */
@media print {
    .header-controls,
    .auth-section,
    .edit-btn,
    .delete-btn,
    .modal {
        display: none !important;
    }

    .main-content {
        grid-template-columns: 1fr;
        height: auto;
    }

    .place-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .sidebar {
        border: none;
        box-shadow: none;
    }
}