/* ================================================================
   residences.css — Marketing redesign for residences.html
   New color palette layered on top of main.css.
   All rules are scoped to the .res-* namespace to avoid collisions.
   ================================================================ */

/* ----------------------------------------------------------------
   COLOR PALETTE (new brand tokens + hero-specific custom props)
   ---------------------------------------------------------------- */
:root {
  --res-orange:        rgb(203, 82, 4);
  --res-orange-bright: rgb(254, 102, 0);
  --res-olive:         rgb(190, 204, 102);   /* #BECC66 */
  --res-olive-dk:      rgb(168, 181, 88);
  --res-dark-brown:    rgb(50, 39, 17);
  --res-off-white:     rgb(250, 250, 250);
  --res-panel-cream:   rgb(250, 249, 245);
  --res-text-dark:     rgb(51, 51, 51);
  --res-text-mid:      rgb(104, 104, 104);
  --res-border:        rgb(221, 221, 221);

  /* Hero-specific */
  --hero-olive: rgb(190, 204, 102);  /* olive-green CTA background */
  --hero-white: #ffffff;             /* text color throughout hero  */
}

/* ----------------------------------------------------------------
   SHARED ELEMENTS
   ---------------------------------------------------------------- */

/* Olive-green pill CTA button */
.res-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--res-olive);
  color: #fff;
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.65rem 1.875rem;
  border-radius: 24px;
  border: 2px solid var(--res-olive);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.res-btn-cta:hover  { background: var(--res-olive-dk); border-color: var(--res-olive-dk); transform: translateY(-1px); }
.res-btn-cta:active { transform: translateY(0); }

/* Eyebrow / kicker label */
.res-eyebrow {
  display: block;
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--res-orange);
  margin-bottom: 0.6rem;
}
.res-eyebrow--white { color: #fff; }
.res-eyebrow--light { color: rgba(255, 255, 255, 0.7); }


/* ================================================================
   SECTION 1 — HERO
   Exact specs: min-height 700px, max-width 1200px container,
   flex-column stack with 10-14px gaps, dark overlay.
   ================================================================ */

.res-hero {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: center;
  background-color: rgb(20, 15, 8);   /* fallback while image loads */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Uniform dark overlay — semi-transparent so white text is readable */
.res-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  pointer-events: none;
}

/* Max-width 1200px container, left-aligned */
.res-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 80px 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;   /* ~10-14px gap between text block and CTA */
}

/* Inner text stack: kicker → heading → paragraph, 10px apart */
.res-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* ── 1. KICKER LABEL ─────────────────────────────────────────── */
.res-hero__kicker {
  font-family: 'Montserrat', 'Gotham', 'Gill Sans', system-ui, sans-serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 11.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);  /* 50% opacity white */
  margin: 0;
  padding: 0;
}

/* ── 2. HEADLINE ─────────────────────────────────────────────── */
.res-hero__heading {
  font-family: 'Montserrat', 'Gotham', 'Gill Sans', system-ui, sans-serif;
  font-size: 60px;
  font-weight: 900;
  line-height: 60px;     /* tight 1:1 ratio */
  letter-spacing: -1.2px;
  color: var(--hero-white);
  margin: 0;
  padding: 0;
}

/* ── 3. PARAGRAPH ────────────────────────────────────────────── */
.res-hero__sub {
  font-family: 'Montserrat', 'Gotham', 'Gill Sans', system-ui, sans-serif;
  font-size: 37px;
  font-weight: 500;
  line-height: 40.7px;   /* 1.1 ratio */
  color: var(--hero-white);
  /* max-width causes the sentence to break onto exactly two lines */
  max-width: 760px;
  margin: 0;
  padding: 0;
}

/* ── 4. CTA BUTTON ───────────────────────────────────────────── */
.res-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hero-olive);
  color: var(--hero-white);
  font-family: 'Montserrat', 'Gotham', 'Gill Sans', system-ui, sans-serif;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  padding: 17px 24px;
  border-radius: 14.5px;
  border: none;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  /* ~11px top gap is handled by parent gap; small wrapper spacing below */
  margin-top: 5px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.res-hero__cta:hover  { background: rgb(168, 181, 88); transform: translateY(-1px); }
.res-hero__cta:active { transform: translateY(0); }


/* ================================================================
   SECTION 2 + 3 — FILTER BAR + CARD GRID
   ================================================================ */
.res-listings {
  background: #fff;
  padding: 60px 0;
}

.res-listings__inner {
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: 50px;
}

.res-listings__heading {
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--res-text-dark);
  text-align: center;
  margin: 0 0 0.5rem;
}

.res-listings__sub {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  color: var(--res-text-mid);
  text-align: center;
  margin: 0 0 2.5rem;
  max-width: none;
}

/* ── Filter bar ─────────────────────────────────────────────────── */
.res-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 60px;
}

/* Override main.css .filter-btn defaults inside res-filter-bar */
.res-filter-bar .filter-btn,
.res-filter {
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.6rem 1.75rem;
  border-radius: 9999px;
  border: 2px solid var(--res-border);
  background: #fff;
  color: var(--res-text-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.res-filter-bar .filter-btn:hover,
.res-filter:hover {
  border-color: var(--res-olive);
  color: var(--res-olive);
}

.res-filter-bar .filter-btn.active,
.res-filter.active {
  background: var(--res-olive);
  border-color: var(--res-olive);
  color: #fff;
}

/* ── Card grid — 2 columns ──────────────────────────────────────── */
.res-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 45px;
}

/* Override stacked .property-card layout inside the new grid */
.res-card-grid .property-card,
.res-card {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--res-off-white);
  border-radius: 15px;
  border: none;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  overflow: visible;    /* allow badge to hang out */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* Reset main.css grid layout */
  grid-template-columns: unset;
}

.res-card-grid .property-card:hover,
.res-card:hover {
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.14);
  transform: translateY(-4px);
}

/* Force card to stay stacked (column) regardless of main.css breakpoint */
.res-card-grid .property-card {
  grid-template-columns: 1fr !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Image wrapper — clips image but lets badge overflow */
.res-card__img-wrap {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 480px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
}

.res-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

/* Floating location-pin badge */
.res-card__badge {
  position: absolute;
  bottom: -20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--res-panel-cream);
  border-radius: 34px;
  padding: 10px 17px;
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--res-orange);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* Card body */
.res-card__body {
  padding: 38px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.res-card__body h3 {
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--res-text-dark);
  margin: 0 0 6px;
  line-height: 1.2;
}

.res-card__price {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.87rem;
  color: var(--res-text-mid);
  margin: 0 0 6px;
}
.res-card__price strong {
  color: var(--res-orange);
  font-weight: 700;
}

.res-card__info {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.87rem;
  color: var(--res-text-mid);
  margin: 0;
  max-width: none;
}

/* Status pill (Opening / Under Construction) */
.res-status-badge {
  display: inline-block;
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  background: rgba(203, 82, 4, 0.1);
  color: var(--res-orange);
  padding: 4px 12px;
  border-radius: 9999px;
  width: fit-content;
  margin-bottom: 4px;
}

/* "View Residence →" link — stretched to cover the entire card */
.res-card__link {
  display: inline-block;
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--res-orange);
  text-decoration: none;
  margin-top: auto;
  padding-top: 12px;
  transition: color 0.2s ease;
}
.res-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.res-card { position: relative; cursor: pointer; }
.res-card:hover .res-card__link { color: var(--res-dark-brown); }


/* ================================================================
   SECTION 4 — CTA BAND
   Diagonal orange → golden-yellow gradient, ~400px tall.
   ================================================================ */
.res-cta-band {
  min-height: 400px;
  display: flex;
  align-items: center;
  background: linear-gradient(
    135deg,
    rgb(203, 82, 4)   0%,
    rgb(254, 160, 0) 55%,
    rgb(255, 200, 0) 100%
  );
  padding: 80px 0;
}

.res-cta-band__inner {
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.res-cta-band__heading {
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: clamp(38px, 5.5vw, 60px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
  margin: 0;
}

.res-cta-band p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 480px;
  line-height: 1.65;
  margin: 0;
}


/* ================================================================
   SECTION 5 — FAQ BAND
   Background photo (set via <style> in HTML), dark overlay.
   ================================================================ */
.res-faq-band {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: rgb(20, 18, 10);
  background-size: cover;
  background-position: center;
}

.res-faq-band__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.38) 65%,
    rgba(0, 0, 0, 0.1)  100%
  );
}

.res-faq-band__inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin-inline: auto;
  padding: 80px 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.res-faq-band__heading {
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0;
}

.res-faq-band p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 480px;
  line-height: 1.65;
  margin: 0;
}


/* ================================================================
   SECTION 6 — CONTACT / FOOTER SECTION
   ================================================================ */
.res-contact {
  background: var(--res-dark-brown);
  padding: 90px 0;
}

.res-contact__inner {
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

/* Left column */
.res-contact__heading {
  font-family: 'Montserrat', 'Poppins', system-ui, sans-serif;
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 30px;
}

/* Social icons */
.res-social-row {
  display: flex;
  gap: 14px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

.res-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--res-olive);
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.res-social-btn:hover {
  background: var(--res-olive-dk);
  transform: translateY(-2px);
}
.res-social-btn svg { display: block; }

/* Privacy / copyright / credit */
.res-contact__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.res-contact__meta a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.res-contact__meta a:hover { color: var(--res-olive); }
.res-contact__meta span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.38);
}

/* Right column: contact form */
.res-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.res-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}

.res-form input,
.res-form textarea {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  color: var(--res-text-dark);
  outline: none;
  transition: box-shadow 0.2s ease;
}
.res-form input:focus,
.res-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(190, 204, 102, 0.45);
}
.res-form textarea {
  resize: vertical;
  min-height: 140px;
}
.res-form .res-btn-cta {
  align-self: flex-start;
  margin-top: 4px;
}


/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* < 1100px — tighten horizontal padding */
@media (max-width: 1099px) {
  .res-hero__container,
  .res-listings__inner,
  .res-cta-band__inner,
  .res-faq-band__inner,
  .res-contact__inner {
    padding-inline: 32px;
  }
}

/* < 900px — hamburger nav (handled by main.css); scale hero text */
@media (max-width: 899px) {
  .res-hero__container,
  .res-listings__inner,
  .res-cta-band__inner,
  .res-faq-band__inner,
  .res-contact__inner {
    padding-inline: 24px;
  }

  /* Hero type scale-down */
  .res-hero__heading {
    font-size: 40px;
    line-height: 42px;
  }
  .res-hero__sub {
    font-size: 22px;
    line-height: 27px;
  }
  .res-hero__kicker {
    font-size: 16px;
    letter-spacing: 7px;
  }
  .res-hero__cta {
    font-size: 18px;
    padding: 14px 20px;
  }

  /* Contact stacks to single column */
  .res-contact__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* < 768px — single-column card grid */
@media (max-width: 767px) {
  .res-hero { min-height: 560px; }
  .res-hero__container { padding: 70px 24px; }

  .res-listings { padding: 64px 0; }
  .res-listings__inner { padding-inline: 20px; }

  .res-card-grid { grid-template-columns: 1fr; }
  .res-card-grid .property-card,
  .res-card { width: 100%; }

  .res-cta-band { min-height: auto; padding: 70px 0; }

  .res-faq-band { min-height: 420px; }
  .res-faq-band__inner { padding: 64px 20px; }

  .res-contact { padding: 64px 0; }
  .res-filter-bar { gap: 10px; }
}

/* < 560px — narrow mobile */
@media (max-width: 559px) {
  .res-hero__container { padding: 60px 20px; }

  /* Spec calls for 36-40px headline, 18-20px paragraph on narrow screens */
  .res-hero__heading {
    font-size: 36px;
    line-height: 38px;
    letter-spacing: -0.6px;
  }
  .res-hero__sub {
    font-size: 18px;
    line-height: 24px;
  }
  .res-hero__kicker {
    font-size: 13px;
    letter-spacing: 5px;
  }
  .res-hero__cta {
    font-size: 16px;
    padding: 13px 18px;
    border-radius: 12px;
  }
}

/* < 480px — smaller secondary type */
@media (max-width: 479px) {
  .res-cta-band__heading  { font-size: 30px; }
  .res-faq-band__heading  { font-size: 28px; }
  .res-contact__heading   { font-size: 28px; }
  .res-card__body h3      { font-size: 1.25rem; }
}