/* =========================================================
   BPP Projects Premium V3.6 — REAL SCOPE + WIDTH FIX
   Important:
   Previous polish layers depended on body#page-projects.
   This file scopes directly from the real .bppp2 Projects root,
   so it applies even when the BODY has a different id/class.
   Global header/footer are not targeted.
   ========================================================= */

.bppp2,
.bppp2 *,
.bppp2 input,
.bppp2 button,
.bppp2 select,
.bppp2 textarea {
    font-family: inherit !important;
}

.bppp2 {
    --v36-green:#079455;
    --v36-green-dark:#056b42;
    --v36-ink:#10271c;
    --v36-muted:#708078;
    --v36-line:#dbe8e1;
    --v36-soft:#f4f9f6;
}

/* Match the wider marketplace rhythm used by Properties */
.bppp2 .bppp2-container {
    width:min(1480px, calc(100vw - 48px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Premium hero alignment */
.bppp2 .bppp2-hero {
    min-height:218px !important;
}

.bppp2 .bppp2-hero__inner {
    min-height:218px !important;
    padding-top:30px !important;
    padding-bottom:36px !important;
}

.bppp2 .bppp2-hero h1 {
    max-width:790px !important;
    font-size:clamp(40px, 3.5vw, 52px) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
}

.bppp2 .bppp2-hero p {
    max-width:720px !important;
    font-size:14.5px !important;
}

/* Search/listing shell: keep filter controlled, give width to cards */
.bppp2 .bppp2-shell {
    grid-template-columns:322px minmax(0,1fr) !important;
    gap:26px !important;
    margin-top:-24px !important;
    padding:22px !important;
    border-radius:26px !important;
    border:1px solid rgba(21,76,54,.12) !important;
    background:#fff !important;
    box-shadow:0 24px 62px rgba(17,70,48,.105) !important;
}

.bppp2 .bppp2-results {
    min-width:0 !important;
}

.bppp2 .bppp2-toolbar {
    width:100% !important;
    min-height:64px !important;
    margin-bottom:18px !important;
    padding:10px 12px 10px 16px !important;
    border-radius:15px !important;
    box-shadow:0 5px 18px rgba(17,65,45,.045) !important;
}

/* Cards now use the added result-column width */
.bppp2 .bppp2-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:20px !important;
    width:100% !important;
}

.bppp2 .bppp2-card {
    width:100% !important;
    min-width:0 !important;
    border-radius:18px !important;
    border:1px solid rgba(24,74,53,.13) !important;
    background:#fff !important;
    box-shadow:0 8px 26px rgba(17,63,44,.06) !important;
}

.bppp2 .bppp2-card:hover {
    transform:translateY(-4px) !important;
    box-shadow:0 20px 44px rgba(13,72,46,.13) !important;
}

.bppp2 .bppp2-card__media {
    height:238px !important;
}

.bppp2 .bppp2-card__body {
    padding:17px 17px 0 !important;
}

.bppp2 .bppp2-card__title {
    font-size:15.5px !important;
    line-height:1.27 !important;
    font-weight:900 !important;
    letter-spacing:-.018em !important;
}

.bppp2 .bppp2-card__location {
    font-size:10.5px !important;
    margin-bottom:13px !important;
}

/* Premium metrics strip */
.bppp2 .bppp2-card__metrics {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    margin:0 -6px 14px !important;
    padding:11px 8px !important;
    background:#f4faf6 !important;
    border:1px solid #e4ede8 !important;
    border-radius:12px !important;
}

.bppp2 .bppp2-card__metrics > div {
    justify-content:center !important;
}

.bppp2 .bppp2-card__metrics strong {
    font-size:11px !important;
}

.bppp2 .bppp2-card__metrics small {
    font-size:8px !important;
}

/* Completion rail */
.bppp2 .bppp2-progress {
    position:relative !important;
    padding-bottom:12px !important;
    margin-bottom:14px !important;
}

.bppp2 .bppp2-progress::before {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:4px !important;
    border-radius:999px !important;
    background:#e1ebe6 !important;
}

.bppp2 .bppp2-progress::after {
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    width:var(--bpp-card-progress,0%) !important;
    height:4px !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,#079455,#12b76a) !important;
}

/* Stronger card footer */
.bppp2 .bppp2-card__footer {
    margin-left:-17px !important;
    margin-right:-17px !important;
    padding:14px 17px 15px !important;
    align-items:center !important;
    background:linear-gradient(180deg,#fbfdfc,#f4faf6) !important;
    border-top:1px solid #e5eee9 !important;
}

.bppp2 .bppp2-price small {
    font-size:8.5px !important;
    font-weight:700 !important;
}

.bppp2 .bppp2-price strong {
    display:block !important;
    margin-top:3px !important;
    color:#173328 !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    font-weight:900 !important;
}

.bppp2 .bppp2-view-project {
    min-height:39px !important;
    padding:0 14px !important;
    border-radius:9px !important;
    color:#fff !important;
    background:linear-gradient(135deg,#07834e,#09a75f) !important;
    border-color:transparent !important;
    box-shadow:0 7px 16px rgba(7,148,85,.13) !important;
    font-size:9.5px !important;
    font-weight:900 !important;
}

/* Better filter spacing */
.bppp2 .bppp2-filter {
    padding:23px !important;
    border-radius:20px !important;
    border-color:#dbe8e1 !important;
    background:linear-gradient(180deg,#fff,#f7fbf9) !important;
}

.bppp2 .bppp2-filter__header h2 {
    font-size:21px !important;
}

.bppp2 .bppp2-field,
.bppp2 .bppp2-range-section,
.bppp2 .bppp2-amenities {
    margin-bottom:18px !important;
}

.bppp2 .bppp2-field input,
.bppp2 .bppp2-native-filter select,
.bppp2 .bppp2-native-filter .nice-select,
.bppp2 .bppp2-native-filter .multi-select-trigger {
    height:46px !important;
    min-height:46px !important;
    border-radius:11px !important;
}

.bppp2 input[type="number"]::-webkit-inner-spin-button,
.bppp2 input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance:none !important;
    margin:0 !important;
}

.bppp2 input[type="number"] {
    appearance:textfield !important;
    -moz-appearance:textfield !important;
}

/* Guaranteed premium styling for the dynamically created amenity control */
.bppp2 button.bppp33-more-amenities,
.bppp2 button.bppp36-more-amenities {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-height:31px !important;
    margin:10px 0 0 !important;
    padding:6px 11px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border:1px solid #a9d5bd !important;
    border-radius:999px !important;
    outline:0 !important;
    background:#edf8f2 !important;
    color:#08784a !important;
    box-shadow:none !important;
    font:inherit !important;
    font-size:9.5px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

/* Robust no-image state; JS marks the media container */
.bppp2 .bppp2-card__media.is-bpp36-no-image {
    position:relative !important;
    background:
        radial-gradient(circle at 78% 22%,rgba(7,148,85,.14),transparent 25%),
        linear-gradient(135deg,#f2f8f5,#e4eee8) !important;
}

.bppp2 .bppp2-card__media.is-bpp36-no-image::before {
    content:"Project image coming soon" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:58px 22px 20px !important;
    color:#60786d !important;
    font:inherit !important;
    font-size:12px !important;
    font-weight:800 !important;
    text-align:center !important;
}

.bppp2 .bppp2-card__media.is-bpp36-no-image::after {
    content:"⌂" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    z-index:3 !important;
    transform:translate(-50%,-38px) !important;
    color:rgba(7,148,85,.32) !important;
    font-size:38px !important;
}

.bppp2 .bppp2-card__media.is-bpp36-no-image .bppp2-card__image {
    opacity:0 !important;
    pointer-events:none !important;
}

/* Keep desktop width sensible on medium monitors */
@media (max-width:1400px) {
    .bppp2 .bppp2-container {
        width:calc(100vw - 34px) !important;
    }

    .bppp2 .bppp2-shell {
        grid-template-columns:310px minmax(0,1fr) !important;
        gap:20px !important;
        padding:18px !important;
    }

    .bppp2 .bppp2-card__media {
        height:220px !important;
    }
}

@media (max-width:1024px) {
    .bppp2 .bppp2-shell {
        grid-template-columns:280px minmax(0,1fr) !important;
    }

    .bppp2 .bppp2-card__metrics {
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media (max-width:900px) {
    .bppp2 .bppp2-shell {
        display:block !important;
    }
}

@media (max-width:767px) {
    .bppp2 .bppp2-container {
        width:calc(100vw - 22px) !important;
    }

    .bppp2 .bppp2-hero {
        min-height:auto !important;
    }

    .bppp2 .bppp2-hero__inner {
        min-height:auto !important;
        padding:27px 0 44px !important;
    }

    .bppp2 .bppp2-hero h1 {
        font-size:30px !important;
    }

    .bppp2 .bppp2-shell {
        margin-top:-18px !important;
        padding:10px !important;
        border-radius:19px !important;
    }

    .bppp2 .bppp2-card__media {
        height:218px !important;
    }

    .bppp2 .bppp2-card__metrics {
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}