/* =========================================
   Responsive — Comprehensive Cross-Device Fixes
   2 Aces Designing & Construction
   ========================================= */

/* ---- Extra-Large Screens (1440px+) ---- */
@media (min-width: 1440px) {
    .container {
        max-width: 1300px;
    }
}

/* ---- Large Tablets / Small Laptops (1024px) ---- */
@media (max-width: 1024px) {
    .section {
        padding: 4rem 0;
    }

    .section-header {
        margin-bottom: 2.5rem;
    }

    /* Contact page quick buttons */
    .quick-contact-btns {
        flex-wrap: wrap;
    }
}

/* ---- Tablets (768px) ---- */
@media (max-width: 768px) {

    /* Headings */
    h1 {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    h3 {
        font-size: clamp(1.2rem, 3vw, 1.5rem);
    }

    .section {
        padding: 3rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-header p {
        font-size: var(--text-base);
    }

    /* Footer extra bottom padding for mobile social bar */
    footer {
        padding-bottom: 70px !important;
    }

    /* Hide particles on mobile for performance */
    #particles-canvas {
        display: none;
    }

    /* Contact form layout */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .quick-contact-btns {
        flex-direction: column;
    }

    .quick-contact-btn {
        justify-content: center;
    }

    /* About page: split layouts to single column */
    .about-split,
    .mission-split,
    .process-grid,
    .team-grid {
        grid-template-columns: 1fr !important;
    }

    /* CTA Box */
    .cta-box {
        padding: var(--space-2xl) var(--space-lg);
    }

    .cta-box p {
        font-size: var(--text-base);
    }

    /* Info section table layout */
    .cost-table th,
    .cost-table td {
        padding: 10px 8px;
        font-size: 0.75rem;
    }

    /* Services page cards */
    .service-detail-card {
        padding: var(--space-xl);
    }

    /* Gallery */
    .gallery-grid {
        gap: var(--space-md);
    }

    /* Hero buttons stack */
    .hero-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-btns .btn {
        text-align: center;
        justify-content: center;
    }
}

/* ---- Small Tablets / Large Phones (640px) ---- */
@media (max-width: 640px) {

    /* Service process / features grids */
    .process-steps,
    .feature-grid,
    .why-grid {
        grid-template-columns: 1fr !important;
    }

    /* About page stats */
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contact quick buttons */
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Mobile (480px) ---- */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    h2 {
        font-size: clamp(1.3rem, 5vw, 1.8rem);
    }

    .container {
        padding: 0 16px;
    }

    .section {
        padding: 2.5rem 0;
    }

    /* Buttons */
    .btn {
        padding: 12px 20px;
        font-size: 0.8rem;
        width: 100%;
        justify-content: center;
    }

    /* Awards / Stats */
    .about-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: var(--space-lg) var(--space-md);
    }

    /* CTA */
    .cta-box {
        padding: var(--space-xl) var(--space-md);
        border-radius: var(--radius-lg);
    }

    /* USP bar */
    .usp-bar .container {
        flex-direction: column;
        gap: var(--space-md);
        align-items: flex-start;
    }

    /* Page hero badges */
    .hero-badge,
    .page-hero .badge,
    .section-header .badge {
        font-size: 0.7rem;
        padding: 8px 16px;
    }

    /* Footer */
    footer {
        padding-bottom: 60px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-xl);
    }

    .footer-brand-logo {
        justify-content: center;
    }

    .footer-bottom {
        text-align: center;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact page form inputs */
    .form-row {
        flex-direction: column;
    }

    /* Tables overflow  */
    .cost-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Very Small Phones (360px) ---- */
@media (max-width: 360px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 12px;
    }

    .hero h1 {
        font-size: 1.4rem;
    }

    .nav-brand-name {
        font-size: 1rem;
    }

    .nav-brand-tagline {
        display: none;
    }
}