/* A precise two-column contact sheet keeps every project page ordered.
   The original image composition is always retained inside its tile. */
.detail-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-auto-rows: clamp(265px, 28vw, 410px);
}

.detail-gallery figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 2.35rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: var(--paper);
}

.detail-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: var(--paper);
  cursor: zoom-in;
}

.detail-gallery figcaption {
  margin: 0;
  padding: .72rem 0;
  color: var(--soft);
  background: transparent;
}

.detail-plan-grid img,
.media-zoomable { cursor: zoom-in; }

/* These two Caión panels include a large blank margin above the drawing.
   The drawing frames retain the lower, relevant architectural content. */
.detail-plan-grid figure.caion-drawing {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 2.35rem;
  height: 100%;
  min-height: 0;
  padding: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--paper);
}

.detail-plan-grid figure.caion-drawing img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: var(--paper);
}

.detail-plan-grid figure.caion-drawing figcaption {
  padding: .72rem 0;
}

.detail-plan-grid figure.caion-bottom-crop img {
  object-fit: cover;
  object-position: center bottom;
  mix-blend-mode: multiply;
}

.media-zoomable:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.media-lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: rgba(11, 12, 12, .92);
}

.media-lightbox[hidden] { display: none; }

.media-lightbox-image {
  display: block;
  width: auto;
  max-width: min(86vw, 1000px);
  max-height: min(78vh, 640px);
  object-fit: contain;
  background: var(--paper);
}

.media-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: white;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

[data-project="luxury"] .project-open img { object-fit: cover; }

.project-section-divider {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 2rem 1fr;
  gap: .7rem;
  align-items: end;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.6rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}

.project-section-divider span {
  padding-bottom: .25rem;
  color: var(--soft);
  font-size: .7rem;
}

.project-section-divider p {
  margin: 0 0 .25rem;
  color: var(--soft);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.project-section-divider h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .95;
}

.project-section-divider[hidden] { display: none; }

@media (max-width: 760px) {
  .detail-gallery { grid-template-columns: 1fr; grid-auto-rows: clamp(245px, 78vw, 370px); }
  .media-lightbox-image { max-width: 90vw; max-height: 72vh; }
}