/*
 * Página Projetos. Mesmo mundo da home (tokens, grade, fios, ficha);
 * composição própria: a seleção em três escalas e o índice tipográfico
 * com a foto que segue o cursor.
 */

/* buraco no artefato: dado que ainda falta, à vista */
.lacuna { color: var(--color-accent-deep); }

/* ================= Topo ================= */
.pj-topo { padding-top: var(--sp-8); }
.pj-topo__word { margin-bottom: var(--sp-7); }
.pj-topo__grid { row-gap: var(--sp-5); align-items: end; }
.pj-topo__title { grid-column: 1 / 6; }
.pj-topo__texto { grid-column: 8 / 13; max-width: 36rem; }

/* ================= Seleção: três escalas ================= */
.destaques { margin-top: var(--sp-8); }
.destaques__grid { row-gap: var(--sp-7); align-items: start; }
.destaque {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.destaque__media { display: block; width: 100%; aspect-ratio: 4 / 5; }
.destaque__media img { transition: transform 1.2s var(--ease-out-expo); }
.destaque--a { grid-column: 1 / 7; grid-row: 1 / 3; }
.destaque--b { grid-column: 8 / 11; grid-row: 1; margin-top: clamp(4rem, 12vw, 13rem); }
.destaque--c { grid-column: 9 / 13; grid-row: 2; align-self: end; }
.destaque--c .destaque__media { aspect-ratio: 1; }
.destaque__legenda { display: grid; gap: 2px; margin-top: var(--sp-4); }
.destaque__name { color: var(--color-ink-1); }
.card.is-flipping .destaque__media { visibility: hidden; }
@media (hover: hover) {
  .destaque:hover .destaque__media img { transform: scale(1.04); }
}

/* ================= Índice ================= */
.indice { margin-top: var(--sp-section); }
.indice__head { row-gap: var(--sp-5); align-items: end; }
.indice__title { grid-column: 1 / 6; }
.indice__texto { grid-column: 9 / 13; display: grid; gap: var(--sp-4); max-width: 32rem; }
.indice__conta { color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }
.indice__lista { margin-top: var(--sp-7); }

.linha__btn {
  width: 100%;
  align-items: center;
  padding-block: clamp(20px, 2.2vw, 36px);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms var(--ease-out-expo);
}
.linha__num { grid-column: 1; color: var(--color-dim); font-variant-numeric: tabular-nums; }
.linha__thumb { display: none; }
.linha__name {
  grid-column: 2 / 9;
  transition: transform .8s var(--ease-out-expo), color var(--motion-fast) var(--motion-ease);
}
.linha__field { grid-column: 9 / 12; }
.linha__ver {
  grid-column: 12 / 13;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-mut);
  white-space: nowrap;
  transition: color var(--motion-fast) var(--motion-ease);
}
.linha__ver svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.linha__btn:focus-visible { outline-offset: -2px; }

@media (hover: hover) and (pointer: fine) {
  .indice__lista:hover .linha__btn:not(:hover) { opacity: .3; }
  .linha__btn:hover .linha__name { transform: translateX(calc(var(--gutter) * 2)); }
  .linha__btn:hover .linha__ver { color: var(--color-accent); }
}

/* espia: a foto que segue o cursor, só com mouse */
.espia {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-header) + 1);
  width: clamp(220px, 19vw, 340px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(100% 0% 0% 0%);
  background: var(--color-surface);
}
.espia__inner { position: absolute; inset: 0; }
.espia__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .espia { display: none; }
}

/* ================= Tablet ================= */
@media (max-width: 991px) {
  .pj-topo__title, .pj-topo__texto { grid-column: 1 / -1; }
  .indice__title, .indice__texto { grid-column: 1 / -1; }
  .linha__name { grid-column: 2 / 10; }
  .linha__field { grid-column: 10 / 13; }
  .linha__ver { display: none; }
}

/* sem mouse: a miniatura toma o lugar da espia */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .linha__btn { row-gap: 4px; padding-block: var(--sp-4); }
  .linha__thumb { display: block; grid-column: 1 / 3; grid-row: 1 / 4; aspect-ratio: 4 / 5; align-self: start; }
  .linha__num { grid-column: 3 / 13; grid-row: 1; }
  .linha__name { grid-column: 3 / 13; grid-row: 2; }
  .linha__field { grid-column: 3 / 13; grid-row: 3; }
  .linha__ver { display: none; }
}

/* ================= Celular ================= */
@media (max-width: 767px) {
  .pj-topo { padding-top: var(--sp-6); }
  .pj-topo__word { margin-bottom: var(--sp-6); }
  .destaques { margin-top: var(--sp-7); }
  .destaques__grid { row-gap: var(--sp-6); }
  .destaque--a { grid-column: 1 / -1; grid-row: 1; }
  .destaque--b { grid-column: 1 / 7; grid-row: 2; margin-top: var(--sp-8); }
  .destaque--c { grid-column: 7 / 13; grid-row: 2; align-self: start; }
  .linha__thumb { grid-column: 1 / 4; }
  .linha__num, .linha__name, .linha__field { grid-column: 4 / 13; padding-left: var(--sp-2); }
  .linha__name { font-size: clamp(1.75rem, 8.5vw, 2.5rem); }
}