/**
 * "The building" — the facade photograph and its copy.
 *
 * The header above is the shared `res-section-header` component, so the eyebrow
 * and title match every other section on the residence page. There is no empty
 * state — without a photo the partial does not render.
 *
 * The photo is shown WHOLE at its own portrait proportions (the source is
 * ≈1714×2400): no fixed frame ratio, so it is never cropped and never
 * letterboxed. That removes the dark panel and the blurred fill entirely —
 * earlier versions boxed a tall building inside a wide frame and had to invent
 * something to put in the gaps. Nothing to fill means nothing to hide.
 *
 * Two layouts, one set of markup:
 *   - narrow  → single column, copy laid OVER the foot of the photo
 *   - ≥992px  → two columns, portrait photo left, copy beside it on the right
 * The caption is a SIBLING of the frame so it can move between the two.
 */

.res-building__layout {
  /* Positioning context for the overlaid caption at narrow widths. */
  position: relative;
  margin: 0;
}

.res-building__frame {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(12, 35, 64, 0.16);
}

/* Natural height: the image sets the frame's shape, so there are no bands. */
.res-building__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Scrim: only as dark as the overlaid type needs, and only while it overlays. */
.res-building__frame::after {
  content: "";
  position: absolute;
  inset: 40% 0 0 0;
  background: linear-gradient(
    to top,
    rgba(6, 16, 30, 0.9) 10%,
    rgba(6, 16, 30, 0.62) 38%,
    rgba(6, 16, 30, 0) 100%
  );
  pointer-events: none;
}

.res-building__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: clamp(1.25rem, 4vw, 2rem);
  color: #fff;
}

.res-building__text {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.95);
}

.res-building__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.res-building__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

.res-building__fact i {
  color: var(--res-gold, #d4af37);
  font-size: 0.75rem;
}

/**
 * Desktop: the photo keeps its portrait shape and the copy sits beside it on
 * the right, on the page's own background. Nothing overlaps, so the scrim goes
 * and the type and chips take page colours — the chips match `.res-chip` in the
 * sibling sections rather than the glass treatment that only reads on a photo.
 */
@media (min-width: 992px) {
  .res-building__layout {
    display: grid;
    /* A fixed cap on the photo column: left to a free fraction it grew past
       700px tall on a 900px-tall screen and the section read as a photo with a
       caption stranded beside it. */
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }

  .res-building__frame::after {
    display: none;
  }

  .res-building__caption {
    position: static;
    padding: 0;
    /* Off the photo, so back to page ink — the base rule is white for the overlay. */
    color: var(--res-navy, #0c2340);
  }

  .res-building__text {
    max-width: 46ch;
    font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1rem);
    line-height: 1.75;
    color: var(--res-muted, #5b6b7f);
  }

  .res-building__facts {
    margin-top: 1.4rem;
  }

  .res-building__fact {
    padding: 0.42rem 0.9rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--res-navy, #0c2340);
    background: var(--res-surface, #f6f8fa);
    backdrop-filter: none;
  }
}

/* Overlay mode: cap the photo so a portrait shot cannot outgrow the screen.
   Full width on a phone is ~360px; on a tablet it was 740px wide and 1036px
   tall — taller than the viewport, so the copy over its foot started below the
   fold. Phones are under the cap and so are unaffected. */
@media (max-width: 991.98px) {
  .res-building__frame,
  .res-building__caption {
    max-width: 30rem;
    margin-inline: auto;
  }
}

@media (max-width: 575.98px) {
  .res-building__frame {
    border-radius: 14px;
  }
}

/**
 * Dark theme. Only the ≥992px layout needs it: below that the copy sits over
 * the photograph and is already white on a scrim. Navy type on the dark page
 * would be unreadable.
 */
@media (min-width: 992px) {
  [data-theme="dark"] .res-building__caption,
  html.dark-mode .res-building__caption {
    color: #fff;
  }

  [data-theme="dark"] .res-building__text,
  html.dark-mode .res-building__text {
    color: rgba(255, 255, 255, 0.76);
  }

  [data-theme="dark"] .res-building__fact,
  html.dark-mode .res-building__fact {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.45);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .res-building__photo {
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .res-building__frame:hover .res-building__photo {
    transform: scale(1.03);
  }
}