/* ===========================================================================
   Gaia do Mar — telemóvel.
   Carregado por último. Tudo aqui vive dentro de media queries, por isso a
   versão de computador fica exatamente como está.
   =========================================================================== */

/* A barra de ação existe apenas no telemóvel. */
.mobile-bar{display:none;}

@media (max-width:760px){

  /* ---------------------------------------------------------------------
     1. Espaço para a barra de ação fixa, e respeito pelo entalhe do ecrã
     --------------------------------------------------------------------- */
  /* (a barra fixa foi removida — o corpo não precisa de folga extra em baixo) */

  /* ---------------------------------------------------------------------
     2. Cabeçalho — o seletor de idioma volta a ser alcançável
     --------------------------------------------------------------------- */
  /* o logótipo e o botão de menu estão posicionados em absoluto (centro e
     direita); o seletor de idioma ocupa o espaço livre à esquerda */
  .nav.brand-centered-nav .nav-links-right{
    display:flex !important;
    align-items:center;
    gap:0;
  }
  .nav.brand-centered-nav .nav-links-right a{display:none !important;}
  .nav.brand-centered-nav .nav-links-right #languageTrigger{
    display:inline-flex !important;
    align-items:center;
    gap:4px;
    min-height:44px;
    min-width:52px;
    justify-content:center;
    padding:0 8px;
    font-size:11px;
    letter-spacing:.12em;
  }
  .language-menu{
    left:auto;
    right:12px;
    top:calc(100% - 6px);
    width:auto;
    min-width:190px;
  }
  .language-menu button{
    min-height:52px;
    padding:0 16px;
    font-size:13px;
    letter-spacing:.06em;
  }

  /* ---------------------------------------------------------------------
     3. Menu completo — ecrã inteiro, com rolagem própria
     --------------------------------------------------------------------- */
  .mega-menu{
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:18px 22px calc(34px + env(safe-area-inset-bottom,0px));
    display:flex;
    flex-direction:column;
  }
  .mega-top{position:sticky;top:-18px;background:#081a29;z-index:2;padding-top:6px;}
  .mega-top button{min-width:48px;min-height:48px;line-height:1;}
  .mega-links a{font-size:25px;padding:11px 0;}
  .mega-links span{opacity:.85;}
  .mega-sub a{min-height:44px;display:flex;align-items:center;}

  /* Ofertas, Sobre, Contacto e Reservar deixam de estar escondidos:
     no telemóvel este bloco é a única forma de lá chegar. */
  .mega-grid .mega-extra{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:26px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.18);
    font-size:12px;
  }
  .mega-extra a,
  .mega-extra button{
    min-height:50px;
    display:flex;
    align-items:center;
    padding:0 14px;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-size:11px;
    font-weight:600;
    color:#e6eef0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  }
  .mega-extra [data-open-booking]{
    grid-column:1 / -1;
    order:-1;
    justify-content:center;
    background:#DAA353;
    color:#0A243F;
    box-shadow:none;
  }
  .mega-extra [data-open="membershipModal"]{grid-column:1 / -1;justify-content:center;}

  /* ---------------------------------------------------------------------
     4. Sem elementos flutuantes sobre o conteúdo
        A barra fixa de Reservar/Contactar foi retirada, e as duas bolhas
        continuam escondidas: no telemóvel a navegação é o menu no topo e o
        rodapé, sem nada por cima do texto.
     --------------------------------------------------------------------- */
  .mobile-bar{display:none !important;}
  .help-widget,
  .home-bubble{display:none !important;}

  /* ---------------------------------------------------------------------
     5. Correções de disposição
     --------------------------------------------------------------------- */
  /* os links do rodapé voltam a empilhar, um por linha */
  .sun-footer-column a,
  .sun-footer-column button{
    display:flex !important;
    width:100%;
    min-height:44px;
    align-items:center;
  }
  .sun-footer-grid{grid-template-columns:1fr 1fr;gap:26px 20px;}
  .sun-contact-column{grid-column:1 / -1;}
  .sun-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    text-align:left;
  }
  .sun-legal-links{gap:2px 16px;}

  /* os links sublinhados deixam de esticar de margem a margem */
  .line-link,
  .button-link,
  .text-button{
    width:fit-content;
    max-width:100%;
  }
  /* onde a secção é centrada, o link continua centrado */
  .intro-copy .line-link,
  .heading .line-link,
  .heading.split .line-link,
  .section-center .line-link{
    margin-inline:auto;
    align-self:center;
  }

  /* o seletor de villas cortava a T3 fora do ecrã: passa a três colunas
     iguais, com o texto a mudar de linha dentro de cada botão */
  .villa-switcher{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    overflow:visible;
  }
  .villa-switcher button{
    min-width:0;          /* anula o mínimo de 175px que empurrava a T3 para fora */
    white-space:normal;
    padding:13px 4px;
    font-size:10.5px;
    line-height:1.35;
    text-align:center;
    min-height:52px;
  }

  /* ---------------------------------------------------------------------
     6. Ações principais à largura do dedo
     --------------------------------------------------------------------- */
  .gaia-form button[type="submit"],
  .gaia-form .button,
  .booking-step .button,
  .simple-dialog .button,
  .button.dark.full,
  .availability-btn{
    width:100%;
    min-height:54px;
    justify-content:center;
  }
  .gaia-form label.checkbox,
  .gaia-form .checkbox,
  .booking-step label.checkbox{
    display:flex !important;
    align-items:flex-start;
    gap:12px;
    min-height:44px;
    padding:8px 0;
    font-size:14.5px;
    line-height:1.45;
    color:#33475A;
  }
  .gaia-form label.checkbox span,
  .booking-step label.checkbox span{flex:1;}
  .gaia-form input[type="checkbox"]{
    width:24px;height:24px;
    flex:0 0 24px;
    accent-color:#0A243F;
    margin-top:1px;
  }
  .gaia-form input:not([type="checkbox"]):not([type="radio"]),
  .gaia-form select,
  .gaia-form textarea,
  .booking-step input:not([type="checkbox"]):not([type="radio"]),
  .booking-step textarea{
    min-height:50px;
    font-size:16px;   /* abaixo de 16px o iOS faz zoom ao tocar */
  }
  .gaia-form textarea{min-height:130px;}

  /* ---------------------------------------------------------------------
     7. Caixa de reserva do topo — mais compacta e mais legível
     --------------------------------------------------------------------- */
  .booking-widget{width:calc(100% - 24px);}
  .booking-cell{min-height:0;padding:13px 16px;}
  .booking-cell input[type="date"]{font-size:15px;min-height:38px;}
  .date-inputs{gap:6px;}
  .availability-btn{padding:18px;font-size:11px;letter-spacing:.14em;}

  /* ---------------------------------------------------------------------
     8. Ritmo vertical — as páginas eram longas de mais para percorrer
     --------------------------------------------------------------------- */
  .section{padding:56px 0;}
  .section-sand{padding:52px 0;}
  /* o banner de abertura das páginas internas é tratado no bloco 11 */
  .heading.split{margin-bottom:22px;}
  h2{margin-bottom:12px;}

  /* o texto por cima das fotografias precisa de mais escuro por baixo */
  .offer:after,
  .experience-card:after,
  .event-grid article:after{
    background:linear-gradient(0deg,rgba(4,14,24,.9) 0%,rgba(4,14,24,.55) 42%,rgba(4,14,24,.08) 100%);
  }

  /* ---------------------------------------------------------------------
     9. Tipografia
     --------------------------------------------------------------------- */
  .hero h1{font-size:clamp(34px,10.5vw,46px);line-height:1.08;}
  h2{font-size:clamp(26px,7.6vw,33px);line-height:1.14;}
  p{font-size:15.5px;line-height:1.68;}
  .eyebrow{font-size:10.5px;letter-spacing:.16em;}
}

/* Ecrãs muito estreitos (iPhone SE e semelhantes) */
@media (max-width:380px){
  .mega-links a{font-size:22px;}
  .mega-extra{grid-template-columns:1fr;}
  .sun-footer-grid{grid-template-columns:1fr;}
}

@media (max-width:760px){
  /* ---------------------------------------------------------------------
     10. Diálogos como folha de ecrã inteiro — mais espaço e sem toques
         acidentais na página por baixo
     --------------------------------------------------------------------- */
  dialog.dialog[open]{
    width:100% !important;
    max-width:100% !important;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border-radius:0;
    padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
    display:flex;
    flex-direction:column;
  }
  dialog.dialog[open]{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* um diálogo fechado continua invisível, como manda o browser */
  dialog.dialog:not([open]){display:none !important;}
  .dialog-close{
    position:sticky;
    top:0;
    align-self:flex-end;
    z-index:3;
    min-width:48px;
    min-height:48px;
  }
  .booking-progress{position:sticky;top:0;background:inherit;z-index:2;padding:6px 0 14px;}
  .available-villa{min-height:44px;}
  .available-villa img{height:180px;object-fit:cover;width:100%;}
  .booking-actions,
  .dialog-actions{
    display:flex;
    flex-direction:column-reverse;
    gap:10px;
    margin-top:auto;
    padding-top:18px;
  }
  .booking-actions .button,
  .dialog-actions .button{width:100%;min-height:54px;justify-content:center;}
}

@media (max-width:760px){
  /* o texto sobre a fotografia das celebrações precisa de mais escuro por
     baixo: no telemóvel a imagem fica muito mais clara na zona do texto */
  .celebration-shade{
    background:linear-gradient(0deg,rgba(3,14,23,.86) 0%,rgba(3,14,23,.66) 50%,rgba(3,14,23,.62) 100%) !important;
  }
  /* a fotografia deixava cerca de meio ecrã vazio por baixo do botão */
  .celebrations-section{height:auto !important;min-height:0 !important;}
  .celebration-copy{padding:74px 0 78px;height:auto;}
  .page-banner-shade{
    background:linear-gradient(0deg,rgba(3,14,23,.82) 0%,rgba(3,14,23,.5) 60%,rgba(3,14,23,.3) 100%) !important;
  }
}

@media (max-width:760px){
  /* ---------------------------------------------------------------------
     11. Banner de abertura das páginas internas
         (a Home usa .hero e não é afetada por nada deste bloco)

         O título estava encostado ao topo porque o conteúdo é alinhado ao
         fundo e depois empurrado 120px para cima. Aqui passa a ficar
         centrado no espaço livre — o cabeçalho ocupa os primeiros 74px em
         sobreposição, por isso essa altura é compensada em cima para que o
         centro seja o centro do que se vê, e não o da caixa.
     --------------------------------------------------------------------- */
  .page-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:clamp(300px,48svh,440px);
    /* o cabeçalho sobrepõe os primeiros 74px do banner; somá-los à folga
       inferior é o que faz o título cair no centro ótico do que se vê */
    padding:calc(74px + 44px) 0 44px;
    text-align:center;
  }
  .page-banner-content{
    padding-bottom:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
  }
  .page-banner-content h1{
    margin:0 auto;
    max-width:100%;
    text-wrap:balance;
  }

  /* Nestes banners fica apenas o título: sem sobretítulo, sem descrição
     e sem botão — a barra fixa em baixo já dá acesso permanente a Reservar. */
  .page-banner .eyebrow,
  .page-banner .page-lead,
  .page-banner-actions{
    display:none !important;
  }

  /* com menos texto por cima, o véu pode ser mais leve e a fotografia respira */
  .page-banner-shade{
    /* o título passou do fundo (escuro) para o centro (muitas vezes a zona
       mais clara da fotografia), por isso o véu é mais uniforme */
    background:linear-gradient(0deg,rgba(3,14,23,.74) 0%,rgba(3,14,23,.56) 46%,rgba(3,14,23,.5) 100%) !important;
  }
}

/* Ecrãs baixos (telemóveis pequenos ou em modo horizontal): o banner não
   deve comer o ecrã inteiro. */
@media (max-width:760px) and (max-height:680px){
  .page-banner{min-height:270px;padding-top:calc(74px + 30px);padding-bottom:30px;}
}