/* ==========================================================================
   Vazto — a montra de produtos

   O componente que a Home e a página do Método partilham: cinco cartões lado
   a lado num container mais largo do que a coluna de leitura, e um carrossel
   a sério no telemóvel.

   Vive num ficheiro próprio porque duas páginas o usam. Estava dentro de
   `home-editorial.css`, e copiá-lo para a segunda página seria a maneira certa
   de as duas divergirem à primeira correcção — que é exactamente o que já
   tinha acontecido: a página do Método tinha uma montra "parecida", com outras
   proporções e outra escala.

   O comportamento do carrossel está em `montra.js`, pela mesma razão.

   A versão CLARA da montra — `.showcase--claro` — muda só a moldura do cartão:
   a janela de cima continua escura, com a cena do produto tal como ela foi
   desenhada. As cenas vivem sobre fundo escuro e clareá-las seria refazê-las.
   ========================================================================== */
.showcase{ padding-block:clamp(56px,7vw,92px) }
/* Um container próprio, mais largo do que a coluna de leitura: cerca de 80%
   da janela, com tecto para não esticar em ecrãs muito largos. */
.showcase__caixa{
  position:relative; z-index:2;
  /* 80% da janela — mas nunca mais estreita do que a coluna de leitura.
     Num ecrã de 1440, 80vw dá 1152px e o `--shell` já mede 1160: pedir 80vw
     ali ENCOLHIA a montra. `max()` faz a regra crescer em ecrãs grandes sem
     nunca a fazer recuar nos médios. */
  inline-size:max(var(--shell), min(82vw, 1560px)); max-inline-size:100%;
  margin-inline:auto; padding-inline:var(--gutter);
}
@media (max-width:1100px){ .showcase__caixa{ inline-size:100%; max-inline-size:var(--shell) } }
.showcase .head{ margin-block-end:clamp(30px,3.8vw,46px) }
.showcase__grid{ display:grid; gap:clamp(12px,1.2vw,18px); grid-template-columns:minmax(0,1fr) }
@media (min-width:620px){ .showcase__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .showcase__grid{ grid-template-columns:repeat(5,minmax(0,1fr)) } }
/* QUATRO CARTÕES NA MONTRA DE CINCO.

   Nas páginas de produto a montra mostra os OUTROS quatro — o produto da
   página não se oferece a si próprio. Numa grelha de cinco colunas em `1fr`,
   quatro cartões enchem as quatro primeiras e deixam a quinta vazia à
   direita: a fila fica encostada e desalinhada do título, que está ao centro.

   Aqui a coluna deixa de ser `1fr` e passa a ser a largura que teria na
   grelha de cinco — `(100% − 4 goteiras) / 5` —, e o conjunto centra-se. O
   cartão fica com EXACTAMENTE a mesma largura que tem na Home; o que muda é
   quantos há, que é a única diferença que devia haver. */
@media (min-width:1000px){
  .showcase__grid--quatro{
    grid-template-columns:repeat(4, calc((100% - 4 * clamp(12px,1.2vw,18px)) / 5));
    justify-content:center;
  }
}
/* Os cinco têm a mesma altura e o "Conhecer" cai na mesma linha nos cinco. */
.showcase__grid > .cross__card{ display:flex; flex-direction:column }
.showcase__grid > .cross__card .cross__body{ flex:1; align-content:start; gap:8px; padding:16px 16px 20px }
.showcase__grid > .cross__card .cross__go{ margin-block-start:auto; padding-block-start:8px }
.showcase__grid > .cross__card p{ font-size:13.5px; line-height:1.48 }
.showcase__grid > .cross__card em{ font-size:11.5px }
/* Em cinco colunas "Go-to-Market" partia-se em duas linhas e deixava o
   "| vazto" órfão por baixo. Um lockup é uma assinatura: ou cabe numa linha
   ou não é um lockup. */
.showcase__grid > .cross__card .cross__lockup{ flex-wrap:nowrap }
.showcase__grid > .cross__card .cross__lockup b{ font-size:18px; white-space:nowrap }
.showcase__grid > .cross__card .cross__lockup img{ block-size:12px }
.showcase .actions{ margin-block-start:clamp(28px,3.4vw,42px) }

/* No telemóvel a montra é um carrossel a sério: UM cartão de cada vez, ao
   centro. Mostrar um cartão e meio do seguinte não é um carrossel — é uma
   régua cortada, e nenhum dos dois cartões fica legível. */
@media (max-width:619px){
  .showcase__grid{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gutter) * -1);
    /* O padding lateral é o que centra o primeiro e o último cartão: sem ele
       as pontas encostam à aresta e nunca chegam ao meio. */
    padding-inline:max(var(--gutter), calc((100vw - min(88vw, 420px)) / 2));
    padding-block-end:6px;
  }
  .showcase__grid::-webkit-scrollbar{ display:none }
  .showcase__grid > .cross__card{ flex:0 0 min(88vw,420px); scroll-snap-align:center }
}

/* --- os controlos do carrossel -------------------------------------------- */
.montra__nav{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-block-start:22px;
}
.montra__seta{
  display:grid; place-items:center; flex:none;
  inline-size:44px; block-size:44px; border-radius:50%;
  color:var(--cyan-lit);
  border:1.5px solid rgba(7,210,210,.34);
  background:rgba(7,210,210,.06);
  transition:border-color .22s, background-color .22s, opacity .22s;
}
.montra__seta svg{ inline-size:18px; block-size:18px }
.montra__seta:hover:not([disabled]){ border-color:var(--cyan); background:rgba(7,210,210,.14) }
.montra__seta[disabled]{ opacity:.28 }
.montra__pontos{ display:flex; align-items:center; gap:9px }
.montra__pontos button{
  display:block; inline-size:8px; block-size:8px; border-radius:50%;
  background:rgba(241,247,247,.26); transition:inline-size .3s var(--ease), background-color .3s;
}
/* O alvo de toque cresce à volta do ponto sem o ponto crescer: oito pixéis
   são um ponto; quarenta e quatro são um botão. */
.montra__pontos button::after{ content:""; position:absolute; inset:-18px }
.montra__pontos li{ position:relative; display:grid; place-items:center }
.montra__pontos button[aria-current="true"]{ inline-size:22px; border-radius:5px; background:var(--cyan) }
@media (min-width:620px){ .montra__nav{ display:none } }


/* ==========================================================================


/* ==========================================================================
   A VERSÃO CLARA — `.showcase--claro`

   Mesmo componente, mesma escala, mesmo carrossel. O que muda é a moldura do
   cartão: o corpo passa a papel e o texto a escuro. A janela de cima fica
   escura, com a cena do produto tal como ela foi desenhada — as cenas vivem
   sobre fundo escuro e clareá-las seria refazê-las.
   ========================================================================== */
.showcase--claro .cross__card{
  border-color:rgba(11,29,31,.09);
  background:linear-gradient(168deg,#ffffff 0%,#f3f8f9 100%);
  box-shadow:0 26px 50px -34px rgba(1,20,24,.45), inset 0 1px 0 #fff;
}
.showcase--claro .cross__card:hover{
  background:linear-gradient(168deg,#ffffff 0%,#eef6f7 100%);
  box-shadow:0 32px 58px -30px rgba(1,46,53,.5), inset 0 1px 0 #fff;
}
.showcase--claro .cross__lockup b{ color:var(--text) }
.showcase--claro .cross__lockup i{ background:rgba(11,29,31,.2) }
/* Os lockups entregues são brancos e desapareciam no papel. */
.showcase--claro .cross__lockup img,
.showcase--claro .cross__logo{
  filter:brightness(0) saturate(100%) invert(9%) sepia(18%) saturate(1200%) hue-rotate(140deg);
  opacity:.85;
}
.showcase--claro .cross__card p{ color:var(--text-soft) }
/* O acento de cada produto sobre papel: os tons claros da paleta — o verde do
   Flow, o ciano do Project e do Go-to-Market — não aguentam texto pequeno num
   fundo branco. O rótulo e o link escurecem o próprio acento em vez de o
   usarem como veio: 62% ainda media 3.31:1; 42% passa com folga. */
.showcase--claro .cross__card em,
.showcase--claro .cross__go{ color:color-mix(in srgb, var(--c) 42%, #06282c) }
/* Os controlos do carrossel, sobre papel. */
.showcase--claro .montra__seta{
  color:var(--teal-deep);
  border-color:rgba(2,81,89,.3);
  background:rgba(2,115,115,.05);
}
.showcase--claro .montra__seta:hover:not([disabled]){ border-color:var(--teal); background:rgba(2,115,115,.1) }
.showcase--claro .montra__pontos button{ background:rgba(11,29,31,.22) }
.showcase--claro .montra__pontos button[aria-current="true"]{ background:var(--teal) }
.showcase--claro .kicker{ color:var(--teal-deep) }