/*
  work.css
  Trabajo (listado masonry + CTA "Explora otros proyectos") y las páginas de caso
  individuales (portada, contexto/contribución/sistema/aplicaciones, marcas de MEG,
  navegación entre casos) — siguiendo wireframes/png/02 a 07.
*/

.work-hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-l);
}

.work-hero h1 {
  max-width: 50rem;
}

.masonry--work .project-card-masonry {
  display: flex;
  flex-direction: column;
}

/* Turbo Llantas / Cavanevla / Mareazul + el panel de CTA: grilla propia de 3 columnas en
   formato "ladrillo" (referencia visual de Santiago) — angosta + ancha en la fila de arriba,
   ancha + angosta en la de abajo, las 4 piezas a la misma altura. No reutiliza la grilla de
   4 columnas de BF/MEG porque 1+2 no llena 4 columnas exactas (dejaría una columna vacía);
   en 3 columnas, angosta(1) + ancha(2) = 3, sin huecos en ninguna de las 2 filas. */
.masonry--work-bottom {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 12px;
  /* Un poco más de aire con el texto de BF/MEG justo arriba (margin-bottom del bloque
     anterior y este margin-top colapsan al mayor de los dos: antes ambos daban 40px, esto
     lo sube a 56px — solo un empujón chico, no un salto grande). */
  margin-top: 3.5rem;
}

/* El panel de CTA necesita este alto real para su contenido (título + descripción + botón,
   con su padding) sin que el texto se corte ni le sobre demasiado aire — y las 4 piezas de
   esta fila comparten un único alto, así que todas usan este mismo valor. */
.masonry--work-bottom .masonry__item {
  grid-row-end: span 12;
}

.masonry__item--brick-wide {
  grid-column: span 2;
}

@media (max-width: 60rem) {
  .masonry--work-bottom {
    grid-template-columns: 1fr;
  }

  .masonry--work-bottom .masonry__item--brick-wide {
    grid-column: span 1;
  }
}

.project-card-masonry {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.project-card-masonry .media-placeholder {
  flex: 1 1 auto;
  min-height: 10rem;
  border-radius: var(--radius-l);
}

/* Portada real (mismo criterio que .media-placeholder de arriba: crece para llenar el alto
   disponible de la tarjeta dentro del flex column). Clase separada porque, a diferencia del
   marcador, no lleva relleno ni fondo propio — solo recorta la imagen real. */
.project-card-masonry__media {
  flex: 1 1 auto;
  min-height: 10rem;
  border-radius: var(--radius-l);
  overflow: hidden;
}

.project-card-masonry__media .media-real {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-card-masonry__text {
  padding-top: var(--space-s);
}

/* Portada del caso: dentro de .section-block para heredar el margen central */
.case-hero {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-m);
}

.case-hero h1 {
  margin-top: var(--space-2xs);
}

.case-hero__subhead {
  color: var(--color-text-muted);
  font-size: var(--font-size-h3);
  margin: 0;
}

.case-cover-block {
  padding-top: 0;
  padding-bottom: var(--space-l);
}

/* padding-top:0 porque .case-cover-block ya aporta aire arriba. padding-bottom:0 por el mismo
   motivo del otro lado: antes existía un bloque de "Siguiente caso" después de este
   contenedor, y su .section-block propio sumaba otro var(--space-xl) completo a los dos que
   ya ponían .case-section (la última sección) y este mismo .case-body, dejando un hueco muy
   grande antes del pie de página. Sin ese bloque, el padding-bottom de la última
   .case-section (var(--space-xl) más abajo) ya es suficiente separación antes del footer. */
.case-body {
  padding-top: 0;
  padding-bottom: 0;
}

.case-section {
  padding-bottom: var(--space-xl);
}

.case-section p {
  max-width: 42rem;
}

.case-section--divider {
  border-bottom: 1px solid var(--color-border);
}

/* Contexto + Contribución (o cualquier par de secciones seguidas que sean solo texto, sin
   galería): en vez de apilarse a ancho completo dejando la mitad derecha vacía, van una al
   lado de la otra. */
/* padding-bottom: mismo aire que deja una .case-section sola (var(--space-xl)) antes de lo
   que sigue. Antes solo lo tenía la variante --divider (para no pegar la línea al texto de
   abajo): un par sin divisor —p. ej. Contexto+Sistema en Mareazul o Turbo Llantas, sin nada
   entre medio— se apilaba directo contra el siguiente encabezado, sin aire ninguno. */
.case-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
}

.case-text-row .case-section {
  padding-bottom: 0;
}

.case-text-row--divider {
  border-bottom: 1px solid var(--color-border);
}

/* La línea del divisor quedaba pegada al eyebrow de la sección siguiente (sin nada de aire
   entre la línea y "Sistema"): esto le agrega separación solo después de un divisor, sin
   tocar el espaciado del resto de secciones. */
.case-section--divider + .case-section,
.case-text-row--divider + .case-section,
.case-text-row--divider + .case-text-row {
  padding-top: var(--space-l);
}

@media (max-width: 46rem) {
  .case-text-row {
    grid-template-columns: 1fr;
    gap: 0;
    /* En celular el aire de salida ya lo da cada sección apilada (var(--space-l) abajo);
       sin este reset, el padding-bottom nuevo de la fila (var(--space-xl), pensado para
       escritorio) se sumaría al de la última sección y dejaría un salto exagerado. */
    padding-bottom: 0;
  }

  .case-text-row .case-section {
    padding-bottom: var(--space-l);
  }
}

.case-section--brand h2 {
  margin-top: var(--space-2xs);
}

.case-nav {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-l);
}

.case-nav .link-arrow {
  font-size: var(--font-size-h3);
  font-weight: 500;
}

.archive-entry__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin: 0 0 var(--space-l);
}

@media (max-width: 46rem) {
  .work-hero,
  .case-hero {
    padding-top: var(--space-l);
  }
}