/* ============================================
   STRATEGIC MOBILE 2-COLUMN LAYOUT
   Strategic use of 2-column grids for better mobile UX
   ============================================ */

@media (max-width: 768px) {
    /* ===== RESET: Single column by default ===== */
    .grid,
    div.grid,
    section .grid,
    .container .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    /* ===== STRATEGIC 2-COLUMN SECTIONS ===== */

    /* Hero Service Pills - 2 columns for compact display */
    .hero-section .grid-cols-2,
    .hero-section .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Services Section - 2 columns for visual balance */
    #services .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #services .service-card {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    #services .service-card h3 {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    #services .service-card p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    #services .service-card ul {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
    }

    #services .service-card ul li {
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    #services .service-card ul li i {
        font-size: 0.7rem !important;
    }

    #services .service-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    #services .service-card a {
        font-size: 0.8rem !important;
        margin-top: 8px !important;
    }

    #services .service-card a i {
        font-size: 0.7rem !important;
    }

    /* Featured Projects - 2 columns for comparison */
    #featured-projects .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    #featured-projects .featured-project-card {
        padding: 12px !important;
    }

    #featured-projects .project-content h3 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }

    #featured-projects .project-content p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    #featured-projects .project-content .flex-wrap {
        font-size: 0.75rem !important;
    }

    /* Skills/Tech Stack - 2 columns for clean grid */
    [class*="tech-stack"] .grid,
    [class*="skills"] .grid,
    .grid-cols-4,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Stats/Counters - 2 columns for symmetry */
    .stats .grid,
    .counters .grid,
    [class*="stat"] .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* ===== SINGLE COLUMN SECTIONS (Better UX) ===== */

    /* Testimonials - Single column for readability */
    #testimonials .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #testimonials .testimonial-card {
        padding: 24px !important;
        max-width: 100% !important;
    }

    #testimonials .testimonial-card p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    /* Portfolio - Single column for project details */
    #portfolio .grid,
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #portfolio .portfolio-item {
        padding: 0 !important;
        margin-bottom: 24px !important;
    }

    #portfolio .portfolio-item h3 {
        font-size: 1.25rem !important;
        margin: 16px 0 12px 0 !important;
    }

    #portfolio .portfolio-item p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        padding: 0 16px !important;
    }

    /* About Section - Single column for narrative flow */
    #about .grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    #about img {
        max-width: 100%;
        margin: 0 auto 24px auto !important;
    }

    #about p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    /* Contact Form - Single column for form fields */
    #contact .grid,
    .contact-form .grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Calculator Steps - Single column for clarity */
    .calculator-container .grid,
    [id*="step"] .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .calc-option {
        padding: 16px !important;
        min-height: 56px !important;
        font-size: 1rem !important;
    }

    /* ===== SPECIFIC GRID OVERRIDES ===== */

    /* 2-column for small items (badges, tags, pills) */
    .grid.grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 2-column for tech logos/icons */
    .grid.grid-cols-4,
    .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Force 1 column for large content cards */
    .grid.grid-cols-1,
    .grid.md\:grid-cols-1 {
        grid-template-columns: 1fr !important;
    }

    /* ===== RESPONSIVE CARD SIZES ===== */

    /* Compact cards for 2-column layouts */
    .service-card,
    .feature-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Full-width cards for single column */
    .portfolio-item,
    .testimonial-card,
    .blog-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ===== SPACING & PADDING ADJUSTMENTS ===== */

    /* Container adjustments */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Section padding */
    section {
        padding: 60px 16px !important;
    }

    /* Reduce section title spacing */
    section h2 {
        margin-bottom: 32px !important;
    }

    /* Card spacing in 2-column layout */
    #services .service-card,
    #featured-projects .featured-project-card {
        margin-bottom: 0 !important;
    }

    /* ===== IMAGE HANDLING ===== */

    /* Images in 2-column cards */
    .service-card img,
    .featured-project-card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Full-width images in single column */
    .portfolio-item img,
    .testimonial-card img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    /* ===== TYPOGRAPHY ADJUSTMENTS ===== */

    /* Headings in 2-column cards - more compact */
    .grid[style*="grid-template-columns: repeat(2"] .service-card h3,
    #services .service-card h3,
    #featured-projects h3 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
    }

    /* Headings in single column - more prominent */
    .portfolio-item h3,
    .testimonial-card h4 {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
    }

    /* Body text in 2-column */
    #services .service-card p,
    #featured-projects p {
        font-size: 0.9rem !important;
    }

    /* Body text in single column */
    .portfolio-item p,
    .testimonial-card p,
    #about p {
        font-size: 1rem !important;
    }
}

/* ===== SMALL SCREENS (below 375px) ===== */
@media (max-width: 375px) {
    /* Keep 2-column for services but reduce padding */
    #services .grid {
        gap: 12px !important;
    }

    #services .service-card {
        padding: 16px !important;
    }

    #services .service-card h3 {
        font-size: 0.95rem !important;
    }

    #services .service-card p,
    #services .service-card ul {
        font-size: 0.85rem !important;
    }

    /* Featured projects - tighter spacing */
    #featured-projects .grid {
        gap: 10px !important;
    }

    #featured-projects .featured-project-card {
        padding: 10px !important;
    }

    #featured-projects h3 {
        font-size: 0.9rem !important;
    }

    #featured-projects p {
        font-size: 0.8rem !important;
    }

    /* Single column sections - maintain readability */
    #testimonials .testimonial-card,
    #portfolio .portfolio-item {
        padding: 20px !important;
    }
}

/* ===== MEDIUM PHONES (376px - 480px) ===== */
@media (min-width: 376px) and (max-width: 480px) {
    /* Balanced spacing for 2-column sections */
    #services .grid,
    #featured-projects .grid {
        gap: 14px !important;
    }

    #services .service-card {
        padding: 18px !important;
    }

    #services .service-card h3 {
        font-size: 1.05rem !important;
    }

    #services .service-card p {
        font-size: 0.9rem !important;
    }
}

/* ===== LARGE PHONES (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    /* More breathing room on larger phones */
    #services .grid {
        gap: 18px !important;
    }

    #services .service-card {
        padding: 22px !important;
    }

    #services .service-card h3 {
        font-size: 1.15rem !important;
    }

    #services .service-card p {
        font-size: 0.95rem !important;
    }

    #featured-projects .grid {
        gap: 16px !important;
    }

    #featured-projects .featured-project-card {
        padding: 14px !important;
    }

    /* Single column sections - larger text */
    #testimonials .testimonial-card p,
    #portfolio .portfolio-item p {
        font-size: 1.05rem !important;
    }
}

/* ===== UTILITY OVERRIDES ===== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Full width for all sections */
    section {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reset any conflicting flex properties */
    .flex-wrap > * {
        flex: unset !important;
    }

    /* Ensure cards don't shrink below content */
    .service-card,
    .portfolio-item,
    .testimonial-card,
    .featured-project-card {
        min-width: 0 !important;
    }
}