/**
 * Property Card Components CSS
 * 
 * Property-related card styling
 * Extends base card system from cards.css
 * 
 * Contains:
 * - Property cards (.card-property)
 * - Property badge styling
 * - Property card responsive design
 */

/* ============================
   Property Card
   ============================ */

/* Property Card - inherits most styling from base .card class */
body.theme-pt .card.card-property .card-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    height: 250px;
}


body.theme-pt .card.card-property .card-text {
    -webkit-line-clamp: unset;
}

body.theme-pt .card.card-property .badge {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    color: var(--color-primary);
    border-radius: var(--card-badge-radius);
    padding: var(--card-badge-padding);
    font-size: var(--card-text-size);
    font-weight: 700;
    line-height: 1.375em;
    box-shadow: 0 1px 6px var(--card-badge-shadow);
}

body.theme-pt .card.card-property .badge.bg-primary {
    color: var(--color-bg-primary);
    background: var(--color-primary);
}

/* Property Card Features Layout */
body.theme-pt .card.card-property .prop-feat {
    justify-content: space-between !important;
    align-items: center;
}

body.theme-pt .card.card-property .prop-feat-left {
    gap: var(--space-xl);
}

body.theme-pt .card.card-property .prop-feat-right {
    display: flex;
    align-items: center;
}

body.theme-pt .card.card-property .prop-feat-right h4 {
    margin-bottom: 0;
    text-align: right;
}

/* Override button-style styling from sections.css for property cards */
body.theme-pt .card.card-property.card-clickable .prop-feat > div {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    text-align: left;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 6px;
    box-shadow: none;
}

/* Target the specific rule that's winning to increase bed/bath spacing */
body.theme-pt .card.card-property .prop-feat-left.d-flex {
    gap: var(--space-xl) !important;
}

/* Higher specificity rule to control spacing between bed/bath divs */
body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex {
    gap: var(--space-xl);
}

body.theme-pt .card.card-property.card-clickable .prop-feat > div img {
    margin-right: 6px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Higher specificity rules for bed/bath icon layout - ensure numbers appear to the right */
body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex > div {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 6px;
}

body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex > div img {
    margin-right: 6px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================
   Property Card Mobile Responsive
   ============================ */

/* Tablet Responsive (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    body.theme-pt .card.card-property .prop-feat-left {
        gap: var(--space-md);
    }
    
    body.theme-pt .card.card-property .prop-feat-right h4 {
        font-size: var(--font-size-xl);
    }
}

/* Mobile Responsive (≤767px) */
@media (max-width: 767px) {
    body.theme-pt .card.card-property .prop-feat {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    body.theme-pt .card.card-property .prop-feat-left {
        gap: var(--space-xl);
        width: 100%;
    }
    
    body.theme-pt .card.card-property .prop-feat-right {
        width: 100%;
        justify-content: flex-end;
    }
    
    body.theme-pt .card.card-property .prop-feat-right h4 {
        font-size: var(--font-size-lg);
        text-align: right;
    }
    
    /* Smaller icons and text on mobile - optimized for shadow-free design */
    body.theme-pt .card.card-property.card-clickable .prop-feat > div {
        font-size: var(--font-size-xs);
        gap: 6px;
        font-weight: var(--font-weight-medium);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    
    body.theme-pt .card.card-property.card-clickable .prop-feat > div img {
        margin-right: 4px;
        width: 14px;
        height: 14px;
    }
    
    /* Higher specificity mobile rules for bed/bath layout */
    body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex {
        gap: var(--space-xl);
    }
    
    body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex > div {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 4px;
    }
    
    body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex > div img {
        margin-right: 4px;
        width: 14px;
        height: 14px;
    }
}

/* Small Mobile (≤576px) */
@media (max-width: 576px) {
    body.theme-pt .card.card-property .prop-feat-left {
        gap: var(--space-xl);
    }
    
    body.theme-pt .card.card-property .prop-feat-right h4 {
        font-size: var(--font-size-md);
    }
    
    /* Compact design for small screens - clean without shadows */
    body.theme-pt .card.card-property.card-clickable .prop-feat > div {
        font-size: 11px;
        gap: 5px;
        font-weight: var(--font-weight-medium);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    
    body.theme-pt .card.card-property.card-clickable .prop-feat > div img {
        margin-right: 3px;
        width: 12px;
        height: 12px;
    }
    
    /* Higher specificity small mobile rules for bed/bath layout */
    body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex {
        gap: var(--space-xl);
    }
    
    body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex > div {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 3px;
    }
    
    body.theme-pt .card.card-property.card-clickable .prop-feat-left.d-flex > div img {
        margin-right: 3px;
        width: 12px;
        height: 12px;
    }
}