/* ==========================================================================
   ASA RENT A CAR: UTILITÁRIOS
   O corte de 8°, a hachura de placeholder e a marca d'água.
   Carregar por ÚLTIMO: sem build, a ordem de origem na cascata é o que
   dispensa !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O VÃO: corte a 8°

   O ângulo sai do próprio logo: é a inclinação da asa e do wordmark, sempre
   subindo para a direita. É o ÚNICO ângulo do sistema.

   Por que cqw e não porcentagem: numa porcentagem, a coordenada Y de um
   polygon é relativa à ALTURA da caixa. Como tan(8°) relaciona altura a
   largura, a mesma porcentagem produz ângulos diferentes em proporções
   diferentes: o card de veículo em 16:9 com "100% 86%" corta a 4,5°, não a
   8°. Expressando a subida em unidade de largura (cqw), o ângulo fica
   correto em qualquer proporção. tan(8°) = 0.14054.

   REGRA DURA: nunca aplicar clip-path num container interativo. O triângulo
   removido leva junto o botão, o link e o anel de foco que estiverem ali.
   O corte vai sempre numa camada decorativa ou de mídia; o conteúdo fica
   acima, sem clip.
   -------------------------------------------------------------------------- */

/* O wrapper é quem estabelece o container: cqw resolve contra ele, então
   a subida passa a ser relativa à largura DESTE bloco, não do viewport. */
.asa-cut {
  container-type: inline-size;
  position: relative;
}

/* Trava de segurança: em blocos muito largos e baixos, 14.05cqw estouraria
   a altura e o polígono degeneraria. */
.asa-cut > * {
  --asa-rise-safe: min(var(--asa-rise), 45%);
}

/* Campo superior saindo por cima: a base sobe para a direita.
   É também o corte padrão de toda fotografia do sistema. */
.asa-cut__over,
.asa-cut__media {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--asa-rise-safe)), 0 100%);
}

/* Campo inferior entrando por baixo: o topo sobe para a direita. */
.asa-cut__under {
  clip-path: polygon(0 var(--asa-rise-safe), 100% 0, 100% 100%, 0 100%);
}

/* Camada decorativa chapada, para quando o bloco tem conteúdo interativo:
   o corte fica no ::before e o conteúdo passa por cima, intacto. */
.asa-cut__fill {
  position: absolute;
  inset: 0;
  background: var(--asa-cut-color, var(--asa-bg-dense));
  z-index: 0;
}

.asa-cut__content {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   PLACEHOLDER DE FOTOGRAFIA
   A foto é conteúdo, não ilustração: na página ela ocupa o lugar que o
   ícone decorativo e o card vazio ocupariam. Enquanto a foto real não
   existe, este hachurado marca o lugar e a legenda diz qual foto falta.
   Foto de banco de imagem só como COMP de visualização em protótipo,
   marcada como tal e nunca em produção: ela não é a Asa.
   A hachura corre a 8°, o mesmo ângulo do vão.
   -------------------------------------------------------------------------- */

.asa-photo {
  background-color: var(--asa-placeholder);
  background-image: repeating-linear-gradient(
    -8deg,
    rgba(20, 21, 23, .12) 0 1px,
    transparent 1px 11px
  );
  position: relative;
  overflow: hidden;
}

/* Em telas de alta densidade a linha de 1px com período de 11px num ângulo
   raso produz moiré. Engrossa a linha e abre o período. */
@media (min-resolution: 2dppx) {
  .asa-photo {
    background-image: repeating-linear-gradient(
      -8deg,
      rgba(20, 21, 23, .12) 0 1.5px,
      transparent 1.5px 16px
    );
  }
}

/* Legenda do placeholder. Fica acima do corte da base para não ser fatiada.
   Nunca abaixo de 12px: o piso de "nenhum texto abaixo de 12px em tela" é
   regra dura da marca e vence a conveniência de caber mais texto. */
.asa-photo__caption {
  position: absolute;
  left: var(--asa-space-3);
  bottom: 22px;
  font-family: var(--asa-font);
  font-size: var(--asa-fs-body-dense);
  line-height: var(--asa-lh-body-dense);
  font-weight: var(--asa-weight-medium);
  color: var(--asa-ink-3);
}

.asa-photo--16x9 { aspect-ratio: 16 / 9; }
.asa-photo--1x1  { aspect-ratio: 1 / 1; }
.asa-photo--4x5  { aspect-ratio: 4 / 5; }
.asa-photo--16x10{ aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   MARCA D'ÁGUA
   A asa sozinha, sem wordmark, só existe em dois lugares: marca d'água a 13%
   sobre amarelo, e dentro do recorte circular do ícone de perfil. E UMA VEZ
   por página, no hero. Repetida no CTA final ela vira papel de parede.
   -------------------------------------------------------------------------- */

.asa-watermark {
  position: absolute;
  pointer-events: none;
  opacity: .13;
  background: url('../assets/img/w-atual-red.png') center / contain no-repeat;
  aspect-ratio: 806 / 511;
}

.asa-watermark--light {
  background-image: url('../assets/img/w-atual-branco.png');
}

/* --------------------------------------------------------------------------
   AUXILIARES
   -------------------------------------------------------------------------- */

.asa-measure     { max-width: var(--asa-measure); }
.asa-measure-off { max-width: none; }

.asa-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.asa-on-dark      { color: var(--asa-ink-inverse); }
.asa-on-dark p    { color: var(--asa-ink-inverse-2); }

/* Fundos de superfície, para compor os dois campos do vão. */
.asa-bg-surface   { background: var(--asa-surface); color: var(--asa-ink); }
.asa-bg-mist     { background: var(--asa-bg); }
.asa-bg-white     { background: var(--asa-bg-elevated); }
.asa-bg-dense     { background: var(--asa-bg-dense); color: var(--asa-ink-inverse); }
.asa-bg-deep      { background: var(--asa-bg-deep); color: var(--asa-ink-inverse); }

/* REGRA DURA: preço nunca sobre amarelo. 2,94:1 reprova até o mínimo de
   texto grande (ver 03-cor.html). Não é só orientação de composição:
   nenhum componente que exiba preço pode ser instanciado dentro de
   .asa-bg-surface. Verificável; candidato a regra de lint. */

/* --------------------------------------------------------------------------
   DENSIDADE
   Filtro e vitrine têm listas longas (30 linhas de filtro × 44px de alvo
   de toque = 1.320px só de sidebar). .asa-dense desloca o espaçamento
   vertical um degrau para dentro do escopo, sem duplicar componente: quem
   está dentro lê --asa-space-* normalmente.
   Os 44px continuam sendo ÁREA DE TOQUE, nunca altura visual: a linha pode
   ser mais baixa por dentro, com padding que devolve os 44px ao alvo.
   -------------------------------------------------------------------------- */
.asa-dense {
  --asa-space-3: var(--asa-space-2);   /* 12px → 8px  */
  --asa-space-4: var(--asa-space-3);   /* 16px → 12px */
  --asa-space-6: var(--asa-space-4);   /* 24px → 16px */
  --asa-space-7: var(--asa-space-6);   /* 32px → 24px */
}

/* --------------------------------------------------------------------------
   ORÇAMENTO DE COR POR ARQUÉTIPO DE PÁGINA
   A proporção 40/25/20/15 é calibrada para peça publicitária e para o
   funil; aplicada às ~70 páginas do portal sem distinção, o amarelo perde
   função em página institucional/jurídica e polui página transacional
   (mais cor decorativa = mais ruído contra a tarefa, o oposto do que
   checkout precisa). Por isso varia por arquétipo, declarado no <body>.
   Cada modo aqui é o TETO de uso do amarelo como composição; não afeta o
   header, que é chrome fixo de marca em qualquer página.
   -------------------------------------------------------------------------- */
[data-page-mode="marketing"] {
  /* ~40/25/20/15, o padrão documentado em 03-cor.html. */
}

[data-page-mode="transactional"] {
  /* Modo foco: motor de busca, vitrine, funil, checkout. O amarelo fica em
     uso estritamente funcional: estado ativo, um único destaque de CTA, a
     marca no header. Composição em --asa-bg-surface fica reservada a, no
     máximo, um bloco por tela (ex.: faixa do Clube Asa). */
  --asa-yellow-budget: functional-only;
}

[data-page-mode="informational"] {
  /* Quase neutro: regras de locação, proteções e taxas, prevenção a
     fraudes, acessibilidade, blog. Amarelo só no header/logo e em link:
     página jurídica que parece anúncio perde credibilidade. */
  --asa-yellow-budget: chrome-only;
}