/* ============================================================================
   Es Bassol Nou — Projects (listado)
   Header terracota. "OUR PROJECTS" + intro, hero carrusel, masonry editorial
   art-directed (posiciones calcadas del mockup en vw → escala a cualquier
   resolución), cierre Es Comptés + "LET'S TALK". Mobile-first.
   ========================================================================== */

/* --- Texto superpuesto al carrusel --------------------------------------- */
.projects-lead {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--c-cream);
  pointer-events: none;
}

.projects-lead>.container {
  position: absolute;
  inset: 0;
  max-width: none;
  padding-inline: 2.1%;
}

.projects-lead__title {
  position: absolute;
  top: 17.7vw;
  left: 2.1%;
  right: 2.1%;
  font-size: clamp(3rem, 9.375vw, 15rem);
  /* Misma escala y composición en dos líneas que Property Care. */
  line-height: 0.86;
  text-align: center;
  color: inherit;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.projects-lead__title span {
  display: block;
}

@media (min-width: 48rem) {
  .projects-lead__title {
    white-space: normal;
  }
}

.projects-lead__intro {
  position: absolute;
  top: 37vw;
  left: 0;
  right: 0;
  max-width: 62vw;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1rem, 1.61vw, 2.6rem);
  /* 31pt */
  line-height: 1.16;
  color: inherit;
  transform: scaleY(0.9);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* --- Hero carrusel (full-bleed) ------------------------------------------ */
.projects-hero {
  position: relative;
  height: 77.6vw;
  margin-top: 0;
  overflow: hidden;
}

.projects-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.08) 20%,
      rgba(0, 0, 0, 0.36) 68%,
      rgba(0, 0, 0, 0.18));
  pointer-events: none;
}

.carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 100%;
  /* El carrusel ocupa la altura completa del hero. */
}

.carousel__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* sin esto el <picture> colapsa y la img no llena el alto */
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.projects-hero__cta {
  position: absolute;
  top: 40%;
  right: 13%;
  /* x1495 del PDF */
  color: #13110c;
  /* oscuro y sutil como el PDF (no crema) */
  font-size: clamp(0.9rem, 1.09vw, 1.8rem);
  z-index: 2;
}

.carousel__dots {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 6.8vw, 9rem);
  /* sobre los arbustos como el PDF (y~2680) */
  transform: translateX(-50%);
  display: flex;
  z-index: 3;
  gap: clamp(1rem, 5.3vw, 6.6rem);
  /* ~102px centro-a-centro como el PDF */
}

.carousel__dot {
  width: clamp(0.6rem, 1.25vw, 2rem);
  /* ~24px @1920 como el PDF */
  height: clamp(0.6rem, 1.25vw, 2rem);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  /* inactivo: gris ~(98) sobre los arbustos */
  transition: background var(--transition);
}

.carousel__dot.is-active {
  background: #fff;
}

/* --- Caption de tarjeta (compartida) ------------------------------------- */
.proj-card {
  display: block;
  color: var(--c-ink);
}

.proj-card__media {
  overflow: hidden;
}

.proj-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.proj-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  margin-top: clamp(0.5rem, 1vw, 1.4rem);
}

.proj-card__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.56vw, 2.5rem);
  /* 30pt */
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.proj-card__year {
  font-size: 0.9em;
  margin-left: 0.15em;
}

.proj-card__sub {
  display: block;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: clamp(0.7rem, 0.97vw, 1.5rem);
  /* 18.6pt */
  letter-spacing: 0.02em;
  color: #928d8c;
  transform: scaleY(0.9);
  margin-top: 0.19em;
}

.proj-card__link {
  flex: none;
  font-size: clamp(0.8rem, 1.0vw, 1.8rem);
  /* 21pt */
  white-space: nowrap;
  transform: scaleY(0.9);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  transform: translateY(-0.2em);
  letter-spacing: 0.02em;
}

/* --- Masonry: móvil apilado ---------------------------------------------- */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vw, 5rem);
  padding-inline: 2.1%;
  margin-top: clamp(2rem, 6vw, 5rem);
}

.projects-grid .proj-card__media {
  aspect-ratio: 3 / 2;
}

/* --- Masonry: desktop art-directed (absoluto en vw) ---------------------- */
@media (min-width: 64rem) {
  .projects-grid {
    display: block;
    position: relative;
    height: 338vw;
    /* del top de CPM al top de la franja Es Comptés */
    padding-inline: 0;
    margin-top: 5.35vw;
    /* compensa el hero más corto → CPM sigue en y2914 */
  }

  .projects-grid .proj-card {
    position: absolute;
  }

  .projects-grid .proj-card__media {
    aspect-ratio: auto;
  }

  .proj-card--cpm {
    top: 0.00vw;
    left: 40.89%;
    width: 56.98%;
  }

  /* foto visible x785-1879 del PDF */
  .proj-card--cpm .proj-card__media {
    height: 53.44vw;
  }

  .proj-card--cpm .proj-card__media img {
    object-position: center;
  }

  .proj-card--canroig {
    top: 70.00vw;
    left: 2.03%;
    width: 51.61%;
  }

  /* foto visible x39-1030, top y4258 (no el bbox 4177) */
  .proj-card--canroig .proj-card__media {
    height: 68.96vw;
  }

  .proj-card--canroig .proj-card__media img {
    object-position: center;
  }

  .proj-card--esmoro {
    top: 152.24vw;
    left: 76.4%;
    width: 21.45%;
  }

  .proj-card--esmoro .proj-card__media {
    height: 32.24vw;
  }

  .proj-card--naverdal {
    top: 183.28vw;
    left: 1.98%;
    width: 45.73%;
  }

  .proj-card--naverdal .proj-card__media {
    height: 33.75vw;
  }

  .proj-card--sonramon {
    top: 225.52vw;
    left: 47.60%;
    width: 22.50%;
  }

  .proj-card--sonramon .proj-card__media {
    height: 33.75vw;
  }

  .proj-card--namartina {
    top: 282.92vw;
    left: 48.49%;
    width: 49.38%;
  }

  .proj-card--namartina .proj-card__media {
    height: 32.92vw;
  }
}

/* Hover: revela nada por defecto; interacción opcional */
@media (hover: hover) {
  .proj-card:hover .proj-card__link {
    opacity: 0.55;
  }
}

/* --- Es Comptés (full-bleed) + LET'S TALK -------------------------------- */
.projects-cta {
  position: relative;
}

.projects-cta__media {
  aspect-ratio: 1920 / 1853;
  overflow: hidden;
}

/* alto ajustado: el footer sube a tocar la tarjeta como el PDF */
.projects-cta__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.projects-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-cta__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2.1% clamp(0.5rem, 2vw, 2.1rem);
  color: var(--c-ink);
}

.projects-cta .lets-talk {
  position: absolute;
  right: 11.7%;
  bottom: 0;
  height: 25vw;
  /* base de la tarjeta a ras del footer, como el PDF (card y10851–11331 = borde del footer) */
  flex-direction: column;
}

@media (max-width: 63.99rem) {
  .projects-lead {
    padding-top: 0;
  }

  .projects-lead>.container {
    padding-inline: 1.25rem;
  }

  .projects-lead__intro {
    top: 52%;
    width: 90%;
    max-width: 34rem;
    margin-top: 0;
    font-size: clamp(0.78rem, 3.3vw, 0.95rem);
    line-height: 1.16;
    transform: none;
  }

  .projects-lead__title {
    top: 17.7vw;
    font-size: clamp(3rem, 9.375vw, 15rem);
    line-height: 0.86;
    white-space: normal;
  }

  .projects-lead__intro .brk {
    display: none;
  }

  .projects-hero {
    height: 70vw;
    margin-top: 0;
  }

  .projects-hero::after {
    background: rgba(0, 0, 0, 0.34);
  }

  .projects-cta {
    display: grid;
    grid-template-rows: auto auto;
    margin-top: clamp(2rem, 6vw, 5rem);
  }

  .projects-cta__media {
    grid-row: 1;
    grid-column: 1;
    aspect-ratio: 4 / 3;
  }

  .projects-cta__label {
    grid-row: 2;
    grid-column: 1;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--c-cream);
  }

  .projects-cta .lets-talk {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    justify-self: end;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: 12.4%;
    height: 25vw;
    min-width: 0;
    margin-right: 11.5%;
    padding: 1.4vw 0;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .projects-cta .lets-talk {
    width: 11.8%;
    margin-right: 11.7%;
  }
}