/* ==========================================================
   Projects — galeria e páginas de projeto
   (usa variáveis do styles.css e componentes do about.css)
   ========================================================== */

/* ---------- Galeria ---------- */

.projects-head .hero__text { margin-top: var(--space-3); }

/* filtros */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-4) 0 var(--space-5);
}

.filter {
  appearance: none;
  padding: 0 var(--space-2);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  min-height: 40px;
}

.filter:hover { background: var(--surface); color: var(--text); }

.filter[aria-pressed="true"] {
  background: var(--red-soft);
  border-color: transparent;
  color: var(--red);
}

.filter:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* cards (base em styles.css) */
.card[hidden] { display: none; }
.card__tags { margin: var(--space-1) 0 0; }

.gallery-cta { margin-top: var(--section-gap); }

/* ---------- Página de projeto ---------- */

/* botão "Back to gallery" no topo de cada projeto */
.back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: transform 0.2s, color 0.2s;
}

.back:hover { color: var(--red); transform: translateX(-4px); }

.case { display: flex; flex-direction: column; gap: var(--section-gap); }

.project-head .hero__text { margin-top: var(--space-3); }

/* ficha técnica */
.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.meta__item {
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.meta__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
}

.meta__value {
  display: block;
  margin: var(--space-half) 0 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}

/* capa */
.cover {
  margin: var(--space-5) 0 0;
  aspect-ratio: 16 / 9;
  background: var(--gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cover img { width: 100%; height: 100%; object-fit: cover; }

/* Capa e telas só aparecem quando têm imagem: basta adicionar a <img> */
.cover:not(:has(img)),
.block:has(.screens):not(:has(img)) { display: none; }

/* texto corrido */
.prose {
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

.prose p { margin: 0 0 var(--space-2); }
.prose p:last-child { margin-bottom: 0; }

/* problema e objetivo */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.note {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.note--filled { background: var(--red-soft); border-color: transparent; }

.note__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--blue);
}

.note p { margin: 0; font-size: 1rem; line-height: var(--lh-body); color: var(--text); }

/* fluxo de telas: fluxos largos rolam na horizontal em telas estreitas */
.flow {
  overflow-x: auto;
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-md);
}

.flow img { width: 100%; min-width: 720px; height: auto; }

.flow__open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--red);
}

/* telas finais */
.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

/* telas de desktop: três por linha */
.screens--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.screen { margin: 0; }

.screen__img {
  aspect-ratio: 9 / 19;
  background: var(--gray);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.screen__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.screen figcaption {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: center;
  color: var(--ink-soft);
}

/* aprendizados */
.takeaways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.takeaway {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.takeaway__title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue);
}

.takeaway p { margin: 0; line-height: var(--lh-body); color: var(--text); }

.takeaway .timeline__star {
  position: static;
  display: block;
  width: 24px;
  height: 24px;
}

/* anterior / próximo */
.next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* ---------- Responsivo ---------- */

@media (max-width: 900px) {
  .duo,
  .takeaways { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .screens, .screens--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .note, .takeaway { padding: var(--space-3); }
  .next { flex-direction: column; }
  .next .btn { justify-content: center; }
}