/* 
  RoenzModz Comprehensive Responsive Design Media Queries 
  Breakpoints: 1400px, 1200px, 992px, 768px, 576px, 480px, 360px
*/

/* 1400px Desktop & Large Screens */
@media (max-width: 1400px) {
    .app-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 1200px Laptop & Smaller Desktop */
@media (max-width: 1200px) {
    .app-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .footer-col:nth-child(4) {
        grid-column: span 3;
    }

    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 992px Tablet & iPad View */
@media (max-width: 992px) {
    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }

    .sidebar-close-btn {
        display: block;
    }

    .sidebar-toggle-btn {
        display: flex;
    }

    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .sticky-download-bar {
        left: 0;
        padding: 12px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .footer-col:nth-child(4) {
        grid-column: span 2;
    }
}

/* 768px Small Tablet & Large Phone */
@media (max-width: 768px) {
    .app-details-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .publisher-row {
        justify-content: center;
    }

    .app-action-buttons {
        justify-content: center;
    }

    .hero-slider {
        height: 240px;
    }

    .hero-slide {
        padding: 20px;
    }

    .hero-slide-content h1 {
        font-size: 20px;
    }

    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .sticky-download-bar {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        padding: 12px 16px;
    }

    .sticky-actions {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .specs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .form-container-card, .auth-card {
        padding: 24px;
    }
}

/* 576px Standard Mobile Devices */
@media (max-width: 576px) {
    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .app-card {
        padding: 12px;
        gap: 10px;
    }

    .app-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .app-card-title {
        font-size: 13px;
    }

    .app-card-category {
        font-size: 11px;
    }

    .app-card-details-row {
        font-size: 11px;
        padding: 6px 0;
    }

    .top-header {
        gap: 10px;
    }

    .search-bar-wrapper input {
        font-size: 13px;
        padding: 10px 8px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-col:nth-child(4) {
        grid-column: span 1;
    }
}

/* 480px Compact Smartphones */
@media (max-width: 480px) {
    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .app-card {
        padding: 10px;
    }

    .app-card-header {
        gap: 8px;
    }

    .app-card-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .app-card-title {
        font-size: 12px;
    }

    .hero-slider {
        height: 220px;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }
}

/* 360px Ultra Compact Screens (Galaxy Fold / iPhone SE) */
@media (max-width: 360px) {
    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .main-content {
        padding: 14px;
    }

    .app-card {
        padding: 8px;
    }

    .app-card-title {
        font-size: 11px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}