/*
 * Ponte para o Tarot do Dia no fim da amostra.
 *
 * POR QUE EXISTE
 * Quem calcula a amostra, lê os trechos e decide não comprar hoje saía do site
 * sem nada - e é a pessoa mais qualificada que temos, porque já deu o nome e a
 * data e já leu texto nosso. A ponte oferece-lhe a única coisa nossa que é de
 * graça e faz voltar amanhã.
 *
 * DESENHO
 * Cartão escuro com o leque de três versos do baralho, na mesma linguagem da
 * faixa do tarot na home (`.af-of-cartas`) - a carta é o que se reconhece à
 * distância, e um bloco só de texto passava despercebido.
 *
 * A borda é TRACEJADA de propósito: é a forma que lê como brinde ou cupão, e
 * distingue este cartão do banner de compra logo acima, que é de linha cheia.
 * O halo lilás no canto é o mesmo tom da luz do menu, para os dois pertencerem
 * ao mesmo conjunto.
 *
 * Os valores estão escritos por extenso porque este ficheiro é carregado pelo
 * próprio partial, em páginas que não trazem a paleta da marca.
 */

/*
 * 🔴 A LARGURA DEPENDIA DO PAI, e por isso o cartão saía de tamanhos
 * diferentes conforme o mapa. Corrigido a 2026-08-15, por ordem dele: "o
 * tamanho na matriz do destino é o ideal, na matriz do casal está muito maior
 * - mantenha o padrão em todos os mapas amostra".
 *
 * Na Matriz do Destino o pai direto é o `.contenitore-matrice`, que o
 * `tables.css` declara `display: flex; flex-direction: column;
 * align-items: center`. Nesse contexto o cartão é um flex item e o
 * `align-items: center` encolhe-o até ao conteúdo - cerca de 590px. Nas amostras
 * que não têm esse pai (o Casal fecha-o num `<div>` normal) ele é um bloco
 * comum, e estica até aos 820px do `max-width`. Mesma folha, mesmo HTML, dois
 * tamanhos.
 *
 * `width: fit-content` reproduz, em qualquer pai, o que só o Destino tinha por
 * acidente: a largura sai do conteúdo, e não de quem está por cima.
 *
 * ⚠️ Não leva `align-self`, e isso é deliberado. O `margin: auto` do lado
 * esquerdo e direito já centra o cartão nos DOIS contextos - num pai comum pelo
 * bloco, num pai flex porque a margem automática ganha ao `align-items`. E o
 * `align-items: stretch`, que é o valor por omissão de qualquer flex e esticaria
 * o cartão, deixa de o apanhar: o stretch só age quando a largura é `auto`, e
 * aqui ela é `fit-content`.
 *
 * O `max-width: 100%` é a rede do telemóvel, onde o cartão empilha e tem de
 * caber. Os 820px ficam como tecto: com este texto o `fit-content` nunca lá
 * chega, mas se alguém alargar as frases o cartão pára antes de atravessar o
 * ecrã.
 */
.md-ponte-tarot {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: fit-content;
    max-width: min(820px, 100%);
    margin: 1.5rem auto 0;
    padding: 1.4rem 1.6rem;
    background:
        radial-gradient(620px 220px at 12% 0%, rgba(178, 152, 255, .2), transparent 70%),
        linear-gradient(135deg, #010535 0%, #151d6b 100%);
    border: 1px dashed rgba(222, 196, 96, .55);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(1, 5, 53, .25);
}

/*
 * O leque, igual ao da home mas mais pequeno - e com uma cópia leve da capa:
 * o `verso.png` tem 452 KB e não tem lugar numa página de amostra, que já é
 * pesada. O `verso-mini.webp` tem 8,7 KB e é servido a 66 CSS px, portanto
 * ainda sobra resolução para ecrãs de alta densidade.
 */
.md-pt-cartas {
    display: flex;
    flex: 0 0 auto;
    padding: .25rem .8rem;
}

.md-pt-cartas span {
    display: block;
    width: 66px;
    aspect-ratio: 579 / 1000;
    border-radius: 7px;
    background: url('../oraculo/verso-mini.webp') center/cover no-repeat, #010535;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}

.md-pt-cartas span:nth-child(1) { transform: rotate(-11deg) translateX(14px); }
.md-pt-cartas span:nth-child(2) { transform: translateY(-7px); z-index: 2; }
.md-pt-cartas span:nth-child(3) { transform: rotate(11deg) translateX(-14px); }

/* O emblema da marca, na ponte que leva aos MAPAS (ponte_mapas.php). Ocupa o
   lugar das três cartas, que continuam na ponte do tarot logo acima - lá elas
   dizem o que se vai encontrar, aqui prometiam a coisa errada. */
.md-pt-emblema {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: .25rem .8rem;
}

.md-pt-emblema img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    /* O dourado do logotipo, apanhado com a mesma luz dos versos das cartas que
       aqui estavam - sem isto o emblema ficava colado ao fundo azul-noite. */
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

@media (max-width: 480px) {
    .md-pt-emblema img { width: 72px; height: 72px; }
}

.md-pt-texto {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.md-pt-selo {
    display: inline-block;
    margin-bottom: .45rem;
    color: #DEC460;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/*
 * 🔴 OS DOIS SELETORES LEVAM O PAI À CABEÇA, e sem isso o cartão sai inflado na
 * Matriz do Casal. Não é decoração: é uma guerra de especificidade.
 *
 * O `matriz-fix.css` tem esta regra, herdada de quando as leituras eram só
 * texto corrido:
 *
 *     body .desteny-container p,
 *     body .compatibility-container p,
 *     body .center_container p { font-size: clamp(1.05rem, 0.92rem + 1.1vw, 1.75rem); }
 *
 * Ela apanha TODOS os `<p>` lá dentro, e o título e o subtítulo desta ponte são
 * `<p>`. Na Matriz do Casal - o único mapa cuja amostra vive dentro do
 * `.compatibility-container` - eles saíam até 1,75rem em vez de 1,15rem e
 * 0,95rem. Daí o cartão inteiro parecer muito maior do que nos outros mapas.
 *
 * `body .compatibility-container p` vale (0,1,2). Um `.md-pt-titulo` sozinho
 * vale (0,1,0) e perde no desempate pelos elementos. Com o pai à cabeça passa a
 * (0,2,0) e ganha - duas classes vencem uma, sem precisar de `!important` e sem
 * depender da ordem por que as folhas são carregadas.
 *
 * É a mesma defesa que o `matriz-fix.css` já montou para os cartões de
 * interpretação com `body .md-card .md-card-body`. Este componente e o banner de
 * desbloqueio tinham ficado de fora.
 */
.md-ponte-tarot .md-pt-titulo {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.md-ponte-tarot .md-pt-sub {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    line-height: 1.5;
}

.md-pt-sub strong { color: #DEC460; }

.md-pt-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .78rem 1.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #DEC460, #B9A04E);
    color: #2b1f05;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(185, 160, 78, .3);
    transition: transform .18s ease, box-shadow .18s ease;
}

.md-pt-btn:hover,
.md-pt-btn:focus {
    color: #2b1f05;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(185, 160, 78, .42);
}

.md-pt-btn:focus-visible {
    outline: 3px solid rgba(222, 196, 96, .95);
    outline-offset: 3px;
}

/* Em ecrã estreito empilha: o leque fica por cima e o texto centrado por baixo */
@media (max-width: 599px) {
    .md-ponte-tarot {
        flex-direction: column;
        gap: .9rem;
        padding: 1.35rem 1.1rem;
        /* ⚠️ O `fit-content` de cima é para o desktop, onde serve para o cartão
           ter a mesma largura em todos os mapas. Aqui não: empilhado num
           telemóvel, um cartão estreitado ao texto deixava faixas vazias dos
           dois lados e lia-se como erro de desenho. */
        width: 100%;
    }
    .md-pt-texto { text-align: center; }
    .md-pt-cartas span { width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .md-pt-btn { transition: none; }
    .md-pt-btn:hover,
    .md-pt-btn:focus { transform: none; }
}