/* ============================================================
   WUJI KUNG FU — responsive.css
   Desktop → Tablet → Celular. Menu overlay mobile.
   ============================================================ */

/* ---------- Tablet (≤ 980px) ---------- */
@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-brand{grid-column:1/-1}

  /* Menu vira overlay */
  .nav-toggle{display:block;z-index:1002}
  .nav-close{display:grid}
  /* Quando o menu está aberto, remove o backdrop-filter do header:
     um filter/backdrop-filter no ancestral vira o bloco de contenção
     do position:fixed, prendendo o overlay dentro da barra (bug pós-scroll). */
  body.menu-open .site-header,
  body.menu-open .site-header.solid{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:transparent;border-bottom-color:transparent;
  }
  .nav-links{
    position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:1000;
    flex-direction:column;align-items:center;justify-content:center;gap:6px;
    background:#08080a;
    opacity:0;pointer-events:none;transform:translateY(-12px);
    transition:opacity .5s var(--ease),transform .5s var(--ease);
  }
  .nav-links.open{opacity:1;pointer-events:auto;transform:none}
  .nav-links a{
    font-size:1.1rem;letter-spacing:.16em;padding:14px 20px;
    opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease);
  }
  .nav-links.open a{opacity:1;transform:none}
  /* Botão de fechar (X) dentro do overlay — some no desktop */
  .nav-close{
    position:absolute;top:18px;right:18px;width:46px;height:46px;
    display:grid;place-items:center;border:1px solid var(--borda);
    border-radius:12px;background:transparent;color:var(--dourado);
    opacity:0;transform:scale(.9);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .3s,color .3s;
    z-index:2;
  }
  .nav-close .ico{width:24px;height:24px}
  .nav-links.open .nav-close{opacity:1;transform:none;transition-delay:.05s}
  .nav-close:hover{color:var(--dourado-claro);border-color:var(--borda-forte)}
  .nav-links.open a:nth-child(1){transition-delay:.08s}
  .nav-links.open a:nth-child(2){transition-delay:.12s}
  .nav-links.open a:nth-child(3){transition-delay:.16s}
  .nav-links.open a:nth-child(4){transition-delay:.20s}
  .nav-links.open a:nth-child(5){transition-delay:.24s}
  .nav-links.open a:nth-child(6){transition-delay:.28s}
  .nav-links.open a:nth-child(7){transition-delay:.32s}
  .nav-links.open a:nth-child(8){transition-delay:.36s}
  .nav-links.open a:nth-child(9){transition-delay:.40s}
  .nav-links a::after{display:none}
}

/* ---------- Mobile grande (≤ 720px) ---------- */
@media(max-width:720px){
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column;text-align:center}

  /* Hero: logo acompanha a altura da tela e nunca nasce cortado */
  .hero{padding-top:96px;padding-bottom:40px;min-height:100svh}
  .hero-logo{width:auto;height:min(42vh,320px);max-width:82vw}

  /* Timeline: linha à esquerda */
  .tl::before{left:22px!important}
  .tl-node{left:22px!important}
  .tl-item{width:100%!important;margin-left:0!important;padding-left:56px}
  .tl-item:nth-child(even) .tl-card::before{right:-6px!important;left:auto!important}

  .curr-branch{grid-template-columns:1fr!important}
  .grad-timeline .grad-row{grid-template-columns:1fr!important;text-align:left!important}
}

/* ---------- Mobile pequeno (≤ 480px) ---------- */
@media(max-width:480px){
  :root{--gutter:18px}
  .brand .wordmark small{display:none}
  .btn{padding:13px 24px;font-size:.74rem}
  .card__hanzi{font-size:4.6rem}
  .hero .hero-title{font-size:clamp(3.2rem,20vw,5rem)!important}
  .hero-logo{height:min(38vh,280px)}
}