/* ==========================================================================
   JJACTIVOS — 04-RESPONSIVE.CSS
   --------------------------------------------------------------------------
   Ajustes específicos de mobile/tablet que complementam os media queries
   já embutidos nos outros ficheiros.
   Princípio (spec 22): o mobile é uma composição própria, não um desktop
   comprimido.
   ========================================================================== */

/* Rede de segurança: nenhum elemento pode provocar scroll horizontal.
   "clip" (e não "hidden") para não quebrar o header sticky. */
body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   NAVEGAÇÃO MOBILE
   Até 1020px: esconder menu horizontal e mostrar o botão hambúrguer.
   O menu abre como painel deslizante a partir do topo.
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .nav-toggle { display: inline-grid; place-items: center; }

  /* Ancorado ao fundo do header (que é sticky, logo posicionado), para
     acompanhar a altura normal e a compacta após scroll. */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-header);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease);
  }

  .main-nav.is-open {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
  }
  .main-nav li { border-bottom: 1px solid var(--color-border); }
  .main-nav a {
    display: block;
    padding: var(--space-4) 0;
    font-size: 0.95rem;
  }
  .main-nav a[aria-current="page"]::after { display: none; }

  /* Página fixa enquanto o menu está aberto */
  body.nav-open { overflow: hidden; }

  /* Ícone hambúrguer transforma-se em "X" quando o menu está aberto */
  .nav-toggle svg line {
    transform-origin: 12px 12px;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast);
  }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(1) { transform: rotate(45deg) translateY(5px); }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
}

/* Header mais baixo em telemóvel */
@media (max-width: 600px) {
  :root {
    --header-h: 68px;
    --header-h-scrolled: 60px;
  }
}

/* Reduzir a assinatura do símbolo em ecrãs pequenos */
@media (max-width: 480px) {
  .brand__word small { display: none; }
  .site-header .brand { font-size: 1.15rem; gap: var(--space-2); }
  .site-header .brand__symbol { height: 26px; }
  .header-actions { gap: var(--space-2); }
  .header-actions .btn--primary { display: none; } /* CTA vive no menu mobile */
  .nav-toggle { margin-right: calc(-1 * var(--space-2)); }
}
@media (max-width: 360px) {
  .site-header .brand { font-size: 1rem; }
  .site-header .brand__symbol { height: 22px; }
  .lang-switch { font-size: 0.72rem; gap: 0.3rem; }
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA E ESPAÇAMENTO EM TELEMÓVEL
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --fs-h1: 2.25rem;
    --fs-h2: 1.75rem;
    --fs-body-lg: 1.0625rem;
  }
  .section-head { margin-bottom: var(--space-6); }
  .section--dark:not(.coverage-map) { padding-block: var(--space-7); }

  /* Tags sectoriais (Banking, Leasing…) em grelha regular */
  .sector-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-3); }
  .sector-tag { min-width: 0; }

  .hero__signature { display: none; }
  .hero__rule { margin-bottom: var(--space-4); }
  .hero__support { margin-bottom: var(--space-5); }

  /* CTA principal a toda a largura, fácil de tocar com o polegar */
  .hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .hero__cta .btn { justify-content: center; }
  .hero__cta .btn--secondary { padding-block: 0.85em; }

  .cta-band__grid { text-align: left; }
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .card { padding: var(--space-5); }
  .card--accent::before { left: var(--space-5); }
  .card__icon { width: 46px; height: 46px; margin-bottom: var(--space-4); }
  .info-card { padding: var(--space-5); }

  /* Cards com imagem a sangrar (Cobertura Ibérica): a margem negativa
     inline acompanha o novo padding do card. */
  .card > .geo-visual[style*="margin:-2rem"] {
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5) !important;
  }
}

/* Em ecrãs tácteis não há hover: evitar cards "presos" levantados */
@media (hover: none) {
  .card:hover,
  .card-link:hover,
  .btn:hover,
  .process__step:hover .process__node { transform: none; }
}

/* --------------------------------------------------------------------------
   PROCESS LINE (vertical em mobile) — nós mais pequenos
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .process { --node-size: 56px; margin-top: var(--space-6); }
  .process__node svg { width: 24px; height: 24px; }
  .process__num { font-size: 0.65rem; top: -9px; }
  .process__step { padding-bottom: var(--space-5); }
  .process__body { padding-top: var(--space-2); }
  .process__desc { max-width: none; }
}

/* --------------------------------------------------------------------------
   BARRAS DE PROVAS
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Barra "Experiência & Confiança" (HOME): em telemóvel os textos de
     11–12px ficavam ilegíveis — passa a grelha 2×2 com tamanhos normais. */
  .experience-bar { gap: var(--space-5); }
  .experience-bar .section-head h2 { font-size: 1.25rem; }
  .experience-bar .proof-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-4);
    width: 100%;
  }
  .experience-bar .proof { padding-right: var(--space-3); }
  .experience-bar .proof__icon svg { width: 22px; height: 22px; }
  .experience-bar .proof__title { font-size: 0.9rem; }
  .experience-bar .proof__sub { font-size: 0.8rem; }

  /* Processo Integrado: barra de 3 provas forçada inline a 3 colunas */
  .proof-bar[style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }
  .proof-bar[style*="repeat(3"] .proof { align-items: center; }
  .proof-bar[style*="repeat(3"] .proof::after { display: none; }
}

/* --------------------------------------------------------------------------
   SECÇÃO CARREIRAS + VAMOS FALAR (HOME)
   Em mobile a foto passa para cima do texto (em vez de lhe roubar largura)
   e os textos recuperam tamanhos legíveis.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .split-cta__panel--light { flex-direction: column; }
  .split-cta__photo {
    flex: none;
    width: 100%;
    height: 200px;
    object-position: center 30%;
  }
  .split-cta__content,
  .split-cta__panel--cyan { padding: var(--space-6) var(--gutter); }
  .split-cta__panel--cyan { border-radius: 40px 0 0 0; }

  .split-cta__panel .eyebrow { font-size: var(--fs-eyebrow); }
  .split-cta__panel h2 { font-size: 1.4rem; }
  .split-cta__panel p { font-size: 0.95rem; }
  .split-cta__panel .card__tags { font-size: 0.85rem; }
  .split-cta__panel .btn { padding: 0.8em 1.4em; font-size: 0.95rem; }
  .split-cta__panel .btn .arrow,
  .split-cta__panel .btn svg:not(.arrow) { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   CARREIRAS — ajustes a estilos inline
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* "Portugal + Espanha / Diferentes áreas / Recrutamento contínuo":
     3 colunas inline → lista vertical com ícone à esquerda */
  .section-head .feature-row[style*="repeat(3,auto)"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
    padding-top: var(--space-2);
  }
  .section-head .feature-row[style*="repeat(3,auto)"] .feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left !important;
  }
  .section-head .feature-row[style*="repeat(3,auto)"] .feature__icon {
    margin: 0 !important;
  }
  .section-head .feature-row[style*="repeat(3,auto)"] .feature__title { margin: 0; }

  /* Caixa "Candidatura espontânea" */
  .media-block[style*="padding:2rem"] {
    padding: var(--space-5) !important;
    gap: var(--space-4) !important;
  }

  .quote p { font-size: 1.1rem; }
  .feature-row { padding-top: var(--space-5); }
}

/* Ícone de aspas da citação: sem tamanho definido ocupava a largura toda
   quando a coluna passa a largura total */
@media (max-width: 860px) {
  .quote > span svg { width: 40px; height: 40px; margin-bottom: var(--space-3); }
}

/* --------------------------------------------------------------------------
   FORMULÁRIOS E FILTROS
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .filters .btn { justify-content: center; }
}
@media (max-width: 480px) {
  .form .btn--primary,
  .form button[type="submit"] { width: 100%; justify-content: center; }
  .tabs { gap: var(--space-2); }
  .tab { padding: 0.65em 1.1em; }
  .contact-card { text-align: left; }
  .hours-card { padding: var(--space-4); }
}

/* --------------------------------------------------------------------------
   FOOTER — em ecrãs estreitos os textos (11–12px no desktop) ganham
   tamanho legível e as ligações áreas de toque maiores.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-5);
    padding-block: var(--space-5) var(--space-6);
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand .brand { font-size: 1.2rem; }
  .footer-brand .brand__symbol { height: 28px; }
  .footer-brand .brand__word small { display: block; font-size: 0.5rem; }
  .footer-brand__tag { font-size: 0.72rem; }

  .footer-col h4 { font-size: 0.75rem; }
  .footer-col ul { font-size: 0.875rem; gap: 0; }
  .footer-col li a,
  .footer-col li .footer-link-btn { display: inline-block; padding-block: 0.4rem; }

  .footer-meta { font-size: 0.85rem; gap: var(--space-4); padding-block: var(--space-4); }
  .footer-meta .footer-social { margin-left: 0 !important; }
  .footer-social a { width: 40px; height: 40px; }
  .footer-social svg { width: 18px; height: 18px; }

  .footer-bottom { flex-direction: column; font-size: 0.75rem; padding-block: var(--space-4); }
}
@media (max-width: 360px) {
  .footer-top { grid-template-columns: 1fr; }
}