/* ============================================================
   SCHULLER — ajustes de tamanho do hero
   ------------------------------------------------------------
   Único arquivo CSS próprio. Nada do vendor é sobrescrito além
   do que está aqui: layout.css, astro.css e layout.js seguem
   intactos, e nenhuma regra abaixo toca em posição, layout,
   transform ou qualquer coisa que a timeline do GSAP anime.
   ============================================================ */

/* Título do hero — 3 linhas.

   O corpo da fonte é governado pela linha MAIS LONGA, que precisa
   caber inteira (o SplitText do layout.js marca cada linha como
   text-nowrap). Larguras medidas na Inter, em "em":

       Todo mundo usa IA.         8,56 em
       Poucas empresas realmente  12,38 em   <- manda no tamanho
       trabalham com ela.         8,20 em

   Antes o título tinha 2 linhas e a segunda media 20,49 em — era
   ela que obrigava a fonte a encolher para 3,08vw (~35px). Com a
   frase quebrada em 3, a linha mais longa caiu quase pela metade e
   a fonte pôde crescer na mesma proporção, que é o que finalmente
   separa o título do subtítulo (~27px aparentes no hero).

   Só o corpo da fonte muda. Nenhuma classe, atributo, posição ou
   transform foi tocado — a timeline do GSAP e o SplitText do
   layout.js continuam operando exatamente como no original. */

/* Escopado ao hero: o mesmo custom element é usado nos títulos do
   Blog e do Manifesto (para reaproveitar a animação), e sem o
   ancestral a regra vazava para lá — o seletor com dois níveis
   ganhava do .sl-page-title, que tem um só. */

/* --- abaixo de lg: a coluna é a largura cheia da tela ---
   disponível = 100vw - 16px (o pl-4 do bloco).

   O teto de 56px é onde as três linhas passam a caber cada uma na
   sua: em 768px, 12,38 em x 56px = 693px contra 752px de coluna.
   No celular (375px) a fonte fica em ~41px — as linhas 2 e 3
   quebram sozinhas, como já quebravam antes, mas o título continua
   com o dobro do corpo do subtítulo mobile (20px), que é o
   contraste que se quer. Sem esta regra a faixa de 769px a 1023px
   herdaria os 96px do layout.css e vazaria da tela. */
labs-section-hero-home labs-atom-text-hero-title .js-title {
  font-size: min(11vw, 56px);
  line-height: 1.1;
}

/* --- lg para cima: a coluna passa a ser 70% do container ---
       coluna disponível = 0.7 * min(100vw, 1728) - 40px
       fonte máxima      = coluna / 12,38

   Isso dá ~0,0547 * vw; usamos 5vw (margem de ~9%) travado em 86px,
   que é onde a coluna para de crescer. */
@media (min-width: 1024px) {
  labs-section-hero-home labs-atom-text-hero-title .js-title {
    font-size: min(5vw, 86px);
    line-height: 1; /* mesma proporção do original (6rem / 6rem) */
  }
}