/*
 * Directory Goo
 * Business Directory V2.2
 * Desktop / Tablet presentation layer
 *
 * Scope: .business
 * Does not modify CMS/backend data or application behavior.
 */

/* ==========================================================
   PAGE
   ========================================================== */

@media (min-width: 768px) {

    .business {
        max-width: 1440px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .business > .location-text {
        margin-bottom: 6px !important;
        color: #667085 !important;
    }

    /* ======================================================
       FILTER COLUMN
       ====================================================== */

    .business > .d-flex > .filters {
        flex: 0 0 230px;
        width: 230px !important;
        padding-left: 0 !important;
        padding-right: 24px !important;
    }

    .business > .d-flex > .filters > h5 {
        padding-bottom: 10px;
        margin-bottom: 18px !important;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        border-bottom: 1px solid #dfe5ec !important;
    }

    .business > .d-flex > .filters .form-label {
        margin-bottom: 7px;
        color: #344054;
        font-size: 13px;
        font-weight: 600;
    }

    /*
     * React select containers.
     * Keep component behavior untouched.
     */
    .business > .d-flex > .filters .mb-3,
    .business > .d-flex > .filters .my-3 {
        margin-bottom: 18px !important;
    }

    /* ======================================================
       RESULTS AREA
       ====================================================== */

    .business > .d-flex > .filter-data {
        flex: 1 1 auto;
        width: calc(100% - 230px) !important;
        min-width: 0;
        margin-left: 0 !important;
    }

    .business .filter-data > .row {
        --bs-gutter-x: 20px;
    }

    /*
     * CMS-managed heading.
     */
    .business .filter-data .col-lg-9 > h3.text-black {
        margin-bottom: 8px;
        color: #101828 !important;
        font-size: 27px;
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -.02em;
    }

    /*
     * CMS-managed introduction.
     */
    .business .filter-data .col-lg-9 > p.text-mute {
        max-width: 820px;
        margin-bottom: 22px !important;
        color: #667085 !important;
        font-size: 14px;
        line-height: 1.55;
    }

    /* ======================================================
       BUSINESS CARDS
       ====================================================== */

    .business .business_Info_Card {
        position: relative;
        margin-bottom: 18px !important;
        padding: 18px !important;
        background: #fff;
        border: 1px solid #d9e2ec !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 7px rgba(16, 24, 40, .04);
        transition:
            border-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    .business .business_Info_Card:hover {
        border-color: #a9c7e8 !important;
        box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
    }

    .business .business_Info_Card.Highlighted {
        border: 1px solid #0878d1 !important;
        box-shadow: 0 5px 18px rgba(8, 120, 209, .10);
    }

    .business_Info_Card .business-logo {
        width: 92px;
        height: 92px;
        border: 1px solid #e4e7ec;
        border-radius: 8px;
        object-fit: contain;
        background: #fff;
    }

    .business .business_info_Container {
        width: calc(100% - 112px);
    }

    .business .business_info_Container h5,
    .business .business_info_Container h6 {
        color: #101828;
    }

    /*
     * Verified / Established metadata.
     */
    .business .tag {
        margin-top: 5px;
        background: transparent;
    }

    .business .tag .extra-smallest {
        color: #667085;
    }

    .business .tag .bg-white {
        border-radius: 5px;
    }

    /*
     * Number linked to map marker.
     */
    .business .circle_text {
        width: 28px;
        height: 28px;
        border: 1px solid #98a2b3;
        color: #475467;
        background: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    /* ======================================================
       ACTION BUTTONS
       ====================================================== */

    .business .info-button {
        min-height: 29px;
        padding: 5px 11px !important;
        background: #eef6fd !important;
        border: 1px solid #d6e9f9;
        border-radius: 16px !important;
        color: #0878d1;
        transition:
            background-color .15s ease,
            border-color .15s ease;
    }

    .business .info-button:hover {
        background: #e1f0fc !important;
        border-color: #b9daf4;
    }

    /* ======================================================
       BUSINESS PHOTOS
       ====================================================== */

    .business .business-slide {
        width: 120px;
        height: 78px;
        border-radius: 6px;
        object-fit: cover;
        border: 1px solid #e4e7ec;
    }

    .business .bussiness-info-images-container {
        margin-top: 10px;
        gap: 8px !important;
    }

    /* ======================================================
       MAP
       ====================================================== */

    .business .map-box {
        position: sticky;
        top: 100px;
        align-self: flex-start;
    }

    .business .map-box > * {
        overflow: hidden;
        border: 1px solid #d9e2ec;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
    }
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1200px) {

    .business {
        padding-left: 30px;
        padding-right: 30px;
    }

    .business > .d-flex > .filters {
        flex-basis: 240px;
        width: 240px !important;
        padding-right: 28px !important;
    }

    .business > .d-flex > .filter-data {
        width: calc(100% - 240px) !important;
    }

    /*
     * Override old global location-text offset so it aligns
     * naturally with the new layout.
     */
    .business > .location-text {
        margin-left: 240px !important;
    }
}


/* ==========================================================
   TABLET: 768–991
   Existing React filter drawer behavior is preserved.
   ========================================================== */

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

    .business {
        padding-left: 20px;
        padding-right: 20px;
    }

    /*
     * At this breakpoint React already changes filters into
     * the off-canvas drawer. Results therefore use full width.
     */
    .business > .d-flex > .filter-data {
        width: 100% !important;
    }

    .business .filter-data .col-lg-9 > h3.text-black {
        font-size: 24px;
    }

    .business .business_Info_Card {
        padding: 15px !important;
    }

    .business_Info_Card .business-logo {
        width: 82px;
        height: 82px;
    }

    .business .business_info_Container {
        width: calc(100% - 100px);
    }

    .business > .location-text {
        margin-left: 0 !important;
    }
}

/* ==========================================================
   BUSINESS DIRECTORY V2.3
   Desktop width + column balance
   ========================================================== */

@media (min-width: 1200px) {

    .business.container-lg {
        width: calc(100% - 48px) !important;
        max-width: 1560px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .business > .d-flex {
        gap: 0;
    }

    /* Filters */
    .business > .d-flex > .filters {
        flex: 0 0 220px !important;
        width: 220px !important;
        padding-right: 24px !important;
    }

    /* Main results + map */
    .business > .d-flex > .filter-data {
        width: calc(100% - 220px) !important;
        flex: 1 1 auto !important;
    }

    .business .filter-data > .row {
        --bs-gutter-x: 24px;
    }

    /* Give listings slightly more room */
    .business .filter-data > .row > .col-lg-9 {
        width: calc(100% - 310px) !important;
        flex: 0 0 calc(100% - 310px) !important;
        max-width: none !important;
    }

    /* Stable desktop map width */
    .business .filter-data > .row > .map-box {
        width: 310px !important;
        flex: 0 0 310px !important;
        max-width: 310px !important;
    }

    .business .map-box {
        top: 100px !important;
    }

    /* Align breadcrumb/location line with listings */
    .business > .location-text {
        margin-left: 220px !important;
    }
}

@media (min-width: 1450px) {

    .business.container-lg {
        max-width: 1600px !important;
    }

    .business .filter-data > .row > .col-lg-9 {
        width: calc(100% - 330px) !important;
        flex-basis: calc(100% - 330px) !important;
    }

    .business .filter-data > .row > .map-box {
        width: 330px !important;
        flex-basis: 330px !important;
        max-width: 330px !important;
    }
}