/*
 * totem-layout.css
 * Centralização vertical e responsividade das telas do fluxo.
 *
 * Cada tela ([data-pagina]) vira uma coluna flex que ocupa a altura toda:
 *   - o conteúdo fica sempre no meio (espaçadores ::before/::after);
 *   - os botões Voltar/Avançar saem da posição absoluta e vão para o rodapé em fluxo,
 *     então nunca ficam por cima do conteúdo;
 *   - se o conteúdo for maior que a tela, ela rola em vez de cortar.
 *
 * Carregado depois de responsive.css: as regras aqui têm prioridade sobre as
 * posições fixas em rem que existiam por faixa de largura.
 */

/* ---------- Coluna centralizada ---------- */

[data-pagina].d-block {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Em telas largas (TV deitada) o conteúdo fica numa coluna central de até 1100px */
    padding-left: max(0px, calc((100% - 1100px) / 2));
    padding-right: max(0px, calc((100% - 1100px) / 2));
}

@supports (height: 100dvh) {
    [data-pagina].d-block {
        height: 100dvh;
        min-height: 100dvh;
    }
}

/* Os blocos nunca são "espremidos": se não couber, a tela rola. */
[data-pagina].d-block > * {
    flex-shrink: 0;
}

/* Espaçadores que empurram o conteúdo para o meio; somem quando não há sobra. */
[data-pagina].d-block::before,
[data-pagina].d-block::after {
    content: '';
    display: block;
    flex: 1 1 0;
    min-height: 0;
}

/* Botões de navegação: rodapé em fluxo, sempre depois do conteúdo. */
[data-pagina] .botoes-navegacao {
    position: static !important;
    order: 100;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 2rem !important;
    margin-bottom: clamp(1rem, 3vh, 4rem);
    bottom: auto !important;
}

/* Blocos que eram fixos/absolutos e agora seguem o fluxo da coluna. */
[data-pagina] .img-tam2,
[data-pagina] .img-tamIni,
[data-pagina] .div-position1,
[data-pagina] #div-otimo-tudo-pronto-para-a-partida {
    position: static !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
}

[data-pagina] #div-otimo-tudo-pronto-para-a-partida {
    width: min(56.6rem, 90%) !important;
    margin: 2rem auto 0 !important;
}

/* Alturas fixas que impediam a centralização. */
[data-pagina] #div-qual-local-partida,
[data-pagina] #div-estamos-quase-concluindo {
    height: auto !important;
    top: auto !important;
}

/* Animação da "mão" na tela inicial: logo abaixo do texto "Toque na tela". */
[data-pagina] [itemid="mao"] {
    position: static !important;
    display: block;
    margin: 1rem auto 0 !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 5.5rem !important;
}

/* ---------- Passaporte (adulto 1 e adulto 2) ---------- */

/*
 * A arte do passaporte aberto (1700x2401) e o conteúdo ocupam a MESMA célula de um grid:
 * a altura da caixa é o maior entre a altura natural da arte e a altura dos campos.
 * Assim o passaporte nunca corta os campos e, quando eles cabem, a arte fica na proporção.
 * A largura é limitada pela altura da tela para o passaporte caber sem rolagem.
 */
.passaporte-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%; /* sem folga lateral: o passaporte ocupa a largura toda da tela */
    margin: 0 auto;
    padding: 0;
    z-index: 0;
}

.passaporte-wrap .passaporte-fundo {
    grid-row: 1;
    grid-column: 1;
    position: static !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: fill;
    align-self: stretch;
    pointer-events: none;
}

.passaporte-wrap .passaporte-conteudo {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 5% 5%;
}

/* Título sempre sobre a faixa cinza da arte (que fica a ~47% da altura). */
.passaporte-wrap .passaporte-m {
    position: absolute !important;
    z-index: 1;
    display: block !important;
    left: 0;
    right: 0;
    top: 47% !important;
    width: 100%;
    margin: 0 !important;
    padding: 0;
    transform: translateY(-50%);
    text-align: center;
}

/*
 * Campos começam logo abaixo da faixa (52% da altura da arte). As porcentagens de
 * margem resolvem sobre a largura interna (90% da caixa): 52% x 1.412 / 0.9 = ~79%.
 * O mínimo em rem cobre telas estreitas, onde a arte é esticada pelos campos e a
 * faixa desce junto: a margem precisa ser ~108% da altura dos campos (~30rem).
 */
.passaporte-wrap .position-input {
    margin: max(79%, 32.5rem) 0 0 !important;
}

/* ---------- Passaporte em telas em pé mais baixas (tablets) ---------- */

/* Campos mais compactos para o passaporte caber na proporção da arte sem rolagem. */
@media (max-height: 1500px) {
    .passaporte-wrap .form-control-lg,
    .passaporte-wrap .form-control-select-lg {
        height: 3.4rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 1rem !important;
    }

    .passaporte-wrap .form-group {
        margin-bottom: 0.5rem !important;
    }

    .passaporte-wrap .col-form-label {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .passaporte-wrap video {
        margin-top: 1rem !important;
    }

    .passaporte-wrap .passaporte-m {
        font-size: 1.2rem !important;
    }
}

/* ---------- Telas baixas ou deitadas (TV 1920x1080, tablet deitado, notebooks) ---------- */

@media (max-height: 1100px), (orientation: landscape) {
    .remove-img {
        display: none !important;
    }

    .distancia {
        margin-top: 1rem !important;
    }

    [data-pagina] .mt-5,
    [data-pagina] .mt-lg-5,
    [data-pagina] .mt-md-5,
    [data-pagina] .mt-xl-5 {
        margin-top: 1rem !important;
    }

    h1 {
        font-size: 2rem !important;
    }

    .radio-input {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .radio-number {
        font-size: 1.5rem !important;
    }

    [data-pagina] .botoes-navegacao {
        margin-top: 1.25rem !important;
    }

    /* Imagens ilustrativas limitadas pela altura, não pela largura. */
    .img-tamIni,
    .img-tam2,
    .img-destino,
    .img-aero {
        width: auto !important;
        max-height: 42vh !important;
    }

    /*
     * Passaporte em tela deitada: a arte continua INTEIRA (nunca é recortada) e os campos
     * ficam na página de baixo. A largura é limitada pela altura disponível e os campos
     * ficam bem compactos para caberem na proporção da arte.
     */
    .passaporte-wrap {
        max-width: min(1000px, calc((100vh - 10rem) * 0.7));
    }

    .passaporte-wrap .form-control-lg,
    .passaporte-wrap .form-control-select-lg {
        height: 3rem !important;
        padding: 0.35rem 0.75rem !important;
        font-size: 0.95rem !important;
    }

    .passaporte-wrap .form-group {
        margin-bottom: 0.4rem !important;
    }

    .passaporte-wrap .col-form-label {
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
    }

    .passaporte-wrap video {
        margin-top: 0.5rem !important;
    }

    .passaporte-wrap .passaporte-m {
        font-size: 1.15rem !important;
    }

    /* Margem mínima abaixo da faixa recalculada para os campos compactos (~108% da altura deles). */
    .passaporte-wrap .position-input {
        margin-top: max(79%, 27rem) !important;
    }
}

@media (max-height: 700px) {
    .distancia {
        margin-top: 0.5rem !important;
    }

    h1 {
        font-size: 1.6rem !important;
    }
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 599px) {
    [data-pagina].d-block {
        padding-left: 0;
        padding-right: 0;
    }

    .passaporte-wrap .passaporte-conteudo {
        padding: 0 3% 4%;
    }
}