/*
 * BestPropertyPlug — Project Search Metrics DOM Fix V3.8.7
 *
 * This version does NOT guess the old metric class names.
 * JS identifies the real Units / Blocks / Floors items in each rendered
 * project card and adds deterministic classes:
 *
 * .bpp-v387-metrics-row
 * .bpp-v387-metric-item
 * .bpp-v387-metric-icon
 * .bpp-v387-metric-value
 * .bpp-v387-metric-label
 *
 * Then CSS renders:
 *
 *       ICON
 *       61
 *      Units
 *
 * Mobile: 2 project columns preserved.
 * Tablet portrait: 2 columns preserved.
 * Tablet landscape: 3 columns preserved.
 * Desktop >=1200px untouched.
 */

@media (max-width: 1199px) {
    html body .bppp2-card .bpp-v387-metrics-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 8px 7px !important;
        padding: 7px 3px !important;
        border: 1px solid #dce9e2 !important;
        border-radius: 10px !important;
        background: #f5faf7 !important;
        overflow: hidden !important;
    }

    html body .bppp2-card .bpp-v387-metric-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 4px !important;
        text-align: center !important;
        border-left: 1px solid transparent !important;
        box-sizing: border-box !important;
    }

    html body .bppp2-card .bpp-v387-metric-item + .bpp-v387-metric-item {
        border-left-color: #e2ece7 !important;
    }

    html body .bppp2-card .bpp-v387-metric-icon {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 13px !important;
        height: 13px !important;
        min-width: 13px !important;
        min-height: 13px !important;
        max-width: 13px !important;
        max-height: 13px !important;
        margin: 0 0 1px !important;
        padding: 0 !important;
        line-height: 13px !important;
        font-size: 13px !important;
        flex: 0 0 13px !important;
    }

    html body .bppp2-card .bpp-v387-metric-icon svg,
    html body .bppp2-card .bpp-v387-metric-icon i,
    html body .bppp2-card .bpp-v387-metric-icon img {
        display: block !important;
        width: 13px !important;
        height: 13px !important;
        max-width: 13px !important;
        max-height: 13px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 13px !important;
    }

    html body .bppp2-card .bpp-v387-metric-value {
        order: 2 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #17362b !important;
        font-size: 9.4px !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .bppp2-card .bpp-v387-metric-label {
        order: 3 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #87958e !important;
        font-size: 6.8px !important;
        line-height: 1.05 !important;
        font-weight: 600 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /*
     * Kill legacy inline/grid/flex positioning inside the normalized item.
     * The JS has already identified the semantic icon/value/label nodes.
     */
    html body .bppp2-card .bpp-v387-metric-item > * {
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
        float: none !important;
        position: static !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    html body .bppp2-card .bpp-v387-metrics-row {
        margin: 0 8px 7px !important;
        padding: 7px 2px !important;
    }

    html body .bppp2-card .bpp-v387-metric-item {
        padding: 0 2px !important;
    }

    html body .bppp2-card .bpp-v387-metric-icon,
    html body .bppp2-card .bpp-v387-metric-icon svg,
    html body .bppp2-card .bpp-v387-metric-icon i,
    html body .bppp2-card .bpp-v387-metric-icon img {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
        font-size: 12px !important;
        line-height: 12px !important;
        flex-basis: 12px !important;
    }

    html body .bppp2-card .bpp-v387-metric-value {
        font-size: 9px !important;
    }

    html body .bppp2-card .bpp-v387-metric-label {
        font-size: 6.5px !important;
    }
}

@media (max-width: 390px) {
    html body .bppp2-card .bpp-v387-metric-icon,
    html body .bppp2-card .bpp-v387-metric-icon svg,
    html body .bppp2-card .bpp-v387-metric-icon i,
    html body .bppp2-card .bpp-v387-metric-icon img {
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        min-height: 11px !important;
        max-width: 11px !important;
        max-height: 11px !important;
        font-size: 11px !important;
        line-height: 11px !important;
        flex-basis: 11px !important;
    }

    html body .bppp2-card .bpp-v387-metric-value {
        font-size: 8.4px !important;
    }

    html body .bppp2-card .bpp-v387-metric-label {
        font-size: 6.1px !important;
    }
}

/* Desktop intentionally untouched. */