/**
 * Mobile Responsive CSS for Photo Uploader Plugin
 * Ensures optimal display across all device sizes
 */

/* Mobile-first responsive design */
@media (max-width: 768px) {
    .photo-uploader-container {
        padding: var(--pu-spacing-sm);
        margin: 0;
    }

    .photo-uploader-upload-area {
        min-height: 200px;
        padding: var(--pu-spacing-md);
    }

    .photo-uploader-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pu-spacing-sm);
    }

    .photo-uploader-gallery-item {
        aspect-ratio: 1;
    }

    .photo-uploader-pricing-section {
        padding: var(--pu-spacing-md);
    }

    .photo-uploader-tier-options {
        flex-wrap: wrap;
        gap: var(--pu-spacing-xs);
        justify-content: center;
    }

    .photo-uploader-tier-option {
        flex: 0 1 calc(50% - var(--pu-spacing-xs));
        min-width: 100px;
        text-align: center;
    }

    .photo-uploader-modal {
        width: 95vw;
        height: 90vh;
        margin: 5vh auto;
    }

    .photo-uploader-crop-container {
        height: 60vh;
    }
}

/* Tablet responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .photo-uploader-gallery {
        grid-template-columns: repeat(3, 1fr);
    }

    .photo-uploader-tier-options {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--pu-spacing-sm);
    }
    
    .photo-uploader-tier-option {
        flex: 0 1 calc(33.333% - var(--pu-spacing-xs));
        min-width: 120px;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .photo-uploader-button {
        min-height: 44px;
        padding: var(--pu-spacing-md) var(--pu-spacing-lg);
    }

    .photo-uploader-gallery-item-actions {
        opacity: 1;
        transform: translateY(0);
    }

    .photo-uploader-tier-option {
        min-height: 50px;
        font-size: var(--pu-font-size-sm);
    }
}