/* ─────────────────────────────────────────────────────────────────────────────
   modelo_heroi.css: o herói das páginas de modelo
   ─────────────────────────────────────────────────────────────────────────────
   Um ficheiro só para o herói, porque há páginas que precisam disto e não
   precisam do resto: as sete do ASX e a de autonomia do Eclipse Cross EV têm o
   CSS delas e só lhes falta o herói legível. Carregar as 48 KB do
   `modelo_seccoes.css` para trinta linhas de escurecimento era caro.

   O `modelo_seccoes.css` NÃO repete estas regras: quem carrega o kit inteiro
   carrega os dois ficheiros, pelo `model_assets()`.

   PARA QUE SERVE. O `hero.css` do site escurece só os 64% de cima, e
   escurece-os para o CABEÇALHO: o menu é branco e transparente e ficava branco
   sobre branco numa fotografia clara. Mas o texto do herói está ao MEIO, e aí
   o gradiente já acabou. Medido no pixel desenhado, o título da /asx/seguranca
   dava 1,93:1 e o parágrafo 2,17:1 sobre a fotografia. O mínimo é 4,5:1.

   O QUE ESTE FICHEIRO PASSOU A COBRIR, a 2026-09-03
   ─────────────────────────────────────────────────────────────────────────
   Uma auditoria aos cinco heróis encontrou três heróis diferentes, e o
   problema não era o desenho:

     1. `.model-hero` não estava aplicada em NENHUMA das cinco páginas de entrada,
        e os controladores do Grandis, do Eclipse Cross e do ASX nem sequer
        carregavam este ficheiro. As três têm fundo em FILME e ficaram com o
        gradiente de 64% do site, que acaba muito acima de onde o texto
        aterra. Era uma falha de contraste a viver em produção.
     2. O Outlander tinha o mecanismo certo, com os números medidos para
        filme, mas em regras SEM escopo (`.hero:not(.carousel-slide)`), que
        apanhavam qualquer herói de qualquer página que carregasse a folha.
        Esses números vieram para aqui, presos a `.model-hero--video`.
     3. O logótipo do modelo assentava pela LARGURA, num `max-width: 250px` do
        site. Como cada wordmark tem a sua proporção (o ASX é 5,96:1, o
        Eclipse Cross 12,44:1, o Outlander PHEV 3,79:1 por ser de duas
        linhas), a mesma largura dava alturas entre 7,8 px e 66 px. Passa a
        assentar pela ALTURA, com a largura só a travar.

   O que NÃO se fez: mexer no `assets/css/default/hero.css`. Esse ficheiro é
   carregado em todas as páginas públicas e serve o carrossel da homepage, as
   páginas legais, os eventos, a loja e a autenticação. Uma medida alterada ali
   obriga a regressão visual em rotas que nada têm que ver com modelos.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Ajustes ao herói do site ────────────────────────────────────────────── */

/* O `<picture>` é `inline` por defeito, e o `.bg-image` do site conta com um
   elemento de bloco a preencher a camada toda. Sem isto, a fotografia do herói
   aparece encolhida no canto superior esquerdo. */
.hero-overlay picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* O escurecimento do herói é o do SITE, e mais nenhum.
   ─────────────────────────────────────────────────────────────────────────
   Só o gradiente de topo do `hero.css` (`.hero:not(.carousel-slide)
   .hero-overlay::after`: 64% de altura, preto a esbater para transparente) e o
   véu plano do `.hero-overlay::before` a 0.5. É o mesmo que a homepage desenha
   no carrossel, e é assim em todas as páginas de modelo.

   O QUE SAIU DAQUI, a 2026-09-04, por decisão do Jorge:

   1. Um gradiente de ALTURA COMPLETA, que escurecia também o rodapé do herói.
      Passava por cima do de topo do site e fazia destas páginas as únicas com
      dois desenhos diferentes de escurecimento.
   2. Um `--hero-overlay-opacity: 0.15`, que existia só para compensar esse
      gradiente. Sem ele, volta o 0.5 do site.
   3. Uma elipse escura por trás do bloco de texto (`.hero-content::before`),
      que dava um halo à volta das palavras.

   O QUE ISTO CUSTA, medido no pixel desenhado a 2026-09-04 (percentil 90 da
   luminância dentro da caixa de cada texto, com as letras pintadas de
   transparente antes de fotografar):

     título, parágrafo e preço      7,2:1 ou mais, em todas as entradas
     bloco `.hero-highlights`       1,52:1 no Outlander a 390 px
                                    1,56:1 no ASX a 390 px
                                    2,54:1 no Outlander a 1440 px
                                    3,38:1 no Eclipse Cross EV a 1440 px

   O gradiente do site tem 64% de altura e os destaques assentam abaixo disso,
   sobre a fotografia crua. **Fica assim por decisão do Jorge, com o desenho da
   homepage a valer em todos os heróis.** Quem quiser esse bloco legível tem
   duas saídas que não são uma mancha por baixo das letras: escolher uma
   fotografia que escureça naquela zona, ou tirar os destaques de cima dela. */
.hero.model-hero {
    overflow: hidden;
    /* A CAMADA DO FUNDO DO HERÓI IA PARAR ATRÁS DA PÁGINA.
       O `.hero-overlay` do site leva `z-index: -1`, e um `z-index` negativo
       pinta-se antes dos blocos do fluxo normal, não só antes do conteúdo do
       pai. Na página do Pajero o invólucro `.pj` tem fundo opaco: o filme era
       descarregado, tocava, e ficava invisível por trás dessa cor. Um contexto
       de empilhamento prende esse `-1` ao herói, onde ele quer estar, sem tocar
       nas outras páginas do site que usam o mesmo `hero.css`. */
    isolation: isolate;
}

/* O HERÓI COM FILME NÃO TEM NÚMEROS PRÓPRIOS, E É PRECISO SABER PORQUÊ.
   ─────────────────────────────────────────────────────────────────────────
   Uma fotografia mede-se uma vez; um filme tem fotogramas maus e mede-se no
   pior de nove. Houve aqui um segundo conjunto de valores, só para o
   `.model-hero--video`, medido no herói da entrada do Outlander PHEV com o
   texto pintado de transparente antes de fotografar (um limiar de luminância
   contaria o anti-aliasing das letras como fundo e mentia ao contrário). No
   pior fotograma, sem escurecimento nenhum:

       título      4,13:1     parágrafo   3,05:1
       preço       2,56:1     destaques   1,32:1

   Os destaques são o bloco com os benefícios fiscais, o CO₂, a tracção e a
   autonomia, ou seja a informação comercial da página. Saiu tudo com a decisão
   de 2026-09-04, e estes números ficam aqui para se saber o que está em jogo
   quando se escolhe o filme ou a fotografia de um herói novo. */

/* ── O logótipo do modelo ────────────────────────────────────────────────── */

/* NÃO ESTÁ AQUI, E É DE PROPÓSITO.
   ─────────────────────────────────────────────────────────────────────────
   Estas regras viveram aqui enquanto só a Mitsubishi tinha wordmarks. Quando o
   Fuso passou a ter os dele, ou subiam ou nasciam outras iguais noutro sítio.
   Estão hoje em `assets/css/default/hero.css`, na classe `.model-logo`, que o
   `ac_logo_modelo()` escreve sempre no wrapper.

   O que lá está, em resumo: dois travões ao mesmo tempo, largura e altura em
   `auto`, e em cada desenho manda o que aperta primeiro. Nos compactos (ASX
   6,4:1, Outlander PHEV 4,3:1) aperta a ALTURA e ficam nos 40 px; nos muito
   espaçados (Pajero 15,7:1, Grandis 26,1:1, Eclipse Cross 32,3:1) aperta a
   LARGURA e a altura cai para 27, 16 e 13 px, que é a proporção com que a marca
   os desenhou. */

/* ── A barra fixa de atalhos ─────────────────────────────────────────────── */

/* A `.island-links` do rodapé é `position: fixed; bottom: 0; z-index: 99` e
   está em todas as páginas do site. Num herói de ecrã inteiro, tapa
   exactamente a faixa onde vivem as notas legais e o indicador de rolamento,
   que é o único sítio onde eles servem para alguma coisa.
   A altura da ilha depende do que lá está dentro, por isso quem a mede é o
   `modelo.js` e escreve-a em `--model-dock-height`. Sem JavaScript o valor cai para
   zero e o herói fica como estava, que é o comportamento de hoje. */
.model-hero .default-notes {
    margin-bottom: calc(30px + var(--model-dock-height, 0px));
}