/* La home: el filtro (arriba a la izquierda) y el grid de casillas. */

/* en la esquina de la página, a la altura del "about" de la derecha */
.filtro {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
}
.filtro__op {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-transform: lowercase;
  color: var(--fg-dim);
  cursor: pointer;
}
.filtro__op:hover,
.filtro__op[aria-pressed="true"] { color: var(--fg); }

.tile[hidden] { display: none; }

/* mucho negro entre casillas: las filas se separan más que las columnas,
   porque cada casilla lleva su rótulo debajo */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.25rem;
  row-gap: 2.5rem;
  grid-auto-flow: row dense;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* 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: -3 / -1; }

.tile__media {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #151515;
}

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

/* el still entra con fundido al cargar (.ok, de js/transicion.js; sin JS se
   ve sin más); el loop, al arrancar el hover */
.js .tile__still,
.tile__loop { opacity: 0; }
.tile__still.ok { opacity: 1; }
.tile.is-playing .tile__loop { opacity: 1; }
.tile.is-playing .tile__still { opacity: 0; }

/* el rótulo, pequeño y (prueba) debajo de la imagen: CLIENTE   TÍTULO, en DM Sans.
   Para volver a ponerlo encima, quitar el order */
.tile__meta {
  order: 1;
  display: flex;
  gap: 1.6em;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: .8rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tile__meta span { overflow: hidden; text-overflow: ellipsis; }
.tile__meta span:last-child:not(:first-child) { color: var(--fg-dim); }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  /* en una columna: cliente a la izquierda, proyecto a la derecha */
  .tile__meta { justify-content: space-between; }
  .tile__meta span:last-child:not(:first-child) { text-align: right; }
  .tile--big, .tile--big.tile--right { grid-column: auto; grid-row: auto; }
}