/* new-home.css - styles for page-new-home.php.
 * Loads after homepage.css, about.css and careers.css. Most sections reuse
 * those components as-is; this file covers the new sections (paths, learn)
 * and the additions to the reused ones (hero eyebrow and buttons, taller stat
 * tiles, story labels, neighborhood captions, review read-more, closing lines).
 */

/* -----------------------
 * Shared buttons
 * ----------------------- */
.home-paths__btn,
.home-team__btn,
.home-reviews__btn {
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
  border: 0.0625rem solid #AF5B5B;
  background: #AF5B5B;
  cursor: pointer;
  padding: 0.875rem 2rem 0.75rem;
  text-transform: lowercase;
  color: #fff;
}
@media not all and (pointer: coarse) {
  .home-paths__btn:hover,
  .home-team__btn:hover,
  .home-reviews__btn:hover {
    border-color: #963636;
    background: #963636;
  }
}

/* Shared container, matching the theme's section containers */
.home-paths__container,
.home-learn__container {
  position: relative;
  margin: 0 auto;
  padding: 0 calc(64px / 2 - 15px);
  width: 100%;
  max-width: calc(1146px + 64px);
}
@media screen and (min-width: 1750px) {
  .home-paths__container,
  .home-learn__container {
    max-width: 1528px;
  }
}
@media screen and (max-width: 768px) {
  .home-paths__container,
  .home-learn__container {
    padding: 0 2rem;
  }
}
@media screen and (max-width: 480px) {
  .home-paths__container,
  .home-learn__container {
    padding: 0 1rem;
  }
}

/* -----------------------
 * Hero / Welcome
 * ----------------------- */
.home-welcome__eyebrow {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
/* Same size as the current homepage's headline, which is a plain h2 */
.home-welcome__headline {
  margin: 0 0 1.25rem;
  color: #fff;
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.28;
}
@media screen and (min-width: 1750px) {
  .home-welcome__headline {
    font-size: 1.6875rem;
  }
}
.home-welcome__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.home-welcome__footnote {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
}
/* homepage.css stretches the video to the full height of the text panel.
   The new copy is about half again as long, so pin the video to the heights
   it renders at on the current homepage and center it on the panel. Below
   880px the columns stack and homepage.css already fixes the height. */
@media screen and (min-width: 881px) {
  .page-new-home .home-welcome__image-col {
    align-self: center;
  }
  .page-new-home .home-welcome__image-container {
    height: 616px;
  }
}
@media screen and (min-width: 1750px) {
  .page-new-home .home-welcome__image-container {
    height: 670px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .page-new-home .home-welcome__image-container {
    height: 568px;
  }
}

/* -----------------------
 * Results (home-stats)
 * ----------------------- */
.home-results {
  padding: 2rem 0 1rem;
}
/* Labels are longer than the old tiles, so the box grows instead of
   clipping. The top padding clears the half of the circle that overlaps. */
.home-results .home-stats__card-container {
  height: auto;
  min-height: 12.5rem;
  padding-top: 7rem;
}
@media screen and (max-width: 600px) {
  .home-results .home-stats__card-container {
    padding-top: 4.5rem;
  }
}
.home-results .home-stats__card-title {
  margin: 0;
}
.home-results .home-stats__card-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
}
@media screen and (max-width: 600px) {
  .home-results .home-stats__card-text {
    font-size: 0.875rem;
  }
}
/* 4 or 8 tiles sit 4 across instead of leaving an orphan row */
@media screen and (min-width: 1025px) {
  .home-stats__cards--count-4 .home-stats__card,
  .home-stats__cards--count-8 .home-stats__card {
    width: 25%;
  }
}
.home-results__line {
  width: 100%;
  max-width: 46rem;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 500;
}
.home-results__footnote {
  width: 100%;
  margin: 1rem 0 0;
  text-align: center;
  color: #6b6b6b;
  font-size: 0.8125rem;
}
/* Press logos sit on a light band so the results section reads as finished
   before the "Selling or Buying" heading starts the next one. */
.home-results__press {
  margin-top: 3rem;
  padding: 2.5rem 0;
  background: #F4F0F0;
}
.home-results__press .about-featured-in__logos {
  align-items: center;
  margin-bottom: 0;
}
.home-results__press .about-featured-in__logo-wrapper {
  max-width: 180px;
}
/* Some logo files have a white background; let the band show through */
.home-results__press .about-featured-in__logo-image {
  mix-blend-mode: multiply;
}
.home-results__press-name {
  display: block;
  color: #232323;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* -----------------------
 * Sell / Buy / New Developments
 * ----------------------- */
.home-paths {
  padding: 4.5rem 0 3rem;
}
.home-paths__title {
  margin: 0 0 3rem;
  text-align: center;
}
.home-paths__row {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 50px;
  background: #F4F0F0;
  padding: 60px;
}
.home-paths__row--alt {
  flex-direction: row-reverse;
  background: url(https://ruthkrishnan.com/wp-content/uploads/2021/07/hanger-bg-tall.jpg) center / cover no-repeat;
}
.home-paths__image {
  flex: 0 0 42%;
}
.home-paths__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}
.home-paths__content {
  flex: 1;
}
.home-paths__row--no-image .home-paths__content {
  max-width: 46rem;
  margin: 0 auto;
}
.home-paths__heading {
  margin: 0 0 1rem;
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.28;
}
.home-paths__text p:not(:last-child) {
  margin-bottom: 1rem;
}
.home-paths__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}
/* Relocation banner, modelled on the sell page's Compass Concierge banner
   (those rules live in new-sell.css, which this page doesn't load) */
.home-relocate .compass-program__container {
  display: flex;
  flex-wrap: wrap;
  background: #232323;
  color: #fff;
}
.home-relocate .compass-program__title {
  width: 100%;
  margin: 0;
  padding: 3rem 1rem 0;
  color: #fff;
  text-align: center;
  font-size: 1.5625rem;
  font-weight: 500;
  line-height: 1.28;
}
.home-relocate .compass-program__content {
  width: calc(9 / 12 * 100%);
  margin-left: calc(1.5 / 12 * 100%);
}
.home-relocate .compass-program__text {
  padding: 1.25rem 0 3rem;
  text-align: center;
}
.home-relocate .compass-program__text p {
  margin: 0;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .home-relocate .compass-program__content {
    width: 100%;
    margin-left: 0;
    padding: 0 1.5rem;
  }
}
@media screen and (max-width: 600px) {
  .home-relocate .compass-program__title {
    padding-top: 2rem;
  }
  .home-relocate .compass-program__text {
    padding: 1rem 0 2rem;
  }
}
@media screen and (max-width: 880px) {
  .home-paths__row,
  .home-paths__row--alt {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding: 40px 24px;
    margin-bottom: 30px;
  }
  .home-paths__image {
    flex-basis: auto;
  }
}
@media screen and (max-width: 480px) {
  .home-paths__row,
  .home-paths__row--alt {
    padding: 30px 16px;
  }
}

/* -----------------------
 * Team (careers-who)
 * ----------------------- */
.home-team .careers-who__image-container {
  display: block;
}
.home-team__quote {
  margin: 2rem 0 1rem;
  padding-left: 1.5rem;
  border-left: 3px solid #AF5B5B;
}
.home-team__quote p {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.home-team__quote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 700;
}
.home-team__giving {
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
@media screen and (max-width: 880px) {
  .home-team .careers-who__content {
    text-align: left;
  }
}

/* -----------------------
 * Client stories (slider-blog-case-studies part; label/result styles live in
 * blog-case-studies.css, which the part loads)
 * ----------------------- */
/* Intro paragraph at the same width as the other section intros */
.home-stories .blog-case-studies__text {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* -----------------------
 * Neighborhoods
 * ----------------------- */
.home-neighborhoods__text {
  max-width: 46rem;
  margin: 0 auto 2rem;
  text-align: center;
}
.home-neighborhoods__text p:not(:last-child) {
  margin-bottom: 1rem;
}
.home-neighborhoods__caption {
  display: block;
  margin: 0.5rem 0 0;
  color: #AF5B5B;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
a.home-neighborhoods__caption:hover {
  color: #963636;
}

/* -----------------------
 * Learn the market
 * ----------------------- */
.home-learn {
  padding: 4rem 0;
}
.home-learn__title,
.home-learn__text {
  text-align: center;
}
.home-learn__text {
  max-width: 46rem;
  margin: 1rem auto 0;
}
.home-learn__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 1024px) {
  .home-learn__items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .home-learn__items {
    grid-template-columns: 1fr;
  }
}
.home-learn__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.5rem;
  background: #F4F0F0;
  color: #232323;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
@media not all and (pointer: coarse) {
  .home-learn__link:hover {
    background: #963636;
    color: #fff;
  }
}
.home-learn__name {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.home-learn__desc {
  font-weight: 500;
  line-height: 1.5;
}

/* -----------------------
 * Reviews (testimonials slider)
 * ----------------------- */
/* global.css styles the slider. Slides are stacked and the inactive ones are
   only faded out, so keep them from catching clicks meant for the
   "read more" toggle on the visible slide. */
.home-reviews .testimonials-section__content-slide {
  pointer-events: none;
}
.home-reviews .testimonials-section__content-slide--active {
  pointer-events: auto;
}
.home-reviews__subline {
  margin: 0.5rem 0 0;
  font-weight: 500;
}
.home-reviews__subline a {
  color: #AF5B5B;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.home-reviews__quote {
  margin: 0;
}
.home-reviews__agent {
  display: block;
  margin-top: 0.25rem;
  color: #6b6b6b;
  font-size: 0.9375rem;
  font-weight: 500;
}
.home-reviews__full {
  margin-top: 1rem;
}
.home-reviews__toggle {
  display: inline-block;
  color: #AF5B5B;
  font-weight: 500;
  text-transform: lowercase;
  cursor: pointer;
  list-style: none;
}
.home-reviews__toggle::-webkit-details-marker {
  display: none;
}
.home-reviews__toggle:hover {
  color: #963636;
}
.home-reviews__toggle-less,
.home-reviews__full[open] .home-reviews__toggle-more {
  display: none;
}
.home-reviews__full[open] .home-reviews__toggle-less {
  display: inline;
}
.home-reviews__full-text {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.home-reviews__full-text p:not(:last-child) {
  margin-bottom: 1rem;
}
/* The stored review HTML spaces paragraphs with <br> between them */
.home-reviews__full-text br {
  display: none;
}
.home-reviews__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem 4rem;
}

/* -----------------------
 * Closing
 * ----------------------- */
.home-closing__about {
  margin: 1rem 0;
  font-size: 0.9375rem;
}
.home-closing__note {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
}