/* A peca de oferta - o que aparece na coluna da direita da televisao.
 *
 * **Este ficheiro e carregado em dois sitios: no `index.html` (a televisao) e
 * no `oferta.html` (a pre-visualizacao do formulario).** E o ponto todo. Uma
 * pre-visualizacao desenhada a parte fica parecida no dia em que se escreve e
 * mente tres meses depois, quando alguem mexeu so num dos lados. Aqui nao ha
 * dois lados.
 *
 * Por isso as medidas sao em pixeis fixos, 640x1080, e nao em percentagem: e
 * a medida exacta do painel do player (33,75% de 1920 = 648, menos os 8 do fio
 * laranja). A pre-visualizacao encolhe com um `transform: scale()` por fora,
 * que reduz TUDO na mesma proporcao. Reescrever as medidas em pequeno era
 * abrir a porta a que uma frase caiba na previsao e nao caiba na parede.
 *
 * Prefixos `-webkit-` porque isto tambem corre num Chromium 53 (webOS 4). */

.peca-oferta {
  width: 640px;
  height: 1080px;
  box-sizing: border-box;
  /* Area segura de 56px. A TV corta a beira do quadro, e o que la estiver
   * desaparece sem ninguem saber que existiu. */
  padding: 56px;
  background: #14100D;
  color: #FFFDFA;
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
}

/* O QUE.
 *
 * 54px e nao mais: a 640px de largura, «3 sessões de hidratação» a 54px ocupa
 * duas linhas e cabe. O limite de 40 caracteres do `ofertas.py` foi medido
 * contra este numero - se um mudar, o outro tem de mudar com ele. */
.peca-oferta .o-que {
  font-size: 54px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  /* Uma palavra sem espacos - um nome de produto, um endereco - parte-se em
   * vez de sair pela direita da peca. */
  overflow-wrap: break-word;
}

/* O fio. Spot Orange como superficie, que e a unica coisa que ele pode ser:
 * sobre este fundo passaria como letra, mas a regra da marca e simples de
 * mais para se abrir excepcoes a ela por conveniencia. */
.peca-oferta .fio {
  width: 96px;
  height: 8px;
  background: #F2A33C;
  margin: 32px 0;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

/* QUANTO.
 *
 * O numero e a unica coisa que uma pessoa sentada a quatro metros le sem
 * querer. 132px e o tamanho a que «12 €» se le de relance do outro lado de
 * uma sala de espera.
 *
 * Aqui o Spot Orange E letra, e passa: sobre Ink da 9,08:1. Os 2,05:1 que
 * reprovam sao Spot Orange sobre Paper - a peca tem fundo escuro
 * exactamente por isto. */
.peca-oferta .quanto {
  font-size: 132px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #F2A33C;
  margin: 0;
  white-space: nowrap;
}

/* Sem preco - «Próxima marcação», «Fado ao vivo» - a peca fecha-se sem
 * deixar um buraco onde o numero devia estar. */
.peca-oferta.sem-preco .quanto,
.peca-oferta.sem-preco .fio {
  display: none;
}

.peca-oferta.sem-preco .o-que {
  font-size: 64px;
}

/* A CONDICAO. Segunda em importancia e segunda em tamanho. */
.peca-oferta .condicao {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 400;
  color: #F6F1E9;
  opacity: 0.8;
  margin: 32px 0 0;
  overflow-wrap: break-word;
}

/* O nome do salao, em baixo, discreto. Nao e assinatura de marca nossa: quem
 * esta a oferecer aquilo e ele, e uma peca sem dono numa sala de espera
 * podia ser de qualquer negocio da rua. */
.peca-oferta .quem {
  /* `line-height` explicito e nao herdado, e nao e detalhe: o palco da
   * pre-visualizacao usava `line-height: 0` para matar o espaco do
   * `inline-block`, isso herdava para ca, e este nome ficava com ZERO pixeis
   * de altura. Medido: caixa de 2012 a 2012.
   *
   * Nao dava erro nenhum. O CSS estava correcto, a linha existia no DOM com o
   * texto certo lá dentro, e simplesmente nao se via. Todos os outros
   * elementos desta peca escapavam por ja terem `line-height` proprio - este
   * era o unico sem, e por isso foi o unico a desaparecer. */
  line-height: 1.2;
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 56px;
  font-size: 26px;
  font-weight: 600;
  color: #F6F1E9;
  opacity: 0.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O `position: absolute` do nome ancora aqui e nao no ecra. */
.peca-oferta { position: relative; }