/* ============================================================
   EMPREENDIMENTOS — Listings page styles
   ============================================================ */

/* ── Page Header ── */
.page-header {
  position: relative;
  height: 480px;
}
.page-header img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.page-header-ov {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,23,38,1) 0%, rgba(10,23,38,.65) 60%, rgba(10,23,38,.3) 100%);
}
.page-header-content {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 80px 64px;
}
.page-header-title {
  font-size: 76px; font-weight: 600; color: var(--cream); line-height: 1;
}
.page-header-sub {
  margin-top: 18px; font-size: 19px; font-weight: 300;
  color: var(--blue-muted); max-width: 520px;
}

/* ── Listing ── */
.listing { background: var(--navy); }

/* ── Card ── */
.emp-card {
  display: grid;
  grid-template-columns: 58fr 42fr;
  height: 600px;
  overflow: hidden;
  border-bottom: 1px solid rgba(196,163,94,.14);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.emp-card:last-child { border-bottom: none; }
.emp-card.reversed { grid-template-columns: 42fr 58fr; }

/* ── Image ── */
.emp-img-wrap { overflow: hidden; position: relative; }
.emp-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}
.emp-card:hover .emp-img { transform: scale(1.06); }
.emp-img-shadow {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(10,23,38,.5) 100%);
  pointer-events: none;
}
.emp-card.reversed .emp-img-shadow {
  background: linear-gradient(270deg, transparent 55%, rgba(10,23,38,.5) 100%);
}

/* ── Info Panel ── */
.emp-info-panel {
  background: var(--navy-mid);
  padding: 72px 76px;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid rgba(196,163,94,.18);
}
.emp-card.reversed .emp-info-panel {
  border-left: none;
  border-right: 1px solid rgba(196,163,94,.18);
}

/* ── Panel content ── */
.emp-badge-row { margin-bottom: 22px; }
.emp-loc {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--blue-muted); margin-bottom: 14px;
}
.emp-name {
  font-size: 52px; font-weight: 600; color: var(--cream); line-height: 1;
}
.emp-desc {
  font-size: 16px; font-weight: 300; color: var(--blue-soft);
  line-height: 1.75; margin-top: 16px; max-width: 360px;
}
.emp-rule { width: 48px; height: 1px; background: var(--gold); margin: 26px 0; }
.emp-specs { display: flex; flex-direction: column; gap: 13px; margin-bottom: 38px; }
.emp-spec-row { display: flex; align-items: baseline; gap: 16px; }
.spec-label {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); min-width: 76px; flex-shrink: 0;
}
.spec-val { font-size: 15px; font-weight: 300; color: var(--blue-soft); line-height: 1.45; }
.emp-cta-link {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--gold); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; border: 1px solid rgba(196,163,94,.4);
  padding: 15px 30px; width: fit-content;
  transition: background .25s, color .25s, border-color .25s;
}
.emp-cta-link:hover { background: var(--gold); color: var(--navy) !important; border-color: var(--gold); }
.emp-cta-link span { font-size: 18px; }

@media (max-width: 900px) {
  .page-header { height: 280px; }
  .page-header-title { font-size: 40px; }
  .page-header-content { padding: 0 28px 40px; }
  .emp-card { display: flex; flex-direction: column; height: auto; }
  .emp-card.reversed { display: flex; flex-direction: column; }
  .emp-img-wrap { height: 280px; flex-shrink: 0; }
  .emp-info-panel { padding: 36px 28px 44px; border-left: none; border-top: 1px solid rgba(196,163,94,.18); }
  .emp-card.reversed .emp-info-panel { border-right: none; border-top: 1px solid rgba(196,163,94,.18); }
  .emp-name { font-size: 34px; }
  .emp-desc { font-size: 15px; }
}
@media (max-width: 600px) {
  .page-header { height: 240px; }
  .page-header-title { font-size: 30px; }
  .emp-img-wrap { height: 240px; }
  .emp-name { font-size: 28px; }
}