/* ==========================================================================
   CELULAR E TABLET
   A regra aqui nao e encolher tudo. E simplificar o layout e manter o ritmo
   do filme: menos colunas, menos travessia, mesma narrativa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ate 1024px: as colunas editoriais viram uma coluna so.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  .person__bleed { grid-template-columns: 1fr; }
  .person__photo {
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    border-radius: 0;
  }
  .person__panel {
    margin-left: 0;
    margin-inline: var(--gutter);
    margin-top: calc(var(--s5) * -1);
    max-width: none;
  }

  .person__closing { grid-template-columns: 1fr; gap: var(--s5); }
  .person__round { width: min(60vw, 300px); }

  .case__grid { grid-template-columns: 1fr; }
  .case__media,
  .case__body { grid-column: 1; }

  .quote { max-width: 26ch; }

  .board { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Ate 760px: o filme fica mais curto e o texto manda.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* no telefone o carrossel vira quase tela cheia: uma peca por vez, com a
     ficha logo abaixo e o titulo no alto */
  .gallery { perspective: 900px; }
  .gallery__head { top: clamp(58px, 9vh, 90px); }
  .gallery__info { bottom: clamp(64px, 9vh, 96px); min-height: clamp(196px, 30vh, 250px); }
  .gallery__hint { display: none; }
  .ginfo__d { font-size: 14px; }


  /* Trilhas mais curtas. O celular nao aguenta o mesmo tempo de tela. */
  .scene--hero     .track { --track: 200vh; }
  .scene--exp      .track { --track: 300vh; }
  .scene--thinking .track { --track: 220vh; }
  .scene--impact   .track { --track: 190vh; }
  .scene--gallery  .track { --track: 380vh; }
  /* a orbita precisa de folga: sao cinco passos, um de cada vez */
  .scene--thinking .think__orbit { --track: 300vh; }
  .scene--person   .person__track { --track: 300vh; }

  .scene--person    { padding: var(--s7) 0; }
  .scene--workintro { padding: var(--s7) 0 var(--s6); }
  .case { padding: var(--s6) 0; }

  /* Navegacao enxuta. Em portugues os links sao mais longos que em ingles,
     entao o espaco entre marca e menu encolhe para nada quebrar linha. */
  .nav { padding: 18px var(--gutter); gap: var(--s2); }
  .nav__links { gap: 18px; }

  /* Indicador: capitulo e percentagem, sem a barra do meio. */
  .hud { padding: 16px var(--gutter); grid-template-columns: 1fr auto; }
  .hud__bar { display: none; }

  /* Abertura: a foto sobe, o degrade fecha por baixo e o nome ocupa o pe. */
  .hero__media img { object-position: 58% 26%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(5, 9, 7, .74) 0%,
        rgba(5, 9, 7, .16) 24%,
        rgba(5, 9, 7, .55) 58%,
        rgba(5, 9, 7, .96) 88%);
  }
  .hero__mark { left: 56%; top: 34%; }
  .hero__chip { padding: 10px 16px; gap: 10px; }
  .intro__cue { right: auto; left: var(--gutter); bottom: 62px; }
  .scene--hero .stage { padding-bottom: clamp(112px, 16vh, 170px); }
  .hero__statement { bottom: clamp(112px, 16vh, 170px); }

  /* Numeros: o balanco vira duas colunas e sobe um pouco. */
  .anim-ready .board { bottom: 78px; }
  .board { padding: 18px; }

  /* Cadeia do metodo: no celular vira escada vertical. Quebrar em duas
     linhas deixava um tracinho solto no comeco da segunda. */
  .chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: nowrap;
    --glass-r: 22px;
  }
  .chain__step { position: relative; }
  .chain__step + .chain__step::before {
    position: absolute;
    left: 3.5px;
    top: -14px;
    width: 1px;
    height: 14px;
    margin: 0;
  }

  .anim-ready .scene--thinking .wrap { height: min(74vh, 560px); }
  .anim-ready .scene--thinking .chain { bottom: 46px; }

  .case__head { gap: var(--s3); }
  .case__body { padding-top: 0; }
  .case__mark { right: -6%; font-size: clamp(120px, 42vw, 260px); }

  .ph--final { width: min(80vw, 340px); opacity: .14; }

  .impact__panel { padding: 24px 20px; }

  .foot__grid { gap: var(--s2); }
  .foot__year { width: 100%; }
}

/* --------------------------------------------------------------------------
   Ate 480px: tipografia respira, o ar continua generoso.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --fs-xl: clamp(38px, 13vw, 60px);
    --fs-lg: clamp(30px, 9.4vw, 48px);
    --fs-num: clamp(68px, 25vw, 130px);
  }
  .hero__name { font-size: clamp(44px, 14vw, 70px); }
  .quote { padding-left: var(--s3); max-width: 100%; }
  .btn--big { width: 100%; justify-content: center; }
  .board { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .board .mono { font-size: clamp(26px, 9vw, 42px); }
}

/* --------------------------------------------------------------------------
   Telas largas: o conteudo nao estica sem limite.
   -------------------------------------------------------------------------- */
@media (min-width: 1800px) {
  :root { --gutter: clamp(88px, 6vw, 140px); }
}

/* --------------------------------------------------------------------------
   Toque: nada depende de hover.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .nav__links a::after { display: none; }
  .btn:hover { gap: 10px; }
}