/* (c) 2026 The Lowry Group at Coldwell Banker Realty. All rights reserved. Proprietary — unauthorized copying, reuse, or redistribution prohibited. */
/* ==========================================================================
   THE LOWRY GROUP — PAGE-SPECIFIC LAYOUT RULES
   Anything that only applies to one page/template lives here, so base.css
   and components.css stay reusable across the whole site.
   ========================================================================== */

/* ---- Properties page: filter bar ---------------------------------------*/
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--hairline);
}

.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.filter-tab {
  background: none;
  border: 1px solid var(--hairline);
  color: var(--text-on-black-muted);
  padding: 0.55em 1.3em;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all var(--speed-fast) var(--ease);
}
.filter-tab[hidden] { display: none !important; }
.filter-tab:hover { border-color: var(--gold-dim); color: var(--ivory); }
.filter-tab.is-active { background: var(--gold); border-color: var(--gold); color: var(--black); }

.results-count { font-size: 0.8rem; color: var(--text-on-black-muted); letter-spacing: 0.05em; }

/* ---- Property detail template ------------------------------------------*/
.property-hero {
  position: relative;
  height: 68vh;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  margin-top: 0;
}
.property-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 10%, rgba(10,10,10,0.95) 100%);
}
.property-hero-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--space-lg);
}

.property-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}
.property-meta-row .meta-block { min-width: 90px; }
.property-meta-row .meta-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold);
}
.property-meta-row .meta-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-black-muted);
}

.property-body-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-2xl);
}
@media (max-width: 900px) {
  .property-body-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.property-sidebar {
  align-self: start;
  position: sticky;
  top: 110px;
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  padding: var(--space-lg);
}
@media (max-width: 900px) {
  /* once the sidebar drops below the content on phones/tablets, sticking
     it would just trap it awkwardly mid-scroll — let it sit inline instead */
  .property-sidebar { position: static; top: auto; }
}
.property-sidebar h4 { color: var(--gold); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.14em; margin-bottom: var(--space-md); }
.property-sidebar .agent-line { display: flex; align-items: center; gap: 0.8em; margin-bottom: var(--space-sm); font-size: 0.92rem; }
.property-sidebar .agent-line strong { color: var(--ivory); }
.property-sidebar .btn { width: 100%; justify-content: center; margin-top: var(--space-sm); }

.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--hairline);
  margin: var(--space-lg) 0;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; color: var(--gold); margin: var(--space-lg) 0 calc(var(--space-sm) * -1 + 2px); }
.property-videos .video-label + .video-embed { margin-top: var(--space-sm); }

/* ---- About page ---------------------------------------------------------*/
.mission-block {
  max-width: 760px;
}

/* ---- Media page ----------------------------------------------------------*/
.media-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.media-card {
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.media-card .frame { position: relative; aspect-ratio: 16/9; }
.media-card iframe { width: 100%; height: 100%; border: 0; }
.media-card .caption { padding: var(--space-md); }
.media-card .caption h3 { font-size: 1.05rem; margin-bottom: 0.3em; }
.media-card .caption p { color: var(--text-on-black-muted); font-size: 0.88rem; margin: 0; }
.media-listing-link {
  display: inline-block;
  margin-top: 0.7em;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.media-listing-link:hover { color: var(--gold-dim); }
#mediaTabs { padding: 0; margin-bottom: var(--space-lg); }

.youtube-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  background: var(--charcoal);
  border: 1px solid var(--gold-dim);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* ---- Map page -------------------------------------------------------------*/
#lakewood-map {
  height: 640px;
  width: 100%;
  border: 1px solid var(--hairline);
  /* The CartoDB dark tiles are very low-contrast by design, and against the
     site's near-black background it read as almost blank. Brightening
     (rather than darkening further) keeps the moody dark aesthetic while
     making streets/labels actually legible. */
  filter: brightness(1.6) contrast(0.92) saturate(1.15);
}
@media (max-width: 960px) {
  /* map-layout has already dropped to one column here — the sidebar list
     sits below the map instead of beside it, so a full 640px map means a
     long scroll before reaching any neighborhood info. Shrink both the
     map and its sidebar together so they stay proportioned. */
  #lakewood-map, .map-sidebar { height: 460px; max-height: 460px; }
}
@media (max-width: 560px) {
  #lakewood-map, .map-sidebar { height: 380px; max-height: 380px; }
}

/* Leaflet's default popup is a plain white box, which is why the gold
   "View Listing" / "Read the spotlight" link (styled inline in js/map.js)
   read as pale, low-contrast yellow-on-white. Restyle the popup chrome to
   match the site's dark theme instead, so gold text has real contrast. */
.leaflet-popup-content-wrapper {
  background: var(--charcoal);
  color: var(--text-on-black);
  border: 1px solid var(--hairline);
  border-radius: 3px;
}
.leaflet-popup-content { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; margin: 0.9em 1em; }
.leaflet-popup-content strong { font-family: var(--font-display); color: var(--ivory); }
.leaflet-popup-content a { color: var(--gold); font-weight: 600; }
.leaflet-popup-tip { background: var(--charcoal); }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-on-black-muted); }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--gold); }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-size: 0.82rem;
  color: var(--text-on-black-muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 0.5em; }
.map-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.map-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-lg);
}
@media (max-width: 960px) {
  .map-layout { grid-template-columns: 1fr; }
}
.map-sidebar {
  max-height: 640px;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  background: var(--charcoal);
}
.map-place {
  padding: var(--space-md);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: background var(--speed-fast) var(--ease);
}
.map-place:hover, .map-place.is-active { background: var(--charcoal-2); }
.map-place .tag { color: var(--gold); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.map-place h4 { margin: 0.3em 0; font-size: 1rem; }
.map-place p { margin: 0; color: var(--text-on-black-muted); font-size: 0.82rem; }

/* ---- Blog / Market Insights ----------------------------------------------*/
.blog-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.blog-card {
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: transform var(--speed-med) var(--ease), border-color var(--speed-med) var(--ease);
}
.blog-card:hover { transform: translateY(-6px); border-color: var(--gold-dim); }
.blog-card .thumb { aspect-ratio: 3/2; overflow: hidden; position: relative; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .category-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(10,10,10,0.8); border: 1px solid var(--gold); color: var(--gold);
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35em 0.8em;
}
.blog-card .info { padding: var(--space-md); }
/* The card's background is always dark charcoal, even inside a
   .section-light (light/cream) section like the "Keep Reading" band on
   post.html — without this, the heading inherits the light section's dark
   text color and goes nearly illegible against the card. Same fix as the
   spotlight banner above. */
.blog-card h3 { font-size: 1.15rem; margin-bottom: 0.4em; color: var(--ivory); }
.blog-card p { color: var(--text-on-black-muted); font-size: 0.9rem; }
.blog-card .date { font-size: 0.72rem; color: var(--gold-dim); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6em; display:block; }

.category-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-lg); }

/* Community spotlight banner (new-construction focus) */
.spotlight-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--charcoal);
  border: 1px solid var(--gold-dim);
  margin-bottom: var(--space-2xl);
}
@media (max-width: 800px) {
  .spotlight-banner { grid-template-columns: 1fr; }
}
/* Aspect ratio matches the source photos (3:2) exactly, so the crop always
   lands the way the photo was actually framed instead of being force-cropped
   to a mismatched 4:3 box. */
.spotlight-banner .img { aspect-ratio: 3/2; overflow: hidden; align-self: stretch; }
.spotlight-banner .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.spotlight-banner .copy { padding: var(--space-lg); display: flex; flex-direction: column; justify-content: center; }
/* This card's background is always dark charcoal, even when the section
   around it is .section-light (light/cream) — without these overrides the
   heading and lede inherit the light-section's dark text color and go
   nearly invisible against the card. */
.spotlight-banner .copy h2 { color: var(--ivory); }
.spotlight-banner .copy .lede { color: var(--text-on-black); }
/* The eyebrow sits right at the edge of the photo, where a sunset/gold sky
   tone can end up nearly identical to the gold text itself. A soft dark
   halo (not a solid outline) keeps the gold color and kicker style intact
   while giving it enough separation from the image to stay legible. */
.spotlight-banner .copy .eyebrow {
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.65);
}
/* The card's border/background is always dark, so its buttons need the
   on-black button styling even when the surrounding section is light —
   otherwise .section-light .btn-outline makes the label dark-on-dark. */
.spotlight-banner .copy .btn-outline {
  color: var(--text-on-black);
  border-color: var(--gold-dim);
}
.spotlight-banner .copy .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

/* Post template */
.post-hero {
  height: 58vh; min-height: 400px;
  background-size: cover; background-position: center;
  position: relative;
}
.post-hero::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,0.35), rgba(10,10,10,0.95)); }
.post-hero-inner {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  /* Guarantees clearance under the fixed header even when a long headline
     wraps to multiple lines and grows tall enough to otherwise reach the
     top of this section. */
  padding-top: calc(var(--space-2xl) + 2rem);
  padding-bottom: var(--space-lg);
}
@media (max-width: 720px) {
  .post-hero-inner { padding-top: calc(var(--space-xl) + 1rem); }
}
.post-body {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
}
.post-body h2 { margin-top: var(--space-lg); }
.post-body p { color: var(--text-on-black-muted); }

/* ---- Article layout with sticky "Contact The Lowry Group" card --------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
.post-main { min-width: 0; }
.post-aside { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; gap: var(--space-lg); }
  .post-aside { position: static; max-width: 520px; margin: 0 auto; width: 100%; }
}
.contact-card-lg {
  background: var(--charcoal); border: 1px solid var(--gold-dim);
  border-radius: 12px; padding: var(--space-lg); box-shadow: var(--shadow-card);
}
.contact-card-lg h3 { font-family: var(--font-display), Georgia, serif; color: var(--ivory); font-weight: 600; font-size: 1.4rem; margin: 0.1em 0 0.7em; line-height: 1.15; }
.cc-people { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.cc-people li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline); }
.cc-people li:last-child { border-bottom: 0; }
.cc-people span { color: var(--text-on-black-muted); font-size: 0.95rem; }
.cc-people a { color: var(--gold-light); font-weight: 600; white-space: nowrap; }
.cc-btn { display: block; width: 100%; text-align: center; margin-bottom: 0.6rem; }
.cc-btn:last-of-type { margin-bottom: 0; }
.cc-addr { color: var(--text-on-black-muted); font-size: 0.8rem; line-height: 1.6; margin: var(--space-md) 0 0; }

/* ---- Per-article FAQ (community "who is the best Realtor" answers) ------ */
.post-faq { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--hairline); }
.post-faq > h2 { font-size: 1.5rem; margin: 0 0 var(--space-md); }
.pfaq { margin-bottom: var(--space-md); }
.pfaq h3 { font-family: var(--font-display), Georgia, serif; font-weight: 600; font-size: 1.12rem; color: var(--gold-light); margin: 0 0 .3em; }
.pfaq p { color: var(--text-on-black-muted); margin: 0; line-height: 1.7; }
.post-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}
@media (max-width: 480px) {
  .post-facts { grid-template-columns: 1fr; }
}
.post-facts .fact-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.post-facts .fact-value { font-family: var(--font-display); font-size: 1.15rem; color: var(--ivory); }

/* ---- Contact page ----------------------------------------------------------*/
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-info-card {
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  padding: var(--space-lg);
}
.contact-info-card .row { display: flex; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--hairline); }
.contact-info-card .row:last-child { border-bottom: none; }
.contact-info-card .row .icon { color: var(--gold); width: 32px; font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.contact-info-card .row strong { display: block; color: var(--ivory); font-size: 0.95rem;}
.contact-info-card .row span { color: var(--text-on-black-muted); font-size: 0.88rem; }
.contact-map-frame { margin-top: var(--space-lg); aspect-ratio: 16/10; border: 1px solid var(--hairline); overflow: hidden; }
.contact-map-frame iframe { width: 100%; height: 100%; border: 0; }