/* Mosaico y visor compartidos por Comercial, Hogar y Oficinas. */
.projects-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: clamp(1.25rem, 1.65vw, 1.5rem);
  row-gap: 1rem;
}

.projects-card { display: grid; grid-template-rows: subgrid; min-width: 0; margin: 0; }
.projects-card:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.projects-card:nth-child(2) { grid-column: 8 / -1; grid-row: 1 / 3; }
.projects-card:nth-child(3) { grid-column: 1 / 5; grid-row: 3 / 5; }
.projects-card:nth-child(4) { grid-column: 5 / 9; grid-row: 3 / 5; }
.projects-card:nth-child(5) { grid-column: 9 / -1; grid-row: 3 / 5; }
.projects-card__image {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-photo, .75rem);
  background: var(--surface-warm);
  cursor: pointer;
}
.projects-card:nth-child(1) .projects-card__image { aspect-ratio: auto; align-self: stretch; }
.projects-card:nth-child(2) .projects-card__image { aspect-ratio: 1.15; }
.projects-card__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.projects-card__image--complete img { object-fit: contain; }
.projects-card figcaption {
  color: var(--projects-caption-color, var(--text-heading));
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.25;
}
.projects-card:nth-child(-n+2) figcaption { padding-bottom: 1rem; }
.projects-card__image:focus-visible { outline: 3px solid var(--projects-caption-color, var(--brand-primary)); outline-offset: 4px; }
@media (hover: hover) { .projects-card__image:not(.projects-card__image--complete):hover img { transform: scale(1.018); } }

.project-lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 4.5rem clamp(1rem, 4vw, 3rem); background: rgb(20 12 9 / 88%); opacity: 0; transition: opacity .3s ease; }
.project-lightbox[hidden] { display: none; }
.project-lightbox.is-open { opacity: 1; }
.project-lightbox__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.project-lightbox__image { display: block; width: auto; max-width: 90vw; height: auto; max-height: min(88vh, calc(100svh - 9rem)); object-fit: contain; }
.project-lightbox__close { position: absolute; z-index: 1; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; border: 1px solid rgb(255 254 253 / 55%); background: rgb(20 12 9 / 45%); color: var(--surface-white); cursor: pointer; font-size: 2rem; line-height: 1; }
.project-lightbox__close span { transform: translateY(-.08em); }
.project-lightbox__close:focus-visible { outline: 3px solid var(--surface-white); outline-offset: 4px; }
body.project-lightbox-open { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; }

@media (max-width: 1023px) {
  .projects-gallery { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 2rem; }
  .projects-gallery > .projects-card { grid-column: 1; grid-row: auto; grid-template-rows: auto auto; row-gap: .875rem; }
  .projects-card:nth-child(1) .projects-card__image { aspect-ratio: 16 / 9; }
  .projects-card:nth-child(-n+2) figcaption { padding-bottom: 0; }
}
@media (max-width: 639px) { .projects-gallery { row-gap: 1.75rem; } }
@media (prefers-reduced-motion: reduce) {
  .projects-card__image img, .projects-card__image:not(.projects-card__image--complete):hover img { transform: none; transition: none; }
  .project-lightbox { transition: none; }
}