/* Roberti — tira de obras na home.
   A galeria completa saiu da home e virou /obras (decisão do Gustavo em 12/08, em
   alteracoes.md). Aqui fica só a prova: seis obras e um link. Sem o visor, sem a lista
   por cidade, sem o ampliar — quem quer navegar vai para a página.

   Capítulo escuro, entre dois claros. Os dados são os mesmos de obras.json. */
@import url("marca.css");

.tira-obras {
  background: var(--tinta-fundo);
  color: var(--papel);
  font-family: var(--fonte-texto);
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
}
.tira-interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  position: relative;   /* acima do padrão de fundo */
}

.tira-topo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(20px, 2.8vw, 36px);
  border-bottom: 1px solid var(--papel-12);
}
.tira-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--claro);
  margin: 0 0 12px;
}
.tira-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(26px, 4.2vw, 50px);
  line-height: 1.04;
  letter-spacing: var(--tracking-titulo);
  margin: 0;
}
.tira-titulo b { font-weight: 400; }
.tira-todas {
  font-family: var(--fonte-titulo);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--papel);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--papel-55);
  white-space: nowrap;
  transition: border-color .2s, gap .2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.tira-todas:hover, .tira-todas:focus-visible { border-color: var(--claro); gap: 15px; }

/* 3 colunas, não auto-fill: com auto-fill davam 4 colunas e os seis cartões caíam
   em 4+2, com dois buracos na segunda fila. Três fecha duas filas cheias. */
.tira-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
@media (max-width: 1000px) { .tira-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .tira-lista { grid-template-columns: 1fr; } }
.tira-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
  background: #ffffff0a;
}
.tira-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.tira-card:hover img, .tira-card:focus-visible img { transform: scale(1.04); }
.tira-card:focus-visible { outline: 2px solid var(--claro); outline-offset: 3px; }
/* o degradê existe para o texto: sobre foto crua ele não se sustenta */
.tira-card figcaption {
  position: absolute; inset: auto 0 0;
  padding: clamp(28px, 4vw, 44px) clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 16px);
  background: linear-gradient(0deg, #16162ee6 12%, #16162e00);
}
.tira-nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--papel);
}
.tira-cidade {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--papel-85);
}

@media (prefers-reduced-motion: reduce) {
  .tira-card img, .tira-todas { transition: none; }
}