/* /realestate/assets/css/re-project-features.css
   Highlights/USPs & Amenities display grid for projects/project.php.
   Deliberately uses a new "re-pf-" class prefix rather than the existing
   .pd-highlights/.pd-amenities classes, since the rules for those live in
   real-estate.css / property-detail.css — neither has been reviewed in any
   session on this project, so this avoids any risk of colliding with rules
   already defined there. Once those files are supplied, this can be
   merged/reconciled with the site's base styles if desired.
   Uses the same color palette already used inline elsewhere in project.php
   (falls back to hardcoded hex if the --re-* custom properties aren't
   defined, matching the var(--re-dusk, #2c5f6e) pattern seen there).
*/

.re-pf-section { margin: 28px 0; }

.re-pf-category {
    margin: 0 0 22px;
}
.re-pf-category:last-child { margin-bottom: 0; }

.re-pf-category-label {
    font-family: var(--re-font-ui, inherit);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--re-gold, #8b6f47);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.re-pf-category-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--re-cream-border, #e8dfd0), transparent);
}

/* Highlights — card grid, one icon-badge + label per card */
.re-pf-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.re-pf-highlight-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fbf9f5;
    border: 1px solid var(--re-cream-border, #e8dfd0);
    border-radius: 10px;
    font-size: .86rem;
    font-weight: 500;
    color: #2a2a2a;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.re-pf-highlight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(44,95,110,.08);
    border-color: var(--re-dusk, #2c5f6e);
}

/* Amenities — compact pill/chip layout, denser than highlights since lists
   tend to be longer */
.re-pf-amenity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.re-pf-amenity-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    background: #fff;
    border: 1px solid var(--re-cream-border, #e8dfd0);
    border-radius: 30px;
    font-size: .8rem;
    font-weight: 500;
    color: #3a3a3a;
    transition: background .15s ease, border-color .15s ease;
}
.re-pf-amenity-chip:hover {
    background: #f4f8f7;
    border-color: var(--re-green, #3a7a5a);
}

/* Icon badge — wraps whatever re_feature_icon_html() renders (uploaded
   image, icon-font <i>, or the plain-dot fallback) so all three render at
   a consistent size/alignment regardless of source. */
.re-pf-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: #eef4f2;
    color: var(--re-green, #3a7a5a);
    font-size: .82rem;
    line-height: 1;
}
.re-pf-highlight-card .re-pf-icon-badge {
    background: #e6f0f3;
    color: var(--re-dusk, #2c5f6e);
}
.re-pf-icon-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.re-pf-amenity-chip .re-pf-icon-badge {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: .72rem;
}
.re-pf-amenity-chip .re-pf-icon-badge img {
    width: 12px;
    height: 12px;
}

@media (max-width: 640px) {
    .re-pf-highlight-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .re-pf-highlight-card { padding: 10px 12px; font-size: .82rem; }
    .re-pf-amenity-chip { font-size: .76rem; padding: 6px 11px; }
}

/* Nearby Places — "distance graph": a stacked list, nearest-first, each
   row with a horizontal bar scaled to its distance relative to the
   farthest place in this project's own list (not an absolute scale). */
.re-pf-nearby-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.re-pf-nearby-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.re-pf-nearby-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 1rem;
    background: #e6f0f3;
    color: var(--re-dusk, #2c5f6e);
    margin-top: 2px;
}
.re-pf-nearby-icon img { width: 18px; height: 18px; }

.re-pf-nearby-info { flex: 1; min-width: 0; }

.re-pf-nearby-toprow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.re-pf-nearby-name {
    font-weight: 600;
    font-size: .88rem;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.re-pf-nearby-dist {
    font-weight: 700;
    font-size: .82rem;
    color: var(--re-dusk, #2c5f6e);
    white-space: nowrap;
    flex-shrink: 0;
}

.re-pf-nearby-bartrack {
    height: 7px;
    border-radius: 4px;
    background: #eee7d9;
    overflow: hidden;
    margin-bottom: 5px;
}
.re-pf-nearby-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(to right, var(--re-dusk, #2c5f6e), var(--re-green, #3a7a5a));
    transition: width .4s ease;
}

.re-pf-nearby-type {
    font-size: .72rem;
    color: #9b9b9b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 640px) {
    .re-pf-nearby-name { font-size: .84rem; }
    .re-pf-nearby-icon { width: 30px; height: 30px; min-width: 30px; }
}

/* Sidebar context — "What's Nearby" now lives exclusively inside a
   .pd-side-card in the ~340px right sidebar (moved there from the old
   full-width left column). Same classes, same structure, just tightened
   sizing so it doesn't feel oversized/cramped at that width. Scoped to
   .pd-side-card rather than replacing the base rules above, in case this
   list is ever reused somewhere wider again. */
.pd-side-card .re-pf-nearby-list { gap: 14px; }
.pd-side-card .re-pf-nearby-row { gap: 10px; }
.pd-side-card .re-pf-nearby-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: .82rem;
}
.pd-side-card .re-pf-nearby-icon img { width: 15px; height: 15px; }
.pd-side-card .re-pf-nearby-toprow { gap: 6px; margin-bottom: 4px; }
.pd-side-card .re-pf-nearby-name { font-size: .8rem; }
.pd-side-card .re-pf-nearby-dist { font-size: .74rem; }
.pd-side-card .re-pf-nearby-bartrack { height: 6px; margin-bottom: 4px; }
.pd-side-card .re-pf-nearby-type { font-size: .66rem; }