/* O destaque da idade do anúncio, no topo dos quatro drawers.

   Não é a mini timeline com outro aspeto: é o primeiro número do drawer, lido
   antes do preço e do custo mensal, e é por isso que tem corpo de título em vez
   de corpo de metadado. A cor faz o trabalho de relance ("muito ou pouco
   tempo"); o número faz o resto. Ver js/offer-age.js. */

.offer-age {
  margin: 12px 0 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--offer-age-line, rgba(255, 255, 255, .1));
  /* A barra da esquerda é o que se vê primeiro ao abrir o drawer, antes de o
     olho pousar em qualquer texto. */
  border-left: 3px solid var(--offer-age-ink, rgba(255, 255, 255, .3));
  border-radius: 12px;
  background: var(--offer-age-bg, rgba(255, 255, 255, .03));
}

.offer-age-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.offer-age-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--offer-age-ink, #fff);
}

/* O `≥` é menor do que o número, mas nunca esbatido: é ele que diz que o número
   é um mínimo, e num anúncio do Pisca Pisca em cada dois e meio é essa a
   diferença entre a leitura certa e uma idade inventada para menos. */
.offer-age-approx {
  font-size: 15px;
  font-weight: 700;
  vertical-align: 2px;
  cursor: help;
}

/* A espera não usa o corpo 22: um número grande a dizer "a ler…" saltava para
   outro número grande meio segundo depois, no cabeçalho do drawer. */
.offer-age-value.is-waiting {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.offer-age-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Recente: ainda quase ninguém o viu. */
.offer-age[data-tone="fresh"] {
  --offer-age-ink: #30d158;
  --offer-age-line: rgba(48, 209, 88, .35);
  --offer-age-bg: rgba(48, 209, 88, .07);
}

/* Encalhado: a ausência de comprador já é o facto mais interessante do anúncio,
   e é a partir daqui que muda a conversa com o vendedor. */
.offer-age[data-tone="stale"] {
  --offer-age-ink: #ff9f0a;
  --offer-age-line: rgba(255, 159, 10, .35);
  --offer-age-bg: rgba(255, 159, 10, .07);
}

/* Fora do ar e sem data são os dois casos em que não há decisão a tomar: o
   número (ou a falta dele) fica neutro para não puxar o olho. */
.offer-age[data-tone="gone"] .offer-age-value,
.offer-age[data-tone="unknown"] .offer-age-value {
  color: var(--text-muted);
  font-size: 18px;
}

.offer-age[data-tone="gone"],
.offer-age[data-tone="unknown"] {
  --offer-age-ink: rgba(255, 255, 255, .25);
}

@media (max-width: 420px) {
  .offer-age-value { font-size: 20px; }
}