/* 
* Meire Cerimonialista - Portfolio Section Responsive Stylesheet
* Author: Developer
* Version: 1.0
*/

/* Desktops grandes (1200px e acima) */
@media (max-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .portfolio-shape.shape-1 {
        width: 250px;
        height: 250px;
    }
    
    .portfolio-shape.shape-2 {
        width: 180px;
        height: 180px;
    }
}

/* Desktops médios (992px e acima) */
@media (max-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
    
    .portfolio-title {
        font-size: var(--text-3xl);
    }
    
    .modal-info {
        grid-template-columns: 1fr;
    }
    
    .modal-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .portfolio-filter {
        gap: var(--spacing-2);
    }
}

/* Tablets (768px e acima) */
@media (max-width: 768px) {
    .portfolio-section {
        padding: var(--spacing-16) 0;
    }
    
    .portfolio-header {
        margin-bottom: var(--spacing-8);
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
    
    .portfolio-filter {
        flex-wrap: wrap;
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-8);
    }
    
    .filter-btn {
        font-size: var(--text-xs);
        padding: var(--spacing-2) var(--spacing-4);
        margin-bottom: var(--spacing-2);
    }
    
    .portfolio-title span::before {
        height: 6px;
    }
    
    .modal-gallery {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        padding: var(--spacing-6);
    }
    
    /* Desativar efeitos de tilt 3D em dispositivos móveis */
    .portfolio-item {
        transform: none !important;
    }
    
    /* Tamanho das partículas */
    .portfolio-particle {
        opacity: 0.05 !important;
    }
    
    /* Reduzir tamanho dos shapes decorativos */
    .portfolio-shape.shape-1,
    .portfolio-shape.shape-2,
    .portfolio-shape.shape-3 {
        transform: scale(0.7);
        opacity: 0.03;
    }
}

/* Celulares (576px e acima) */
@media (max-width: 576px) {
    .portfolio-section {
        padding: var(--spacing-12) 0;
    }
    
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .portfolio-subtitle::before,
    .portfolio-subtitle::after {
        width: 20px;
    }
    
    .portfolio-subtitle::before {
        left: -25px;
    }
    
    .portfolio-subtitle::after {
        right: -25px;
    }
    
    .portfolio-title {
        font-size: var(--text-2xl);
    }
    
    .portfolio-description {
        font-size: var(--text-base);
    }
    
    .modal-container {
        width: 95%;
    }
    
    .modal-title {
        font-size: var(--text-xl);
    }
    
    .modal-close {
        width: 30px;
        height: 30px;
        top: var(--spacing-2);
        right: var(--spacing-2);
    }
    
    /* Ajustar tamanho do título no overlay */
    .portfolio-overlay .portfolio-title {
        font-size: var(--text-lg);
    }
    
    /* Reduzir padding do modal content */
    .modal-content {
        padding: var(--spacing-4);
    }
    
    /* Reduzir margem entre elementos no modal */
    .modal-header {
        margin-bottom: var(--spacing-4);
    }
    
    .modal-gallery {
        margin-bottom: var(--spacing-4);
    }
    
    .modal-info {
        gap: var(--spacing-4);
    }
}

/* Celulares pequenos (apenas ajustes críticos) */
@media (max-width: 375px) {
    .filter-btn {
        padding: var(--spacing-1) var(--spacing-3);
        font-size: 11px; /* Tamanho ainda menor */
    }
    
    .portfolio-grid {
        max-width: 280px;
    }
    
    /* Reduzir ainda mais o padding do modal */
    .modal-content {
        padding: var(--spacing-3);
    }
    
    /* Reduzir gutter columns */
    .modal-info {
        gap: var(--spacing-3);
    }
}