/* Henrisk - responsividade mobile (aditivo).
   O design system definiu tokens mobile (--fs-h1-mobile etc.) e o layout usa
   grades de coluna fixa via estilo inline. Aqui ativamos os tokens mobile e
   colapsamos as grades com !important (necessario para vencer o estilo inline). */

/* ===== Tablet e abaixo ===== */
@media (max-width: 900px){
  :root{
    --fs-h1: var(--fs-h1-mobile);
    --fs-h2: var(--fs-h2-mobile);
    --fs-h3-panel: 24px;
  }

  /* Cabecalho: nao ha menu mobile no bundle. Esconde o menu central e o CTA
     (o CTA "Falar com um especialista" ja aparece na hero), deixando so o logo.
     Isso evita a sobreposicao do CTA no header em telas pequenas. */
  #root header nav > div{ display: none !important; }
  #root header nav a[href*="wa.me"]{ display: none !important; }
  #root header nav{ gap: 12px !important; justify-content: flex-start !important; }

  /* Cards de solucoes (4 -> 1) e servicos (3 -> 1) */
  #solucoes div[style*="repeat(4"]{ grid-template-columns: 1fr !important; }
  #servicos div[style*="repeat(3"]{ grid-template-columns: 1fr !important; }

  /* Layouts de duas colunas empilham */
  [style*="0.85fr 1.15fr"],
  [style*="0.9fr 1.1fr"],
  [style*="0.95fr 1.25fr"]{ grid-template-columns: 1fr !important; }

  /* Metodo e segmentos (4 -> 2) */
  #metodo div[style*="repeat(4"]{ grid-template-columns: repeat(2,1fr) !important; }
  #segmentos div[style*="repeat(4"]{ grid-template-columns: repeat(2,1fr) !important; }

  /* Clientes (6 -> 3) */
  #projetos div[style*="repeat(6"]{ grid-template-columns: repeat(3,1fr) !important; }

  /* Barra de numeros (Stats): tem altura fixa de 75px que corta no mobile */
  main > div[style*="height: 75px"]{ height: auto !important; padding: 18px 0 !important; }
  main > div[style*="height: 75px"] [style*="repeat(4"]{ grid-template-columns: repeat(2,1fr) !important; }

  /* Cabecalhos de secao em flex: permitir quebra */
  #servicos [style*="space-between"],
  #segmentos [style*="space-between"]{ flex-wrap: wrap !important; }
}

/* ===== Celular ===== */
@media (max-width: 560px){
  #metodo div[style*="repeat(4"]{ grid-template-columns: 1fr !important; }
  #segmentos div[style*="repeat(4"]{ grid-template-columns: repeat(2,1fr) !important; }
  #projetos div[style*="repeat(6"]{ grid-template-columns: repeat(2,1fr) !important; }
  #projeto-destaque div[style*="repeat(2"]{ grid-template-columns: 1fr !important; }
  main > div[style*="height: 75px"] [style*="repeat(4"]{ grid-template-columns: 1fr !important; }

  /* Botoes da hero: deixar em coluna para nao estourar a largura */
  #topo [style*="display: flex"][style*="gap: 16px"]{ flex-wrap: wrap !important; }
}

/* ===== Rodape ===== */
@media (max-width: 900px){
  #root footer [style*="grid-template-columns"],
  #contato [style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  #root footer [style*="space-between"]{ flex-wrap: wrap !important; gap: 12px !important; }
}

/* ===== Cabecalho dos grupos de servico (evitar nowrap estourando) ===== */
@media (max-width: 900px){
  #servicos h3[style*="nowrap"]{ white-space: normal !important; }
  #servicos [style*="gap: 14px"]{ flex-wrap: wrap !important; }
}

/* ===== Menu hamburguer mobile (aditivo, ver mobile-menu.js) ===== */
#henrisk-burger{ display:none; }
#henrisk-drawer{ display:none; }
@media (max-width: 900px){
  #henrisk-burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    position:fixed; top:0; right:14px; height:79px; width:46px;
    background:transparent; border:none; cursor:pointer; z-index:60; padding:0;
  }
  #henrisk-burger span{ display:block; height:2px; width:26px; background:#fff; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease; }
  #henrisk-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  #henrisk-burger.is-open span:nth-child(2){ opacity:0; }
  #henrisk-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  #henrisk-drawer{
    display:block; position:fixed; inset:0; z-index:100;
    background:rgba(8,22,38,.55); opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  body.henrisk-menu-open{ overflow:hidden; }
  body.henrisk-menu-open #henrisk-drawer{ opacity:1; pointer-events:auto; }

  #henrisk-drawer-panel{
    position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
    background:var(--navy-600,#0a1c30); box-shadow:-20px 0 60px rgba(0,0,0,.5);
    transform:translateX(100%); transition:transform .28s ease;
    padding:84px 26px 32px; display:flex; flex-direction:column; box-sizing:border-box;
  }
  body.henrisk-menu-open #henrisk-drawer-panel{ transform:translateX(0); }
  #henrisk-drawer-close{
    position:absolute; top:18px; right:20px; background:none; border:none; color:#fff;
    font-size:34px; line-height:1; cursor:pointer; padding:0; width:40px; height:40px;
  }
  #henrisk-drawer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  #henrisk-drawer-list a{
    display:block; color:#e6eef5; text-decoration:none; font-size:16px; font-weight:600;
    letter-spacing:1px; padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.08);
  }
  #henrisk-drawer-list a:active,#henrisk-drawer-list a:hover{ color:var(--teal-500,#35b7ae); }
  #henrisk-drawer-cta{
    margin-top:26px; background:var(--teal-500,#35b7ae); color:#06202b; text-decoration:none;
    text-align:center; font-weight:700; letter-spacing:.6px; text-transform:uppercase; font-size:13px;
    padding:16px 20px; border-radius:6px;
  }
}