/* ==========================================================================
   Site-extra: CMS-driven sections (diaspora page, banner, FAQ accordion)
   and property browse page (filters, empty state, pagination)
   ========================================================================== */

/* ---------- diaspora banner ---------- */
.diaspora-banner{
  background:linear-gradient(120deg,var(--ink),#1c2030);
  color:#fff;
  padding:1.4rem 0;
  text-align:center;
}
.diaspora-banner h3{
  margin:0 0 .3rem;
  font-family:var(--font-display,inherit);
  font-size:1.15rem;
  color:var(--gold-light,#e3c878);
}
.diaspora-banner p{
  margin:0;
  max-width:60ch;
  margin-inline:auto;
  color:rgba(255,255,255,.78);
  font-size:.92rem;
}

/* ---------- diaspora services ---------- */
.dia-services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem;
  margin-top:1.6rem;
}
.dia-service{
  background:var(--cream,#f7f4ee);
  border-radius:14px;
  padding:1.4rem;
}
.dia-service i{
  font-size:1.4rem;
  color:var(--gold-dark,#9a7c2e);
  margin-bottom:.6rem;
  display:block;
}
.dia-service h4{margin:.2rem 0 .5rem}
.dia-service p{
  font-size:.92rem;
  color:var(--text-soft,#4a4f5c);
  margin:0;
}

/* ---------- diaspora checklist ---------- */
.dia-list{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:grid;
  gap:.7rem;
}
.dia-list li{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  font-size:.95rem;
}
.dia-list li i{
  color:var(--gold-dark,#9a7c2e);
  margin-top:.2rem;
}

/* ---------- FAQ accordion ---------- */
.faq-item{
  border-bottom:1px solid var(--cream-2,#efeae0);
  padding:1rem 0;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-size:1.2rem;
  color:var(--gold-dark,#9a7c2e);
}
.faq-item[open] summary::after{content:"–"}
.faq-item p{
  margin:.7rem 0 0;
  color:var(--text-soft,#4a4f5c);
  font-size:.94rem;
}

/* ---------- misc ---------- */
.price-hidden-note{
  font-size:.8rem;
  color:var(--text-faint,#8a8f9e);
}

/* ==========================================================================
   Property browse page: filters, results count, empty state, pagination
   ========================================================================== */

.prop-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1.1rem;
  align-items:end;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem 1.7rem;
  margin-bottom:2rem;
  box-shadow:var(--shadow-sm);
}
.prop-filters .field{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.prop-filters label{
  font-size:.72rem;
  font-weight:600;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.prop-filters input,
.prop-filters select{
  border:1px solid var(--line);
  border-radius:10px;
  padding:.65rem .85rem;
  font-size:.92rem;
  background:var(--paper);
  color:var(--text);
  font-family:inherit;
  transition:.2s;
}
.prop-filters input::placeholder{color:var(--text-faint)}
.prop-filters input:focus,
.prop-filters select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.15);
}
.prop-filters .field-actions{
  flex-direction:row;
  gap:.7rem;
  align-items:center;
}
.prop-filters .btn-ghost{
  border-color:var(--line);
  color:var(--text-soft);
}
.prop-filters .btn-ghost:hover{
  background:var(--cream-2);
  color:var(--text);
  border-color:var(--line);
}

.prop-results-count{
  color:var(--text-soft,#4a4f5c);
  font-size:.9rem;
  margin:0 0 1rem;
}

.prop-empty{
  text-align:center;
  padding:3rem 1rem;
  color:var(--text-soft,#4a4f5c);
}

.prop-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  margin-top:2rem;
}
.prop-pagination-status{
  font-size:.88rem;
  color:var(--text-soft,#4a4f5c);
}

.btn.disabled{opacity:.45;pointer-events:none}
.nav-links a.active{color:var(--gold-dark,#9a7c2e)}

/* ---------- responsive ---------- */
@media(max-width:680px){
  .prop-filters{
    grid-template-columns:1fr;
    padding:1.3rem;
  }
  .prop-filters .field-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .prop-filters .field-actions .btn{width:100%}
}