/* ================================================================
   FEATURED PROPERTIES — COMPONENT STYLES
   Location: /home/kitchenbrand/public_html/components/featured-properties/featured-properties.css

   Owned by the featured-properties component.
   Load this instead of defining lcard rules in global.css or
   any page-level stylesheet.

   Requires global.css (design tokens) to be loaded first.

   Sections:
     1. Section wrapper
     2. Card grid
     3. Card shell
     4. Image block & placeholders
     5. Badge & save button
     6. Card body
     7. Card buttons
     8. States
     9. IDX compliance note
    10. Responsive
================================================================ */


/* ================================================================
   1. SECTION WRAPPER
================================================================ */
.listings-section {
    padding:    72px 44px;
    background: var(--warm-white);
}


/* ================================================================
   2. CARD GRID
================================================================ */
.lcard-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   18px;
}


/* ================================================================
   3. CARD SHELL
================================================================ */
.lcard {
    display:         flex;
    flex-direction:  column;
    background:      var(--white);
    border:          1px solid #D6D0C4;
    border-radius:   var(--radius-xl);
    box-shadow:      var(--shadow-card);
    overflow:        hidden;
    text-decoration: none;
    color:           inherit;
    cursor:          pointer;
    transition:      transform var(--trans), box-shadow var(--trans);
}
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }


/* ================================================================
   4. IMAGE BLOCK & PLACEHOLDERS
================================================================ */
.lcard-img                  { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #2a3540; flex-shrink: 0; }
.lcard-img img              { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.lcard:hover .lcard-img img { transform: scale(1.04); }

/* Photo placeholders — shown when no MLS photo is available */
.cph { width: 100%; height: 100%; }
.ph1 { background: linear-gradient(148deg, #0d2d47, #1b4f72); }
.ph2 { background: linear-gradient(148deg, #1d4032, #2471a3); }
.ph3 { background: linear-gradient(148deg, #1a3a2a, #1b4f72); }
.ph4 { background: linear-gradient(148deg, #0d2d47, #1d4032); }
.ph5 { background: linear-gradient(148deg, #1b4f72, #27604a); }
.ph6 { background: linear-gradient(148deg, #123550, #1b4f72); }


/* ================================================================
   5. BADGE & SAVE BUTTON
================================================================ */
.cbadge {
    position:       absolute;
    top:            10px;
    left:           10px;
    font-size:      9px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding:        3px 9px;
    border-radius:  999px;
    color:          var(--white);
    background:     var(--accent);
}
.cbadge.reduced { background: #1D4032; }
.cbadge.pending { background: #7c3aed; }

.csave {
    position:        absolute;
    top:             8px;
    right:           8px;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, .88);
    border:          none;
    font-size:       14px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background var(--trans), transform var(--trans);
}
.csave:hover { background: var(--white); transform: scale(1.1); }
.csave.saved { color: var(--accent); }


/* ================================================================
   6. CARD BODY
================================================================ */
.lcard-body  { padding: 15px 16px 17px; flex: 1; display: flex; flex-direction: column; }
.lcard-price { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--secondary); line-height: 1; margin-bottom: 2px; }
.lcard-area  { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #9A9488; margin-bottom: 5px; }
.lcard-addr  { font-size: 12px; font-weight: 500; color: var(--charcoal); margin-bottom: 8px; flex: 1; line-height: 1.4; }
.lcard-specs { display: flex; gap: 10px; font-size: 11px; color: #9A9488; flex-wrap: wrap; margin-bottom: 10px; }
.lcard-specs span { white-space: nowrap; }


/* ================================================================
   7. CARD BUTTONS
================================================================ */
.lcard-btns  { display: flex; gap: 6px; }
.lcard-btn-p,
.lcard-btn-s {
    flex:               1;
    padding:            7px 8px;
    border-radius:      var(--radius-md);
    font-size:          11px;
    font-weight:        500;
    font-family:        var(--sans);
    text-align:         center;
    text-decoration:    none;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    transition:         all var(--trans);
    border:             1px solid transparent;
    cursor:             pointer;
    appearance:         none;
    -webkit-appearance: none;
    line-height:        1;
}
.lcard-btn-p            { background: var(--secondary); color: var(--white); border-color: var(--secondary); }
.lcard-btn-p:hover      { background: var(--secondary-light); }
.lcard-btn-s            { background: var(--white); color: var(--secondary); border-color: #D6D0C4; }
.lcard-btn-s:hover      { border-color: var(--secondary); }


/* ================================================================
   8. STATES
================================================================ */
.no-results    { font-size: 14px; color: #9A9488; padding: 40px 0; grid-column: 1 / -1; }
.view-all-wrap { text-align: center; margin-top: 36px; }


/* ================================================================
   9. IDX COMPLIANCE NOTE
================================================================ */
.idx-note {
    margin-top:    32px;
    padding:       16px 20px;
    background:    rgba(0, 0, 0, .04);
    border:        1px solid #D6D0C4;
    border-radius: var(--radius-md);
    font-size:     11px;
    line-height:   1.75;
    color:         #9A9488;
}
.idx-note strong { color: var(--charcoal); }


/* ================================================================
   10. RESPONSIVE
================================================================ */
@media (max-width: 860px) {
    .lcard-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .listings-section { padding: 48px 20px; }
    .lcard-grid       { grid-template-columns: 1fr; }
}