/* ============================================================
   BEYOND LIMITS — beyond-limits-responsive.css
   ------------------------------------------------------------
   TODAS as media queries do site, num único lugar, organizadas
   por faixa de largura (mobile-first: da mais pequena para a
   maior). Depende de beyond-limits-base.css já estar ligado
   antes deste ficheiro.

   Cada bloco tem um comentário a dizer a que tipo de ecrã real
   corresponde. Dispositivos de referência do projeto:

     • Tablet "Tab 6" (Android 11, 800×1280 físico)
         - RETRATO  → largura CSS ~800px  → cai na faixa 577–991px
         - PAISAGEM → largura CSS ~1280px → cai na faixa ≥992px
     • Tablet genérico 1280×800, 16:10, ~189ppi (mesmo caso acima)
     • Telemóveis comuns (320–420px de largura CSS)

   Escala de breakpoints usada neste projeto (mobile-first):

     ≤380px   → telemóveis muito pequenos (ex.: iPhone SE 1ª/2ª ger.)
     ≤420px   → telemóveis grandes / phablets em retrato
     ≤600px   → phablets grandes / tablets pequenos em retrato
     ≤680px + paisagem → telemóveis deitados (ecrã baixo e largo)
     ≤900px   → tablets em retrato (inclui o Tab 6 retrato, 800px)
     ≥420px   → a partir de phablet (mais espaço horizontal)
     ≥576px   → tablets pequenos / Bootstrap "sm"
     577–991px→ tablets médios (inclui o Tab 6 em retrato)
     ≥768px   → Bootstrap "md" (tablets maiores)
     ≥992px   → desktop / tablets em paisagem (inclui Tab 6 paisagem)

   NOTA: não existe um breakpoint fixo "só para o Tab 6" — em vez
   disso, o Tab 6 é testado nas DUAS orientações e cada uma cai
   naturalmente numa faixa que também serve outros dispositivos
   com largura parecida (abordagem "por conteúdo", não "por
   aparelho único").
   ============================================================ */

/* ============================================================
   0) PREFERÊNCIA DE ACESSIBILIDADE (não é um tamanho de ecrã)
   Aplica-se a qualquer dispositivo, independentemente da largura,
   quando o utilizador pede menos animações no sistema operativo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   1) ≤ 380px — TELEMÓVEIS MUITO PEQUENOS
   Ex.: iPhone SE, telemóveis Android de entrada de gama antigos.
   Aqui o espaço é tão apertado que até os botões de destaque
   (hero) precisam de encolher.
   ============================================================ */
@media (max-width: 380px) {
  .btn-hero {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
  }
}

/* ============================================================
   2) ≤ 420px — TELEMÓVEIS GRANDES / PHABLETS (RETRATO)
   Ex.: a maioria dos smartphones atuais em pé (iPhone 12–15,
   Android médios/grandes). Ajustes de densidade de texto,
   espaçamento de secções, navbar de utilizador autenticado,
   e componentes que precisam de esconder o texto secundário
   por falta de largura.
   ============================================================ */
@media (max-width: 420px) {
  body {
    font-size: 15px;
  }

  section.py-5 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* Carrossel do index: numa faixa tão estreita, a altura fluida
     em vw fica baixa demais — fixa-se uma altura mínima legível */
  .hero-carousel-wrapper {
    height: 260px;
  }

  /* Navbar autenticado: não há espaço para nome + "ambiente •
     companhia" + avatar ao mesmo tempo — esconde o texto de
     ambiente/companhia e dá mais espaço ao nome do utilizador */
  #area-auth a[href="/ambiente"] {
    display: none;
  }

  #area-auth .rounded-pill.border > span {
    max-width: 48vw;
  }

  /* Avatar do estado "não autenticado" — só reduz nestes ecrãs
     muito estreitos, mantendo 35px nos restantes */
  #area-auth .nav-link span.rounded-circle {
    width: 28px;
    height: 28px;
  }

  /* Moldura de tablet decorativa (.tablet-asset): em telemóvel
     ocupa a largura total disponível, sem sobra de margem */
  .tablet-asset {
    max-width: 100%;
  }
}

/* ============================================================
   3) ≥ 420px — A PARTIR DE PHABLET
   Ponto em que já há espaço horizontal suficiente para dar mais
   "respiração" a cards, ícones e CTAs, sem ainda ser um tablet.
   ============================================================ */
@media (min-width: 420px) {
  .hero-overlay {
    padding: 0 1.5rem;
  }

  .about-teaser-card {
    padding: 1.75rem;
  }

  .testimonial-card {
    padding: 1.5rem;
  }

  .card-header-custom {
    padding: 2rem 1.75rem 1.75rem;
  }

  /* Botões da CTA final deixam de empilhar a 100% de largura e
     passam a ficar lado a lado */
  .cta-contact .d-flex.flex-wrap {
    flex-direction: row;
    align-items: center;
  }

  .cta-contact .btn-cta-primary,
  .cta-contact .btn-outline-secondary {
    width: auto;
  }
}

/* ============================================================
   4) ≥ 576px — TABLETS PEQUENOS / BOOTSTRAP "sm"
   Ex.: telemóveis grandes em paisagem, tablets pequenos em
   retrato, ou o limiar onde o grid de estatísticas do index já
   não precisa de espaçamento vertical extra entre colunas.
   ============================================================ */
@media (min-width: 576px) {
  #statistics .col-sm-6 {
    margin-bottom: 0;
  }

  /* Navbar autenticado: com mais espaço, o nome e o link de
     ambiente/companhia podem voltar a ter uma largura máxima
     maior (em vez do corte agressivo do breakpoint ≤420px) */
  #area-auth .rounded-pill.border > span,
  #area-auth a[href="/ambiente"] {
    max-width: 220px;
  }

  /* Secção de boas-vindas do painel RCF: passa de empilhada
     (avatar em cima, texto por baixo) para lado a lado */
  .welcome-section {
    padding: 1.75rem 2rem;
    flex-direction: row;
    text-align: left;
  }

  .user-avatar {
    margin-bottom: 0;
  }

  /* Rodapé: os blocos de contacto/links passam de centrados
     para alinhados à esquerda */
  footer .row.mb-2,
  footer .row.mb-4 {
    text-align: left;
  }
}

/* ============================================================
   5) ≥ 577px — LARGURA MÍNIMA PARA AS CTAs "RESPIRAREM"
   Separado do breakpoint de 576px acima por vir de um componente
   diferente (CTA final) que historicamente usava este valor.
   ============================================================ */
@media (min-width: 577px) {
  .cta-contact,
  .cta-final {
    padding: 2.5rem;
  }
}

/* ============================================================
   6) ≤ 600px — PHABLETS GRANDES / TABLETS PEQUENOS EM RETRATO
   Redução adicional da moldura de tablet decorativa antes de
   chegar ao corte final (100%) que já acontece em ≤420px.
   ============================================================ */
@media (max-width: 600px) {
  .tablet-asset {
    max-width: 560px;
  }
}

/* ============================================================
   7) ≤ 680px EM PAISAGEM — TELEMÓVEIS DEITADOS
   Ecrã baixo e largo (telemóvel rodado). A altura do carrossel
   fluida (vw) fica alta demais para a pouca altura disponível,
   por isso é reduzida explicitamente aqui.
   ============================================================ */
@media (max-width: 680px) and (orientation: landscape) {
  .hero-carousel-wrapper {
    height: 220px;
  }
}

/* ============================================================
   8) ≥ 768px — BOOTSTRAP "md" (TABLETS MAIORES)
   Logótipo da navbar cresce ligeiramente porque já há altura de
   cabeçalho confortável para isso.
   ============================================================ */
@media (min-width: 768px) {
  .navbar-brand img {
    max-height: 60px;
  }
}

/* ============================================================
   9) 577px – 991px — TABLETS MÉDIOS
   *** Inclui o tablet de referência "Tab 6" em RETRATO
       (800×1280, largura CSS ≈800px) ***
   Também cobre outros tablets de 7"–10" em retrato.
   ============================================================ */
@media (min-width: 577px) and (max-width: 991px) {
  /* Repetido aqui de propósito: mesmo valor do breakpoint ≥420px,
     mas mantido explícito para o caso de o breakpoint de phablet
     alguma vez mudar sem se querer alterar tablets médios */
  .about-teaser-card {
    padding: 1.75rem;
  }
}

/* ============================================================
   10) ≤ 900px — TABLETS EM RETRATO (limite superior da moldura)
   *** Cobre o Tab 6 em retrato (800px) ***
   Primeira redução do tamanho máximo da moldura de tablet
   decorativa (.tablet-asset), antes das reduções mais agressivas
   dos breakpoints ≤600px e ≤420px acima.
   ============================================================ */
@media (max-width: 900px) {
  .tablet-asset {
    max-width: 760px;
  }
}

/* ============================================================
   11) SUPORTE A NAVEGADORES ANTIGOS SEM `aspect-ratio`
   Não é uma media query de tamanho de ecrã, mas sim uma feature
   query — fica aqui por ser também um ajuste de adaptação da
   moldura de tablet a diferentes motores de navegador.
   ============================================================ */
@supports not (aspect-ratio: 1/1) {
  .tablet-asset::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 62.5%; /* fallback 16:10 */
  }
}