/* ==========================================================================
   Macahé Burguer — Landing page
   Depende de design-system.css (tokens e componentes base).
   Ritmo da página: hero escuro, faixas claras e escuras alternadas.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

/* Trecho de página que controla a explosão. A hero fica presa no topo
   enquanto ele rola, e o JS lê o progresso da geometria deste elemento.
   Só vale onde a hero cabe na janela; em tela alta ela é mais alta que a
   viewport e prender no topo esconderia o rodapé dela, então lá a explosão
   acompanha a própria hero saindo da tela, sem altura extra nenhuma. */
.mb-hero-scroll {
    position: relative;
}

@media (min-width: 1025px) and (min-height: 560px) {
    .mb-hero-scroll {
        height: 220vh;
    }

    .mb-hero-scroll > .mb-hero {
        position: sticky;
        top: 0;
    }

    /* Só com a hero presa a explosão cresce por cima da faixa de benefícios
       (medido: pico de 38% da faixa com detrito atrás, contra 0% nos
       breakpoints sem sticky). Por isso ela sai de cena conforme o progresso
       e volta ao subir — e só aqui. */
    .mb-perks {
        opacity: clamp(0, calc((.55 - var(--mb-blast, 0)) / .3), 1);
    }
}

/* O fundo é a própria sequência de frames, que já traz o azul da marca e o
   halo por trás do produto. A cor abaixo é a base medida nos frames
   (rgb(4,16,53)), para que qualquer área não coberta case exatamente. */
.mb-hero {
    position: relative;
    background: rgb(4, 16, 53);
    color: var(--mb-text-inverse);
    overflow: hidden;
    padding-block: var(--mb-space-16) 0;
    /* Em tela larga a seção fica bem mais larga que o frame (1920/1082), e o
       "cover" cortaria tanto na vertical que o produto invadiria a faixa de
       benefícios. Este piso mantém a proporção perto da do frame, limitado
       pela altura da janela para a dobra não fugir. */
    min-height: min(56.25vw, 88vh);
    display: flex;
    flex-direction: column;
}

/* Sem isto o piso de altura acima vira espaço vazio no rodapé da seção e a
   faixa de benefícios fica no meio do produto. Aqui a sobra é absorvida pela
   dobra principal e os benefícios encostam na base. */
.mb-hero__inner {
    flex: 1 1 auto;
}

/* Direção de arte lida pelo JS (hero-burger.js). O produto ocupa x 46%..90%
   do frame e o brilho vaza pela borda direita dele — por isso o foco fica no
   produto e o excedente sempre sobra na lateral esquerda, que é fundo limpo. */
.mb-hero__bg {
    --mb-bg-fit: contain;
    --mb-bg-zoom: 1;
    --mb-bg-focus-x: 1;
    --mb-bg-focus-y: .46;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Sem object-fit aqui: o enquadramento é todo feito no drawImage. */
    pointer-events: none;
}

/* A segunda coluna fica vazia de propósito: ela reserva o espaço do produto,
   que agora é desenhado no fundo da seção, e mantém o texto na metade limpa
   do frame (o produto ocupa x 46%..90% dele). */
.mb-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--mb-space-12);
    align-items: center;
}

.mb-hero__content > * + * {
    margin-top: var(--mb-space-6);
}

.mb-hero__title {
    color: var(--mb-text-inverse);
}

.mb-hero__title .mb-outline {
    display: block;
}

.mb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-space-4);
}

/* Coluna vazia: só reserva o espaço onde o produto aparece no fundo. Em
   coluna única ela também é a âncora vertical da faixa (ver hero-burger.js),
   por isso a altura acompanha a do frame desenhado: 1082/1920 * zoom * largura. */
.mb-hero__media {
    position: relative;
    align-self: stretch;
}

/* Legenda do burger em cena: pílula no canto inferior esquerdo da coluna do
   produto, sobre o fundo limpo em vez de sobre o burger. Absoluta para não
   alterar o ret da coluna, que o hero-burger.js mede para enquadrar (não tocar). */
.mb-hero__caption {
    position: absolute;
    left: 0;
    bottom: var(--mb-space-4);
    z-index: 2;
    margin: 0;
    padding: 6px 12px;
    border-radius: var(--mb-radius-pill);
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
    color: var(--mb-text-inverse);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.mb-hero__caption span {
    margin-right: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65;
}

/* Faixa de benefícios no pé da dobra. */
.mb-perks {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mb-space-6);
    margin-top: var(--mb-space-12);
    padding-block: var(--mb-space-6) var(--mb-space-8);
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.mb-perk {
    display: flex;
    align-items: flex-start;
    gap: var(--mb-space-3);
    text-decoration: none;
    color: inherit;
}

.mb-perk svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--mb-blue-on-dark);
}

.mb-perk__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 2px;
}

.mb-perk__text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
    margin: 0;
}

.mb-hero__wave {
    position: relative;
    margin-top: var(--mb-space-2);
}


.mb-featured {
    position: relative;
    overflow: hidden;
}

.mb-featured::before {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(59, 93, 254, .34) 0%,
        rgba(10, 16, 48, 0) 66%);
    pointer-events: none;
}

.mb-featured .mb-container {
    position: relative;
}

/* As imagens de produto chegam em proporcoes diferentes. A area de midia
   precisa ser fixa para manter o inicio do conteudo alinhado entre os cards. */
.mb-featured .mb-card__media {
    flex: 0 0 300px;
    height: 300px;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

.mb-featured .mb-card__media img {
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

@media (max-width: 767px) {
    .mb-featured .mb-card__media {
        flex-basis: 260px;
        height: 260px;
    }
}

/* Cardapio: mantem fotos com proporcoes distintas na mesma area visual. */
.mb-menu-card .mb-card__media {
    flex: 0 0 280px;
    height: 280px;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

.mb-menu-card .mb-card__media img {
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}

@media (max-width: 767px) {
    .mb-menu-card .mb-card__media {
        flex-basis: 260px;
        height: 260px;
    }
}

/* --- Combo / fidelidade (faixa escura) ---------------------------------- */

.mb-combo__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--mb-space-12);
    align-items: center;
}

.mb-combo__content > * + * {
    margin-top: var(--mb-space-4);
}

.mb-combo__media {
    display: flex;
    justify-content: center;
}

.mb-combo__media img {
    width: 100%;
    max-width: 420px;
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .5));
}

.mb-loyalty {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--mb-radius-lg);
    padding: var(--mb-space-6);
}

.mb-loyalty__bar {
    display: flex;
    gap: 6px;
    margin-block: var(--mb-space-3);
}

.mb-loyalty__bar span {
    flex-grow: 1;
    height: 10px;
    border-radius: var(--mb-radius-pill);
    background: rgba(255, 255, 255, .2);
}

.mb-loyalty__bar span.is-done {
    background: var(--mb-blue-on-dark);
}



/* --- Responsivo --------------------------------------------------------- */

@media (max-width: 1024px) {
    .mb-hero__inner,
    .mb-combo__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mb-space-8);
    }

    .mb-hero {
        padding-block: var(--mb-space-12) 0;
        text-align: center;
    }

    .mb-hero__content {
        order: 1;
    }

    .mb-hero__media {
        order: 2;
    }

    /* Em tela alta, "cover" cortaria o produto pelos lados. Aqui o frame é
       encaixado pela largura e ampliado, com o produto centralizado e as duas
       bordas laterais jogadas para fora da tela; a sobra vertical fica com a
       cor de fundo, idêntica à base dos frames. */
    /* Em coluna única o frame é ampliado para o produto não ficar minúsculo;
       aí ele transborda pelos dois lados e as duas bordas saem da tela. */
    .mb-hero__bg {
        --mb-bg-zoom: 1.35;
        --mb-bg-focus-x: .886;
    }

    .mb-hero__media {
        min-height: 76vw;
    }

    .mb-hero .mb-label,
    .mb-hero__actions {
        justify-content: center;
    }

    .mb-hero .mb-lede {
        margin-inline: auto;
    }

    /* A dobra fica centralizada aqui, então o ícone ao lado de um texto
       centrado ficava órfão. Cada item vira uma pilha centrada. */
    .mb-perk {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

}

@media (max-width: 640px) {
    .mb-hero__bg {
        --mb-bg-zoom: 1.9;
    }

    .mb-hero__media {
        min-height: 107vw;
    }
}

@media (max-width: 767px) {
    /* Empilhados ficavam altos demais; voltam a ser três colunas, agora
       compactas. */
    .mb-perks {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--mb-space-3);
    }

    .mb-perk {
        gap: var(--mb-space-2);
    }

    .mb-perk svg {
        width: 22px;
        height: 22px;
    }

    .mb-perk__title {
        font-size: 13px;
    }

    .mb-perk__text {
        font-size: 11px;
        line-height: 1.4;
    }

    .mb-hero__actions .mb-btn {
        width: 100%;
    }

}