/* ============================================================
   PEB26 — Home Gamescom
   Carregado só por home/2026/index_gamescom.html.
   Sobrescreve o styles.css sem alterar a home atual.
   ============================================================ */

/* ---------- Hero — Gamescom Latam (edição especial 10 anos) ----------
   Base: .home-hero do styles.css. A arte de fundo (vencedores + brilhos)
   já vem com as bordas transparentes, então só assenta sobre o preto. */
.home-hero--gamescom{background:#000}
.home-hero__fundo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:right center;
  z-index:0;
  pointer-events:none;
  animation:home-hero-in 1s ease both;
}
/* o título maior não cabe nos 560px do .home-hero__content padrão */
.home-hero--gamescom .home-hero__content{max-width:min(52vw,760px)}
.home-hero__eyebrow{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1rem,1.9vw,2.2rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--white);
  animation:home-hero-in .8s ease both;
}
.home-hero__title--gold{
  font-size:clamp(2.6rem,5.8vw,7rem);
  line-height:1;
  /* o degradê (background-clip:text) só pinta dentro da caixa: sem esse respiro
     o til do "Ã" de EDIÇÃO, que passa da linha, sai cortado. A margem negativa
     compensa, pra o título não descer. */
  padding-top:.16em;
  margin-top:-.16em;
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  animation-delay:.08s;
}
.home-hero__evento{
  display:block;
  width:clamp(170px,20vw,397px);
  height:auto;
  margin:clamp(20px,2.4vw,44px) 0 0;
  animation:home-hero-in .8s ease .18s both;
}
.home-hero--gamescom .home-hero__rule{
  width:clamp(28px,2.7vw,52px);
  height:3px;
  margin:clamp(20px,2.2vw,40px) 0 clamp(8px,.8vw,14px);
  animation-delay:.26s;
}
.home-hero__data{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.05rem,1.9vw,2.2rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--white);
  animation:home-hero-in .8s ease .32s both;
}
@media (max-width:860px){
  /* no mobile entra a arte de mobile inteira (já com texto e logo), abaixo do header */
  .home-hero--gamescom{
    display:block;
    height:auto;min-height:0;
    padding:var(--header-h) 0 0;
  }
  .home-hero--gamescom picture{display:block}
  .home-hero__fundo{
    position:relative;inset:auto;
    height:auto;
    object-fit:contain;
  }
  /* texto HTML some da tela, mas continua para leitores de tela e SEO */
  .home-hero--gamescom > .wrap{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}
@media (prefers-reduced-motion:reduce){
  .home-hero__fundo,
  .home-hero__eyebrow,
  .home-hero__evento,
  .home-hero__data{animation:none}
}

/* ---------- Big numbers — versão Gamescom ----------
   Dourado chapado (sem sheen/brilho), barra mais grossa entre número e
   legenda e legendas maiores, com pouco tracking. */
.section--numbers-gamescom .number-block{gap:clamp(12px,1vw,18px)}
.section--numbers-gamescom .number-block__big{
  font-size:clamp(3.4rem,6.4vw,7.2rem);
  text-transform:uppercase;
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  filter:none;
  animation:none;
}
.section--numbers-gamescom .number-block__label{
  font-size:clamp(1rem,1.6vw,1.9rem);
  letter-spacing:.02em;
  line-height:1.2;
  padding-top:calc(clamp(5px,.45vw,8px) + clamp(18px,1.9vw,36px));
}
.section--numbers-gamescom .number-block__label::before{
  width:clamp(56px,4.8vw,93px);
  height:clamp(5px,.45vw,8px);
  border-radius:1px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
}

/* ---------- Bloco 1 — Celebração na gamescom latam ----------
   Mesmo .feature-bleed da home atual (imagem com área escura + texto por cima);
   aqui o texto fica branco e maior, e a última frase vem em destaque. */
.feature-bleed--gamescom .eyebrow{
  font-size:clamp(.82rem,.9vw,1rem);
  letter-spacing:.06em;
}
.feature-bleed--gamescom .eyebrow::before{
  width:clamp(46px,3vw,58px);
  height:4px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
}
.feature-bleed--gamescom .lead{
  max-width:23em; /* quebra as linhas nos mesmos pontos do Figma */
  color:var(--white);
  font-size:clamp(1rem,1.15vw,1.3rem);
  line-height:1.5;
}
.feature-bleed--gamescom .lead__destaque{font-weight:700}

/* ---------- Footer — hashtag #PEB10ANOS ----------
   Branco chapado (como a arte enviada), sem o degradê do #PEB26. */
.page-gamescom .footer-hash{
  background:none;
  color:var(--white);
}

/* ---------- Blocos 1 e 2 no mobile ----------
   Até 980px (onde o .feature-bleed empilha imagem + texto) entram as artes de mobile.
   A da consagração já vem com cantos arredondados e o chapéu passando da borda,
   então não leva o corte de cantos do styles.css. */
.feature-bleed picture{display:block}
@media (max-width:980px){
  /* a arte de mobile já vem com os cantos de cima do cartão arredondados */
  .feature-bleed--consagracao .feature-bleed__img{border-radius:0}
  /* sombra interna acompanhando o cartão arredondado: a arte tem um brilho na
     borda que segue reto até o canto; a sombra esconde isso e "fecha" o raio.
     O cartão vai de 7.6% a 97.7% da altura da arte (46px e 593px de 607px). */
  /* a arte termina com 14px transparentes (de 896px de largura): a margem negativa,
     que em % conta sobre a largura, encosta a caixa de texto no fim da foto */
  .feature-bleed--consagracao picture{position:relative;margin-bottom:calc(-14 / 896 * 100%)}
  .feature-bleed--consagracao picture::after{
    content:"";
    position:absolute;
    inset:7.6% 0 2.3%;
    border-radius:var(--radius) var(--radius) 0 0;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.1),
      inset 0 0 26px 11px rgba(0,0,0,.9);
    pointer-events:none;
    /* no trecho em que o chapéu atravessa a borda de cima (36%–72%) a sombra de cima some */
    -webkit-mask:
      linear-gradient(#000 0 0) 0 24px / 100% calc(100% - 24px) no-repeat,
      linear-gradient(90deg, #000 30%, #0000 36%, #0000 72%, #000 78%) 0 0 / 100% 24px no-repeat;
            mask:
      linear-gradient(#000 0 0) 0 24px / 100% calc(100% - 24px) no-repeat,
      linear-gradient(90deg, #000 30%, #0000 36%, #0000 72%, #000 78%) 0 0 / 100% 24px no-repeat;
  }
}
/* Desktop: o cartão da foto começa abaixo do topo da imagem (o chapéu passa da borda)
   e o cover corta as laterais, então o border-radius do bloco não pega nos cantos dele.
   Com a altura fixa de 544px (min-height do styles.css), o cartão fica sempre entre
   41px e 531px: a máscara arredonda só esses 4 cantos e deixa o chapéu inteiro. */
@media (min-width:981px){
  .feature-bleed--consagracao .feature-bleed__img{
    --r:21px; --topo:41px; --base:531px;
    -webkit-mask:
      linear-gradient(#000 0 0) var(--r) 0 / calc(100% - 2 * var(--r)) 100% no-repeat,
      linear-gradient(#000 0 0) 0 calc(var(--topo) + var(--r)) / 100% calc(var(--base) - var(--topo) - 2 * var(--r)) no-repeat,
      radial-gradient(circle var(--r) at var(--r) calc(var(--topo) + var(--r)), #000 98%, #0000) no-repeat,
      radial-gradient(circle var(--r) at calc(100% - var(--r)) calc(var(--topo) + var(--r)), #000 98%, #0000) no-repeat,
      radial-gradient(circle var(--r) at var(--r) calc(var(--base) - var(--r)), #000 98%, #0000) no-repeat,
      radial-gradient(circle var(--r) at calc(100% - var(--r)) calc(var(--base) - var(--r)), #000 98%, #0000) no-repeat;
            mask:
      linear-gradient(#000 0 0) var(--r) 0 / calc(100% - 2 * var(--r)) 100% no-repeat,
      linear-gradient(#000 0 0) 0 calc(var(--topo) + var(--r)) / 100% calc(var(--base) - var(--topo) - 2 * var(--r)) no-repeat,
      radial-gradient(circle var(--r) at var(--r) calc(var(--topo) + var(--r)), #000 98%, #0000) no-repeat,
      radial-gradient(circle var(--r) at calc(100% - var(--r)) calc(var(--topo) + var(--r)), #000 98%, #0000) no-repeat,
      radial-gradient(circle var(--r) at var(--r) calc(var(--base) - var(--r)), #000 98%, #0000) no-repeat,
      radial-gradient(circle var(--r) at calc(100% - var(--r)) calc(var(--base) - var(--r)), #000 98%, #0000) no-repeat;
  }
}