/* child common css to backend/fronted */

.page-hero-cover .wp-block-cover__background {
  background-color: #000000 !important;
  opacity: 0.3 !important;
}

.neighborhood-child-gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 24px;
}

.neighborhood-child-gallery:has(:nth-child(5):last-child) {
  grid-template-columns: repeat(5, 1fr);
}

.neighborhood-child-gallery .wp-block-column {
  position: relative;
}

.neighborhood-child-gallery .wp-block-cover {
  min-height: unset !important;
  aspect-ratio: 1 !important;
}

.neighborhoods-index .wp-block-cover .wp-block-cover__inner-container,
.neighborhood-child-gallery .wp-block-cover .wp-block-cover__inner-container {
  position: unset;
  z-index: 5;
}

.neighborhood-child-gallery .wp-block-cover p {
  font-size: 1.13rem !important;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  text-align: left;
  word-break: keep-all;
}

.neighborhood-child-gallery .wp-block-cover a {
  color: #fff;
}

body:not(.block-editor-page) .neighborhood-child-gallery .wp-block-cover a:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.neighborhood-child-gallery .wp-block-cover img {
  transition: transform 0.25s ease-in-out;
}

.neighborhood-child-gallery .wp-block-cover:hover img {
  transform: scale(1.15);
}

.wp-block-cover.link-full {
  position: relative;
}

.wp-block-cover.link-full p {
  font-size: 1.13rem !important;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  text-align: left;
}

.wp-block-cover.link-full a {
  color: #fff;
}

.wp-block-cover.link-full a:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wp-block-cover.link-full img {
  transform: scale(1);
  transition-duration: 0.25s;
}

.wp-block-cover.link-full:hover img {
  transform: scale(1.15);
}

.featured-slideshow {
  --slideshow-aspect-ratio: 1.77;
  --swiper-navigation-sides-offset: 32px;
  --swiper-theme-color: #fff;
  --swiper-navigation-size: 2rem;

  position: relative;
  width: 100%;
  max-height: 700px;
  aspect-ratio: var(--slideshow-aspect-ratio) !important;
}

.featured-slideshow .swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.featured-slideshow .swiper-slide .image {
  position: relative;
  display: block;
}

.featured-slideshow .swiper-slide picture {
  position: relative;
  width: 100%;
  aspect-ratio: var(--slideshow-aspect-ratio);
}

.featured-slideshow .swiper-slide picture:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 5;
}

.featured-slideshow .swiper-slide picture img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 700px;
}

.featured-slideshow .swiper-slide .description {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  display: flex;
  width: 100%;
  height: 100%;

  max-width: var(--max-content-width);

  justify-content: flex-end;
  align-items: center;

  padding: 0;
  z-index: 6;

  text-align: left;
}

.featured-slideshow .swiper-slide-active .description {
  animation: flyInFromRight 2.5s ease-out;
}

.featured-slideshow .swiper-slide.intro .description {
  justify-content: center;
  text-align: center;
  animation: none !important;
}

.featured-slideshow .swiper-slide .description .inner {
  color: #fff;
  width: 564px;
  max-width: 100%;
  padding-right: 64px;
}

/* we target 1504 which is the max-width + the right padding */
@media only screen and (min-width: 1504px) {
  .featured-slideshow .swiper-slide .description .inner {
    padding-right: 0;
  }
}

.featured-slideshow .swiper-slide.intro .description .inner {
  width: 100%;
  padding: 0;
}

.featured-slideshow .swiper-slide .description h1 {
  margin: 0;
  font-size: 1.5rem;
  text-shadow: 0px 0px 1px #000;
  text-transform: uppercase;
  text-wrap: balance;
  font-family: gill-sans-nova, sans-serif !important;
}

.featured-slideshow .swiper-slide.intro .description h1 {
  font-size: 1rem;
}

.featured-slideshow .swiper-slide .description p {
  margin: 0;
  font-size: 1rem;
  text-shadow: 0px 0px 15px #000;
  text-wrap: balance;
}

.featured-slideshow .swiper-slide.intro .description p {
  font-size: 1rem;
  display: none;
  font-family: gill-sans-nova, sans-serif !important;
}

.featured-slideshow .swiper-slide .description p.price {
  margin: 0;
  font-size: 1.25rem;
  text-shadow: 0px 0px 15px #000;
  font-family: gill-sans-nova, sans-serif !important;
}

.featured-slideshow .swiper-slide .description .link {
  margin-top: 16px;
}

.featured-slideshow .swiper-slide .description .link a {
  color: #fff;
  background: rgba(0, 36, 77, 0.86);
  display: inline-block;
  padding: 10px 20px;
  text-transform: uppercase;
  font-family: var(--serif-font);
  font-size: 0.875rem;
  letter-spacing: 0.2rem;
}

.featured-slideshow .swiper-slide .description .link a:hover {
  background: rgba(255, 255, 255, 0.86);
  color: #00244d;
}

.news-posts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
}

.news-posts li {
  position: relative;
  margin: 0;
}

body.news .news-posts li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.news-posts figure {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.news-posts figure img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1.5;
  transition: transform 0.25s ease-in-out;
  object-fit: cover;
}

body.news .news-posts li:first-child figure {
  aspect-ratio: 1.47;
}

.news-posts li:hover figure img {
  transform: scale(1.1);
}

.news-posts .post-title {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: var(--image-overlay-bg);

  padding: 8px;

  pointer-events: none;
}

.news-posts .post-title .wp-block-group {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  height: 100%;

  transition: background 0.2s ease-in;
}

.news-posts .post-title .wp-block-group:hover {
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease-in;
}

.news-posts .post-title a {
  color: #fff;
  text-wrap: balance;
  margin: auto 10px;
}

.news-posts .wp-block-post-title {
  margin: 0;
}

.news-posts .wp-block-post-date {
  margin: 0;
}

.wp-block-query-pagination-next:after {
  content: "";
  position: relative;

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="rgb(10, 74, 129, 1)" d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z"/></svg>');
  background-repeat: no-repeat;
  transform: rotate(180deg);

  width: 15px;
  height: 22px;

  display: inline-block;

  vertical-align: middle;
  top: -2px;
  margin-left: 4px;
}

.wp-block-query-pagination-previous:before {
  content: "";
  position: relative;

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="rgb(10, 74, 129, 1)" d="M15 239c-9.4 9.4-9.4 24.6 0 33.9L207 465c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L65.9 256 241 81c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15 239z"/></svg>');
  background-repeat: no-repeat;

  width: 15px;
  height: 22px;

  display: inline-block;

  vertical-align: middle;
  top: -2px;

  margin-right: 4px;
}

@keyframes flyInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media only screen and (max-width: 900px) {
  .news-posts {
    grid-template-columns: 1fr 1fr;
  }

  .featured-slideshow {
    --slideshow-aspect-ratio: 1.5;
  }

  .featured-slideshow .swiper-slide .description .inner {
    width: auto;
  }

  .featured-slideshow .swiper-slide .excerpt {
    display: none;
  }

  .neighborhood-child-gallery,
  .neighborhood-child-gallery:has(:nth-child(5):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .news-posts {
    grid-template-columns: 1fr;
  }

  body.news .news-posts li:first-child {
    grid-column: span 1;
    grid-row: span 1;
  }

  .featured-slideshow {
    --slideshow-aspect-ratio: 1.25;
    --swiper-navigation-sides-offset: 16px;
  }

  .featured-slideshow .swiper-slide .description h1 {
    font-size: 1.5rem;
  }

  .featured-slideshow .swiper-slide .description p.price {
    font-size: 1.5rem;
  }

  .neighborhood-child-gallery,
  .neighborhood-child-gallery:has(:nth-child(5):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}