/* ==========================================================================
   pages/project.css — las 6 páginas de proyecto
   --------------------------------------------------------------------------
   Studio Swift, White Rabbit Group, Enterprise Design Systems,
   The Game Awards, Information Security Platform y Move On comparten la
   misma estructura: cabecera, imagen de portada, y una pila de bloques que
   alternan texto a dos columnas con imágenes.

   Lo que cambia de una página a otra es el contenido y cuántos bloques hay,
   no el layout. Por eso hay un solo archivo para las seis.

   La rejilla de «Other Projects» reutiliza .project-row y .project-card
   de components.css, los mismos que la sección Featured work de Home.
   ========================================================================== */

/* ==========================================================================
   1. Cabecera
   ========================================================================== */

/* La fila de metadatos alinea por la base: el nombre de la agencia abajo a
   la izquierda y la lista de disciplinas abajo a la derecha, con 40px de
   aire por encima que empuja la lista hacia abajo. */

.project-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.project-meta__tags {
  padding-top: var(--space-10);
}

/* ==========================================================================
   2. Bloque de contenido a dos columnas
   ========================================================================== */

/* Titular a la izquierda, texto a la derecha, mitad y mitad. */

.project-block {
  display: flex;
  align-items: flex-start;
  padding-top: var(--gap-block);
}

.project-block__title,
.project-block__text {
  flex: 1 1 0;
  min-width: 0;
}

/* La mayoría de bloques solo llevan padding arriba y se apoyan en el de
   abajo del siguiente. Estos dos son las excepciones del Figma. */

/* Cierra con línea divisoria. */
.project-block--ruled {
  padding-bottom: calc(var(--gap-block) + 1px);
  border-bottom: 1px solid var(--color-rule-faint);
}

/* Cierra con aire, sin línea. Típico del último bloque antes de una imagen. */
.project-block--padded {
  padding-bottom: var(--gap-block);
}

/* El Figma separa párrafos con una línea en blanco dentro del mismo
   bloque de texto. Aquí, un margen de una línea. */
.project-block__text p + p {
  margin-top: 1.6em;
}

/* Los pares título-en-negrita + descripción van pegados, con 20px entre
   pares, no la línea en blanco completa. */
.project-block__text--tight p + p {
  margin-top: var(--space-5);
}

.project-block__text strong {
  font-weight: var(--fw-bold);
}

/* Lista con viñetas. Solo aparece en Enterprise Design Systems. */
.project-block__text ul {
  margin: 0;
  padding-left: var(--space-6);
  list-style: disc;
}

/* La lista sigue al párrafo que la introduce, sin línea en blanco. */
.project-block__text p + ul {
  margin-top: 0;
}

/* Nota de confidencialidad: la etiqueta en negro y negrita, el resto en
   cursiva. Solo aparece en Enterprise Design Systems. */
.project-block__text em {
  font-style: italic;
}

.project-block__text .project-block__label {
  color: var(--color-text);
}

/* ==========================================================================
   3. Imágenes
   ========================================================================== */

.project-media {
  padding-top: var(--gap-block);
}

.project-media__frame {
  border-radius: var(--radius-media);
  overflow: hidden;
}

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

/* Los tres tamaños van por proporción, no por alto fijo: a 1200px de
   contenedor dan exactamente el alto del Figma, y por debajo encogen sin
   recortar. Los assets están exportados a 2× de cada frame. */

/* Portada: 620px de alto a 1200 de ancho, radio 24. */
.project-media--cover .project-media__frame {
  aspect-ratio: var(--aspect-media-cover);
}

/* Imagen suelta grande: 800px de alto a 1200 de ancho, radio 20. */
.project-media--tall .project-media__frame {
  aspect-ratio: var(--aspect-media-tall);
  border-radius: var(--radius-card);
}

/* Imagen suelta media: 700px de alto a 1200 de ancho, radio 20. */
.project-media--mid .project-media__frame {
  aspect-ratio: var(--aspect-media-mid);
  border-radius: var(--radius-card);
}

/* El aire sobre la imagen no siempre son 60px: el Figma usa 12 o 0 cuando
   la imagen va pegada al bloque anterior. */
.project-media--tight {
  padding-top: var(--space-3);
}

.project-media--flush {
  padding-top: 0;
}

/* Par de imágenes de 594px con 12px entre ellas. */
.project-media--pair {
  display: flex;
  gap: var(--space-3);
}

.project-media--pair .project-media__frame {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: var(--aspect-media-pair);
  border-radius: var(--radius-card);
}

/* ==========================================================================
   4. Cifras de resultado
   ========================================================================== */

.project-stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  /* El padding-left por defecto de <ul> son 40px: sin resetearlo, las tres
     tarjetas quedan metidas hacia dentro y más estrechas de la cuenta.
     También en escritorio. */
  padding: var(--gap-block) 0 0;
  list-style: none;
  margin: 0;
}

.project-stats__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) 28px;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-card);
  text-align: center;
}

.project-stats__num {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-none);
  color: var(--color-text);
}

/* Incoherencia del Figma, replicada: de las tres cifras solo la primera
   lleva tracking. Las otras dos van sin él. */
.project-stats__num--tracked {
  letter-spacing: var(--ls-stat);
}

.project-stats__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-stat);
  color: var(--color-text);
}

/* ==========================================================================
   5. Other Projects
   --------------------------------------------------------------------------
   No necesita CSS propio: reutiliza .section-head, .project-row y
   .project-card de components.css. Lo único distinto es el h2, que aquí
   es de 72px y no de 64 — incoherencia del Figma que ya recoge la clase
   .t-h2-lg de base.css.
   ========================================================================== */

/* ==========================================================================
   6. Botón dentro de un bloque de texto
   --------------------------------------------------------------------------
   Solo en White Rabbit Group: "View Live Website" va bajo el último párrafo
   de The Result, a 20px. No hereda la separación de párrafo (1.6em) porque
   en el Figma es un hermano del bloque de texto, no otro párrafo.
   ========================================================================== */

.project-block__cta {
  margin-top: var(--space-5);
}

/* ==========================================================================
   7. Sublista de pares título + descripción
   --------------------------------------------------------------------------
   The Game Awards la anida dentro de "My Contribution", con 20px por encima.
   Studio Swift usa el mismo patrón pero como bloque de texto completo, con
   .project-block__text--tight directamente.
   ========================================================================== */

.project-block__list {
  padding-top: var(--space-5);
}

/* ==========================================================================
   8. Par de imágenes verticales
   --------------------------------------------------------------------------
   Solo en Move On: el par mide 594×603 en vez de 594×555. Los assets ya
   vienen exportados a 2× de cada tamaño, así que basta con la proporción.
   ========================================================================== */

.project-media--pair-tall .project-media__frame {
  aspect-ratio: var(--aspect-media-pair-tall);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  /* La lista de disciplinas deja de ir empujada hacia abajo: con menos
     ancho, el nombre de la agencia y las etiquetas casi se tocan. */
  .project-meta__tags {
    padding-top: var(--space-5);
  }

  .project-stats {
    gap: var(--space-3);
  }

  .project-stats__item {
    padding-inline: var(--space-5);
  }
}

@media screen and (max-width: 767px) {
  /* Bloques apilados, con el h2 arriba. El orden del DOM ya es ese.

     `align-items: stretch` es imprescindible: en horizontal el bloque usa
     `flex-start`, y al girar a columna eso encoge cada hijo al ancho de su
     contenido en vez de dejarlo a ancho completo.

     Y `flex: none` porque el `flex: 1 1 0` de escritorio reparte el eje
     principal, que en columna es el ALTO: dejaría los dos hijos con la misma
     altura en vez de la que pide su contenido. */
  .project-block {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
  }

  .project-block__title,
  .project-block__text {
    flex: none;
  }

  .project-block--ruled {
    padding-bottom: calc(var(--gap-block) + 1px);
  }

  .project-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .project-meta__tags {
    padding-top: 0;
  }

  /* El par de imágenes deja de ir lado a lado. */
  .project-media--pair {
    flex-direction: column;
  }

  /* Mismo caso: en fila las tarjetas van centradas verticalmente, y al girar
     a columna `align-items: center` las encogía al ancho de su contenido y
     quedaban de tres tamaños distintos. */
  .project-stats {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .project-stats__item {
    flex: none;
  }
}