/* ============================================
   CCS Group — Property Page
   ============================================ */

/* ---------- NAVBAR ACTIVE ---------- */
.navbar__link--active { color: var(--cream); }

/* ---------- HERO ---------- */
.prop-hero {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: #162240;
}
.prop-hero__bg { position: absolute; inset: 0; }
.prop-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.prop-hero__overlay {
  position: absolute; inset: 0;
  background: rgba(10, 22, 40, 0.5);
}
.prop-hero__content { position: absolute; inset: 0; z-index: 2; }

.prop-hero__tag {
  position: absolute; left: 24px; top: 160px;
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: var(--gold);
}
.prop-hero__title {
  position: absolute; left: 24px; top: 184px;
  font-family: var(--serif); font-size: 48px; font-weight: 700;
  line-height: 1.15; max-width: 342px;
}
.prop-hero__accent {
  position: absolute; left: 24px; top: 310px;
  display: block; width: 48px; height: 3px;
  background: var(--gold);
}
.prop-hero__sub {
  position: absolute; left: 24px; top: 326px;
  font-size: 14px; line-height: 1.6;
  color: rgba(245, 240, 232, 0.63); max-width: 300px;
}
.prop-hero__sub--d { display: none; }
.prop-hero__scroll {
  position: absolute; left: 24px; top: 442px;
  font-size: 10px; font-weight: 500; letter-spacing: 2px;
  color: rgba(245, 240, 232, 0.25);
}

/* ---------- STATS ---------- */
.prop-stats {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 100px;
  background: var(--navy-light);
}
.prop-stats__item {
  display: flex; flex-direction: column; gap: 2px;
}
.prop-stats__val {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--gold);
}
.prop-stats__label {
  font-size: 11px; color: var(--muted);
}
.prop-stats__item--desk { display: none; }

/* ---------- FLAGSHIP ---------- */
.flagship {
  padding: 48px 24px;
  background: var(--navy);
  display: flex; flex-direction: column; gap: 20px;
}
.flagship__img-wrap {
  border-radius: 4px; overflow: hidden;
  height: 240px;
}
.flagship__img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.flagship__tag {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: var(--gold);
}
.flagship__name {
  font-family: var(--serif); font-size: 36px; font-weight: 700;
}
.flagship__loc {
  font-size: 13px; color: rgba(201, 169, 110, 0.5);
}
.flagship__divider {
  display: block; width: 48px; height: 2px;
  background: var(--gold);
}
.flagship__desc {
  font-size: 14px; line-height: 1.6;
  color: rgba(245, 240, 232, 0.44); max-width: 342px;
}
.flagship__details {
  display: flex; gap: 0; margin-top: 4px;
}
.flagship__detail {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 120px;
}
.flagship__detail-label {
  font-size: 10px; letter-spacing: 1px; color: var(--muted);
}
.flagship__detail-val {
  font-size: 14px; font-weight: 600;
}
.flagship__detail-val--gold { color: var(--gold); }
.flagship__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 180px; height: 44px;
  font-size: 13px; font-weight: 600; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 2px;
  transition: opacity .2s;
}
.flagship__btn:hover { opacity: .8; }

/* ---------- PROJECTS ---------- */
.projects {
  padding: 48px 24px;
  background: var(--navy-light);
}
.proj__header {
  display: flex; flex-direction: column; gap: 16px;
  margin-bottom: 24px;
}
.proj__tag {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: var(--gold);
}
.proj__title {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  line-height: 1.2;
}
.proj__title--d { display: none; }
.proj__divider {
  display: block; width: 48px; height: 2px;
  background: var(--gold);
}
.proj__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.proj-card {
  border-radius: 4px; background: var(--navy);
  overflow: hidden; height: 260px;
}
.proj-card__img-wrap {
  position: relative; height: 160px;
}
.proj-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.proj-card__badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 8px; font-weight: 700; letter-spacing: 1px;
  padding: 3px 8px;
}
.proj-card__badge--gold { background: var(--gold); color: var(--navy); }
.proj-card__badge--green { background: #4A9B6F; color: #fff; }
.proj-card__badge--blue { background: #6B9EC9; color: #fff; }
.proj-card__info { padding: 12px; }
.proj-card__name {
  display: block;
  font-size: 13px; font-weight: 700;
}
.proj-card__loc {
  display: block; margin-top: 6px;
  font-size: 11px; color: var(--gold);
}
.proj-card__loc--ext { display: none; }
.proj-card__price {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--muted);
}
.proj-card__price--d { display: none; }

/* ---------- TOWNSHIP ---------- */
.township {
  padding: 48px 24px;
  background: var(--navy);
  display: flex; flex-direction: column; gap: 20px;
}
.township__left {
  display: flex; flex-direction: column; gap: 20px;
}
.township__tag {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: var(--gold);
}
.township__title {
  font-family: var(--serif); font-size: 34px; font-weight: 700;
  line-height: 1.2;
}
.township__title--d { display: none; }
.township__divider {
  display: block; width: 48px; height: 2px;
  background: var(--gold);
}
.township__img {
  border-radius: 4px; overflow: hidden;
  height: 220px;
  order: -1; /* Image before text on mobile */
}
.township__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.township__body {
  font-size: 14px; line-height: 1.7;
  color: rgba(245, 240, 232, 0.44); max-width: 342px;
}
.township__feats {
  display: flex; flex-direction: column; gap: 16px;
}
.township__feat {
  display: flex; align-items: flex-start; gap: 0;
  position: relative; height: 28px;
}
.township__feat-num {
  position: absolute; left: 0; top: 2px;
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: rgba(201, 169, 110, 0.4);
}
.township__feat-text {
  position: absolute; left: 36px; top: 6px;
  font-size: 13px;
}
.township__feat-ext { display: inline; }

/* ---------- CTA OVERRIDES ---------- */
.prop-cta .cta-strip__title { font-size: 30px; }
.prop-cta__t--d { display: none; }
.prop-cta__btn--d { display: none; }

/* ==========================================
   DESKTOP (1024px+)
   ========================================== */
@media (min-width: 1024px) {

  /* --- Hero desktop: full bleed with overlay --- */
  .prop-hero { height: 680px; }
  .prop-hero__overlay {
    background: rgba(10, 22, 40, 0.44);
  }
  .prop-hero__tag { left: 80px; top: 220px; }
  .prop-hero__title {
    left: 80px; top: 250px;
    font-size: 88px; font-style: italic;
    max-width: 700px; line-height: 1.1;
  }
  .prop-hero__accent { left: 80px; top: 460px; width: 64px; }
  .prop-hero__sub {
    left: 80px; top: 480px;
    font-size: 17px; max-width: 500px;
  }
  .prop-hero__sub--m { display: none; }
  .prop-hero__sub--d { display: inline; }
  .prop-hero__scroll { left: 80px; top: 640px; color: rgba(245, 240, 232, 0.19); }

  /* --- Stats desktop: 4 items --- */
  .prop-stats {
    padding: 0 80px; height: 108px;
  }
  .prop-stats__val { font-size: 36px; }
  .prop-stats__label { font-size: 12px; }
  .prop-stats__item--desk { display: flex; }

  /* --- Flagship desktop: split layout --- */
  .flagship {
    position: relative;
    height: 600px;
    padding: 0; gap: 0;
    flex-direction: row;
  }
  .flagship__img-wrap {
    position: absolute; left: 80px; top: 80px;
    width: 580px; height: 440px;
    border-radius: 4px;
  }
  .flagship__info {
    position: absolute; left: 740px; top: 80px;
    width: 560px;
    display: flex; flex-direction: column; gap: 20px;
  }
  .flagship__name { font-size: 48px; }
  .flagship__loc { font-size: 14px; }
  .flagship__desc {
    font-size: 15px; line-height: 1.7; max-width: 520px;
  }
  .flagship__detail { min-width: 160px; }
  .flagship__btn {
    width: 180px; height: 48px;
  }

  /* --- Projects desktop: 4-column grid --- */
  .projects { padding: 80px; }
  .proj__header { gap: 0; margin-bottom: 48px; }
  .proj__tag { margin-bottom: 8px; }
  .proj__title { font-size: 40px; }
  .proj__title--m { display: none; }
  .proj__title--d { display: inline; }
  .proj__divider { display: none; }
  .proj__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .proj-card { height: 360px; }
  .proj-card__img-wrap { height: 220px; }
  .proj-card__badge {
    font-size: 9px; padding: 4px 10px;
    top: 12px; left: 12px;
  }
  .proj-card__info { padding: 16px; }
  .proj-card__name { font-size: 16px; }
  .proj-card__loc { font-size: 12px; margin-top: 8px; }
  .proj-card__loc--ext { display: inline; }
  .proj-card__loc--short { display: none; }
  .proj-card__price { font-size: 12px; margin-top: 4px; }
  .proj-card__price--m { display: none; }
  .proj-card__price--d { display: inline; }

  /* --- Township desktop: split layout --- */
  .township {
    position: relative;
    height: 640px;
    padding: 0; gap: 0;
    flex-direction: row;
  }
  .township__left {
    position: absolute; left: 80px; top: 80px;
    width: 480px; gap: 24px;
  }
  .township__title { font-size: 48px; line-height: 1.15; }
  .township__title--m { display: none; }
  .township__title--d { display: inline; }
  .township__body {
    font-size: 15px; line-height: 1.7; max-width: 440px;
  }
  .township__img {
    position: absolute; right: 80px; top: 80px;
    width: 680px; height: 400px;
    order: unset; border-radius: 4px;
  }
  .township__feat { height: 24px; }
  .township__feat-text { top: 4px; }

  /* --- CTA desktop --- */
  .prop-cta { padding: 72px var(--pad-desk); }
  .prop-cta .cta-strip__title { font-size: 48px; max-width: 700px; }
  .prop-cta .cta-strip__sub { font-size: 16px; }
  .prop-cta__t--m { display: none; }
  .prop-cta__t--d { display: inline; }
  .prop-cta__btn--m { display: none; }
  .prop-cta__btn--d { display: inline; }
  .prop-cta .btn--dark { padding: 16px 40px; font-size: 14px; }
}

/* ==========================================
   LARGE DESKTOP (1600px+)
   ========================================== */
@media (min-width: 1600px) {
  .prop-hero { height: 800px; }
  .prop-hero__title { font-size: 96px; }
  .prop-hero__accent { top: 500px; }
  .prop-hero__sub { top: 520px; }
  .prop-hero__scroll { top: 720px; }
}