/* Listing cards, building cards, and the no-fee explainer band. */

/* --- Unit cards ---------------------------------------------------------- */

.unit-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

.unit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  display: flex; flex-direction: column;
}
.unit-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.unit-card-media {
  position: relative; display: block;
  aspect-ratio: 3 / 2; background: var(--sand); overflow: hidden;
}
.unit-card-media img { width: 100%; height: 100%; object-fit: cover; }
.unit-card-body { padding: .95rem 1.05rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.unit-card-price { margin: 0 0 .2rem; }
.unit-card-price strong { font-size: 1.42rem; font-weight: 800; letter-spacing: -.02em; }
.per-month { color: var(--slate); font-weight: 600; font-size: .9rem; }
.unit-card-title { margin: 0 0 .5rem; font-size: 1.02rem; }
.unit-card-title a { color: var(--navy); }
.unit-card-number { color: var(--slate); font-weight: 500; }
.unit-card-specs {
  display: flex; flex-wrap: wrap; gap: .4rem .85rem;
  list-style: none; margin: 0 0 .6rem; padding: 0;
  font-size: .88rem; color: var(--slate);
}
.unit-card-where { margin: auto 0 0; font-size: .88rem; color: var(--slate); font-weight: 600; }
.unit-card-when { margin: .35rem 0 0; font-size: .85rem; color: var(--green); font-weight: 600; }

/* Stands in for a missing photo without looking like a broken image. */
.photo-placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--teal-tint) 0%, var(--sand) 55%, var(--coral-tint) 100%);
  position: relative;
}
.photo-placeholder::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(20,54,66,.05) 22px 23px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(20,54,66,.05) 22px 23px);
}

/* --- Building cards ------------------------------------------------------ */

.building-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.building-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.building-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.building-media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--sand); }
.building-media img { width: 100%; height: 100%; object-fit: cover; }
.building-body { padding: 1.15rem 1.25rem 1.35rem; }
.building-body h3 { font-size: 1.28rem; }
.building-body h3 a { color: var(--navy); }
.building-tagline { color: var(--slate); margin: 0 0 .3rem; }
.building-price { margin: .5rem 0 0; font-weight: 750; font-size: 1.06rem; }

/* --- Value cards --------------------------------------------------------- */

.value-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.value-card {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.value-card h3 { margin-bottom: .3rem; }
.value-card p { margin: 0; color: var(--slate); font-size: .94rem; }

/* --- No-fee band --------------------------------------------------------- */

.section-nofee { background: var(--navy); color: #fff; }
.section-nofee h2, .section-nofee h3 { color: #fff; }
.nofee-grid { display: grid; gap: 2rem; }
.nofee-copy p { color: rgba(255,255,255,.8); max-width: 34rem; }

.check-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.check-list li { position: relative; padding-left: 1.9rem; font-weight: 600; color: rgba(255,255,255,.95); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .28rem;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps li {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
}
.steps p { color: rgba(255,255,255,.78); margin: 0; font-size: .94rem; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: .55rem;
  border-radius: 50%; background: var(--coral); color: #fff;
  font-weight: 800; font-size: .95rem;
}