/* ------------------------------------
   Home layout
------------------------------------ */

.home {
  width: 100%;
}

/* ------------------------------------
   Intro
------------------------------------ */

.home-intro {
  padding: 0 var(--page-padding) var(--intro-bottom);
  margin-top: var(--header-spacing);
}

.home-intro__text {
  grid-column: 1 / -1;
  font-family: var(--font-serif);
  font-size: var(--fs-serif);
  font-weight: var(--fw-serif);
  line-height: var(--lh-serif);
  letter-spacing: var(--tracking-serif);
  transform: rotate(-0.8deg);
  transform-origin: left top;
}

/* ------------------------------------
   Projects list
------------------------------------ */

.projects-list {
  width: 100%;
}

.project-row {
  width: 100%;
  margin-bottom: var(--row-gap);
}

.project-row:last-child {
  margin-bottom: 0;
}

.project-row__link {
  display: block;
}

/* ------------------------------------
   Project meta
------------------------------------ */

.project-row__meta {
  padding: 0 var(--page-padding);
  align-items: end;
  margin-bottom: 8px;
}

.project-row__name {
  grid-column: 1 / span 4;
}

.project-row__services {
  grid-column: 7 / span 4;
}

.project-row__year {
  grid-column: 18 / span 1;
  justify-self: end;
  text-align: right;
}

.project-row__name,
.project-row__services,
.project-row__year {
  font-family: var(--font-sans);
  font-size: var(--fs-sans);
  font-weight: var(--fw-sans);
  line-height: var(--lh-sans);
  letter-spacing: var(--tracking-sans);
}

/* Hover state for project row */

.project-row:hover .project-row__name,
.project-row:hover .project-row__services,
.project-row:hover .project-row__year {
  color: var(--color-hover-blue);
}

/* ------------------------------------
   Project thumbnails
------------------------------------ */

.project-row__strip {
  padding: 0 var(--page-padding);
  align-items: start; /* clave */
}

.project-row__strip .thumb {
  overflow: hidden;
  border: 0;
  background: transparent;
  height: auto;
  align-self: start; /* clave */
}

/* IMPORTANTE: sobrescribe global.css */
.project-row__strip .thumb img,
.project-row__strip .thumb video {
  display: block;
  width: 100%;
  height: auto;        /* clave */
  object-fit: initial; /* evita recorte */
}

/* Placeholder (mantiene proporción mientras no hay imagen) */
.project-row__strip .thumb--placeholder {
  background: var(--color-placeholder);
  aspect-ratio: 4 / 5;
}

/* Thumbnail layout on 18-column grid */

.project-row__strip .thumb:nth-child(1) {
  grid-column: 1 / span 2;
}

.project-row__strip .thumb:nth-child(2) {
  grid-column: 3 / span 2;
}

.project-row__strip .thumb:nth-child(3) {
  grid-column: 5 / span 2;
}

.project-row__strip .thumb:nth-child(4) {
  grid-column: 7 / span 2;
}

.project-row__strip .thumb:nth-child(5) {
  grid-column: 9 / span 2;
}

.project-row__strip .thumb:nth-child(6) {
  grid-column: 11 / span 2;
}

.project-row__strip .thumb:nth-child(7) {
  grid-column: 13 / span 2;
}

.project-row__strip .thumb:nth-child(8) {
  grid-column: 15 / span 2;
}

.project-row__strip .thumb:nth-child(9) {
  grid-column: 17 / span 2;
}

/* ------------------------------------
   Responsive
------------------------------------ */

@media (max-width: 767px) {
  .home-intro {
    padding: 0 var(--page-padding) 48px;
  }

  .home-intro__text {
    grid-column: 1 / -1;
    line-height: var(--lh-serif);
  }

  .project-row__meta {
    row-gap: 6px;
    align-items: end;
  }

  .project-row__name {
    grid-column: 1 / span 4;
    text-align: left;
  }

  .project-row__services {
    grid-column: 5 / span 4;
    text-align: left;
  }

  .project-row__year {
    grid-column: 9 / -1;
    text-align: right;
    justify-self: end;
  }

  /* solo primeras 5 imágenes */
  .project-row__strip .thumb:nth-child(n+6) {
    display: none;
  }

  /* layout móvil */
  .project-row__strip .thumb:nth-child(n) {
    grid-column: span 2;
  }
}