/* Size opening sections using the visible viewport, including mobile browser bars. */
:is(.hero, .hero-about, .hero-apartment, .hero-contact),
:is(.hero-content, .hero-about-content, .hero-apartment-content, .hero-contact-content) {
  min-height: 100svh;
}

/* Portrait gallery photos keep their complete frame inside the available height. */
.photo-card {
  width: min(100%, calc((100svh - var(--header-h) - 48px) * 0.75));
  min-height: 0;
  aspect-ratio: 3 / 4;
  justify-self: center;
}

.story-image,
.split-image {
  min-height: 0;
  height: auto;
  align-self: center;
}

.story-image img,
.split-image img {
  height: auto;
  max-height: calc(100svh - var(--header-h) - 48px);
  object-fit: contain;
}

.map-wrap {
  min-height: min(460px, calc(100svh - var(--header-h) - 48px));
  display: flex;
  align-items: flex-end;
  align-self: center;
  padding: 24px;
}

.location-overlay {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
}

@media (max-width: 768px) {
  .intro-text,
  .highlight-card,
  .story-text,
  .value-card,
  .contact-card,
  .photo-section-head {
    text-align: center;
  }

  .photo-section-title {
    width: 100%;
  }

  .photo-section-title p {
    margin-inline: auto;
  }

  .gallery-track {
    grid-auto-columns: min(85%, 420px, calc((100svh - var(--header-h) - 48px) * 0.75));
  }

  .section {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

@media (max-height: 700px) {
  :is(.hero-content, .hero-about-content, .hero-apartment-content, .hero-contact-content) {
    padding-top: calc(var(--header-h) + 16px);
    padding-bottom: 44px;
  }

  :is(.hero, .hero-about, .hero-apartment, .hero-contact) .eyebrow {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  :is(.hero, .hero-about, .hero-apartment, .hero-contact) h1 {
    font-size: clamp(1.9rem, 5.5vw, 3rem);
    line-height: 1.05;
    margin-bottom: 12px;
  }

  :is(.hero, .hero-about, .hero-apartment, .hero-contact) p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .hero-buttons,
  .hero-actions {
    gap: 8px;
    margin-bottom: 0;
  }

  .slider-dots {
    bottom: 16px;
  }
}

@media (max-height: 500px) and (min-width: 540px) {
  :is(.hero, .hero-about, .hero-apartment, .hero-contact) h1 {
    font-size: clamp(1.75rem, 4.5vw, 2.3rem);
  }

  .hero-buttons,
  .hero-actions {
    flex-direction: row;
    max-width: none;
  }

  :is(.hero-buttons, .hero-actions) .btn {
    width: auto;
  }

  :is(.hero-content, .hero-about-content, .hero-apartment-content, .hero-contact-content) {
    padding-top: calc(var(--header-h) + 8px);
    padding-bottom: 36px;
  }
}