/* ============================================
   MOBILE LAYOUT FIX - Single Column + Proper Proportions
   ============================================ */

/* ===========================================
   OVERRIDE EVERYTHING - SINGLE COLUMN MOBILE
   =========================================== */

@media (max-width: 768px) {

    /* ========================================
       FORCE SINGLE COLUMN ON MOBILE
       ======================================== */

    /* ALL grids become single column */
    .grid,
    div.grid,
    section .grid,
    .container .grid,
    .cards-grid,
    .portfolio-grid,
    .services-grid,
    .products-grid,
    .blog-grid,
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 1.5rem !important;
    }

    /* ========================================
       PROPER IMAGE SIZES FOR SINGLE COLUMN
       ======================================== */

    /* All card images - proper size for full width */
    .service-card img,
    .portfolio-item img,
    .product-card img,
    .blog-card img,
    [class*="card"] img:not(.avatar):not(.testimonial-card img) {
        height: 200px !important;
        max-height: 200px !important;
        width: 100% !important;
        object-fit: cover !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* ========================================
       GENEROUS CARD PADDING
       ======================================== */

    /* All cards - comfortable padding */
    .service-card,
    .portfolio-item,
    .product-card,
    .blog-card,
    .card,
    [class*="card"]:not(.testimonial-card) {
        padding: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: var(--glass-bg) !important;
        border: 1px solid var(--glass-border) !important;
    }

    /* Card content padding */
    .card-content,
    .card-body,
    .portfolio-item > div:not(.portfolio-image),
    .product-card > div:not(.product-image),
    .blog-card > div:not(.blog-image) {
        padding: 1.25rem !important;
    }

    /* If no specific content div, pad the card */
    .card:not(:has(.card-content)):not(:has(.card-body)),
    .service-card:not(:has(.card-content)) {
        padding: 1.25rem !important;
    }

    /* ========================================
       PROPER TEXT SIZING
       ======================================== */

    /* Card titles - readable size */
    .card h3,
    .card-title,
    .service-card h3,
    .portfolio-item h3,
    .product-card h3,
    .blog-card h3 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        font-weight: 600 !important;
        color: var(--color-light) !important;
    }

    /* Card descriptions - readable */
    .card p,
    .card-description,
    .service-card p,
    .portfolio-item p,
    .product-card p,
    .blog-card p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
        color: var(--text-secondary) !important;
    }

    /* Don't truncate text - let it flow naturally */
    .card h3,
    .card-title,
    .card p,
    .card-description {
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }

    /* ========================================
       SERVICE CARDS - ICON STYLE
       ======================================== */

    .service-card {
        text-align: center !important;
        padding: 1.5rem !important;
        min-height: auto !important;
    }

    .service-card .icon,
    .service-card svg,
    .service-card i {
        font-size: 2.5rem !important;
        width: 64px !important;
        height: 64px !important;
        margin: 0 auto 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-accent) !important;
    }

    .service-card img {
        height: auto !important;
        max-height: 64px !important;
        width: auto !important;
        max-width: 64px !important;
        margin: 0 auto 1rem !important;
        display: block !important;
        border-radius: 0 !important;
    }

    /* ========================================
       PORTFOLIO/PRODUCT/BLOG CARDS
       ======================================== */

    .portfolio-item,
    .product-card,
    .blog-card {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
    }

    .portfolio-item img,
    .product-card img,
    .blog-card img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    /* ========================================
       TESTIMONIAL CARDS - SPECIAL TREATMENT
       ======================================== */

    .testimonial-card {
        padding: 1.25rem !important;
        background: var(--glass-bg) !important;
        border-radius: 12px !important;
        border: 1px solid var(--glass-border) !important;
    }

    .testimonial-card img,
    .testimonial-card .avatar {
        width: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
        border-radius: 50% !important;
        margin-bottom: 0.75rem !important;
        object-fit: cover !important;
    }

    .testimonial-text {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
        font-style: italic !important;
    }

    .testimonial-author {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--color-accent) !important;
    }

    /* ========================================
       BUTTONS IN CARDS
       ======================================== */

    .card button,
    .card .btn,
    .card a.button,
    .card-footer button,
    .card-footer .btn {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
        margin-top: 1rem !important;
        border-radius: 8px !important;
    }

    /* ========================================
       METADATA (dates, prices, etc)
       ======================================== */

    .card-meta,
    .card-footer,
    .product-price,
    .blog-date,
    .portfolio-category {
        font-size: 0.875rem !important;
        margin-top: 0.5rem !important;
        color: var(--color-gray) !important;
    }

    .product-price {
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        color: var(--color-accent) !important;
        margin-top: 1rem !important;
    }

    /* ========================================
       SECTION SPACING
       ======================================== */

    section,
    .section {
        padding: 3rem 1rem !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }

    /* ========================================
       STATS GRID - 2 COLUMNS OK HERE
       ======================================== */

    .stats-grid,
    .stats .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .stat-item {
        padding: 1.5rem 1rem !important;
    }

    /* ========================================
       REMOVE PROBLEMATIC OVERRIDES
       ======================================== */

    /* Remove min/max heights that constrain cards */
    .card,
    .service-card,
    .portfolio-item,
    .product-card,
    .blog-card {
        min-height: auto !important;
        max-height: none !important;
    }
}

/* ========================================
   LARGER PHONES (426px+) - CAN USE 2 COLUMNS FOR SOME
   ======================================== */

@media (min-width: 426px) and (max-width: 768px) {

    /* Stats can be 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Small service cards can be 2 columns */
    .services-grid.compact {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .services-grid.compact .service-card {
        padding: 1rem !important;
    }

    .services-grid.compact .service-card .icon {
        font-size: 2rem !important;
        width: 48px !important;
        height: 48px !important;
    }

    .services-grid.compact h3 {
        font-size: 1rem !important;
    }

    .services-grid.compact p {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   SMALL PHONES (≤375px) - TIGHTER
   ======================================== */

@media (max-width: 375px) {

    /* Tighter gaps */
    .grid {
        gap: 1.25rem !important;
    }

    /* Slightly smaller images */
    .portfolio-item img,
    .product-card img,
    .blog-card img {
        height: 180px !important;
    }

    /* Tighter padding */
    .card-content,
    .card-body {
        padding: 1rem !important;
    }

    section,
    .section {
        padding: 2.5rem 0.875rem !important;
    }

    .container {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
}

/* ========================================
   VERY LARGE PHONES (600px+) - 2 COLUMNS OPTIONAL
   ======================================== */

@media (min-width: 600px) and (max-width: 768px) {

    /* Portfolio/products can use 2 columns on large phones */
    .portfolio-grid.allow-two-col,
    .products-grid.allow-two-col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .allow-two-col .portfolio-item img,
    .allow-two-col .product-card img {
        height: 160px !important;
    }

    .allow-two-col .card-content,
    .allow-two-col .card-body {
        padding: 1rem !important;
    }

    .allow-two-col h3 {
        font-size: 1rem !important;
    }

    .allow-two-col p {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   CARD HOVER/ACTIVE STATES
   ======================================== */

@media (max-width: 768px) {

    /* Touch feedback */
    .card:active,
    .service-card:active,
    .portfolio-item:active,
    .product-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* Remove hover effects */
    .card:hover,
    .service-card:hover,
    .portfolio-item:hover {
        transform: none !important;
    }
}

/* ========================================
   FIX SWIPER/CAROUSEL IF PRESENT
   ======================================== */

@media (max-width: 768px) {

    .swiper-container,
    .swiper {
        overflow: visible !important;
    }

    .swiper-slide {
        width: 85% !important;
        margin-right: 1rem !important;
    }

    .swiper-slide .card {
        margin: 0 !important;
    }
}

/* ========================================
   ENSURE IMAGES DON'T BREAK LAYOUT
   ======================================== */

@media (max-width: 768px) {

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .card img,
    .portfolio-item img,
    .product-card img,
    .blog-card img {
        height: 200px !important;
        object-fit: cover !important;
    }
}