/* Layout and legibility fixes shared by the project pages. Loaded after each page's own stylesheet. */

/* Header: the whole bar blends with what is behind it, so the name, the menu and the logo stay readable on light and dark sections. */
.nav {
  mix-blend-mode: difference;
}
.nav-logo,
.nav-menu,
a.nav-menu {
  color: #fff;
  mix-blend-mode: normal;
}
.nav-menu-lines span {
  background: #fff;
}
.cursor:not(.is-active) {
  opacity: 0;
}
.nav-pill-name {
  white-space: nowrap;
}
.nav-pill-thumb svg {
  display: none;
}

/* Widths: nothing wider than the screen */
.section-gallery-asym,
.gallery-asym-inner,
.gallery-asym-left,
.gallery-asym-right,
.gallery-photo {
  min-width: 0;
  max-width: 100%;
}
.gallery-asym-inner {
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
}
.gallery-photo img {
  min-width: 0;
  max-width: 100%;
}
section,
footer {
  overflow-x: clip;
}
.hero-visit {
  white-space: nowrap;
}
.section-mid-title-img {
  padding-bottom: 7rem;
}

/* Large display headings fit their column on laptop and desktop widths */
@media (min-width: 769px) {
  .dark-content-title,
  .mid-title,
  .split-right-title,
  .detalles-huge-title,
  .section-huge-title {
    font-size: clamp(84px, 11vw, 176px);
  }
}

/* Text legibility on light sections and over photos */
.label-col-text {
  color: #5c5c5c;
}
.swatch-hex,
.footer-counter {
  color: #777;
}
.hero .hero-eyebrow,
.hero .hero-subtitle,
.hero .hero-visit,
.gallery-photo-caption {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* A photo block takes the height of its photo */
.dark-content-image {
  aspect-ratio: auto;
  background: none;
}
.dark-content-image img,
.dark-content-image svg {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .detalles-grid,
  .section-label-text,
  .dark-label-text {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem 0;
  }
  .detalles-grid > *,
  .section-label-text > *,
  .dark-label-text > * {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .detalles-grid > .det-empty,
  .detalles-grid > .det-rest,
  .section-label-text > .label-col-empty,
  .section-label-text > .label-col-rest,
  .dark-label-text > .dark-empty,
  .dark-label-text > .dark-rest {
    display: none;
  }
  .dark-content-title {
    font-size: clamp(48px, 15vw, 96px);
    overflow-wrap: anywhere;
  }
  .gallery-asym-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery-asym-left {
    padding: 3rem 1.25rem 0;
  }
  .gallery-asym-right {
    padding: 1.5rem 1.25rem 0;
  }
  .fullbleed-mockup-box {
    min-height: 0;
  }
  .mockup-inner-grid {
    grid-template-columns: minmax(0, 1fr);
    flex: none;
  }
  .mockup-photo {
    width: 100%;
  }
  .section-mid-title-img {
    padding-bottom: 3rem;
  }
  .mid-centered-image {
    padding: 0 1.25rem;
  }
  .split-right-letter {
    display: none;
  }
}
@media (hover: none) {
  .cursor {
    display: none;
  }
}