/* =========================================================
   09/10/2026 · dobra "Ideias que fazem história" nova
   Diagramação do manifesto da apresentação: letras 3D à esquerda (imagem da apresentação,
   tamanho original), texto à direita sobre o roxo, frase no título padrão do site.
   ========================================================= */
.band.band--ideias{
  --ideias-bg:#160429;                 /* a cor da borda da imagem: a foto some no fundo sem emenda */
  display:block;min-height:0;padding:0;background:var(--ideias-bg);color:#fff;
  position:relative;overflow:hidden;
}
/* 09/10/2026: imagem RECORTADA (só a parte das letras, 1000 x 941 do original, sem a metade roxa vazia), à esquerda,
   com a altura da dobra; a dobra tem o respiro padrão do site (--section-y) em cima e embaixo, sem altura mínima própria */
/* 09/10/2026 (2ª): a imagem fica GRANDE — vai da borda esquerda até perto do texto (metade da tela) e a altura da dobra
   corta o excesso (cover), para as letras ficarem grandes e chegarem perto da frase */
.ideias__media{position:absolute;left:0;top:-4%;bottom:-4%;z-index:0;margin:0;width:calc(50% - clamp(12px,1.5vw,28px));overflow:hidden}   /* sobra em cima e embaixo para a deriva da rolagem não mostrar borda */
.ideias__layer{position:absolute;inset:0;will-change:transform,opacity,filter}   /* recebe a entrada e a flutuação */
.ideias__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 42%;display:block}

/* véu: a borda direita e as de cima e de baixo da foto se fundem no roxo */
.ideias__veil{position:absolute;left:0;top:0;bottom:0;z-index:1;pointer-events:none;width:calc(50% - clamp(12px,1.5vw,28px));
  background:
    linear-gradient(90deg,rgba(22,4,41,0) 45%,rgba(22,4,41,.7) 80%,rgba(22,4,41,1) 100%),   /* esfumado longo: a borda direita nunca aparece como corte */
    linear-gradient(180deg,rgba(22,4,41,.6) 0%,rgba(22,4,41,0) 18%,rgba(22,4,41,0) 82%,rgba(22,4,41,.65) 100%)}
.ideias__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding-block:var(--section-y);align-items:end}
.ideias__copy{grid-column:2;justify-self:start;position:relative}
.ideias__text{max-width:350px;font-size:var(--p-size);font-weight:300;line-height:var(--p-leading);letter-spacing:var(--p-tracking);
  color:rgba(255,255,255,.82);text-wrap:pretty}
.ideias__title{margin-top:clamp(28px,4.4vh,48px);font-weight:300;font-size:var(--t-titulo);line-height:1.08;letter-spacing:-.025em;white-space:nowrap}
.ideias__title>span{display:block}
.ideias__title strong{font-weight:700;color:var(--green)}
.ideias__quote{position:absolute;height:var(--aspa-h);width:calc(1.38*var(--aspa-h));color:var(--green);overflow:visible;z-index:3}
.ideias__quote path{stroke:currentColor;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}

@media(max-width:900px){
  .ideias__media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/10}
  /* 12/10/2026: no celular o degradê mora DENTRO da foto (anda junto com a deriva da rolagem); antes o véu ficava parado
     e a borda de baixo da foto escorregava para fora dele, aparecendo como uma faixa em movimento */
  .ideias__veil{display:none}
  .ideias__media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,var(--ideias-bg) 0%,rgba(22,4,41,0) 22%,rgba(22,4,41,0) 42%,rgba(22,4,41,.55) 68%,rgba(22,4,41,.9) 86%,var(--ideias-bg) 100%),
               linear-gradient(90deg,rgba(22,4,41,.35) 0%,rgba(22,4,41,0) 30%,rgba(22,4,41,0) 70%,rgba(22,4,41,.5) 100%)}
  .ideias__inner{grid-template-columns:1fr;min-height:0;padding-top:clamp(8px,2vh,20px)}
  .ideias__copy{grid-column:1}
  .ideias__text{max-width:42ch}
}