/* Builder profile page (front/find_builders_detail.blade.php) — tablet + phone.
   The desktop design lives in front/css/style.css (.buld_detl block) and was
   desktop-only: two fixed columns, 4-column gallery, a 280px pop-up side panel.
   Selectors mirror style.css's so they win on equal specificity (this file
   loads after it). Loaded only on this page. Side gutters (60px+ desktop, 45px
   tablet, 44px phone) keep ~16px clear of the fixed "Get your 3 quotes" tab. */

/* ---------- every width: clear the fixed "Get your 3 quotes" tab ----------
   The tab is ~42px wide on desktop (28px on phones/tablets); style.css's 40px /
   4% side spacing let the hero logo and the columns touch it. One gutter for
   hero, section tabs and columns so they stay aligned. */
.buld_detl > .header_wrap {
    padding-left: max(60px, 4%);
    padding-right: max(60px, 4%);
}
.buld_detl > .tab_bar,
.buld_detl > .main_two_col {
    margin-left: max(60px, 4%);
    margin-right: max(60px, 4%);
}

/* ---------- small laptop / tablet landscape (≤1200px) ---------- */
@media (max-width: 1200px) {
    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .buld_detl > .main_two_col > .right_area {
        width: 280px;
    }
}

/* ---------- tablet portrait and below (≤900px): one column ---------- */
@media (max-width: 900px) {
    .buld_detl > .header_wrap {
        padding: 56px 45px;
    }
    .buld_detl > .header_wrap > .header_content > .logo_box {
        width: 110px;
        height: 110px;
        flex-shrink: 0;
    }
    .buld_detl > .header_wrap > .header_content > .title_box {
        min-width: 0;
    }
    .buld_detl > .header_wrap > .header_content > .title_box h1 {
        font-size: 30px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    .buld_detl > .header_wrap > .header_content > .title_box .details_row {
        flex-wrap: wrap;
        gap: 8px 18px;
    }

    /* section tabs: one scrollable row instead of spilling off screen */
    .buld_detl > .tab_bar {
        margin: 24px 45px 0;
        padding: 14px 18px;
        gap: 26px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .buld_detl > .tab_bar::-webkit-scrollbar {
        display: none;
    }
    .buld_detl > .tab_bar > div {
        flex-shrink: 0;
        font-size: 16px;
        white-space: nowrap;
    }

    /* the two columns stack; the contact box comes first — it's one short CTA */
    .buld_detl > .main_two_col {
        flex-direction: column;
        gap: 20px;
        margin: 24px 45px 0;
    }
    .buld_detl > .main_two_col > .left_area {
        min-width: 0;
    }
    .buld_detl > .main_two_col > .right_area {
        width: auto;
        order: -1;
    }
    .buld_detl > .main_two_col > .right_area > .contact_box {
        text-align: center;
    }

    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid .item img {
        height: 190px;
    }
    #overview_section {
        margin-top: 24px;
    }
    .overview_wrap,
    .review_wrap,
    .clients_wrap {
        margin-bottom: 24px;
    }

    /* project pop-up: photo on top, details underneath, whole thing scrolls */
    #popup_box {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #popup_box img {
        display: block;
        width: calc(100% - 32px);
        height: auto;
        max-height: 55vh;
        margin: 64px 16px 0;
        object-fit: contain;
    }
    #popup_close {
        position: fixed;
        top: 12px;
        right: 12px;
        margin-right: 0;
        z-index: 101;
        line-height: 38px;
    }
    .popup_nav {
        top: calc(64px + 27vh);
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 24px;
        background: rgba(0, 0, 0, 0.45);
        border-radius: 50%;
        z-index: 101;
    }
    #popup_prev {
        left: 20px;
    }
    #popup_next {
        right: 20px;
    }
    .detil_right_side {
        position: static;
        width: auto;
        height: auto;
        margin: 16px;
        border-radius: 12px;
        overflow: hidden;
    }
    .detl_po {
        height: auto;
        overflow: visible;
        border: 0;
        padding: 20px;
    }
    #share_box {
        float: none;
        margin: 0 16px 24px;
        text-align: center;
    }
}

/* ---------- phones (≤600px) ---------- */
@media (max-width: 600px) {
    .buld_detl > .header_wrap {
        padding: 36px 44px 32px;
    }
    .buld_detl > .header_wrap > .header_content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .buld_detl > .header_wrap > .header_content > .logo_box {
        width: 84px;
        height: 84px;
        border-radius: 10px;
    }
    .buld_detl > .header_wrap > .header_content > .title_box h1 {
        font-size: 24px;
    }
    .buld_detl > .header_wrap > .header_content > .title_box .details_row {
        flex-direction: column;
        gap: 8px;
        font-size: 14px;
    }
    .buld_detl > .header_wrap > .header_content > .title_box .tag_row .tag {
        font-size: 13px;
        padding: 5px 10px;
    }

    .buld_detl > .tab_bar {
        margin: 16px 44px 0;
        padding: 12px 16px;
        gap: 22px;
    }
    .buld_detl > .tab_bar > div {
        font-size: 15px;
    }
    .buld_detl > .main_two_col {
        margin: 16px 44px 0;
        gap: 16px;
    }

    .buld_detl > .main_two_col > .left_area > section h2,
    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid_title,
    .ov_title,
    .clients_wrap > .cl_title {
        font-size: 22px;
    }
    .review_wrap > .rev_title {
        font-size: 22px;
        margin-bottom: 16px;
    }
    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap,
    .overview_wrap,
    .review_wrap,
    .clients_wrap {
        padding: 16px;
    }

    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid {
        gap: 10px;
    }
    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid .item img {
        height: 140px;
        border-radius: 10px;
    }
    .buld_detl > .main_two_col > .left_area > #gallery_section > .grid_wrap > .grid .item .cap {
        font-size: 14px;
        line-height: 1.3;
        margin-top: 6px;
    }

    .overview_wrap > .ov_services_grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .ov_services_grid > .ov_item {
        font-size: 15px;
    }
    .ov_price_box > .ov_price_value {
        font-size: 24px;
        margin-left: 0;
    }

    .review_wrap > .rev_summary {
        flex-direction: column;
        gap: 18px;
        padding: 18px;
    }
    .rev_summary > .rev_left {
        width: auto;
    }
    .review_wrap > .rev_summary > .rev_left > .rev_score {
        font-size: 44px;
    }
    .rev_item > .rev_user_icon {
        width: 48px;
        height: 48px;
    }
    .rev_user_icon svg {
        width: 30px;
        height: 30px;
    }
    .nam_ar {
        width: calc(100% - 60px);
    }

    .clients_wrap > .cl_logo_row {
        gap: 14px;
    }
    .cl_logo_row > img {
        width: calc(50% - 7px);
        max-width: 150px;
    }
}