/* listings60aa.css — Listings grid + Listing detail, phase-3 rebuild (2026-09-16)
   Loaded by listings.html and listing.html only, after inner60aa.css.
   Palette/heading-color fixes (ui-light text forced navy, era-card forced
   navy, form fields forced navy) already live site-wide in inner60aa.css —
   this file only adds the components specific to these two pages. */

/* ---- controls row (search + filters + sort) ---- */
.rl-toolbar { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.75rem; }
.rl-search { max-width: 480px; }
.rl-filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.rl-filter-row .form-control--select { min-width: 180px; }
.rl-toolbar__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Same cream-on-cream form-field defect documented in inner60aa.css for
   #buyer-brief/#seller-brief/#evaluation-form: the kit's resting (unfocused)
   label opacity and input text both inherit a colour that reads invisible on
   our own light form sections. Force navy here too, scoped to our own
   sections only. */
#search-controls .form-label, #search-controls input, #search-controls select,
#search-controls .form-label--static,
#enquiry .form-label, #enquiry input, #enquiry select, #enquiry textarea,
#enquiry .form-label--static,
#enquiry .contact-method__option, #enquiry .collection-notice p {
    color: #051936 !important;
}
/* NOTE: do not force a colour on ::placeholder here — the kit deliberately
   sets it to transparent (.form-control--float input::-webkit-input-placeholder
   etc. in global60aa.css) because the floating <label> is the only text meant
   to show at rest; overriding it re-shows the placeholder UNDER the label and
   the two overlap (caught visually 2026-09-16, see rebuild-listings-v2-toolbar.png). */

/* ---- results count + grid ---- */
.rl-results-count { font-family: Gilroy, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #051936; opacity: .65; margin: 0 0 1.5rem; }
.rl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
@media (min-width: 640px) { .rl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rl-grid { grid-template-columns: repeat(3, 1fr); } }
.rl-grid--related { margin-top: 0; }

.rl-card-item, .rl-related-item { list-style: none; }
.rl-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.rl-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(5,25,54,.14); }
.rl-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #05193610; }
.rl-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-card__type { position: absolute; top: .85rem; left: .85rem; background: #051936; color: #f4f1ec; font-family: Gilroy, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .75rem; border-radius: 999px; }
.rl-card__body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.rl-card__address { margin: 0; color: #051936 !important; }
.rl-card__municipality, .rl-card__mls { margin: 0; font-family: Gilroy, sans-serif; font-size: 13.5px; color: #051936; opacity: .68; }
.rl-card__cta { margin-top: .75rem; display: inline-flex; align-items: center; gap: .4rem; font-family: Gilroy, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #f37021 !important; }
.rl-card__cta svg { fill: #f37021; flex-shrink: 0; }

/* ---- feed / filter / empty states ---- */
.rl-state { padding: 2.5rem 2rem; text-align: center; }
.rl-state p { margin: 0 0 1.25rem; color: #051936; }
.rl-state .group { justify-content: center; flex-wrap: wrap; }

/* ---- listing detail: hero over a real photo ---- */
.rl-hero-section { padding: 0; }
.rl-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; color: #f4f1ec; overflow: hidden; }
.rl-hero__gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,25,54,.5) 0%, rgba(5,25,54,.7) 55%, rgba(5,25,54,.94) 100%); }
/* padding-top/bottom only: this sits inside .container-h, which already
   supplies the left/right gutter via its own padding — a padding SHORTHAND
   here would zero that gutter out and slam the H1 into the left edge
   (caught visually 2026-09-16, see rebuild-listing-006-v2.png). */
.rl-hero__inner { position: relative; width: 100%; padding-top: 6rem; padding-bottom: 3rem; }
.rl-back { position: relative; display: inline-flex; align-items: center; gap: .5rem; color: #f4f1ec; font-family: Gilroy, sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; margin-bottom: 1.5rem; opacity: .85; }
.rl-back:hover { opacity: 1; }
.rl-back svg { fill: #f4f1ec; }
/* No "margin: 0" here: these paragraphs rely on the kit's own .mt-1 utility
   class (in the markup) for vertical rhythm — zeroing margin here (as an
   earlier draft did) collapsed the whole identity block into one dense
   line, since this stylesheet loads after the utility classes and wins the
   cascade at equal specificity (caught 2026-09-16). */
.rl-descriptor, .rl-mls, .rl-updated { color: #f4f1ec !important; opacity: .82; }
@media (max-width: 767px) { .rl-hero { min-height: 44vh; } .rl-hero__inner { padding-top: 4.5rem; padding-bottom: 2.5rem; } }

/* ---- gallery ---- */
.rl-gallery { margin-top: 2rem; }
.rl-gallery__main { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(5,25,54,.12); background: #05193610; }
.rl-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.rl-gallery__thumb { width: 96px; height: 64px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; overflow: hidden; opacity: .65; transition: opacity .15s ease, border-color .15s ease; }
.rl-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rl-gallery__thumb:hover { opacity: .9; }
.rl-gallery__thumb.is-active { opacity: 1; border-color: #f37021; }
.rl-gallery__count { margin: .85rem 0 0; font-family: Gilroy, sans-serif; font-size: 13px; color: #051936; opacity: .6; }

/* ---- location map ---- */
.rl-map-wrap { padding: 0; overflow: hidden; }
.rl-map { width: 100%; height: 360px; }
.rl-location__actions { flex-wrap: wrap; }

/* ---- not-found / no-longer-active ---- */
/* NOT flex/align-items:center + min-height: at this oversized display type,
   the centred content block can be taller than the box and overflow UPWARD
   into the fixed header (caught visually 2026-09-16, see
   rebuild-notfound.png — the H1 sliced right through the header logo).
   Plain top padding, like every other era-section-pad section, is what
   already works reliably site-wide. */
.rl-notfound-section { padding-top: 8rem; padding-bottom: 6rem; }
.rl-notfound__actions { flex-wrap: wrap; }

@media (max-width: 767px) {
    .rl-map { height: 280px; }
    .rl-gallery__thumb { width: 76px; height: 52px; }
}