/* =====================================================================
   PROYECTO  ·  vídeo + ficha + crew + texto + rejilla + botón
   Tamaños y anchos: ajustes.css sección 5 (--video-... y --proyecto-...)
   La rejilla en sí está en base.css (.rejilla-cine)
   ===================================================================== */

/* ---- 1. Vídeo centrado, 16:9; la ficha comienza tras el primer pantallazo ---- */
.proyecto__video {
  width: 100%;
  min-height: 100svh;
  padding-top: var(--video-inicio);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.proyecto__reproductor {
  width: min(var(--video-ancho), calc(var(--video-alto-max) * var(--video-formato)));
  aspect-ratio: var(--video-formato);
  background: #000;
}
.proyecto__reproductor iframe,
.proyecto__reproductor video {
  width: 100%; height: 100%; border: 0; display: block;
  object-fit: contain;
}
.proyecto__videos-elegir {
  display: flex; justify-content: center; gap: 1.1rem;
  padding-top: 12px;
  font: 12px Arial, sans-serif; letter-spacing: .12em;
}
.proyecto__videos-elegir button { opacity: .55; padding: 5px 2px; }
.proyecto__videos-elegir button[aria-pressed="true"] { opacity: 1; border-bottom: 1px solid currentColor; }
.proyecto__videos-elegir button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---- 2. Ficha: título, directed by, produced by, año ---- */
.proyecto__ficha {
  text-align: center;
  font-family: var(--fuente-texto);
  padding: clamp(15px, 2.5vh, 28px) var(--margen) 0;
}
/* si el proyecto no tiene vídeo, la ficha empieza más abajo (el menú es fijo) */
.sin-video .proyecto__ficha { padding-top: clamp(150px, 24vh, 240px); }

.proyecto__titulo {
  font-family: var(--titulo-fuente); font-size: var(--titulo-tam);
  font-weight: var(--titulo-peso); font-style: var(--titulo-estilo);
  font-synthesis: weight style;
  letter-spacing: var(--titulo-espaciado); text-transform: uppercase;
  line-height: 1.2;
}
.proyecto__linea {
  font-size: var(--proyecto-tam-ficha);
  color: var(--color-suave);
  letter-spacing: .06em;
  margin-top: .5em;
}

/* ---- 3. Crew: a dos columnas ---- */
.proyecto__crew {
  width: min(100%, var(--proyecto-ancho-crew));
  margin: clamp(30px, 5vh, 60px) auto 0;
  padding: 0 var(--margen);
  columns: 2; column-gap: 3em;
  font-size: var(--proyecto-tam-crew);
  color: var(--color-suave);
  line-height: 1.7;
}
.proyecto__crew p { break-inside: avoid; }

/* ---- 4. Texto sobre la película (a la izquierda) ---- */
.proyecto__texto {
  width: min(100%, var(--proyecto-ancho-texto));
  margin: clamp(30px, 5vh, 60px) 0 clamp(50px, 9vh, 110px);
  padding: 0 var(--margen);
  text-align: left;
  font-size: var(--proyecto-tam-texto);
  line-height: 1.75;
}
.proyecto__texto p + p { margin-top: 1em; }

/* si no hay crew ni texto, la rejilla no se pega a la ficha */
.proyecto__ficha + .rejilla-cine,
.proyecto__crew + .rejilla-cine { margin-top: clamp(40px, 8vh, 100px); }

/* Las entradas de la filmografía que aún no tienen fotos conservan una ficha limpia. */
.sin-fotos main { min-height: 100svh; display: flex; flex-direction: column; }
.sin-fotos .pie-contacto { margin-top: auto; }

/* ---- 5. Rejilla de fotos ---- */
.proyecto-cine {
  --cols: var(--proyecto-columnas);
  --formato: var(--proyecto-formato);
}
@media (max-width: 700px) { .proyecto-cine { --cols: var(--proyecto-columnas-movil); } }

.proyecto-cine .celda { cursor: zoom-in; }
.proyecto-cine .celda-video { cursor: auto; }

/* ---- 6. Botón "Start a conversation" ---- */
.pie-contacto {
  display: flex; justify-content: center;
  padding: clamp(60px, 12vh, 140px) var(--margen) calc(var(--margen) * 3 + 2rem);
}
.boton-contacto {
  font-family: var(--fuente-texto);
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 1em 2.6em;
  transition: background .35s, color .35s;
}
.boton-contacto:hover { background: var(--color-tinta); color: var(--color-fondo); }

/* con franja: pegada justo debajo de la última foto, sin hueco */
.pie-contacto--franja { display: block; padding: 0; }
.no-encontrado { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--color-suave); }

@media (max-width: 700px) {
  .proyecto__video { min-height: 0; padding-top: clamp(105px, 15vh, 135px); padding-bottom: clamp(28px, 5vh, 48px); }
  .proyecto__reproductor { width: 90vw; }
  .proyecto__crew { columns: 1; }
  .proyecto__ficha { padding-top: clamp(30px, 5vh, 60px); }
}