/* =============================================================
   FASE 03C — A espinha

   Regra cromática revista:
     preto    = conteúdo
     cinza    = estrutura secundária
     vermelho = assinatura, orientação e atenção

   Nove elementos da página encostam à esquerda e todos estão
   exatamente no mesmo x. Essa coluna é a disciplina da página
   inteira e é a única coisa que liga o hero ao rodapé. A espinha
   não inventa uma linha — torna visível a que já lá estava.

   Três estados:
     sólida     — há conteúdo alinhado a esta coluna
     tracejada  — continua, mas recuou. Nada se lhe alinha aqui.
     ausente    — a página cala-se e entrega o chão ao trabalho

   Que a espinha seja vermelha não promove os restantes filetes:
   as graduações da régua, os filetes de secção e as molduras
   continuam em cinza.

   Desenhada como camadas de background nas secções que já existem:
   zero nós novos no DOM, zero JavaScript, zero reação ao scroll.

   PARA REVERTER: apagar o <link> deste ficheiro no index.html.
   ============================================================= */

@media (min-width: 1100px) {

  .hero,
  .section--work,
  .section--method,
  .section--contact {
    /* Metade da goteira do .wrap — a posição de uma linha de margem
       em composição impressa. A 1440 fica a 64px do ecrã e a 32px do
       conteúdo, sem tocar em nenhum dos dois. Encostá-la à borda
       exterior do .wrap não serve: entre os 1100 e os 1360px o wrap
       ocupa a largura toda e a linha ficaria colada ao ecrã. */
    --spine-x: calc(max(0px, (100% - 1360px) / 2) + var(--gutter) / 2);

    --spine-solid: linear-gradient(var(--accent), var(--accent));

    /* repeating-linear-gradient e não border-dashed: o espaçamento
       do tracejado nativo é decidido pelo browser e não se afina. */
    --spine-dash: repeating-linear-gradient(to bottom,
                    var(--accent) 0 2px, transparent 2px 6px);

    background-repeat: no-repeat;
  }

  /* ---- Hero: sólida, a começar no filete do cabeçalho ----
     O conteúdo do hero fica preso durante os 190svh todos, portanto
     mantém-se alinhado a esta coluna o tempo inteiro. A espinha não
     é sticky: passa por trás do que está preso, porque pertence à
     página e não à camada fixa. */
  .hero {
    background-image: var(--spine-solid);
    background-size: 1px calc(100% - var(--rc-head));
    background-position: var(--spine-x) var(--rc-head);
  }

  /* ---- Trabalho: intervalo, região, intervalo ----
     Três camadas numa só secção. O intervalo de cima é a distância
     que a separa do hero; o de baixo, a que a separa do Método. */
  .section--work {
    background-image: var(--spine-dash), var(--spine-solid), var(--spine-dash);
    background-size:
      1px var(--section-gap),
      1px calc(100% - 2 * var(--section-gap)),
      1px var(--section-gap);
    background-position:
      var(--spine-x) 0,
      var(--spine-x) var(--section-gap),
      var(--spine-x) 100%;
  }

  /* ---- Método e Contacto: região, intervalo ---- */
  .section--method,
  .section--contact {
    background-image: var(--spine-solid), var(--spine-dash);
    background-size:
      1px calc(100% - var(--section-gap)),
      1px var(--section-gap);
    background-position:
      var(--spine-x) 0,
      var(--spine-x) 100%;
  }

  /* ---- A sequência do case: ausente ----
     A única região da página que assume o seu próprio chão. São
     47% da altura total. Além do recuo, há uma razão técnica: uma
     linha a deslizar atrás de uma imagem fixa seria movimento
     periférico — parallax por acidente. */
  .case__sequence { background: var(--paper); }
}

/* =============================================================
   REVISÃO DA FASE 03B
   Com a espinha, o hero passa a ter uma linha vermelha de ponta a
   ponta a 32px do CTA. A seta a vermelho justificava-se por ser a
   única cor do primeiro ecrã; deixou de ser. Duas marcas vermelhas
   a 32px uma da outra é aglomeração, não sistema.

   Volta a tinta apenas onde a espinha existe — abaixo dos 1100px
   não há espinha, e a seta continua a ser a única cor do hero.
   ============================================================= */
@media (min-width: 1100px) {
  .hero .cta .cta__arrow { color: var(--ink); }
}