/* ==================================================================
   06 · POR QUE WORDPRESS  (widget fp-wordpress)

   Copiado do lab (lab/home/secoes/wordpress/wordpress.css). A partir daqui,
   este arquivo e o que vale. Diferenca em relacao ao lab: o divisor do
   corpo dos nomes e --nome-div (6.8 no lab); wordpress.js aumenta o
   divisor so quando um nome e mais largo que "Flexibilidade".

   Navy e simetrica: a unica secao montada em torno do eixo central da
   pagina. Titulo centralizado; os dois paragrafos num bloco estreito no
   centro (lado a lado, lembrariam a FAQ). Os itens (quatro no documento) em
   espelho numa grade de duas colunas cortada por um fio vertical parado: a coluna da esquerda
   alinha a direita e a da direita a esquerda, as duas coladas no eixo.
   Sem hover e sem cor de destaque.
   ================================================================== */

.wordpress{
  position:relative;
  background:var(--navy);
  color:var(--paper);
  padding-block:clamp(6rem,15vh,11rem);
}

/* ---- topo centralizado -------------------------------------------- */

.wordpress__topo{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.wordpress__h2{
  max-width:13em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  text-align:center;
  color:var(--paper);
  text-wrap:balance;
}
/* O bloco e centralizado; o texto dentro dele alinha a esquerda, que le
   melhor que paragrafo centralizado. */
.wordpress__texto{
  display:grid;
  row-gap:1.1em;
  max-width:60ch;
  margin-top:clamp(2rem,5.5vh,3.5rem);
  font-size:var(--t-lead);
}
.wordpress__texto p{
  line-height:1.6;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* ---- itens em espelho --------------------------------------------- */

.wordpress__itens{
  /* Distancia do texto ao fio, dos dois lados. */
  --vao-eixo:clamp(2rem,4.5vw,5.5rem);
  --nome-div:6.8;
  position:relative;
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:calc(2 * var(--vao-eixo));
  row-gap:clamp(3.5rem,9vh,6.5rem);
  margin-top:clamp(5rem,13vh,9rem);
  padding-block:clamp(2.5rem,6vh,4rem);
}
/* O eixo: parado, esmaecendo nas duas pontas. */
.wordpress__itens::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  margin-left:-.5px;
  background:var(--rule-dark-strong);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);
}

.wp-item{max-width:min(100%,32rem)}
.wp-item:nth-child(odd){justify-self:end;text-align:right}
.wp-item:nth-child(even){justify-self:start;text-align:left}

.wp-item__nome{
  font-family:var(--font-display);
  font-weight:800;
  /* Limitado pela coluna. "Flexibilidade", o nome mais largo do
     documento, mede 5.58em em peso 800 (medido com
     lab/probe-em-palavras.mjs); o divisor 6.8 deixa folga. */
  font-size:min(clamp(2rem,3.8vw,4.25rem), (100cqw - 2 * var(--vao-eixo)) / 2 / var(--nome-div));
  line-height:1;
  letter-spacing:-.035em;
  color:var(--paper);
}
.wp-item__desc{
  max-width:34ch;
  margin-top:clamp(.875rem,2vh,1.25rem);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--fg-2);
  text-wrap:pretty;
}
.wp-item:nth-child(odd) .wp-item__desc{margin-left:auto}

/* Link depois dos itens (campo opcional; a home ate 2026-09 nao tinha): no
   eixo, como o titulo. Leva a uma pagina do site, e nao a um servico, por
   isso e um link de leitura e nao mais um item do espelho. */
.wordpress__link{
  display:flex;
  justify-content:center;
  margin-top:clamp(2.5rem,7vh,4.5rem);
}

/* ------------------------------------------------------------------
   Abaixo de 1100px: o espelho nao cabe. Titulo centralizado, paragrafos
   a esquerda, itens empilhados e centralizados, sem o fio.
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .wordpress{padding-block:clamp(4.5rem,14vw,7rem)}
  .wordpress__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .wordpress__itens{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(2.75rem,11vw,4rem);
    margin-top:clamp(3.5rem,14vw,5rem);
    padding-block:0;
  }
  .wordpress__itens::before{content:none}
  .wp-item:nth-child(n){justify-self:center;text-align:center}
  /* O limite pela largura so age com um nome mais largo que os do
     documento: com eles, 10vw e sempre menor. */
  .wp-item__nome{font-size:min(clamp(2rem,10vw,3rem), 100cqw / var(--nome-div))}
  .wp-item:nth-child(n) .wp-item__desc{margin-inline:auto}
}