/**
 * Clarke Group — Single Project New Design (additions)
 * Loaded only on single Projects (see includes/assets-enqueue.php).
 * Builds on top of assets/css/homepage-new.css, which already styles
 * .hero, .stats-showcase, .ladies-mile, .projects-section,
 * .confidence-section, .news-section, .contact-section, .site-footer
 * site-wide. This file only adds what's unique to the project template.
 */

/* ---------- Hero: description / actions / meta bar ---------- */
.hero.cg2-hero .hero-description {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.65;
  color: #ffffffc9;
}
.hero.cg2-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}
.hero.cg2-hero .hero-plan-link {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero.cg2-hero .hero-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(24px, 4.6vw, 64px);
  border-top: 1px solid #ffffff26;
  background: #00000059;
  color: #ffffffce;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero.cg2-hero .hero-meta a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 700px) {
  .hero.cg2-hero .hero-meta { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
}

/* ---------- Hero: logo / pills / badge / features / share (optional, only render when filled in) ---------- */
.hero.cg2-hero .hero-top-row {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  left: clamp(24px, 4.6vw, 64px);
  right: clamp(24px, 4.6vw, 64px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.hero.cg2-hero .hero-logo img { display: block; height: 34px; width: auto; }
.hero.cg2-hero .hero-pills {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffffc9;
}
.hero.cg2-hero .hero-badge {
  padding: 6px 14px;
  border: 1px solid #ffffff4d;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: #00000040;
}
.hero.cg2-hero .hero-social { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hero.cg2-hero .hero-social a { display: inline-flex; opacity: .8; transition: opacity .2s; }
.hero.cg2-hero .hero-social a:hover { opacity: 1; }
.hero.cg2-hero .hero-social img { display: block; width: 16px; height: 16px; filter: brightness(0) invert(1); }
@media (max-width: 700px) {
  .hero.cg2-hero .hero-social { margin-left: 0; }
}

/* ---------- Stats grid: small unit text (m²) ---------- */
.stats-grid small { font-size: .55em; font-weight: 400; }

/* ---------- Overview video play button (only when video_url is set) ---------- */
.stats-art.stats-art--video { position: relative; }
.stats-art-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}
.stats-art-play svg { transition: transform .25s ease; }
.stats-art-play:hover svg { transform: scale(1.08); }

/* ---------- "Why Invest" reasons grid (only when the reasons repeater is filled) ----------
   .stats-showcase (homepage-new.css) is a 2-column CSS grid, so this needs
   grid-column: 1/-1 to span full width like .stats-grid does, instead of
   just dropping into whatever single cell is next in the auto-flow. */
.stats-reasons {
  grid-column: 1 / -1;
  padding: 56px clamp(24px, 4.6vw, 64px) 64px;
  border-top: 1px solid #00000014;
}
.stats-reasons-title {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: clamp(24px, 2.4vw, 32px);
}

/* ---------- Reusable small uppercase eyebrow label (two_col_spotlight, only when filled in) ---------- */
.cg2-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffffad;
}

/* ---------- Ladies-mile "details" list (01 · ..., 02 · ...) ---------- */
.cg2-ladies-details {
  display: grid;
  gap: 0;
  margin: 12px 0 8px;
  border-top: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
}
.cg2-ladies-details span {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #ffffff17;
  font-size: 13px;
  color: #fff9;
}
.cg2-ladies-details span:last-child { border-bottom: 0; }

/* ---------- Two-col spotlight ("Modern living") without an image ----------
   section-two_col_spotlight.php only requires a title now, so if a row is
   saved without an image the copy still shows full-width instead of the
   whole section disappearing (which is what made the page look incomplete
   next to the reference design). */
.ladies-mile.cg2-ladies--no-image .cg2-ladies-copy {
  grid-template-columns: 1fr;
  min-height: 0;
}
.ladies-mile.cg2-ladies--no-image .cg2-ladies-text {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ladies-mile.cg2-ladies--no-image .cg2-ladies-details {
  text-align: left;
}

/* ---------- Photo carousel (paired photos) ---------- */
.home-gallery.photo-carousel { margin: 0 auto 72px; max-width: 1210px; }
.gallery-viewport { overflow: hidden; position: relative; }
.gallery-slide.gallery-pair {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.gallery-slide.gallery-pair.is-active { display: grid; }
.gallery-slide.gallery-pair figure { margin: 0; overflow: hidden; aspect-ratio: 4/3; }
.gallery-slide.gallery-pair img { width: 100%; height: 100%; object-fit: cover; }
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}
.gallery-dots { display: flex; gap: 8px; }
.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #00000055;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.gallery-dot.is-active { background: #000; }
.gallery-count { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #777; }
.gallery-arrows { display: flex; gap: 10px; }
.gallery-prev, .gallery-next {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #00000030;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: #111;
  transition: background .2s, color .2s;
}
.gallery-prev:hover, .gallery-next:hover { background: #111; color: #fff; }
@media (max-width: 700px) {
  .gallery-slide.gallery-pair { grid-template-columns: 1fr; }
}

/* ---------- Feature grid (numbered cards) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  max-width: 1210px;
  margin: 0 auto;
  text-align: left;
}
.feature-grid article { border-top: 1px solid #00000021; padding-top: 20px; }
.feature-number {
  display: block;
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 24px;
  color: #b7b7b2;
}
.feature-grid h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.feature-grid p { margin: 0; color: #666; font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Overview main_image (only when that field is filled in) ---------- */
.cg2-overview-main {
  max-width: 1210px;
  margin: 56px auto 0;
}
.cg2-overview-main img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ---------- Site plan section ---------- */
.site-plan-section { background: #f5f4f1; padding: clamp(80px, 9vw, 130px) clamp(24px, 4.6vw, 64px); }
.plan-heading { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.plan-heading h2 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: 1.03; font-size: clamp(38px, calc(5vw - 4px), 62px); }
.plan-scroll {
  max-width: 1210px;
  margin: 0 auto;
  min-height: 420px;
  overflow: auto;
  background: #fff;
  border: 1px solid #00000014;
}
.plan-scroll img { display: block; width: 100%; height: auto; }
.plan-footnote {
  max-width: 1210px;
  margin: 20px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: #777;
}
.plan-footnote a { color: inherit; }
.plan-enquiry {
  max-width: 1210px;
  margin: 40px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  background: #fff;
}
.plan-enquiry p { margin: 0; font-family: var(--serif); font-size: 22px; }
@media (max-width: 700px) {
  .plan-enquiry { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Location / neighbourhood map section ---------- */
.confidence-section.location-section { grid-template-columns: 1fr 1.1fr; }
.location-panel { display: grid; grid-template-columns: 1.4fr 1fr; min-height: 460px; }
.neighbourhood-map-wrap { position: relative; overflow: hidden; background: #f2f4f4; min-height: 460px; }
.neighbourhood-map.leaflet-map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.neighbourhood-map-loading {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; background: #f0f2f2; color: #63686a; font-size: 12px;
}
.neighbourhood-map-loading.is-hidden { display: none; }
.map-pin-overlay {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #252c2e;
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px #0004;
  transition: transform .2s, background .2s;
}
.map-pin-overlay.is-active { background: #050505; transform: translate(-50%, -50%) scale(1.15); }
.map-show-all {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #d8d8d8;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.map-show-all:hover { background: #f2f2f2; }
.location-panel .nearby { padding: 28px; background: #f9f9f7; overflow-y: auto; }
.amenity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.amenity-list li { border-top: 1px solid #00000018; }
.amenity-list li:last-child { border-bottom: 1px solid #00000018; }
.amenity-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.amenity-list .nearby-number {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #999;
  font-size: 10px;
  color: #777;
}
.amenity-list button[aria-pressed="true"] .nearby-number { background: #050505; border-color: #050505; color: #fff; }
.amenity-list strong { font-size: 13px; font-weight: 500; }
@media (max-width: 900px) {
  .confidence-section.location-section { grid-template-columns: 1fr; }
  .location-panel { grid-template-columns: 1fr; }
}

/* ---------- Related News (legacy .cg-blog-grid component) ----------
   single-projects.php appends this block after all the ACF sections
   when "Show related blogs" is on. It's the theme's older card system
   (assets/css/blog.css), built for a 1760px container and a busier
   image-tag-card style — visually it didn't match the rest of this
   page at all, which is very likely what looked "messy": the whole
   page uses a 1210px column, Fraunces headings and thin outline-style
   links, then this block switched to a much wider column and a
   different card treatment right before the footer. These overrides
   only apply on single Projects (.cg-blog-grid-wrap--project) so the
   main Blog listing page is untouched. */
.cg-blog-grid-wrap--project {
  padding: clamp(88px, 9vw, 140px) clamp(24px, 4.6vw, 64px);
  background: #fff;
}
.cg-blog-grid-wrap--project .cg-blog-grid,
.cg-blog-grid-wrap--project .cg-blog-grid__related-head,
.cg-blog-grid-wrap--project .cg-blog-empty {
  max-width: 1210px;
}
.cg-blog-grid-wrap--project .cg-blog-grid__related-head {
  margin: 0 auto 52px;
}
.cg-blog-grid-wrap--project .cg-blog-grid__related-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.03;
  font-size: clamp(40px, calc(5.4vw - 4px), 72px);
}
.cg-blog-grid-wrap--project .cg-blog-grid__related-cta {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .08em;
}
.cg-blog-grid-wrap--project .cg-blog-card__title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.1;
}

/* ---------- Sales section ---------- */
.sales-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.sales-card .news-image { aspect-ratio: 1; }
.sales-role { color: #999; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.sales-card a { display: block; color: inherit; font-size: 14px; text-decoration: none; margin-top: 4px; }
.sales-card a.sales-email { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .sales-grid { grid-template-columns: 1fr; }
}