/* ============================================================
   O BANNER DO ANÚNCIO
   ============================================================
   Autor: Hacker 0 5 90

   REGRA QUE SEGURA TUDO O RESTO
   -----------------------------
   Nada aqui é posicionado sobre a imagem. A imagem é fundo e recorta-se; o
   texto e o botão vivem numa coluna com margem própria. É por isso que o
   banner pode ter 320px ou 1600px de largura sem nunca partir: não há um
   único valor que dependa do tamanho em que foi composto.

   AS MEDIDAS SÃO DO BANNER, NÃO DO ECRÃ
   -------------------------------------
   Todos os tamanhos de dentro estão em `cqw` — 1% da largura DO BANNER —, e
   não em `vw`, que é 1% da largura da janela. A diferença só aparece quando
   os dois não coincidem, e aí aparece toda: num computador, com o banner numa
   coluna estreita, o título saía do tamanho de um monitor. E na
   pré-visualização do painel o texto ficava igual nas três larguras, porque a
   janela não mudava — a maqueta mentia. */

.tp-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    text-decoration: none;
    isolation: isolate;
    background: #EFE5DC;

    /* É esta linha que faz o `cqw` lá dentro medir o banner. */
    container-type: inline-size;

    /* UMA GRELHA DE UMA CÉLULA SÓ.
       ------------------------------------------------------------
       Parece um exagero para um elemento com um filho, e é o que resolve o
       problema da altura. Um `aspect-ratio` posto no banner MANDA na altura:
       o conteúdo que não coubesse era cortado — e foi o que aconteceu, com o
       botão a desaparecer por baixo da margem nas combinações maiores.

       Aqui a proporção vive num espaçador invisível que ocupa a mesma célula
       que o conteúdo. A célula fica com a altura do MAIOR dos dois: quando o
       texto cabe, manda a proporção; quando não cabe, manda o texto. A
       proporção passa a ser um mínimo em vez de uma prisão. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.tp-banner::before {
    content: "";
    grid-area: 1 / 1;
    aspect-ratio: 16 / 9;
    min-height: 180px;
}

.tp-banner.is-direita .tp-banner-conteudo { margin-left: auto; }
.tp-banner.is-centro .tp-banner-conteudo { margin: 0 auto; }

.tp-banner-imagem {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* O PONTO DE INTERESSE.
       É isto que faz o recorte ser sempre à volta do que importa. O gestor
       marca-o na imagem; se não marcar, fica o centro, que é o que o browser
       já fazia — e o que corta cabeças quando o produto está a um canto. */
    object-position: var(--tp-foco-x, 50%) var(--tp-foco-y, 50%);
}

.tp-banner-sem-imagem {
    display: block;
    background: linear-gradient(135deg, #F7EDE3, #E4D2C2);
}

/* O véu escurece só o lado onde o texto está — o outro fica foto limpa.
   Escurecer tudo por igual apaga o produto, que é o que se quer mostrar. */
.tp-banner-veu {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tp-banner.is-esquerda .tp-banner-veu {
    background: linear-gradient(90deg,
        rgba(20, 10, 5, var(--tp-veu, 0.45)) 0%,
        rgba(20, 10, 5, calc(var(--tp-veu, 0.45) * 0.72)) 42%,
        rgba(20, 10, 5, 0) 78%);
}

.tp-banner.is-direita .tp-banner-veu {
    background: linear-gradient(270deg,
        rgba(20, 10, 5, var(--tp-veu, 0.45)) 0%,
        rgba(20, 10, 5, calc(var(--tp-veu, 0.45) * 0.72)) 42%,
        rgba(20, 10, 5, 0) 78%);
}

.tp-banner.is-centro .tp-banner-veu {
    background: rgba(20, 10, 5, calc(var(--tp-veu, 0.45) * 0.86));
}

.tp-banner.is-so-imagem .tp-banner-veu {
    /* Sem texto, o véu serve só para o contador se ler. */
    background: linear-gradient(180deg,
        rgba(20, 10, 5, calc(var(--tp-veu, 0.45) * 0.55)) 0%,
        rgba(20, 10, 5, 0) 45%);
}

/* --- a coluna de conteúdo --- */

/* O CONTEÚDO ESTÁ NO FLUXO, E NÃO POR CIMA.
   ------------------------------------------------------------
   Estava em `position: absolute`, e por isso não contava para a altura do
   banner: com a letra manuscrita em tamanho grande, mais o subtítulo e um
   contador com rótulos, o texto passava do espaço e era CORTADO A MEIO das
   letras. Não falhava nada — só se via.

   Em fluxo normal, o conteúdo empurra. A proporção do banner passa a ser um
   mínimo em vez de uma prisão: quando cabe, manda ela; quando não cabe, o
   banner cresce o pouco que for preciso. */
.tp-banner-conteudo {
    /* Mesma célula da grelha que o espaçador — é isso que faz os dois
       disputarem a altura em vez de um se sobrepor ao outro. */
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(6px, 1.4cqw, 11px);

    /* A margem de segurança. É ela que impede o texto de encostar ao canto em
       qualquer largura, e cresce com o banner. */
    padding: clamp(16px, 4.2cqw, 44px);

    /* A coluna não atravessa o banner todo em ecrãs largos: texto de ponta a
       ponta num banner de 1400px lê-se mal e tapa a imagem inteira. */
    max-width: min(100%, 34rem);
    color: #FFFFFF;
}

.tp-banner.is-direita .tp-banner-conteudo {
    align-items: flex-end;
    text-align: right;
}

.tp-banner.is-centro .tp-banner-conteudo {
    max-width: 100%;
    align-items: center;
    text-align: center;
}

.tp-banner.is-so-imagem .tp-banner-conteudo {
    justify-content: flex-start;
    align-items: flex-start;
}

/* A COR VAI EM CADA ELEMENTO, E NÃO SÓ NO PAI.
   Herdar não chega: as folhas antigas têm regras para `h2` e para `p`, e uma
   regra directa ganha sempre à herança, por mais fundo que ela venha. O
   título saía castanho sobre a foto escura e quase não se lia — e nada
   falhava, porque cor errada não parte nada. */
.tp-banner-titulo,
.tp-banner-subtitulo,
.tp-banner-etiqueta,
.tp-banner-contagem,
.tp-banner-contagem-rotulo,
.tp-banner-contagem-blocos b {
    color: inherit;
}

/* A cor escolhida no painel. O tema já não decide a cor do texto — decide
   apenas como se escurece a foto por baixo dele. */
.tp-banner-conteudo,
.tp-banner-conteudo .tp-banner-titulo,
.tp-banner-conteudo .tp-banner-subtitulo { color: var(--tp-texto, #FFFFFF); }

/* Numa foto clara o véu clareia em vez de escurecer: é o que deixa um texto
   escuro ler-se por cima dela. */
.tp-banner.tema-claro .tp-banner-veu { filter: invert(1) opacity(0.55); }

/* --- as fontes --- */

/* Três, e só três: as da marca. Um campo livre daria Comic Sans na primeira
   semana; três escolhas dão liberdade a sério sem pôr ninguém a desenhar. */
.tp-banner.fonte-titulo .tp-banner-titulo { font-family: var(--fonte-titulo, Georgia, serif); }
.tp-banner.fonte-corpo .tp-banner-titulo {
    font-family: var(--fonte-corpo, system-ui, sans-serif);
    font-weight: 800;
    letter-spacing: -0.015em;
}
.tp-banner.fonte-script .tp-banner-titulo {
    font-family: var(--fonte-script, cursive);
    font-weight: 400;
    /* A cursiva tem letras altas e baixas muito longas: sem folga extra, os
       acentos batem na linha de cima. */
    line-height: 1.28;
}

/* --- o tamanho do título --- */

.tp-banner.tam-pequeno .tp-banner-titulo { font-size: clamp(0.92rem, 4cqw, 1.7rem); }
.tp-banner.tam-grande .tp-banner-titulo { font-size: clamp(1.2rem, 6.6cqw, 3rem); }

/* A cursiva desenha mais pequeno do que mede: com o mesmo valor das outras,
   fica visivelmente mais miúda. Cresce para ficar do mesmo tamanho aos olhos. */
.tp-banner.fonte-script.tam-pequeno .tp-banner-titulo { font-size: clamp(1.1rem, 4.8cqw, 2rem); }
.tp-banner.fonte-script .tp-banner-titulo { font-size: clamp(1.3rem, 6.2cqw, 2.8rem); }
.tp-banner.fonte-script.tam-grande .tp-banner-titulo { font-size: clamp(1.5rem, 8cqw, 3.6rem); }

/* --- tipografia --- */

.tp-banner-etiqueta {
    align-self: inherit;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    font-size: clamp(0.58rem, 1.7cqw, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-banner.tema-claro .tp-banner-etiqueta {
    background: rgba(42, 23, 16, 0.12);
}

.tp-banner-titulo {
    margin: 0;
    font-family: var(--fonte-titulo, Georgia, serif);
    font-size: clamp(1.05rem, 5.2cqw, 2.3rem);
    font-weight: 700;
    line-height: 1.14;
    /* Duas linhas chegam. Um título de cinco linhas não é um título — é um
       parágrafo, e ninguém o lê num banner. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 12px rgba(20, 10, 5, 0.28);
}

.tp-banner.tema-claro .tp-banner-titulo { text-shadow: none; }

.tp-banner-subtitulo {
    margin: 0;
    font-size: clamp(0.72rem, 2.4cqw, 1rem);
    line-height: 1.45;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Num banner estreito o subtítulo é o primeiro a sair: o título e o botão
   fazem o trabalho, e três blocos de texto em 180px de altura é aperto.
   A regra é do CONTENTOR — vale para um telemóvel e para um banner metido
   numa coluna estreita de um computador, que é o mesmo problema. */
@container (max-width: 430px) {
    .tp-banner-subtitulo { display: none; }
}

/* --- o botão --- */

.tp-banner-botao {
    margin-top: clamp(3px, 1cqw, 7px);
    padding: clamp(8px, 2.2cqw, 13px) clamp(15px, 3.6cqw, 26px);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    background: var(--tp-botao, #5C3020);
    color: #FFFFFF;
    font-size: clamp(0.72rem, 2.3cqw, 0.92rem);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(20, 10, 5, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tp-banner.is-direita .tp-banner-botao { align-self: flex-end; }
.tp-banner.is-centro .tp-banner-botao { align-self: center; }

.tp-banner-botao i { font-size: 0.78em; }

/* --- feitios do botão --- */

.tp-banner-botao.forma-suave { border-radius: 12px; }
.tp-banner-botao.forma-recto { border-radius: 2px; }

/* O de contorno serve para quando a foto já é forte: um botão cheio a mais
   compete com ela em vez de a acompanhar. */
.tp-banner-botao.forma-contorno {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
    box-shadow: none;
}

.tp-banner:hover .tp-banner-botao.forma-contorno {
    background: var(--tp-botao, #5C3020);
    border-color: var(--tp-botao, #5C3020);
    color: #FFFFFF;
}

/* --- tamanhos do botão --- */

.tp-banner-botao.tam-pequeno {
    padding: clamp(6px, 1.7cqw, 10px) clamp(12px, 2.8cqw, 19px);
    font-size: clamp(0.66rem, 1.9cqw, 0.8rem);
}

.tp-banner-botao.tam-grande {
    padding: clamp(11px, 2.9cqw, 17px) clamp(20px, 4.6cqw, 34px);
    font-size: clamp(0.8rem, 2.7cqw, 1.05rem);
}

/* O banner inteiro é o link; o botão só reage junto com ele. */
.tp-banner:hover .tp-banner-botao {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(20, 10, 5, 0.3);
}

.tp-banner:active { transform: scale(0.995); }

/* --- a contagem --- */

/* Deixou de ser uma caixa a flutuar sobre a imagem e passou a ser uma linha
   do conteúdo, como o título e o botão. Assim acompanha o alinhamento
   escolhido em vez de precisar das suas próprias coordenadas. */
.tp-banner-contagem {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.tp-banner-contagem-rotulo {
    font-size: clamp(0.56rem, 1.6cqw, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
}

.tp-banner-contagem-blocos {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* Números de largura fixa: sem isto a contagem estremece a cada segundo,
       porque o "1" é mais estreito do que o "8". */
    font-variant-numeric: tabular-nums;
}

.tp-banner-casa {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tp-banner-casa b {
    min-width: 2.05em;
    padding: 3px 5px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.42);
    font-size: clamp(0.72rem, 2.2cqw, 0.95rem);
    font-weight: 700;
    text-align: center;
}

.tp-banner-casa em {
    font-style: normal;
    font-size: clamp(0.46rem, 1.2cqw, 0.58rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.72;
}

.tp-banner.tema-claro .tp-banner-casa b {
    background: rgba(42, 23, 16, 0.14);
}

.tp-banner-contagem-blocos i {
    font-style: normal;
    opacity: 0.6;
}

/* --- os quatro feitios do contador --- */

/* LINHA — sem caixas nenhumas, só os números. Para quando a foto já tem muito
   a acontecer e mais um bloco escuro seria ruído. */
.tp-banner-contagem.is-linha .tp-banner-casa b {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: clamp(0.8rem, 2.5cqw, 1.05rem);
    font-weight: 800;
}

.tp-banner-contagem.is-linha .tp-banner-contagem-blocos { gap: 1px; }

/* CÍRCULOS — cada número numa moeda, com o nome por baixo. É o mais legível
   à distância, e o que melhor aguenta um banner grande. */
.tp-banner-contagem.is-circulos .tp-banner-contagem-blocos { gap: 7px; }

.tp-banner-contagem.is-circulos .tp-banner-casa b {
    width: clamp(30px, 8cqw, 46px);
    height: clamp(30px, 8cqw, 46px);
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.tp-banner.tema-claro .tp-banner-contagem.is-circulos .tp-banner-casa b {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(42, 23, 16, 0.14);
}

/* BARRA — os três números numa só peça, como um bilhete. Ocupa pouca altura,
   que é o que interessa quando o banner é baixo. */
.tp-banner-contagem.is-barra { gap: 0; flex-wrap: wrap; }

.tp-banner-contagem.is-barra .tp-banner-contagem-rotulo {
    padding: 5px 9px;
    border-radius: 8px 0 0 8px;
    background: var(--tp-botao, #5C3020);
    color: #FFFFFF;
    opacity: 1;
}

.tp-banner-contagem.is-barra .tp-banner-contagem-blocos {
    gap: 9px;
    padding: 4px 11px;
    border-radius: 0 8px 8px 0;
    background: rgba(0, 0, 0, 0.5);
}

.tp-banner-contagem.is-barra .tp-banner-casa b {
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

.tp-banner.tema-claro .tp-banner-contagem.is-barra .tp-banner-contagem-blocos {
    background: rgba(255, 255, 255, 0.62);
}

/* --- as larguras maiores --- */

/* Também do contentor: o que decide a forma do banner é o espaço que ELE
   tem, e não o tamanho da janela à volta. */
@container (min-width: 700px) {
    .tp-banner-conteudo { max-width: min(58%, 34rem); }
}

@media (min-width: 700px) {
    /* Mais largo do que alto, como nos sítios grandes: a imagem ganha espaço
       ao lado do texto em vez de ficar só por trás dele. */
    .tp-banner::before { aspect-ratio: 21 / 9; }
    .tp-banner { border-radius: 20px; }
}

@media (min-width: 1100px) {
    .tp-banner::before { aspect-ratio: 24 / 9; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-banner,
    .tp-banner-botao { transition: none; }
}