/* =========================================================
   AJUSTES DE CELULAR
   Item 32 — revisão mobile.

   Carregado pela navbar, ou seja, depois do CSS de cada página.
   ========================================================= */

/* ---------- FUNDO FIXO ----------
   Vinte arquivos declaram o fundo como
       background: url(...) no-repeat center center fixed;
   O 'fixed' no fim é background-attachment. No Safari do iPhone ele
   trava, pisca e às vezes some durante o scroll, porque o navegador
   recompõe a camada a cada quadro. No desktop o efeito é bonito e fica;
   no celular vira defeito.

   Reescrever os vinte arquivos seria arriscado e desnecessário: basta
   soltar o fundo no celular. A imagem continua a mesma. */
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
    }
}

/* Safari do iOS também em tela grande (iPad). O @supports com
   -webkit-touch-callout identifica o motor da Apple. */
@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll;
    }
}

/* ---------- ESTOURO HORIZONTAL ----------
   Nenhuma página deve rolar de lado. Quando isso acontece, é sempre
   por um elemento largo demais — e o sintoma some, mas a causa fica.
   Aqui garantimos que imagens e mídias nunca ultrapassem a largura. */
@media (max-width: 768px) {
    img,
    video,
    iframe,
    table {
        max-width: 100%;
    }
}

/* ---------- ÁREA SEGURA ----------
   iPhone com notch e barra inferior: sem isso o rodapé fica embaixo da
   barra de gestos e o último botão vira difícil de acertar. */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .exotic-footer {
            padding-bottom: max(2rem, env(safe-area-inset-bottom));
        }
    }
}

/* ---------- CAMPOS ----------
   Fonte menor que 16px faz o iOS dar zoom sozinho ao focar o campo, e
   a página fica torta depois. 16px é o mínimo que evita isso. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}

/* ---------- ALVOS DE TOQUE ----------
   44px é a medida recomendada pela Apple e pelo Google para o dedo. */
@media (max-width: 768px) {
    button,
    .btn,
    [class*="btn-"],
    .fc-btn,
    .dropdown-item {
        min-height: 44px;
    }
}

/* ---------- CAMPO DE DATA NO SAFARI ----------
   O input[type="date"] do iPhone tem largura mínima própria: o Safari
   reserva espaço para o texto da data mais o controle de calendário e
   NÃO encolhe abaixo disso, ainda que a regra peça width: 100%. Num
   aparelho estreito o campo estoura o quadro e encosta no ornamento.

   O Chrome respeita o width e por isso o defeito não aparece aqui na
   medição — é específico do motor da Apple.

   Tirar a aparência nativa devolve o controle da largura. O min-width
   zerado é o que de fato permite encolher: sem ele o valor intrínseco
   continua valendo dentro de flex e grid. A altura mínima volta na mão
   porque, sem a aparência nativa, o iOS colapsa o campo. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
}

/* O iOS centraliza o valor e ainda lhe dá margem própria, o que empurra
   o texto para fora do campo depois que a aparência nativa sai. */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}

/* ---------- PALAVRAS LONGAS NOS TÍTULOS ----------
   Dois títulos não cabiam por muito pouco na largura de um iPhone Pro
   Max e o navegador quebrava DENTRO da palavra, deixando uma letra
   sozinha na linha de baixo:

       PORTAL CONTEMPLATIV / O     (250px de palavra numa caixa de 242px)
       GASTRONOMI / A              (262px de palavra numa caixa de 256px)

   O culpado é o espaçamento entre letras, que nestes títulos é largo de
   propósito: os 4px de "Contemplativo" somam 52px sozinhos, mais que o
   dobro do que faltava. Apertar o espaçamento só nas telas estreitas
   resolve sem mexer no texto nem descaracterizar o título nas outras.

   O tamanho da fonte cede um pouco junto no título de seção, para haver
   folga de sobra: o desenho da Cinzel Decorative varia alguns pixels
   entre navegadores, e uma margem de 13px não sobreviveria a isso. */
@media (max-width: 480px) {
    .portal-card-title {
        /* Era 2px, calibrado quando este titulo usava Cinzel. Ao entrar
           na padronizacao ele passou para Cinzel Decorative, que desenha
           mais largo, e "Contemplativo" voltou a estourar a caixa por
           3px em telas de 414px. */
        letter-spacing: 1px;
    }

    .section-title {
        font-size: 1.7rem;
        letter-spacing: .5px;
    }
}

/* Nos aparelhos pequenos a caixa útil cai para perto de 200px — em um
   iPhone SE sobra menos da metade do que sobra num Pro Max. Apertar só
   o espaçamento já não basta ali, e a fonte precisa ceder junto. */
@media (max-width: 400px) {
    .portal-card-title {
        font-size: 1.15rem;
        letter-spacing: 1px;
    }

    .section-title {
        font-size: 1.4rem;
        letter-spacing: 0;
    }
}

/* ---------- FUNDO DO CELULAR ----------
   A arte de fundo do site é deitada (16:9) e a tela do celular é em pé.
   Somado a isso, o 'scroll' logo acima troca a área que o 'cover' tem de
   cobrir: deixa de ser a JANELA e passa a ser a PÁGINA INTEIRA. Numa
   página de cinco mil pixels de altura a imagem era esticada a várias
   vezes o seu tamanho e quase nada dela aparecia.

   Medido antes desta regra, num aparelho de 430px:

       /cardapio       27,26x de ampliação    0,9% da arte visível
       /reservations    6,65x                 3,9%
       /bistro          4,86x                 5,3%
       /                2,87x                15,9%

   A saída é uma camada própria, presa à janela por position: fixed. Ela
   dá o mesmo enquadramento que o background-attachment: fixed daria,
   sem usá-lo — e é justamente ele que faz o fundo piscar no Safari.

   O z-index negativo a coloca atrás do conteúdo e ainda assim à frente
   do fundo da página: o fundo declarado no body é propagado para a tela
   do navegador, e um descendente de z-index negativo pinta depois dela.

   A arte é 9:16, na proporção do aparelho, então sobra de 80% a 100%
   dela conforme a tela. Vale para todas as páginas: esta folha é
   carregada pela navbar e, nas páginas que não têm navbar, pelo link
   que foi acrescentado a elas. */
@media (max-width: 768px) {
    body {
        background-image: none;
    }

    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -1;
        background-image: url('../images/medieval-bg-mobile.webp');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
}

/* ---------- NADA PASSA DA LARGURA DA TELA ----------
   Com a fonte do sistema ampliada — recurso de acessibilidade do
   iPhone — alguns blocos cresciam por dentro e empurravam a página de
   lado. Medido em produção: 6px de rolagem lateral num aparelho de
   360px com fonte a +50%, e 29px a +100%. Num aparelho de 430px isso
   nunca aparece, e foi por isso que o defeito surgiu só no telefone do
   dono.

   A correção prende os blocos à largura da janela em vez de escondê-la
   com overflow-x: hidden — esconder faria o sintoma sumir e deixaria a
   causa, e o conteúdo continuaria inalcançável fora da tela. */
.magic-dropdown,
.magic-modal-overlay,
.magic-modal-content {
    max-width: 100vw;
    box-sizing: border-box;
}

.magic-modal-content {
    /* dentro do modal, quem manda é a margem lateral do overlay */
    max-width: min(450px, calc(100vw - 30px));
}

.dropdown-item {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* O RÓTULO DO CARD DA GALERIA.

   Primeira tentativa: overflow-wrap: break-word, para a palavra não
   empurrar a fileira. Errado, e o teste mostrou na hora — virou
   "GASTRONO / MIA" e "COWORKIN / G", exatamente o defeito de letra
   órfã que já tínhamos corrigido em outros títulos.

   A causa real é o espaçamento entre letras. "Gastronomia" tem onze
   letras e mede 95px num card de 95px — o espaçamento de 1px responde
   por 11px desses, mais do que o que falta. Sem ele a palavra cabe
   inteira, sem quebrar nada. */
.album-text {
    max-width: 100%;
    overflow-wrap: normal;
}

@media (max-width: 768px) {
    .album-text {
        /* Medido: "Gastronomia" ocupa 101,19px num card de 95px. Não
           quebra — transborda 6px para os vãos entre os cards. Zerar o
           espaçamento não resolveu (o computado voltou como `normal`),
           então quem cede é o tamanho: 0,68rem põe a palavra em 92px e
           ela passa a caber inteira dentro do próprio card. */
        font-size: .68rem;
        letter-spacing: 0;
    }
}