/* === Developments Page ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   ========================================================================== */

.cc-dev {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding-top: 79px;
}

/* ── HEADER: TITLE + FILTER ── */

/* Matches the Insights hero: 79px topbar + 130px, so the title lands at the
   same height on both pages. The header was also locked to 244px tall while
   holding nothing but the title, leaving ~190px of dead space beneath it — it
   now sizes to its content. */
.cc-dev-header {
  position: relative;
  padding: 0 var(--cc-gutter);
  margin-top: 130px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-dev-header__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-left: 123px;
}

.cc-dev-header__filter {
  position: absolute;
  right: 30px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0.5px solid var(--cc-ink);
  background: none;
  padding: 14px 24px;
  cursor: pointer;
  color: var(--cc-ink);
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  width: 224px;
  height: 51px;
  border-radius: 0;
  box-shadow: none;
  transition: background 0.3s, color 0.3s;
}

.cc-dev-header__filter:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
  border-color: var(--cc-dark-parchment);
}

.cc-dev-header__filter:focus,
.cc-dev-header__filter:active {
  outline: none;
  background: none;
  color: var(--cc-ink);
  border: 0.5px solid var(--cc-ink);
  box-shadow: none;
}

/* ── PROJECT GRID ── */

.cc-dev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px 40px;
  justify-content: center;
  padding: 0 var(--cc-gutter);
  margin-top: 99px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

/* Column layout so VIEW MORE can be pushed to the bottom of the card. Titles
   run one or two lines and descriptions two to four, so without this the link
   sits at a different height in every card across a row. */
.cc-dev-grid__card {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cc-dev-grid__image {
  width: 100%;
  aspect-ratio: 544 / 407;
  overflow: hidden;
}

.cc-dev-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-dev-grid__name {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.44;
  color: var(--cc-ink-2);
  margin-top: 34px;
}

/* Exactly three lines on every card, with a real ellipsis only where the text
   actually overflows. min-height reserves the third line so a short preview
   doesn't pull its VIEW MORE up out of line with the rest of the row. */
.cc-dev-grid__desc {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-top: 19px;
  max-width: 524px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.48em);
}

.cc-dev-grid__more {
  display: inline-block;
  align-self: flex-start;   /* keeps the underline to the text, not the column */
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  /* auto eats the leftover height so every VIEW MORE in a row lands on the
     same baseline; the padding preserves the original 35px minimum gap. */
  margin-top: auto;
  padding-top: 35px;
}

/* The whole card is the click target, not just the link. This overlay carries
   the anchor across the image, title and description, so there is still only
   one link per card for screen readers and keyboard users. */
.cc-dev-grid__more::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cc-dev-grid__card:hover .cc-dev-grid__name {
  color: var(--cc-dark-parchment);
}

.cc-dev-grid__name,
.cc-dev-grid__image img {
  transition: color 0.3s ease, opacity 0.3s ease;
}

.cc-dev-grid__card:hover .cc-dev-grid__image img {
  opacity: 0.88;
}

.cc-dev-grid__card:hover {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .cc-dev-grid__name,
  .cc-dev-grid__image img {
    transition: none;
  }
}

/* ── LOAD MORE ── */

.cc-dev-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 136px;
}

.cc-dev-loadmore__btn {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  background: var(--cc-bg);
  border: 0.5px solid var(--cc-archive);
  padding: 0;
  cursor: pointer;
  width: 472px;
  height: 54px;
  text-align: center;
  transition: background 0.3s, color 0.3s;
}

.cc-dev-loadmore__btn:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
}

.cc-dev-loadmore__btn:focus,
.cc-dev-loadmore__btn:active {
  outline: none;
  background: var(--cc-bg);
  color: var(--cc-archive);
  border-color: var(--cc-archive);
}

.cc-dev-grid__card--hidden {
  display: none;
}

/* ── PREMIUM DEVELOPMENTS ── */

.cc-dev-premium {
  padding: 0 28px;
  margin-top: 172px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-dev-premium__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 35px;
}

.cc-dev-premium__grid {
  display: grid;
  grid-template-columns: 841fr 595fr;
  gap: 0 20px;
  position: relative;
}

.cc-dev-premium__text {
  padding-right: 0;
}

.cc-dev-premium__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--cc-ink-2);
  margin-bottom: 32px;
}

.cc-dev-premium__lead {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 668px;
}

.cc-dev-premium__body {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin-top: 500px;
  max-width: 651px;
}

.cc-dev-premium__divider {
  position: absolute;
  left: calc(841 / 1456 * 100%);
  top: 0;
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  height: calc(100% + 30px);
}

.cc-dev-premium__image-col {
  display: flex;
  flex-direction: column;
}

.cc-dev-premium__image {
  width: 100%;
  height: 749px;
  overflow: hidden;
}

.cc-dev-premium__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-dev-premium__caption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;
}

.cc-dev-premium__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* ── BROWSE BY LOCATION ── */

.cc-dev-location {
  padding: 0 28px;
  margin-top: 80px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-dev-location__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-top: 60px;
}

.cc-dev-location__grid {
  display: grid;
  grid-template-columns: minmax(0, 840px) 1fr;
  gap: 0 38px;
}

.cc-dev-location__map {
  width: 100%;
  height: 550px;
  overflow: hidden;
}

.cc-dev-location__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.cc-dev-location__content {
  padding-top: 0;
}

.cc-dev-location__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: normal;
  color: var(--cc-ink-2);
  margin-bottom: 35px;
}

.cc-dev-location__lead {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 528px;
  margin-bottom: 40px;
}

.cc-dev-location__filters {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-dev-location__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-dev-location__field label {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: #666;
}

.cc-dev-location__field--dropdown {
  width: 260px;
  margin-bottom: 22px;
}

.cc-dev-location__field--text {
  width: 100%;
  max-width: 578px;
  margin-bottom: 22px;
}

.cc-dev-location__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--cc-newsprint);
  padding: 16px;
}

.cc-dev-location__input span {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-archive);
}

.cc-dev-location__input svg {
  color: var(--cc-archive);
  flex-shrink: 0;
}

.cc-dev-location__slider {
  width: 100%;
  max-width: 578px;
  margin-top: 14px;
}

.cc-dev-location__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}

.cc-dev-location__range::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4px;
}

.cc-dev-location__range::-moz-range-track {
  height: 3px;
  background: var(--cc-newsprint);
  border: none;
  border-radius: 4px;
}

.cc-dev-location__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-top: -19px;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}

.cc-dev-location__range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
}

.cc-dev-location__range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.cc-dev-location__range-labels span {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

/* ── STATS ── */

.cc-dev-stats {
  padding: 0 28px;
  margin-top: 50px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-dev-stats__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 195px;
}

.cc-dev-stats__grid {
  display: grid;
  grid-template-columns: 349px auto 351px auto 351px auto 1fr;
  align-items: end;
  min-height: 282px;
}

.cc-dev-stats__item {
  display: flex;
  flex-direction: column;
}

.cc-dev-stats__divider {
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  align-self: stretch;
  margin-right: 19px;
}

.cc-dev-stats__number {
  font-family: 'Austin News Deck', var(--cc-font-heading);
  font-weight: 400;
  font-size: 106.667px;
  line-height: 1.2;
  color: var(--cc-ink-2);
}

.cc-dev-stats__label {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink-2);
  margin-top: 8px;
}

/* ── PARTNERSHIP ── */

.cc-dev-partnership {
  padding: 0 28px;
  margin-top: 85px;
  width: 100%;
  max-width: 1512px;
  margin-left: auto;
  margin-right: auto;
}

.cc-dev-partnership__rule {
  height: 0;
  border-top: 0.5px solid var(--cc-archive);
  margin-bottom: 30px;
}

.cc-dev-partnership__grid {
  display: grid;
  grid-template-columns: 595px 56px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 847px;
}

.cc-dev-partnership__image {
  grid-column: 1;
  grid-row: 1;
  width: 595px;
  height: 472px;
  overflow: hidden;
}

.cc-dev-partnership__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-dev-partnership__divider {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 0;
  border-left: 0.5px solid var(--cc-archive);
  margin-left: 20px;
}

.cc-dev-partnership__lead {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: normal;
  color: var(--cc-archive);
  max-width: 633px;
}

.cc-dev-partnership__body {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 685px;
}

.cc-dev-partnership__body p + p {
  margin-top: 14px;
}

.cc-dev-partnership__body a {
  color: var(--cc-ink-2);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.cc-dev-partnership__caption {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  max-width: 595px;
}

.cc-dev-partnership__caption p {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.48;
  letter-spacing: 0.22px;
  color: var(--cc-ink-2);
  max-width: 350px;
}

/* ── FILTERED CARDS ── */

.cc-dev-grid__card--filtered {
  display: none;
}

/* ── FILTER & SORT PANEL ── */

body.cc-filter-open {
  overflow: hidden;
}

.cc-filter-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.cc-filter-overlay--open {
  opacity: 1;
  visibility: visible;
}

.cc-filter {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 726px;
  z-index: 200;
  background: var(--cc-bg);
  border-left: 0.5px solid var(--cc-archive);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  overflow: hidden;
}

.cc-filter--open {
  transform: translateX(0);
}

.cc-filter__close {
  position: absolute;
  top: 34px;
  right: 24px;
  z-index: 201;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
  color: var(--cc-ink);
}

.cc-filter__close:hover,
.cc-filter__close:focus,
.cc-filter__close:active {
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--cc-ink);
}

.cc-filter__scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 80px 60px 40px;
  display: flex;
  flex-direction: column;
}

.cc-filter__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-bottom: 40px;
}

.cc-filter__count {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 20px;
  color: var(--cc-archive);
  vertical-align: super;
  margin-left: 4px;
}

.cc-filter__sort-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 30px;
}

.cc-filter__sort-label {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--cc-ink-2);
}

.cc-filter__sort-options {
  display: flex;
  gap: 20px;
}

.cc-filter__sort-btn {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--cc-archive);
  cursor: pointer;
  transition: color 0.2s;
}

.cc-filter__sort-btn:hover,
.cc-filter__sort-btn:focus,
.cc-filter__sort-btn:active {
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--cc-ink);
}

.cc-filter__sort-btn--active {
  color: var(--cc-ink);
  font-weight: 500;
}

.cc-filter__divider {
  height: 0;
  border-top: 0.5px solid var(--cc-newsprint);
  margin-bottom: 0;
}

/* Filter groups */

.cc-filter__group {
  border-bottom: 0.5px solid var(--cc-newsprint);
}

.cc-filter__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  color: var(--cc-ink);
}

.cc-filter__group-toggle:hover,
.cc-filter__group-toggle:focus,
.cc-filter__group-toggle:active {
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
}

.cc-filter__group-toggle span {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  color: var(--cc-archive);
  line-height: normal;
}

.cc-filter__chevron {
  color: var(--cc-archive);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.cc-filter__group--open .cc-filter__chevron {
  transform: rotate(180deg);
}

.cc-filter__group-options {
  display: none;
  padding: 0 0 16px 0;
  flex-direction: column;
  gap: 10px;
}

.cc-filter__group--open .cc-filter__group-options {
  display: flex;
}

.cc-filter__option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.cc-filter__option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border: 1px solid var(--cc-archive);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}

.cc-filter__option input[type="checkbox"]:checked {
  background: var(--cc-ink);
  border-color: var(--cc-ink);
}

.cc-filter__option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--cc-bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.cc-filter__option span {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
}

/* Bottom buttons */

.cc-filter__bottom {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: auto;
  padding-top: 40px;
}

.cc-filter__clear {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 30px;
}

.cc-filter__clear:hover,
.cc-filter__clear:focus,
.cc-filter__clear:active {
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--cc-ink);
}

.cc-filter__apply {
  flex: 1;
  height: 54px;
  border: 0.5px solid var(--cc-archive);
  background: var(--cc-bg);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.cc-filter__apply:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
}

.cc-filter__apply:focus,
.cc-filter__apply:active {
  outline: none;
  background: var(--cc-bg);
  color: var(--cc-archive);
  box-shadow: none;
  border: 0.5px solid var(--cc-archive);
}

/* ── FOOTER OVERRIDE ── */

.cc-dev .cc-footer {
  margin-top: 110px;
}

/* ============================================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .cc-dev-header {
    margin-top: 120px;
    height: auto;
  }

  .cc-dev-header__title {
    margin-left: 0;
  }

  .cc-dev-header__filter {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 30px;
  }

  .cc-dev-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px 40px;
    margin-top: 60px;
  }

  .cc-dev-grid__card {
    width: 100%;
  }

  .cc-dev-grid__image {
    width: 100%;
    height: auto;
    aspect-ratio: 544 / 407;
  }

  .cc-dev-loadmore__btn {
    width: 100%;
    max-width: 472px;
  }

  .cc-dev-premium__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  .cc-dev-premium__divider {
    display: none;
  }

  .cc-dev-premium__image {
    width: 100%;
    height: auto;
    aspect-ratio: 595 / 749;
  }

  .cc-dev-premium__body {
    margin-top: 40px;
  }

  .cc-dev-premium__caption {
    padding-left: 0;
    margin-top: 25px;
  }

  .cc-dev-location__grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  .cc-dev-location__map {
    width: 100%;
    height: 500px;
  }

  .cc-dev-location__lead {
    margin-bottom: 40px;
  }

  .cc-dev-location__field--text {
    width: 100%;
  }

  .cc-dev-location__slider {
    width: 100%;
  }

  .cc-dev-stats__grid {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 40px 0;
  }

  .cc-dev-stats__grid > :nth-child(n+6) {
    display: none;
  }

  .cc-dev-partnership__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .cc-dev-partnership__image {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 595 / 472;
  }

  .cc-dev-partnership__divider {
    display: none;
  }

  .cc-dev-partnership__lead {
    grid-column: 1;
    grid-row: auto;
    margin-top: 30px;
  }

  .cc-dev-partnership__caption {
    grid-column: 1;
    grid-row: auto;
  }

  .cc-dev-partnership__body {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    margin-top: 40px;
  }

  .cc-filter {
    width: 85vw;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cc-dev-header {
    margin-top: 80px;
  }

  .cc-dev-header__title {
    font-size: 32px;
  }

  .cc-dev-grid {
    grid-template-columns: 1fr;
    gap: 50px 0;
    margin-top: 40px;
  }

  .cc-dev-grid__image {
    aspect-ratio: 4 / 3;
  }

  .cc-dev-grid__name {
    font-size: 20px;
    margin-top: 20px;
  }

  .cc-dev-grid__more {
    padding-top: 20px;   /* margin-top stays auto for the bottom alignment */
  }

  .cc-dev-loadmore {
    margin-top: 60px;
  }

  .cc-dev-premium {
    margin-top: 80px;
  }

  .cc-dev-premium__grid {
    grid-template-columns: 1fr;
  }

  .cc-dev-premium__heading {
    font-size: 24px;
  }

  .cc-dev-premium__lead {
    font-size: 20px;
  }

  .cc-dev-location__map {
    height: 350px;
  }

  .cc-dev-location__heading {
    font-size: 32px;
  }

  .cc-dev-location__lead {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .cc-dev-stats__rule {
    margin-bottom: 60px;
  }

  .cc-dev-stats__grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  .cc-dev-stats__grid > :nth-child(n+6) {
    display: flex;
  }

  .cc-dev-stats__divider {
    display: none;
  }

  .cc-dev-stats__number {
    font-size: 60px;
  }

  .cc-dev-partnership__lead {
    font-size: 20px;
  }

  .cc-dev-partnership__caption {
    max-width: 100%;
  }

  .cc-dev .cc-footer {
    margin-top: 60px;
  }

  .cc-filter {
    width: 100vw;
  }

  .cc-filter__scroll {
    padding: 60px 28px 30px;
  }

  .cc-filter__title {
    font-size: 32px;
  }
}

/* ============================================================
   INTERACTIVE MAP (Browse by Location section)
   ============================================================ */

.cc-dev-location__map {
  position: relative;
}

.cc-map-wrapper {
  width: 100%;
  height: 550px;
  filter: sepia(0.1) brightness(0.98);
  overflow: hidden;
}

#cc-dev-map {
  width: 100%;
  height: 100%;
  background: #f4f3ee;
}

.cc-map-loading,
.cc-map-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--cc-font-body);
  font-size: 14px;
  color: var(--cc-archive);
  pointer-events: none;
  z-index: 10;
}

/* Pin: small filled circle (positioning is set by Leaflet on .cc-map-pin;
   visuals + hover scale live on the inner element to avoid clobbering
   Leaflet's translate3d transform). */
.cc-map-pin {
  width: 12px;
  height: 12px;
  cursor: pointer;
}

.cc-map-pin__dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cc-dark-parchment);
  border: 1.5px solid var(--cc-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
  transform-origin: center center;
}

.cc-map-pin:hover .cc-map-pin__dot {
  transform: scale(1.35);
}

/* Cluster: bigger circle with count.
   Same trick as .cc-map-pin — visuals on inner span to preserve Leaflet's
   translate3d positioning. */
.cc-map-cluster {
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.cc-map-cluster__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
  font-family: var(--cc-font-heading);
  font-size: 16px;
  font-weight: 400;
  border: 2px solid var(--cc-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
  transform-origin: center center;
  pointer-events: none;
}

.cc-map-cluster:hover .cc-map-cluster__count {
  transform: scale(1.1);
}

/* Popup overrides */
.leaflet-popup-content-wrapper {
  border-radius: 0;
  border: 0.5px solid var(--cc-archive);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  background: var(--cc-bg);
  padding: 0;
}

.leaflet-popup-content {
  margin: 0;
  width: 260px;
}

.leaflet-popup-tip {
  background: var(--cc-bg);
  border: 0.5px solid var(--cc-archive);
}

/* The popup is one big link so a click anywhere opens the transaction. */
.cc-map-popup__card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cc-map-popup__card:hover .cc-map-popup__title {
  color: var(--cc-dark-parchment);
}

.cc-map-popup__card:hover .cc-map-popup__img img {
  transform: scale(1.04);
}

.cc-map-popup__img {
  display: block;
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.cc-map-popup__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.cc-map-popup__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--cc-ink);
  margin: 14px 16px 4px;
  transition: color 0.3s;
}

.cc-map-popup__asset {
  font-family: var(--cc-font-body);
  font-size: 12px;
  color: var(--cc-archive);
  margin: 0 16px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cc-map-popup__price {
  font-family: var(--cc-font-body);
  font-size: 14px;
  color: var(--cc-ink-2);
  margin: 0 16px 12px;
}

.cc-map-popup__link {
  display: block;
  font-family: var(--cc-font-body);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  padding: 0 16px 14px;
}

/* Filter input restyling */
.cc-dev-location__select,
.cc-dev-location__textinput {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--cc-font-body);
  font-size: 14px;
  color: var(--cc-ink-2);
  padding: 0;
  appearance: none;
}

.cc-dev-location__select {
  -webkit-appearance: none;
  cursor: pointer;
}

.cc-dev-location__textinput::placeholder {
  color: var(--cc-archive);
}

/* --- FAQ spacing override --- */
.cc-dev .cc-faq {
  margin-top: 0;
  padding-top: 80px;
}

.cc-dev .cc-faq .cc-faq__divider {
  margin-bottom: 26px;
}

.cc-dev .cc-faq .cc-faq__label {
  margin-bottom: 93px;
}

.cc-dev .cc-faq .cc-faq__question {
  padding: 25px 0 11px 0;
}

.cc-dev .cc-faq .cc-faq__answer {
  padding: 20px 0 15px 4px;
}

.cc-dev .cc-faq .cc-faq__answer p {
  max-width: 960px;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 768px) {
  .cc-map-wrapper {
    height: 400px;
  }

  .leaflet-popup-content {
    width: calc(100vw - 80px);
    max-width: 260px;
  }
}

.cc-dev-filterbar {
  display: flex;
  justify-content: flex-end;
  max-width: 1512px;
  margin: 30px auto 0;
  padding: 0 var(--cc-gutter);
  position: relative;
  z-index: 2;
}

.cc-dev-filterbar .cc-dev-header__filter {
  position: relative;
  right: auto;
  bottom: auto;
  background: var(--cc-bg);
}

.cc-dev-filterbar + .cc-dev-grid {
  margin-top: 40px;
}