/* ============================================================
   Estudio NRV — Páginas de proyecto
   ============================================================ */

/* ── HERO DEL PROYECTO ──────────────────────────────────────── */
.project-hero {
  width: 100%;
  height: 75svh;
  min-height: 420px;
  overflow: hidden;
  position: relative;
}

.project-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── ENCABEZADO ─────────────────────────────────────────────── */
.project-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
}

.project-category {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.project-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 1.75rem;
}

.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.project-meta-item {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.project-meta-item span {
  color: var(--text);
}

/* ── DESCRIPCIÓN ────────────────────────────────────────────── */
.project-description {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}

.project-description p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text);
  max-width: 68ch;
}

.project-description p + p {
  margin-top: 1.5em;
}

@media (min-width: 960px) {
  .project-description {
    max-width: 68ch;
  }
}

/* ── GALERÍA ────────────────────────────────────────────────── */
.project-gallery {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 9rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.gallery-row {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.gallery-row.full    { grid-template-columns: 1fr; }
.gallery-row.half    { grid-template-columns: 1fr 1fr; }
.gallery-row.thirds  { grid-template-columns: 1fr 1fr 1fr; }
.gallery-row.wide    { grid-template-columns: 2fr 1fr; }
.gallery-row.wide-r  { grid-template-columns: 1fr 2fr; }

@media (max-width: 700px) {
  .gallery-row.half,
  .gallery-row.thirds,
  .gallery-row.wide,
  .gallery-row.wide-r { grid-template-columns: 1fr; }
}

.gallery-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-row.full img   { aspect-ratio: 16 / 9; }
.gallery-row.half img   { aspect-ratio: 4 / 3; }
.gallery-row.thirds img { aspect-ratio: 4 / 3; }
.gallery-row.wide  img  { aspect-ratio: auto; min-height: 300px; }
.gallery-row.wide-r img { aspect-ratio: auto; min-height: 300px; }

/* ── VIDEO ──────────────────────────────────────────────────── */
.project-video {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
}

.project-video video,
.project-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
}

/* ── NAVEGACIÓN ENTRE PROYECTOS ─────────────────────────────── */
.project-nav {
  border-top: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-nav-back {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.3s;
}

.project-nav-back:hover { color: var(--text); }

.project-nav-back::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}

.project-nav-back:hover::before { width: 48px; }