/* La home: el grid de casillas. */

.grid {
  display: grid;
  container-type: inline-size;
  grid-template-columns: repeat(3, 1fr);
  /* la altura de fila sale del ancho de columna, para que la casilla sea 16:9
     y la casilla doble (2x2) sea otro 16:9 el doble de grande */
  grid-auto-rows: calc((100cqw - var(--gap) * 2) / 3 * 0.5625);
  gap: var(--gap);
  grid-auto-flow: row dense;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #151515;
}

/* los proyectos destacados ocupan dos columnas y dos filas, alternando lado */
.tile--big { grid-column: span 2; grid-row: span 2; }
.tile--big.tile--right { grid-column: 2 / span 2; }

.tile__still,
.tile__loop {
  position: absolute;
  inset: 0;
  transition: opacity var(--dur) ease;
}

.tile__loop { opacity: 0; }
.tile.is-playing .tile__loop { opacity: 1; }
.tile.is-playing .tile__still { opacity: 0; }

.tile__meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .6rem;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  transition: opacity var(--dur) ease;
}

/* el rótulo se ve siempre y se esconde mientras la casilla está activa
   (hover en escritorio, la del centro en móvil) */
.tile.is-active .tile__meta { opacity: 0; }

.tile__meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile__meta span:first-child { flex: 0 1 auto; }
.tile__meta span:last-child { flex: 1 1 auto; text-align: right; color: var(--fg-dim); }
.tile__meta span:only-child { flex: 1 1 auto; }

/* en las casillas sencillas no caben cliente y título en una línea (se
   cortaban con "…"): van uno encima del otro */
.tile:not(.tile--big) .tile__meta { flex-direction: column; gap: .15rem; }
.tile:not(.tile--big) .tile__meta span:last-child { text-align: left; }

/* en las dobles, el rótulo crece con la casilla */
.tile--big .tile__meta { font-size: 1.05rem; padding: .8rem 1rem; }

@media (max-width: 720px) {
  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: calc(100cqw * 0.5625);
  }
  .tile--big, .tile--big.tile--right { grid-column: auto; grid-row: auto; }
  /* en móvil todas miden igual: una línea y el mismo tamaño */
  .grid .tile .tile__meta { flex-direction: row; gap: .75rem; font-size: .7rem; padding: .35rem .4rem; letter-spacing: .04em; }
  .grid .tile .tile__meta span:last-child { text-align: right; }
}