/* =========================================================
   ARVIKA targeted mobile edge fix
   Restores safe 21px side paddings for Portfolio / Designers / Contractors
   without changing the price block or global mobile layout.
========================================================= */

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body.portfolio_body .site_main,
    body.designers_body .site_main,
    body.contractors_body .site_main,
    body.portfolio_body .portfolio_page,
    body.designers_body .designers_page,
    body.contractors_body .contractors_page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body.portfolio_body .portfolio_page .container,
    body.designers_body .designers_page .container,
    body.contractors_body .contractors_page .container,
    body.designers_body .elementor-widget-container > section > .container,
    body.contractors_body .elementor-widget-container > section > .container {
        width: auto !important;
        max-width: none !important;
        margin-left: 21px !important;
        margin-right: 21px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    body.portfolio_body .elementor-section,
    body.portfolio_body .elementor-container,
    body.portfolio_body .elementor-column,
    body.portfolio_body .elementor-widget-wrap,
    body.portfolio_body .elementor-widget,
    body.portfolio_body .elementor-widget-container,
    body.designers_body .elementor-section,
    body.designers_body .elementor-container,
    body.designers_body .elementor-column,
    body.designers_body .elementor-widget-wrap,
    body.designers_body .elementor-widget,
    body.designers_body .elementor-widget-container,
    body.contractors_body .elementor-section,
    body.contractors_body .elementor-container,
    body.contractors_body .elementor-column,
    body.contractors_body .elementor-widget-wrap,
    body.contractors_body .elementor-widget,
    body.contractors_body .elementor-widget-container {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    body.portfolio_body .elementor-widget-container > section,
    body.designers_body .elementor-widget-container > section,
    body.contractors_body .elementor-widget-container > section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    /* Portfolio: filters and cards should stay inside the same 21px mobile rhythm. */
    body.portfolio_body .portfolio_filter_controls,
    body.portfolio_body .portfolio_active_filters {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    body.portfolio_body .portfolio_filter_controls {
        padding-bottom: 12px !important;
    }

    body.portfolio_body .portfolio_works_grid,
    body.portfolio_body .portfolio_work_card,
    body.portfolio_body .portfolio_work_slider,
    body.portfolio_body .portfolio_work_text {
        width: 100%;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    body.portfolio_body .portfolio_work_slider img,
    body.designers_body .work_image img,
    body.contractors_body .work_image img,
    body.designers_body .designers_hero_img img,
    body.contractors_body .designers_hero_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Designers / Contractors: prevent inner blocks from touching the viewport. */
    body.designers_body .designers_hero_text,
    body.designers_body .designer_benefits,
    body.designers_body .designer_benefit,
    body.designers_body .designers_offer_grid,
    body.designers_body .designers_offer_card,
    body.designers_body .designer_library_grid,
    body.designers_body .profiles_grid,
    body.designers_body .works_grid,
    body.designers_body .faq,
    body.designers_body .designer_form_container,
    body.designers_body .project_form,
    body.contractors_body .designers_hero_text,
    body.contractors_body .designer_benefits,
    body.contractors_body .designer_benefit,
    body.contractors_body .contractors_offer_grid,
    body.contractors_body .designers_offer_card,
    body.contractors_body .designer_library_grid,
    body.contractors_body .profiles_grid,
    body.contractors_body .works_grid,
    body.contractors_body .faq,
    body.contractors_body .designer_form_container,
    body.contractors_body .project_form {
        width: 100%;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    body.designers_body .designers_hero_images,
    body.contractors_body .designers_hero_images {
        max-width: 100% !important;
    }

    body.designers_body .designers_actions,
    body.contractors_body .designers_actions,
    body.contractors_body .contractors_actions {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.designers_body .designers_actions .btn_dark,
    body.designers_body .designers_text_link,
    body.contractors_body .designers_actions .btn_dark,
    body.contractors_body .contractors_actions .btn_dark,
    body.contractors_body .designers_text_link {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 420px) {
    body.portfolio_body .portfolio_page .container,
    body.designers_body .designers_page .container,
    body.contractors_body .contractors_page .container,
    body.designers_body .elementor-widget-container > section > .container,
    body.contractors_body .elementor-widget-container > section > .container {
        margin-left: 21px !important;
        margin-right: 21px !important;
    }
}

/* =========================================================
   ARVIKA targeted mobile correction v1.1.4
   Portfolio / Designers / Contractors: real edge paddings.
   Does not touch the home price/tariff block.
========================================================= */

@media (max-width: 768px) {
    /* Universal safety for these page templates even if body classes are missing. */
    .portfolio_page,
    .designers_page,
    .contractors_page {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    .portfolio_page .portfolio_hero,
    .portfolio_page .portfolio_works,
    .portfolio_page .container.portfolio_hero,
    .portfolio_page .container.portfolio_works,
    .designers_page .container,
    .contractors_page .container,
    .designers_page section > .container,
    .contractors_page section > .container,
    .designers_page .elementor-widget-container > section > .container,
    .contractors_page .elementor-widget-container > section > .container {
        width: auto !important;
        max-width: none !important;
        margin-left: 21px !important;
        margin-right: 21px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Portfolio cards/text must not start at the viewport edge. */
    .portfolio_page .portfolio_works_block,
    .portfolio_page .portfolio_works_grid,
    .portfolio_page .portfolio_work_card,
    .portfolio_page .portfolio_work_text,
    .portfolio_page .portfolio_work_slider {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .portfolio_page .portfolio_work_card {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .portfolio_page .portfolio_work_text {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Keep filter chips scrollable, but inside the 21px visual rhythm. */
    .portfolio_page .portfolio_filter_controls,
    .portfolio_page .portfolio_active_filters {
        width: calc(100% + 42px) !important;
        max-width: none !important;
        margin-left: -21px !important;
        margin-right: -21px !important;
        padding-left: 21px !important;
        padding-right: 21px !important;
        box-sizing: border-box !important;
    }

    .portfolio_page .portfolio_filter_controls {
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;
    }

    .portfolio_page .portfolio_filter_controls::-webkit-scrollbar,
    .portfolio_page .portfolio_active_filters::-webkit-scrollbar {
        display: none;
    }

    /* Designers / Contractors: the gray hero text and CTA buttons were still touching edges. */
    .designers_page .designers_hero_gray,
    .contractors_page .designers_hero_gray {
        overflow: hidden !important;
    }

    .designers_page .designers_hero_text,
    .contractors_page .designers_hero_text,
    .designers_page .designers_actions,
    .contractors_page .designers_actions,
    .contractors_page .contractors_actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .designers_page .designers_actions .btn,
    .designers_page .designers_actions .btn_dark,
    .contractors_page .designers_actions .btn,
    .contractors_page .designers_actions .btn_dark,
    .contractors_page .contractors_actions .btn,
    .contractors_page .contractors_actions .btn_dark {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Smaller H2 on Designers / Contractors by request. */
    .designers_page h2,
    .contractors_page h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.04em !important;
    }

    .designers_page h2 em,
    .contractors_page h2 em {
        font-size: 1.15em !important;
        line-height: 1 !important;
    }
}

@media (max-width: 420px) {
    .portfolio_page .portfolio_hero,
    .portfolio_page .portfolio_works,
    .portfolio_page .container.portfolio_hero,
    .portfolio_page .container.portfolio_works,
    .designers_page .container,
    .contractors_page .container,
    .designers_page section > .container,
    .contractors_page section > .container,
    .designers_page .elementor-widget-container > section > .container,
    .contractors_page .elementor-widget-container > section > .container {
        margin-left: 21px !important;
        margin-right: 21px !important;
    }
}

/* =========================================================
   ARVIKA targeted mobile correction v1.1.5
   Stronger edge padding for Portfolio + hero gray block on
   Designers / Contractors. Does not touch home price block.
========================================================= */

@media (max-width: 768px) {
    /* Portfolio: force section padding, because Elementor/container styles can override margins. */
    body.portfolio_body .portfolio_page .portfolio_hero_block,
    body.portfolio_body .portfolio_page .portfolio_works_block,
    .portfolio_page .portfolio_hero_block,
    .portfolio_page .portfolio_works_block {
        padding-left: 21px !important;
        padding-right: 21px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.portfolio_body .portfolio_page .portfolio_hero_block > .container,
    body.portfolio_body .portfolio_page .portfolio_works_block > .container,
    .portfolio_page .portfolio_hero_block > .container,
    .portfolio_page .portfolio_works_block > .container,
    body.portfolio_body .portfolio_page .container.portfolio_hero,
    body.portfolio_body .portfolio_page .container.portfolio_works,
    .portfolio_page .container.portfolio_hero,
    .portfolio_page .container.portfolio_works {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.portfolio_body .portfolio_page .portfolio_filter_controls,
    body.portfolio_body .portfolio_page .portfolio_active_filters,
    .portfolio_page .portfolio_filter_controls,
    .portfolio_page .portfolio_active_filters {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none;
    }

    body.portfolio_body .portfolio_page .portfolio_filter_controls::-webkit-scrollbar,
    body.portfolio_body .portfolio_page .portfolio_active_filters::-webkit-scrollbar,
    .portfolio_page .portfolio_filter_controls::-webkit-scrollbar,
    .portfolio_page .portfolio_active_filters::-webkit-scrollbar {
        display: none;
    }

    body.portfolio_body .portfolio_page .portfolio_works_grid,
    body.portfolio_body .portfolio_page .portfolio_work_card,
    body.portfolio_body .portfolio_page .portfolio_work_slider,
    body.portfolio_body .portfolio_page .portfolio_work_text,
    .portfolio_page .portfolio_works_grid,
    .portfolio_page .portfolio_work_card,
    .portfolio_page .portfolio_work_slider,
    .portfolio_page .portfolio_work_text {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Designers / Contractors: gray hero strip should be full-bleed background, but text/buttons inside 21px. */
    body.designers_body .designers_page .designers_hero_gray,
    body.contractors_body .contractors_page .designers_hero_gray,
    .designers_page .designers_hero_gray,
    .contractors_page .designers_hero_gray {
        width: calc(100% + 42px) !important;
        max-width: calc(100% + 42px) !important;
        margin-left: -21px !important;
        margin-right: -21px !important;
        padding-left: 21px !important;
        padding-right: 21px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.designers_body .designers_page .designers_hero_gray .designers_hero_text,
    body.contractors_body .contractors_page .designers_hero_gray .designers_hero_text,
    .designers_page .designers_hero_gray .designers_hero_text,
    .contractors_page .designers_hero_gray .designers_hero_text {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.designers_body .designers_page .designers_hero_gray .designers_actions,
    body.contractors_body .contractors_page .designers_hero_gray .designers_actions,
    body.contractors_body .contractors_page .designers_hero_gray .contractors_actions,
    .designers_page .designers_hero_gray .designers_actions,
    .contractors_page .designers_hero_gray .designers_actions,
    .contractors_page .designers_hero_gray .contractors_actions {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.designers_body .designers_page .designers_hero_gray .btn,
    body.contractors_body .contractors_page .designers_hero_gray .btn,
    .designers_page .designers_hero_gray .btn,
    .contractors_page .designers_hero_gray .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        text-align: center !important;
    }
}