/* ============================================
   MOBILE-ONLY UPDATES (≤640px)
   Portfolio 2026
   ============================================ */

@media only screen and (max-width: 640px) {
    
    /* ============================================
       TYPOGRAPHY - MOBILE
       ============================================ */
    
    /* H6 tags (skill tags) */
    h6,
    .qodef-h6 {
        font-size: 14px !important;
        line-height: 24px !important;
    }
    
    /* Body text: 26px on mobile (1px larger than default 25px) */
    /* body, */
    p {
        font-size: 16px !important;
    }

    .qodef-e-excerpt {
        font-size: 26px !important;
    }
    
    /* Page subtitle */
    #qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-3f2cd5e.elementor-widget.elementor-widget-text-editor > p {
        font-size: 25px !important;
    }
    
    /* Case study titles on mobile */
    .cl-case-study .qodef-m-title,
    .elementor-190 .elementor-element.elementor-element-8a4000a .qodef-qi-section-title .qodef-m-title,
    .elementor-190 .elementor-element.elementor-element-29d034d .qodef-qi-section-title .qodef-m-title,
    .elementor-190 .elementor-element.elementor-element-5c4e2a2 .qodef-qi-section-title .qodef-m-title {
        font-size: 49px !important;
        line-height: 56px !important;
    }
    
    /* Header content scales down */
    #qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div > div.elementor-element.elementor-element-f3db43e.elementor-widget.elementor-widget-text-editor > p,
    #qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div > div.elementor-element.elementor-element-ba8c43d.elementor-widget.elementor-widget-text-editor > p {
        font-size: 20px !important;
        line-height: 32px !important;
    }
    
    /* ============================================
       SPACING - MOBILE
       ============================================ */
    
    /* Photo grid spacing */
    .photo-grid-container {
        gap: 32px; /* was 30px */
    }

    .elementor-190 .elementor-element.elementor-element-f3db43e {
        padding: 0 32px !important; /* was 30px */
        text-align: center;
    }

    .photo-grid-content{
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Photography section: full-width, no left/right padding */
    .photo-grid {
        padding: 64px 0px 0px 0px !important; /* was 60px 0px */
    }
    
    /* Case study sections: reduce top padding */
    .cl-case-study {
        padding-top: 64px !important; /* was 60px */
    }
    
    /* Header content padding adjustments */
    #qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div > div.elementor-element.elementor-element-ba8c43d.elementor-widget.elementor-widget-text-editor {
        padding-left: 24px !important; /* was 20px */
        padding-right: 24px !important; /* was 20px */
    }
    
    /* ============================================
       PHOTO MOSAIC - MOBILE
       ============================================ */
    
    /* Reduce from 5 columns to 3 columns on mobile */
    .photo-grid-mosaic {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto; /* Let it flow naturally */
    }
    
    /* ============================================
       CASE STUDY - MOBILE
       ============================================ */
    
    .cl-case-study .elementor-container {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .qodef-e-text {
        padding-bottom: 32px !important;
    }
    
    /* ============================================
       HEADER SECTION - MOBILE
       ============================================ */
    
    .elementor-element-5c468d2 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    
    .elementor-element-5c468d2 .elementor-element-3f2cd5e {
        margin-bottom: 24px;
    }
    
    /* ============================================
       ACCESSIBILITY - MOBILE
       ============================================ */
    
    /* Better touch targets on mobile */
    a,
    button {
        min-height: 44px; /* iOS/Android recommended touch target */
        display: inline-flex;
        align-items: center;
    }
    
    /* Exception: Don't force height on image links */
    a img {
        min-height: auto;
    }
    
    /* ============================================
       CONTACT LINK - MOBILE
       ============================================ */
    
    /* Show Contact link on mobile */
    .qodef-header-widget-area-one,
    #block-10 {
        display: block !important;
    }
    
    .qodef-widget-holder.qodef--one {
        display: block !important;
        margin-left: auto !important;
    }
}

/* ============================================
   MOBILE NOTES
   ============================================ */

/* 
All mobile-specific changes in one file for easy management.
Includes:
- Typography scaled for mobile readability
- Spacing adjusted to 8px grid
- Photo mosaic: 5 → 3 columns
- Touch targets: 44px minimum
- Contact link visibility
- Header and case study padding optimizations
- Photography section full-width

All changes apply only at ≤640px breakpoint.
*/