/* Projects: el listado (DESKTOP - PROJECTS, 490:5889) y cada proyecto (DESKTOP -
   PROJECT OPEN 1, 490:6203), medidas de Figma a 1440 px. Tarjetas, pestanas,
   mosaico y antes/despues estan en sections.css. */

/* ------------------------------------------------ detalle de un proyecto */

.cw-pdetail { padding: 42px 0 48px; background: #ededed; }
.cw-pdetail__meta { display: flex; align-items: center; gap: 13px; }
.cw-pdetail__title { font-size: 1rem; line-height: 18px; font-weight: 900; color: var(--cw-cement); }
.cw-pdetail__text { max-width: 839px; margin-top: 16px !important; }

/* Slider: scroll horizontal con snap; los puntos los maneja gallery.js. */
.cw-slider { position: relative; margin-top: 29px; }
.cw-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.cw-slider__track::-webkit-scrollbar { display: none; }
.cw-slider__slide { flex: 0 0 100%; scroll-snap-align: start; line-height: 0; }
.cw-slider__slide img { width: 100%; height: 424px; object-fit: cover; }
.cw-slider__dots { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: flex; gap: 4px; }
.cw-slider__dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  cursor: pointer;
}
.cw-slider__dot[aria-current] { background: #d9d9d9; }

.cw-pdetail__gallery { max-width: var(--cw-narrow); margin: 30px auto 0; }

/* Galeria completa: <dialog> nativo. */
.cw-lightbox {
  width: min(100% - 32px, 1200px);
  max-height: calc(100vh - 48px);
  padding: 56px 24px 24px;
  border: 0;
  border-radius: var(--cw-radius-card);
  background: var(--cw-navy);
}
.cw-lightbox::backdrop { background: rgb(24 33 42 / 0.8); }
.cw-lightbox__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
/* Cada foto con su proporcion real (el alto del markup sale de la foto). Si no
   entra en la pantalla, se achica entera y queda aire a los costados. */
.cw-lightbox__list img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 128px);
  object-fit: contain;
  border-radius: 8px;
}
.cw-lightbox__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--cw-beige);
  cursor: pointer;
}
.cw-lightbox__close::before,
.cw-lightbox__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 1.5px;
  background: var(--cw-navy);
  translate: -50% -50%;
  rotate: 45deg;
}
.cw-lightbox__close::after { rotate: -45deg; }

/* ------------------------------------------- tablets y mobile (sin diseno) */

@media (max-width: 1199px) {
  .cw-slider__slide img { height: auto; aspect-ratio: 1200 / 424; }
}
@media (max-width: 781px) {
  .cw-slider__slide img { aspect-ratio: 4 / 3; }
}