/* ==========================================================================
   Homino (site13) — new-project search results and the project detail page.

   The search page reuses the listings shell wholesale (.ls-bar / .ls-filters /
   .ls-head / .ls-body / .ls-empty from listings.css), so this file only owns
   the two things listings.css has no concept of: the project card (.pj-card)
   and the project page (.pv-*).

   Tokens, radii and shadows are copied from estate-card.css / listings.css
   rather than re-invented, so a project card and a property card sitting in
   the same column read as one product. Namespaced pj-/pv- and, on the detail
   page, scoped under .pv-page so nothing here can reach the shared shell.
   ========================================================================== */

.pj-card,
.pv-page {
  --t: #0DA9A5;
  --t-dark: #0B8F8C;
  --t-soft: #E6F7F6;
  --navy: #08283D;
  --ink: #102A43;
  --muted: #62778C;
  --line: #E8EEF3;
  --bg-soft: #F7FAFC;
  --amber: #F59E0B;
  --green: #16A34A;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 20px;
  --pill: 999px;

  --sh-sm: 0 2px 10px rgba(16, 42, 67, .05);
  --sh: 0 10px 30px rgba(16, 42, 67, .08);
  --sh-lg: 0 20px 55px rgba(16, 42, 67, .14);

  --max: 1220px;
}

/* The global stylesheet pins Arial with !important, which flattens the type
   hierarchy — restore a stack that actually ships semibold/bold weights. */
.pj-card,
.pj-card b,
.pj-card strong,
.pj-card button,
.pv-page,
.pv-page h1,
.pv-page h2,
.pv-page h3,
.pv-page b,
.pv-page strong,
.pv-page button,
.pv-page table {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.pj-card *,
.pj-card *::before,
.pj-card *::after,
.pv-page *,
.pv-page *::before,
.pv-page *::after { box-sizing: border-box; }

/* ==========================================================================
   Project card — same geometry as .es-card so the two never look like two
   different products when they share a column.
   ========================================================================== */

.pj-card {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.pj-card:hover {
  border-color: rgba(13, 169, 165, .35);
  box-shadow: var(--sh);
  transform: translateY(-2px);
}

.pj-card__media {
  position: relative;
  display: block;
  min-height: 236px;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);
}

.pj-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.pj-card:hover .pj-card__media img { transform: scale(1.04); }

.pj-card__tags {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.pj-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: var(--pill);
  backdrop-filter: blur(6px);
}

.pj-tag--offplan { background: rgba(245, 158, 11, .95); }
.pj-tag--ready   { background: rgba(22, 163, 74, .92); }
.pj-tag--type    { background: rgba(8, 40, 61, .82); }

/* Avatar only, exactly like .es-card__agent on the property card. An earlier
   version put the advisor's name in a pill beside it; long names ran past the
   photo, and the name is on the project page anyway. */
.pj-card__agent {
  position: absolute;
  inset-inline-end: 12px;
  bottom: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: var(--sh-sm);
}

.pj-card__agent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pj-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}

.pj-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pj-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-decoration: none;
}

a.pj-card__title:hover { color: var(--t-dark); }

.pj-card__dev {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.pj-card__dev b {
  color: var(--ink);
  font-weight: 700;
}

.pj-card__place {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.pj-card__place i { flex: none; color: var(--t); }

.pj-card__place span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- the three facts a buyer compares projects on ---- */

.pj-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 2px;
}

.pj-stat {
  min-width: 0;
  padding: 9px 12px;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}

.pj-stat dt {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
}

.pj-stat dd {
  margin: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pj-stat dd small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.pj-card__units {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pj-unit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
}

.pj-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pj-card__ref {
  margin-inline-end: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.pj-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.pj-mini--view {
  color: #fff;
  background: var(--t);
  border-color: var(--t);
}

.pj-mini--view:hover { color: #fff; background: var(--t-dark); }

.pj-mini--call {
  color: var(--ink);
  background: #fff;
}

.pj-mini--call:hover { background: var(--bg-soft); }

.pj-mini--wa {
  color: #128C7E;
  background: #E9F8F3;
  border-color: rgba(18, 140, 126, .25);
}

.pj-mini--wa:hover { background: #DBF3EB; }

/* ---- admin shortcuts, only rendered for signed-in managers ---- */

.pj-card__admin {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.pj-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--navy);
  font-size: 14px;
  text-decoration: none;
  background: rgba(255, 255, 255, .92);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--sh-sm);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.pj-iconbtn:hover {
  color: var(--t-dark);
  background: #fff;
  transform: scale(1.06);
}

@media (max-width: 991px) {
  .pj-card { grid-template-columns: 1fr; }

  .pj-card__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  }

  .pj-card__body { padding: 15px 16px; }
  .pj-card__title { font-size: 17px; }
  .pj-card__ref { flex: 1 1 100%; order: 3; }
  .pj-mini { flex: 1 1 0; }
}

@media (max-width: 575px) {
  .pj-stats { grid-template-columns: 1fr 1fr; }
  /* "Delivery" is the least useful of the three on a ready project and the
     first to wrap awkwardly, so it takes the full second row instead. */
  .pj-stats .pj-stat:last-child:nth-child(3) { grid-column: 1 / -1; }
  .pj-card__foot .pj-mini--call span,
  .pj-card__foot .pj-mini--wa span { display: none; }
}

/* ==========================================================================
   Project detail page
   ========================================================================== */

.pv-page { color: var(--ink); background: #fff; }

.pv-shell {
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}

.pv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.pv-crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.pv-crumbs a:hover { color: var(--t-dark); }
.pv-crumbs i { font-size: 10px; opacity: .6; }
.pv-crumbs span { color: var(--ink); font-weight: 600; }

/* ---- hero ---- */

.pv-hero { padding: 18px 0 8px; }

.pv-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pv-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: var(--pill);
}

.pv-tag--offplan { color: #7C4A03; background: #FEF3C7; }
.pv-tag--ready   { color: #14532D; background: #DCFCE7; }
.pv-tag--type    { color: var(--navy); background: var(--bg-soft); }

.pv-title {
  margin: 0;
  color: var(--navy);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.015em;
}

.pv-by {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.pv-by b { color: var(--ink); font-weight: 700; }

.pv-place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.pv-place i { color: var(--t); }

.pv-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- gallery ---- */

.pv-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 1fr;
  gap: 10px;
  height: 380px;
  margin-top: 18px;
}

.pv-gallery a {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: var(--r);
}

.pv-gallery a:first-child { grid-row: span 2; }
.pv-gallery--one { grid-template-columns: 1fr; }
.pv-gallery--one a:first-child { grid-row: auto; }
.pv-gallery--two { grid-auto-rows: auto; }
.pv-gallery--two a:first-child { grid-row: auto; }

.pv-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.pv-gallery a:hover img { transform: scale(1.03); }

.pv-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  background: rgba(8, 40, 61, .55);
}

/* ---- key facts strip ---- */

.pv-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.pv-fact {
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.pv-fact dt {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.pv-fact dd {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.pv-fact dd small { color: var(--muted); font-size: 13px; font-weight: 700; }
.pv-fact--hl { color: #fff; background: var(--navy); border-color: var(--navy); }
.pv-fact--hl dt { color: rgba(255, 255, 255, .65); }
.pv-fact--hl dd { color: #fff; }
.pv-fact--hl dd small { color: rgba(255, 255, 255, .7); }

/* ---- two-column body ---- */

.pv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 28px;
  padding: 28px 0 64px;
}

.pv-main { min-width: 0; }

.pv-section {
  padding: 22px 24px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

.pv-section > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.pv-section > h2 i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--t-dark);
  font-size: 15px;
  background: var(--t-soft);
  border-radius: var(--r-sm);
}

/* Shown when a project has no description, amenities, units or payment plan —
   otherwise the main column is blank next to a full-height rail. */
.pv-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
  background: var(--bg-soft);
  border-style: dashed;
  box-shadow: none;
}

.pv-blank i { font-size: 32px; color: var(--t); }
.pv-blank strong { color: var(--navy); font-size: 17px; }
.pv-blank span { color: var(--muted); font-size: 14px; }
.pv-blank .pv-btn { margin-top: 4px; }

.pv-prose {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.85;
}

.pv-prose p { margin: 0 0 12px; }
.pv-prose p:last-child { margin-bottom: 0; }

/* Long descriptions collapse behind a button rather than pushing the unit
   table and the payment plan below the fold. */
.pv-prose[data-clamped="1"] {
  position: relative;
  max-height: 210px;
  overflow: hidden;
}

.pv-prose[data-clamped="1"]::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%);
}

.pv-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  color: var(--t-dark);
  font-size: 14px;
  font-weight: 700;
  background: none;
  border: 0;
  cursor: pointer;
}

.pv-more:hover { text-decoration: underline; }

/* ---- amenities ---- */

.pv-amenities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-amenities li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}

.pv-amenities img { flex: none; width: 22px; height: 22px; }

/* ---- unit types ---- */

.pv-tablewrap { overflow-x: auto; }

.pv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.pv-table th {
  padding: 11px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
  background: var(--bg-soft);
}

.pv-table th:first-child { border-start-start-radius: var(--r-sm); }
.pv-table th:last-child { border-start-end-radius: var(--r-sm); }

.pv-table td {
  padding: 13px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.pv-table tbody tr:last-child td { border-bottom: 0; }
.pv-table tbody tr:hover td { background: #FBFDFE; }
.pv-table .pv-num { color: var(--navy); font-weight: 800; }
.pv-table .pv-unitname { white-space: normal; font-weight: 700; }

.pv-planbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--t-dark);
  background: var(--t-soft);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.pv-planbtn:hover { color: #fff; background: var(--t); }

/* ---- payment plan timeline ---- */

.pv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}

.pv-steps li::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 10px;
  width: 2px;
  background: var(--line);
}

.pv-steps li:first-child::before { top: 50%; }
.pv-steps li:last-child::before { bottom: 50%; }

.pv-steps .pv-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 3px solid var(--t);
  border-radius: 50%;
}

.pv-steps .pv-ms { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.pv-steps .pv-ms small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; }

.pv-steps .pv-pc {
  flex: none;
  padding: 5px 14px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  background: var(--bg-soft);
  border-radius: var(--pill);
}

.pv-steps__sum {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px dashed var(--line);
}

.pv-steps__sum b { color: var(--navy); }

/* ---- advisor card / sticky rail ---- */

.pv-rail { position: sticky; top: 90px; display: grid; gap: 16px; }

.pv-advisor {
  padding: 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
}

.pv-advisor img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--t-soft);
}

.pv-advisor__name {
  display: block;
  margin-top: 10px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.pv-advisor__role { color: var(--muted); font-size: 13px; }

.pv-advisor__acts {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.pv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.pv-btn--primary { color: #fff; background: var(--t); border-color: var(--t); }
.pv-btn--primary:hover { color: #fff; background: var(--t-dark); }
.pv-btn--ghost { color: var(--ink); background: #fff; border-color: var(--line); }
.pv-btn--ghost:hover { background: var(--bg-soft); }
.pv-btn--wa { color: #128C7E; background: #E9F8F3; border-color: rgba(18, 140, 126, .25); }
.pv-btn--wa:hover { background: #DBF3EB; }

.pv-note {
  padding: 18px;
  color: #fff;
  background: linear-gradient(140deg, #0B3A55, #08283D);
  border-radius: var(--r);
}

/* theme13.min.css colours bare headings navy, which is invisible on this card —
   inheriting from .pv-note is not enough, the heading needs the colour itself. */
.pv-note h3 { margin: 0 0 6px; color: #fff; font-size: 15px; font-weight: 800; }
.pv-note p { margin: 0 0 14px; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.7; }
.pv-note .pv-btn { width: 100%; }

.pv-rail__banner {
  display: block;
  overflow: hidden;
  border-radius: var(--r);
}

.pv-rail__banner img { display: block; width: 100%; }

.pv-alert {
  padding: 14px 16px;
  margin-bottom: 18px;
  color: #7C4A03;
  font-size: 14px;
  background: #FEF3C7;
  border-radius: var(--r-sm);
}

/* ---- floor-plan lightbox ---- */

.pv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 40, 61, .88);
}

.pv-lightbox.is-open { display: flex; }

.pv-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r);
}

.pv-lightbox__close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--navy);
  font-size: 16px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ---- responsive ---- */

@media (max-width: 1100px) {
  .pv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .pv-body { grid-template-columns: 1fr; gap: 20px; padding-bottom: 48px; }
  .pv-rail { position: static; }
  .pv-gallery { height: 300px; }
  .pv-title { font-size: 25px; }
  .pv-amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .pv-title { font-size: 21px; }
  .pv-section { padding: 18px 16px; }
  .pv-facts { gap: 10px; }
  .pv-fact { padding: 13px 14px; }
  .pv-fact dd { font-size: 17px; }
  .pv-amenities { grid-template-columns: 1fr; }
  .pv-gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 110px;
    height: auto;
  }
  .pv-gallery a:first-child { grid-column: 1 / -1; grid-row: auto; height: 190px; }
  .pv-hero__acts { width: 100%; }
  .pv-hero__acts .pv-btn { flex: 1 1 0; }
}