/* 
 * Responsive Utilities
 * All media queries and responsive design rules
 */

/* Desktop and Large Screens */
@media (min-width: 1025px) {
    .ppg-gallery {
        grid-template-columns: repeat(var(--ppg-columns), 1fr);
    }
}

/* Tablet Landscape */
@media (max-width: 1024px) and (min-width: 769px) {
    .ppg-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5em;
    }
    
    .ppg-star {
        font-size: 1.6em !important;
        margin: 0 2px;
    }
    
    .ppg-stars {
        padding: 8px 4px;
    }
    
    .ppg-login-message {
        font-size: 13px;
        padding: 7px 10px;
    }
}

/* Tablet Portrait */
@media (max-width: 768px) and (min-width: 481px) {
    .ppg-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.2em;
    }
    
    .ppg-gallery-title {
        margin-bottom: 1em;
        padding-top: 20px;
    }
    
    .ppg-gallery-title h3 {
        font-size: 1.7em;
        margin-bottom: 0.75em;
    }
    
    .ppg-filters-row {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-bottom: 1.5em;
        padding: 0.5em 0;
    }
    
    .ppg-view-filters {
        justify-content: center;
        order: 1;
    }
    
    .ppg-control-filters {
        justify-content: center;
        order: 2;
        gap: 8px;
    }
    
    .ppg-filter {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    .ppg-rating-select {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 100px;
        padding-right: 28px;
        background-size: 14px;
        background-position: right 6px center;
    }
    
    .ppg-star {
        font-size: 1.4em !important;
        margin: 0 2px;
    }
    
    .ppg-stars {
        padding: 8px 4px;
    }
    
    .ppg-rating-info {
        font-size: 18px;
        padding: 12px 15px;
        margin: 12px 0 0 0;
    }
    
    .ppg-rating-info div {
        margin-bottom: 6px;
    }
    
    .ppg-login-message {
        font-size: 13px;
        padding: 7px 10px;
    }
}

/* Mobile Landscape and Small Tablets */
@media (max-width: 640px) and (min-width: 521px) {
    .ppg-star {
        font-size: 1.6em !important;
        margin: 0 2px;
    }
    
    .ppg-login-message {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* Mobile Portrait Large */
@media (max-width: 520px) and (min-width: 421px) {
    .ppg-star {
        font-size: 2.1em !important;
        margin: 0 2px;
    }
    
    .ppg-stars {
        padding: 8px 4px;
    }
    
    .ppg-login-message {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .ppg-gallery,
    .ppg-wrapper .ppg-gallery,
    .ppg-wrapper[data-gallery-id] .ppg-gallery,
    .ppg-wrapper[data-gallery-id][data-aspect] .ppg-gallery {
        grid-template-columns: 1fr !important;
        gap: 1em !important;
        display: grid !important;
    }
    
    .ppg-gallery-title h3 {
        font-size: 1.5em;
    }
    
    .ppg-filters-row {
        flex-direction: column;
        gap: 12px;
        padding: 1em 0;
    }
    
    .ppg-view-filters {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .ppg-control-filters {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .ppg-filter {
        display: block !important;
        width: 200px !important;
        max-width: 200px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .ppg-rating-select {
        width: 200px;
        text-align: center;
        padding-left: 20px;
        padding-right: 40px;
        background-position: right 12px center;
    }
    
    .ppg-rating-info {
        font-size: 16px;
        padding: 10px 12px;
        margin: 10px 0 0 0;
    }
    
    .ppg-rating-info div {
        margin-bottom: 4px;
    }
}

/* Small Mobile */
@media (max-width: 420px) and (min-width: 361px) {
    .ppg-gallery,
    .ppg-wrapper .ppg-gallery,
    .ppg-wrapper[data-gallery-id] .ppg-gallery,
    .ppg-wrapper[data-gallery-id][data-aspect] .ppg-gallery,
    .ppg-wrapper[data-gallery-id][data-aspect="original"] .ppg-gallery,
    .ppg-wrapper[data-gallery-id][data-aspect="square"] .ppg-gallery {
        grid-template-columns: 1fr !important;
        -webkit-grid-template-columns: 1fr !important;
        -ms-grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    .ppg-star {
        font-size: 2.0em !important;
        margin: 0 2px;
    }
    
    .ppg-stars {
        padding: 7px 3px;
    }
    
    .ppg-login-message {
        font-size: 13px;
        padding: 7px 10px;
        margin: 8px 0 12px 0;
    }
}

/* Very Small Mobile */
@media (max-width: 360px) and (min-width: 321px) {
    .ppg-gallery {
        grid-template-columns: 1fr !important;
    }
    
    .ppg-star {
        font-size: 1.9em !important;
        margin: 0 1px;
    }
    
    .ppg-stars {
        padding: 6px 2px;
    }
    
    .ppg-login-message {
        font-size: 12px;
        padding: 6px 8px;
        margin: 8px 0 12px 0;
    }
}

/* Extra Small Mobile */
@media (max-width: 320px) {
    .ppg-star {
        font-size: 1.8em !important;
        margin: 0 1px;
    }
    
    .ppg-stars {
        padding: 5px 2px;
    }
    
    .ppg-login-message {
        font-size: 12px;
        padding: 6px 8px;
        margin: 6px 0 10px 0;
    }
}