/* ==================================================================
   03 · BASE DE DESENVOLVIMENTO  (widget fp-base)

   Copiado do lab (lab/home/secoes/base/base.css). A partir daqui, este
   arquivo e o que vale. Diferenca em relacao ao lab: itens por camada e
   --cols (controle do widget), e o fim de cada camada e marcado no HTML
   (.base__item--fim), porque nth-child nao aceita variavel. Com tres, as
   medidas sao as mesmas.

   Papel. Os nove itens em tres camadas horizontais, separadas por fios de
   largura inteira: o eixo oposto ao de Servicos (colunas verticais), com a
   mesma linguagem de fio. Tudo visivel, sem hover, altura natural.
   Sem numeros (os itens nao sao sequencia), sem icones, sem caixas.
   ================================================================== */

.base{
  position:relative;
  background:var(--paper);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem) clamp(3rem,8vh,6rem);
}

/* Titulo e texto empilhados: em Servicos o texto fica ao lado do titulo,
   aqui a diferenca ja aparece na abertura. */
.base__h2{
  max-width:12em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--navy);
  text-wrap:balance;
}
.base__texto{
  margin-top:clamp(1.25rem,3vh,2rem);
  max-width:44ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--ink-2);
  text-wrap:pretty;
}

.base__lista{
  --vao-col:clamp(2rem,4vw,5rem);
  --cols:3;
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  column-gap:var(--vao-col);
  margin-top:clamp(3.5rem,9vh,6.5rem);
}

/* Cada item ocupa duas linhas da grade e as herda (subgrid): numa mesma
   camada as descricoes comecam na mesma altura, mesmo quando um nome quebra
   em duas linhas e o vizinho nao. */
.base__item{
  position:relative;
  grid-row:span 2;
  display:grid;
  grid-template-rows:subgrid;
  row-gap:clamp(.75rem,1.6vh,1.125rem);
  padding-block:clamp(1.5rem,3.2vh,2.25rem) clamp(2.75rem,6.5vh,4.5rem);
}

/* O fio da camada: um segmento por item. Os segmentos atravessam o vao
   entre as colunas e formam uma linha so. Na entrada sao desenhados em sequencia,
   da esquerda para a direita (--fio de 0 a 1). */
.base__item::before{
  content:'';
  position:absolute;
  top:0;left:0;
  right:calc(-1 * var(--vao-col));
  height:1px;
  background:var(--navy);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
.base__item--fim::before{right:0}

.base__nome{
  font-family:var(--font-display);
  font-weight:800;
  /* Limitado pela coluna: "Desenvolvimento WordPress" mede cerca de 12.6em.
     So por vw ele quebrava a 1920, e como as descricoes da camada alinham,
     "Design personalizado" ficava com um vao de uma linha vazia embaixo. */
  font-size:min(clamp(1.5rem,2.1vw,2.25rem), (100cqw - (var(--cols) - 1) * var(--vao-col)) / var(--cols) / 13);
  line-height:1.06;
  letter-spacing:-.022em;
  color:var(--navy);
  text-wrap:balance;
}
.base__desc{
  max-width:40ch;
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* Fechamento (campo opcional; a home nao usa): conclui a lista como uma
   ultima camada. Fio de largura inteira, desenhado na entrada, e o texto a
   partir da segunda coluna, em corpo de titulo leve. Com --cols vindo do
   widget, a coluna e a mesma da lista. */
.base__fim{
  --vao-col:clamp(2rem,4vw,5rem);
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  column-gap:var(--vao-col);
  padding-top:clamp(1.75rem,4vh,2.75rem);
}
.base__fim::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:var(--navy);
  transform:scaleX(var(--fio,1));
  transform-origin:left;
}
.base__fechamento{
  grid-column:2 / -1;
  max-width:34ch;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.25rem,1.8vw,1.75rem);
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--navy);
  text-wrap:pretty;
}

/* ------------------------------------------------------------------
   Abaixo de 1100px: uma coluna, um fio sobre cada item
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .base{padding-block:clamp(4.5rem,14vw,7rem) clamp(2rem,8vw,4rem)}
  .base__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .base__lista{grid-template-columns:minmax(0,1fr);margin-top:clamp(2.5rem,10vw,4rem)}
  .base__item{grid-row:auto;display:block;padding-block:1.5rem 2.25rem}
  .base__nome{font-size:clamp(1.375rem,6.4vw,2rem)}
  .base__item::before,.base__item--fim::before{right:0}
  .base__desc{margin-top:.75rem}
  .base__fim{display:block;padding-top:1.5rem}
}