/* neighborhoods/show — banner, Overview/Photos tabs, and the listings iframe. */

/* ----- banner ----- */
.neighborhood-banner {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-32);
  background-color: var(--neutral-900);
}

.neighborhood-banner__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  mask-image: linear-gradient(transparent, var(--text-shadow), transparent);
}

.neighborhood-banner__text {
  color: var(--neutral-100);
  text-align: center;
  filter: var(--drop-shadow);
}

.neighborhood-banner__city {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.neighborhood-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 20vw, 4.5rem);
  text-decoration: underline;
  text-decoration-color: var(--primary-400);
  text-underline-offset: 4px;
}

.neighborhood-details {
  padding-block: var(--space-16);
}

/* ----- tabs: CSS-only, driven by the checked radio ----- */
.tabs {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--primary-wash);
}

.tabs__radio {
  position: absolute;
  opacity: 0;
}

.tabs__label {
  font-size: clamp(1rem, 5vw, 1.25rem);
  font-weight: var(--weight-bold);
  color: var(--primary-400);
  cursor: pointer;
}

.tabs__label:hover,
.tabs__radio:checked + .tabs__label {
  color: var(--primary-hover);
}

.tabs__radio:focus-visible + .tabs__label {
  outline: 2px solid var(--primary-200);
}

.tabs__panel {
  display: none;
}

.tabs__radio:checked + .tabs__label + .tabs__panel {
  display: block;
}

/* ----- overview ----- */
.neighborhood-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.neighborhood-overview__heading {
  font-family: var(--font-serif);
  font-size: var(--text-subtitle);
  line-height: var(--leading-none);
}

.neighborhood-overview__body {
  margin-top: var(--space-8);
}

.neighborhood-overview__media {
  position: relative;
  min-height: 16rem;
}

/* ----- photos ----- */
.neighborhood-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.neighborhood-photos__photo {
  aspect-ratio: 4 / 3;
}

/* ----- listings ----- */
.neighborhood-listings {
  padding-top: var(--space-8);
  color: var(--neutral-100);
  background-color: var(--primary-400);
}

.neighborhood-listings__title {
  margin-bottom: var(--space-8);
  font-family: var(--font-serif);
  font-size: var(--text-subtitle);
  line-height: var(--leading-none);
}

.neighborhood-listings__frame {
  width: 100%;
  min-height: 450dvh;
  margin-bottom: -50px;
  background-color: var(--neutral-200);
}

@media (min-width: 48em) {
  .neighborhood-details {
    padding-top: var(--space-4);
    padding-bottom: var(--space-16);
  }

  .tabs {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    grid-template-rows: auto min-content;
    row-gap: 0;
    padding: 0;
    background-color: transparent;
  }

  .tabs__label {
    padding: 0.5em;
    text-align: center;
    background-color: var(--primary-soft);
    translate: 0 -4.125rem;
  }

  .tabs__radio:checked + .tabs__label {
    color: var(--primary-active);
    background-color: var(--white);
  }

  .tabs__panel {
    grid-area: 2 / 1 / -1 / -1;
    padding-block: 1em;
  }

  .neighborhood-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .neighborhood-photos {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}