/**
 * Property component library, pulled from the Figma "01 - Brand & Design
 * System" file, "property-components" frame (node 11:4).
 *
 * Requires variables.css AND buttons.css to be linked first - the Enquire
 * / View Property buttons on the featured card reuse .btn-outline/.btn-primary
 * directly rather than duplicating button styles here.
 *
 * BADGE FAMILIES - the frame uses three distinct treatments, not one:
 *   - Status badges: 4px-radius, semantic color per status (see below).
 *   - Type badges: 100px-radius (pill), same outline style for every type.
 *   - Featured badge: its own one-off dark/gold treatment, only used on the
 *     featured card's image.
 *
 * STATUS BADGE COLORS (confirmed from the frame, not a single flat style):
 *   For Sale     - bg primary green, white text
 *   For Rent     - bg champagne gold, dark text
 *   Sold         - bg charcoal, white text
 *   Under Offer  - bg light gold, dark text
 *   New Listing  - transparent, green outline + green text
 *
 * USAGE
 * -----
 *   <span class="badge-status badge-status--for-sale">For Sale</span>
 *   <span class="badge-type">Villa</span>
 *
 *   <div class="property-specs">
 *       <span class="property-spec-item">
 *           <span class="property-spec-icon property-spec-icon--bed" aria-hidden="true"></span>
 *           <span class="property-spec-value">5</span> <span class="property-spec-unit">Beds</span>
 *       </span>
 *       <span class="property-spec-separator" aria-hidden="true">&bull;</span>
 *       ...
 *   </div>
 *
 *   <div class="property-price-large">
 *       <span class="property-price-overline">Starting From</span>
 *       <span class="property-price-value">&#8358;850,000,000</span>
 *   </div>
 *   <span class="property-price-compact">&#8358;850M</span>
 *
 *   <div class="property-location">
 *       <span class="property-location-icon" aria-hidden="true"></span>
 *       <span class="property-location-address">Ikoyi, Lagos</span>
 *       <a href="#" class="property-location-map-link">Map</a>
 *   </div>
 *
 * See the bottom of this file for the three full card patterns.
 */

/* ---------------------------------------------------------------------
 * Status badges
 * --------------------------------------------------------------------- */

.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-status--for-sale {
    background-color: var(--color-primary-green);
    color: var(--color-white);
}

.badge-status--for-rent {
    background-color: var(--color-champagne-gold);
    color: var(--color-near-black);
}

.badge-status--sold {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.badge-status--under-offer {
    background-color: var(--color-light-gold);
    color: var(--color-near-black);
}

.badge-status--new-listing {
    background-color: transparent;
    border: 1px solid var(--color-primary-green);
    color: var(--color-primary-green);
}

/* ---------------------------------------------------------------------
 * Type badges - one consistent outline/pill treatment for every type.
 * Matches PROPERTY_TYPES in config/constants.php and the properties.type
 * ENUM in database/schema.sql: Villa, Penthouse, Estate, Duplex, Apartment,
 * Mansion, Commercial. No 'Land' - Dafidol Realty doesn't deal in land sales.
 * --------------------------------------------------------------------- */

.badge-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 100px;
    background-color: transparent;
    border: 1px solid var(--color-primary-green);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-primary-green);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Featured badge - one-off treatment, only used on the featured card's image
 * --------------------------------------------------------------------- */

.badge-featured {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: var(--color-dark-green);
    border: 1px solid var(--color-champagne-gold);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-light-gold);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Specs row (beds / baths / size / parking)
 * --------------------------------------------------------------------- */

.property-specs {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.property-spec-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    white-space: nowrap;
}

.property-spec-icon {
    display: block;
    width: 14px;
    height: 14px;
    background-color: #6E6A64;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
}

.property-spec-icon--bed {
    -webkit-mask-image: url('/assets/images/icons/icon-property-bed.svg');
    mask-image: url('/assets/images/icons/icon-property-bed.svg');
}

.property-spec-icon--bath {
    -webkit-mask-image: url('/assets/images/icons/icon-property-bath.svg');
    mask-image: url('/assets/images/icons/icon-property-bath.svg');
}

.property-spec-icon--size {
    -webkit-mask-image: url('/assets/images/icons/icon-property-maximize.svg');
    mask-image: url('/assets/images/icons/icon-property-maximize.svg');
}

.property-spec-icon--parking {
    -webkit-mask-image: url('/assets/images/icons/icon-property-car.svg');
    mask-image: url('/assets/images/icons/icon-property-car.svg');
}

.property-spec-value {
    font-weight: 500;
    color: var(--color-charcoal);
}

.property-spec-unit {
    font-weight: 500;
    color: #6E6A64;
}

.property-spec-separator {
    color: #B4AA9B;
    font-size: 13px;
}

/* ---------------------------------------------------------------------
 * Price display
 * --------------------------------------------------------------------- */

.property-price-large {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.property-price-overline {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
}

.property-price-value {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 24px;
    color: var(--color-dark-green);
}

.property-price-compact {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 18px;
    color: var(--color-dark-green);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Location display
 * --------------------------------------------------------------------- */

.property-location {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.property-location-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--color-champagne-gold);
    -webkit-mask-image: url('/assets/images/icons/icon-property-map-pin.svg');
    mask-image: url('/assets/images/icons/icon-property-map-pin.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.property-location-address {
    flex: 1 0 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
}

.property-location-map-link {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--color-primary-green);
}

/* ---------------------------------------------------------------------
 * Favorite (heart) button - a circular image-overlay toggle. Doesn't reuse
 * .btn-icon-* from buttons.css because it's a genuinely different shape
 * (fully round, not the 4px-radius square icon buttons use) and context
 * (floats on a photo, not inline in a layout).
 * --------------------------------------------------------------------- */

.property-favorite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 50%;
    background-color: var(--color-white);
    cursor: pointer;
    /* No global CSS reset exists in this project, so <button> keeps the
       browser's default padding/font unless reset here - that leftover
       padding was shrinking the icon's usable space, reading as clipping. */
}

.property-favorite-btn img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
    pointer-events: none;
    transition: transform 0.15s ease;
}

/* Saved state - includes/../public/assets/js/saved-properties.js swaps the
   <img>'s src between the outline (icon-property-heart.svg) and filled
   (icon-property-heart-filled.svg) variants and toggles this class; the
   class itself only handles the small "pop" feedback on toggle, not the
   color change, since that's a swapped raster/vector asset, not something
   this plain <img> (no CSS mask) can be recolored via CSS alone. */
.property-favorite-btn.is-saved img {
    transform: scale(1.1);
}

/* ---------------------------------------------------------------------
 * Card - Large (vertical, image-top)
 * --------------------------------------------------------------------- */

.property-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 380px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    box-shadow: 0px 8px 24px 0px rgba(26, 26, 26, 0.05);
    /* No overflow:hidden here (deliberately removed) - it was clipping the
       currency disclaimer tooltip (includes/currency.php's render_price_html(),
       .currency-price__disclaimer-tooltip in currency-toggle.css), which
       pops up ABOVE the price and got cut off mid-sentence by the card's
       own bounds. .property-card__image below now carries its own
       top-corner radius instead, so the photo still clips to match the
       card's rounded corners without the card itself needing to clip
       everything inside it. */
}

.property-card__image {
    position: relative;
    width: 100%;
    height: 238px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* Direct-child combinator (>), not a descendant selector - the grid
   variant's favorite button icon is ALSO an <img> nested inside
   .property-card__image (image > image-header > favorite-btn > img), a few
   levels deeper. A descendant selector here matched that icon too and,
   being later in the file at equal specificity to .property-favorite-btn
   img's own 18px sizing rule, won and force-stretched the icon to
   position:absolute;inset:0;width:100%;height:100% of its own nearest
   positioned ancestor (the thin, full-width header row) - an 18px heart
   smeared into a wide, flat shape, which is what was actually behind the
   "diagonal shape" rendering bug, not the property photo or any CSS
   positioning/stacking issue. > scopes this to only the direct photo <img>.

   Absolutely positioned so the image is a fill layer behind whatever else
   sits in .property-card__image (the grid variant's tag/favorite-button
   header, or the large/featured/compact variants' own absolutely-positioned
   badge/favorite elements) instead of a normal-flow block that pushes that
   content below the container's fixed height, outside overflow:hidden.
   Subtle hover zoom, from the original design brief - scoped to the image
   only (transform on this element alone, nothing above it) so badges,
   the favorite button, and the card body never move or scale with it. The
   container's overflow:hidden above keeps the zoomed image from spilling
   past the card's rounded corners. Standard pattern for any card using
   .property-card - applies to every variant (large/featured/compact/grid),
   not just the homepage's. */
.property-card__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease-out;
}

.property-card:hover .property-card__image > img {
    transform: scale(1.04);
}

/* Bottom-fade so a badge/heart button stay legible over any photo. */
.property-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(194deg, rgba(7, 31, 22, 0) 64%, rgba(7, 31, 22, 0.8) 86%);
    pointer-events: none;
}

.property-card__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
}

.property-card__favorite {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
}

.property-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.property-card__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 22px;
    color: var(--color-dark-green);
    margin: 0 0 6px;
}

.property-card__divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 0;
    width: 100%;
}

/* ---------------------------------------------------------------------
 * Card - Featured (horizontal, image-left / content-right)
 * --------------------------------------------------------------------- */

.property-card--featured {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 720px;
    height: 320px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 4px;
    box-shadow: 0px 16px 32px -4px rgba(12, 59, 42, 0.06);
    /* overflow:hidden deliberately removed - see the base .property-card
       rule's own comment (same currency-disclaimer-tooltip clipping bug). */
}

.property-card--featured .property-card__image {
    position: relative;
    width: 288px;
    flex-shrink: 0;
    height: 100%;
    /* Image sits on the LEFT spanning full height here (not image-top like
       the base/compact layout), so it's the left corners that need to
       match the card's own rounding, not the top ones. */
    border-radius: 4px 0 0 4px;
}

.property-card--featured .property-card__image::after {
    content: none; /* the featured card's photo doesn't use the bottom-fade */
}

.property-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 0;
    min-width: 0;
    padding: 24px;
}

.property-card__description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-charcoal);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
}

.property-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------------------
 * Card - Compact (smaller vertical)
 * --------------------------------------------------------------------- */

.property-card--compact {
    max-width: 280px;
}

.property-card--compact .property-card__image {
    height: 160px;
}

.property-card--compact .property-card__image::after {
    content: none; /* no gradient/badge shown on the compact card in the frame */
}

.property-card--compact .property-card__body {
    padding: 16px;
    gap: 12px;
}

.property-card--compact .property-card__title {
    font-size: 18px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
 * Card - Grid (homepage "Recently Listed" cards). Confirmed from the live
 * approved homepage (node 15:48), which - per our source-of-truth rule -
 * overrides the "Large" card above where they conflict: 12px radius not 4px,
 * 420px image not 238px, a single uniform image tag instead of the
 * multi-color status badge system, price shown inline above the title
 * (no "Starting From" overline), and its own full-width button. Reuses
 * .property-favorite-btn, .property-location*, and .btn-primary as-is
 * where they do match; only what genuinely differs is redefined here.
 *
 * Flagging: this uniform tag conflicts with badge-status's confirmed
 * semantic colors (e.g. "New Listing" is green-outline there, solid green
 * here) - the live page just doesn't demonstrate a Sold/Under Offer state
 * on a card to resolve it either way. Worth clarifying whether homepage
 * cards intentionally simplify status display before the admin/property
 * pages make this decision load-bearing.
 * --------------------------------------------------------------------- */

.property-card--grid {
    max-width: none;
    border-radius: 12px;
    border-color: #EAE6DF;
}

.property-card--grid .property-card__image {
    height: 420px;
    padding: 20px;
    box-sizing: border-box;
    /* Matches this variant's own 12px card radius (base .property-card__image
       sets 4px) - cosmetically inert today since the 20px padding already
       keeps the image clear of the wrapper's corners, but keeps this
       correct rather than accidentally-correct if that padding ever changes. */
    border-radius: 12px;
}

.property-card--grid .property-card__image > img {
    border-radius: 12px;
}

.property-card--grid .property-card__image::after {
    content: none; /* this card uses a solid tag, not a legibility gradient */
}

.property-card__image-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.property-card__tag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 20px;
    background-color: var(--color-primary-green);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Same charcoal/white treatment as .badge-status--sold above (this
   project's existing status-state color for "Sold") - kept as a
   property-card__tag modifier rather than switching the element to
   .badge-status itself, since that's a differently-shaped component
   (4px corners) built for a different context; the pill shape (20px
   corners) is what every other card tag already uses here.

   Placed AFTER .property-card__tag on purpose, not before - both
   selectors have identical specificity (one class each), so whichever
   rule comes LATER in the cascade wins for a shared property like
   background-color. Defined before .property-card__tag originally, the
   base rule's green silently overrode this modifier's charcoal on every
   real page (confirmed live: the "Sold" text rendered, just in the wrong
   color) - a real, verified regression this reordering fixes, not a
   theoretical concern. */
.property-card__tag--sold {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.property-card--grid .property-card__body {
    padding: 24px;
    gap: 24px;
}

/* The price/title/location group (the body's first, unstyled child div in
   index.php's markup) needs its own internal gap - confirmed 10px on
   desktop, missing entirely before this fix. */
.property-card--grid .property-card__body > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.property-price-inline {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-primary-green);
}

.property-card--grid .property-card__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 24px;
    color: var(--color-charcoal);
    margin: 0;
}

.property-card--grid .property-location-address {
    color: #717171;
}

.property-card--grid .property-specs {
    justify-content: space-between;
    width: 100%;
}

.property-card--grid .property-spec-item {
    gap: 6px;
    color: var(--color-charcoal);
    font-weight: 500;
}

.property-card--grid .property-spec-icon {
    width: 16px;
    height: 16px;
}

.property-card--grid .btn-primary {
    width: 100%;
    padding: 12px 28px;
    border-radius: 8px;
    justify-content: center;
}

/* ---- Grid card (mobile, <1024px) - confirmed from the mobile homepage
   frame (node 27:44): smaller image padding, a compact status badge, a
   smaller favorite button, tighter body padding, and smaller type across
   price/title/location/specs than the desktop card. ---- */
@media (max-width: 1023px) {
    .property-card--grid .property-card__image {
        padding: 16px;
    }

    /* Confirmed 9px specifically (node 54:16), not a rounding of the
       desktop badge's 11px. */
    .property-card--grid .property-card__tag {
        padding: 4px 10px;
        font-size: 9px;
    }

    .property-card--grid .property-favorite-btn {
        width: 32px;
        height: 32px;
    }

    .property-card--grid .property-favorite-btn img {
        width: 16px;
        height: 16px;
    }

    .property-card--grid .property-card__body {
        padding: 20px;
        gap: 16px;
    }

    .property-card--grid .property-card__body > div:first-child {
        gap: 8px;
    }

    .property-card--grid .property-price-inline {
        font-size: 20px;
    }

    .property-card--grid .property-card__title {
        font-weight: 700;
        font-size: 20px;
    }

    .property-card--grid .property-location-icon {
        width: 12px;
        height: 12px;
    }

    .property-card--grid .property-location-address {
        font-size: 12px;
    }

    .property-card--grid .property-spec-icon {
        width: 14px;
        height: 14px;
    }

    .property-card--grid .property-spec-item {
        font-size: 12px;
    }

    .property-card--grid .btn-primary {
        padding: 12px 16px;
        border-radius: 6px;
    }
}