/* cabecalho
   O topo da pagina: linha de contexto, titulo, chamada e fita de cores. Depende de tokens.css e base.css. */

/* duas colunas: o titulo a esquerda, a chamada a direita, e a fita atravessando as duas por baixo.
   No HTML a fita vem por ultimo porque e enfeite: o grid so a coloca no lugar. */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 56px);
  row-gap: 16px;
  align-items: start;
}

/* a linha miuda acima do titulo, que diz onde o visitante esta */
.eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* na pagina de etapa a linha de contexto carrega o caminho de volta */
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--accent); text-decoration: underline; }

.head h1 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.5vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* a chamada: ocupa a coluna da direita e fica centrada na altura do titulo */
.lede {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  font-size: 1.06rem;
  color: var(--ink-soft);
}

.lede strong {
  color: var(--ink);
  font-weight: 600;
}

/* a fita: as sete barras num gradiente de faixas duras, sem sete elementos vazios no HTML */
.bars {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 14px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--fita-1) 0 14.285%,
    var(--fita-2) 0 28.571%,
    var(--fita-3) 0 42.857%,
    var(--fita-4) 0 57.142%,
    var(--fita-5) 0 71.428%,
    var(--fita-6) 0 85.714%,
    var(--fita-7) 0
  );
}

/* no estreito nao cabem duas colunas: tudo empilha na ordem em que esta escrito no HTML */
@media (max-width: 860px) {
  .head {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .eyebrow,
  .head h1,
  .lede,
  .bars {
    grid-column: 1;
    grid-row: auto;
  }

  .eyebrow { margin-bottom: -6px; }
}