/* ============================================================
   PROJECTS LISTING PAGE STYLES
   Feature 19: Card grid + Filter bar
   Feature 21: Compare toggle + Compare bar + Compare modal
   ============================================================ */

/* ---- Page hero ---- */
.page-hero {
  padding: calc(var(--nav-h) + 4rem) 0 2.5rem;
  background: var(--marble);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: .4rem;
}
.page-hero-sub {
  color: var(--muted);
  font-size: .95rem;
  margin-top: .6rem;
}
.filter-reset {
  color: var(--verdigris);
  text-decoration: underline;
}

/* ---- Filter bar ---- */
.filter-bar-section {
  background: var(--marble);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--nav-h);
  z-index: 200;
  box-shadow: 0 2px 12px rgba(18,24,31,.06);
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  padding: 1.2rem 0;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 160px;
}
.filter-group label {
  font-size: .75rem;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verdigris);
}
.filter-group select,
.filter-group input[type="number"] {
  padding: .65rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--parchment);
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6B63' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  padding-right: 2rem;
  cursor: pointer;
  transition: border-color .2s;
}
.filter-group select:focus,
.filter-group input[type="number"]:focus {
  outline: none;
  border-color: var(--verdigris);
}
.filter-price-range .price-inputs {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.filter-price-range input[type="number"] {
  width: 90px;
  flex: 1;
  padding-right: .8rem;
  background-image: none;
}
.price-sep {
  color: var(--muted);
  flex-shrink: 0;
}
.filter-submit {
  flex: 0 0 auto;
  align-self: flex-end;
  margin-bottom: 0;
}

/* ---- Projects section ---- */
.projects-section {
  padding-top: 3.5rem;
}
.no-results {
  text-align: center;
  padding: 5rem 0;
  color: var(--muted);
  font-size: 1rem;
}
.no-results a {
  color: var(--verdigris);
  text-decoration: underline;
}

/* ---- Card overrides for project grid ---- */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.project-card-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.project-card-img {
  height: 210px;
  background-size: cover;
  background-position: center;
  background-color: #d1c9bc;
  position: relative;
  flex-shrink: 0;
}
.card-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.badge-green {
  background: rgba(62,122,92,.15);
  color: var(--success);
  border: 1px solid rgba(62,122,92,.3);
}
.badge-oxide {
  background: rgba(178,59,40,.12);
  color: var(--oxide);
  border: 1px solid rgba(178,59,40,.3);
}
.project-card-body {
  padding: 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-amenities-preview {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .7rem;
}
.amenity-chip {
  background: rgba(30,58,95,.08);
  color: var(--verdigris);
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(30,58,95,.15);
}
.amenity-more {
  background: rgba(18,24,31,.06);
  color: var(--muted);
  border-color: var(--border);
}
.project-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1.1rem;
}
.units-left {
  font-size: .78rem;
  color: var(--muted);
}
.units-scarce {
  color: var(--oxide);
  font-weight: 600;
}

/* ---- Compare checkbox ---- */
.compare-check {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 5;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.compare-check input { display: none; }
.compare-icon {
  background: rgba(255,255,255,.9);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: 6px;
  border: 1.5px solid rgba(18,24,31,.15);
  transition: background .2s, color .2s;
  user-select: none;
  white-space: nowrap;
}
.compare-icon--on { display: none; }
.compare-check input:checked ~ .compare-icon { display: none; }
.compare-check input:checked ~ .compare-icon--on {
  display: flex;
  background: var(--verdigris);
  color: #fff;
  border-color: var(--verdigris);
}

/* ---- Compare bar (floating bottom) ---- */
.compare-bar {
  position: fixed;
  bottom: -120px;
  left: 0;
  right: 0;
  z-index: 600;
  background: var(--ink);
  color: var(--marble);
  padding: 1rem 1.75rem;
  box-shadow: 0 -4px 24px rgba(18,24,31,.22);
  transition: bottom .35s ease;
}
.compare-bar.show { bottom: 0; }
.compare-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.compare-selected {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}
.compare-pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: .35rem .75rem;
  font-size: .82rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-pill-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: .9rem;
  flex-shrink: 0;
  line-height: 1;
}
.compare-bar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.compare-count {
  font-size: .82rem;
  color: rgba(250,249,246,.65);
}
.compare-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.compare-clear {
  border-color: rgba(255,255,255,.25);
  color: var(--marble);
  padding: .75rem 1.3rem;
  font-size: .85rem;
}
.compare-clear:hover {
  background: rgba(255,255,255,.12);
  color: var(--marble);
}

/* ---- Compare modal ---- */
.compare-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18,24,31,.65);
  backdrop-filter: blur(6px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.compare-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.compare-modal {
  background: var(--marble);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 900px;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.compare-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--border);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink);
  z-index: 2;
}
.compare-modal-title {
  padding: 1.5rem 1.8rem;
  font-size: 1.3rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.compare-table-wrap {
  overflow: auto;
  flex: 1;
  padding: 1.5rem;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.compare-table th {
  background: var(--ink);
  color: var(--marble);
  padding: .85rem 1rem;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 600;
  white-space: nowrap;
}
.compare-table th:first-child { background: var(--parchment); color: var(--muted); font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.compare-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td:first-child {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  background: var(--parchment);
  white-space: nowrap;
}
.compare-table tr:hover td { background: rgba(30,58,95,.04); }
.compare-table tr:hover td:first-child { background: var(--parchment); }
.tick { color: var(--success); font-weight: 700; }
.cross { color: var(--muted); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .filter-bar { gap: .8rem; }
  .filter-group { flex: 1 1 140px; }
  .compare-bar-inner { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .compare-bar-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 620px) {
  .filter-group { flex: 1 1 100%; }
  .compare-modal { border-radius: var(--radius); }
}

/* ---- Tag filter chips (added) ---- */
.tag-filter-row {
  display: -webkit-flex;
  display: flex;
  gap: .45rem;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-bottom: .9rem;
  -webkit-align-items: center;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  margin-top: .1rem;
}
.tag-chip {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  text-decoration: none;
  -webkit-transition: background .18s, color .18s, border-color .18s;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
  cursor: pointer;
}
.tag-chip:hover { background: var(--parchment); color: var(--verdigris); border-color: var(--verdigris); }
.tag-chip--active { background: var(--ink); color: var(--brass); border-color: var(--ink); }
.tag-chip--active:hover { background: var(--ink); opacity: .92; }
@media (max-width: 600px) {
  .tag-filter-row { gap: .3rem; }
  .tag-chip { padding: .25rem .65rem; font-size: .72rem; }
}