/* Estilo das páginas de projeto que rodam no portfólio (mesmos tokens da revista). */
@import url("../../style.css");

.pagina { max-width: var(--largura); margin: 0 auto; padding: 0 1.5rem 4rem; }
.pagina > header { padding: 3rem 0 2rem; border-bottom: 1px solid var(--regua); }
.pagina h1 { font: 400 clamp(2rem, 5vw, 3.2rem)/1.05 var(--serif); margin: .6rem 0 1rem; max-width: 22ch; }
.pagina .linha-fina { font: .82rem var(--mono); color: var(--suave); }
.pagina .linha-fina a { color: var(--suave); }

.exemplo { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--regua); }
.exemplo h2 { font: 500 1.5rem/1.2 var(--serif); margin: 0 0 .6rem; }
.exemplo p { max-width: 42rem; margin: 0 0 1rem; }

.lado { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.2rem; }
.lado > div { min-width: 0; }
.lado h3 { font: 500 .74rem var(--mono); color: var(--suave); margin: 0 0 .4rem; text-transform: lowercase; }

pre.codigo, pre.saida {
  margin: 0; padding: 1rem; overflow: auto; max-height: 26rem;
  font: .78rem/1.55 var(--mono); tab-size: 4;
  border: 1px solid var(--regua); background: color-mix(in srgb, var(--papel) 92%, var(--tinta));
}
pre.saida { min-height: 6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.exemplo > div { min-width: 0; }
.controles label { max-width: 100%; }
.controles input[type=text] { max-width: 100%; }
pre.saida:empty::before { content: "(aperte rodar)"; color: var(--suave); }

.controles { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: end; margin: 1rem 0; }
.controles label { display: flex; flex-direction: column; gap: .2rem; font: .74rem var(--mono); color: var(--suave); }
.controles input[type=text], .controles input[type=number], .controles select, .controles textarea {
  font: .9rem var(--sans); color: var(--tinta); background: transparent;
  border: 0; border-bottom: 1px solid var(--suave); padding: .25rem 0; min-width: 7rem; border-radius: 0;
}
.controles textarea { font: .8rem var(--mono); width: 100%; min-height: 7rem; border: 1px solid var(--regua); padding: .5rem; }
.controles .marca { flex-direction: row; align-items: center; gap: .4rem; }
.botao {
  font: 500 .82rem var(--mono); color: var(--papel); background: var(--tinta);
  border: 0; padding: .55rem .9rem; cursor: pointer;
}
.botao:hover { background: var(--destaque); }
.botao.leve { background: none; color: var(--tinta); border-bottom: 1px solid var(--destaque); padding: .3rem 0; }
.nota-tecnica { font: .8rem var(--mono); color: var(--suave); max-width: 42rem; }

@media (max-width: 720px) {
  .pagina { padding: 0 1rem 3rem; }
  .exemplo { grid-template-columns: 1fr; gap: 1rem; }
  .lado { grid-template-columns: 1fr; }
}