/* pillarmap.css — o mapa do ecossistema: a fundação (diagrama) e as faixas por
   pilar. Vivia inline no index.html; saiu de lá quando a página do ecossistema
   passou a precisar das mesmas peças, para não haver duas cópias a divergir.
   Desenhado por assets/js/pillarmap.js a partir do window.NLPILLARS.
   Só o site usa isto, por isso fica em apps/web e não em shared/. */

/* ── a fundação e as casas ────────────────────────────────────────
   A metáfora do próprio texto, literal: uma barra (a fundação) e colunas em
   cima dela, uma por pilar, com as sub-marcas como segmentos DENTRO da
   coluna do pai. O primeiro desenho era um diagrama de nós em círculos e o
   João rejeitou-o ("visual de vários mundos"): astronomia fora, arquitetura
   dentro. Interativo: hover acende a coluna; telemóvel (sem hover) 1º toque
   acende, 2º navega. Desenhado pelo pages/index.js do NLPILLARS. */
/* OS RETÂNGULOS TÊM RÁCIO FIXO, para receberem arte do João sem deformar.
   Antes a altura era fixa (300px) e a largura fluía com o ecrã: a mesma
   imagem esticava no telemóvel. Agora cada caixa define o seu aspect-ratio
   e a coluna cresce da largura. Os rácios (largura 100 = unidade):
     pilar SEM sub-marca . . . 100 × 272
     pilar COM sub-marca . . . 100 × 174
     sub-marca . . . . . . . . 100 × 90
   (90 + 8 de intervalo + 174 = 272: as colunas ficam iguais por construção)
   A arte entra pelo registry: diagImg no pilar ou na sub — ver pillars.js. */
.nl-fund { max-width: 540px; margin: 0 auto; }
.nl-fund-cols { display: flex; gap: 10px; align-items: flex-end; }
.nl-fund-col { flex: 1 0 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0; }
.nl-fund-main, .nl-fund-sub {
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    transition: border-color 0.3s, background 0.3s; overflow: hidden;
    background-size: cover; background-position: center;
}
.nl-fund-main { aspect-ratio: 100 / 272; border: 1px solid rgba(255, 255, 255, 0.16); background-color: rgba(255, 255, 255, 0.025); }
.nl-fund-col.com-sub .nl-fund-main { aspect-ratio: 100 / 174; }
.nl-fund-sub { aspect-ratio: 100 / 90; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.015); }
/* com arte, o nome vertical sai: a marca está na imagem */
.nl-fund-main.com-arte .nome, .nl-fund-sub.com-arte .nome { display: none; }
.nl-fund-col .nome { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a93a6; transition: color 0.3s; white-space: nowrap; }
.nl-fund-col .nome.normal-case { text-transform: none; }
.nl-fund-sub .nome { font-size: 8.5px; letter-spacing: 0.1em; color: #6b7382; }
/* a área de cada pilar por baixo da coluna: completa o mapa */
/* min-height de DUAS linhas: "Estúdio de software" quebra e sem isto as
   colunas com legenda de 1 linha ficavam 9px mais baixas que as outras */
.nl-fund-area { display: block; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5b6373; padding-top: 2px; min-height: 2.9em; transition: color 0.3s; }
.nl-fund-col.aceso .nl-fund-area { color: #8a93a6; }
/* a fundação: PRETA e só com o wordmark, sem tagline (João, 2026-08-27).
   O padding devolve-lhe a altura que tinha com as duas linhas: ao tirar a
   tagline a barra encolheu e o tamanho anterior estava certo. */
.nl-fund-base { margin-top: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: #000; border-radius: 10px; padding: 1.45rem 1rem; text-align: center; }
.nl-fund-base img { display: block; height: 14px; width: auto; margin: 0 auto; }
/* HOVER SOBRE ARTE: o bordo azul + tinta azul faziam sentido nas caixas vazias
   e ficavam estranhos por cima das cores de marca (teal, vermelho, branco).
   Com arte, o realce é neutro: bordo branco e um sopro de brilho. */
.nl-fund-main.com-arte, .nl-fund-sub.com-arte { transition: border-color 0.3s, filter 0.3s; }
.nl-fund-col.aceso .nl-fund-main, .nl-fund-col.aceso .nl-fund-sub { border-color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
/* background-COLOR, nunca o shorthand: `background: transparent` repunha o
   background-size em auto e a caixa mostrava só o canto da arte de 1600px */
.nl-fund-col.aceso .nl-fund-main.com-arte, .nl-fund-col.aceso .nl-fund-sub.com-arte { border-color: rgba(255, 255, 255, 0.6); background-color: transparent; filter: brightness(1.07); }
.nl-fund-col.aceso .nome { color: #fff; }
/* AS TRÊS FAIXAS ALINHADAS ENTRE COLUNAS.
   Com flex, cada coluna somava as suas peças e ficava com a altura que
   lhe calhava: as legendas de duas linhas ("Agência criativa", "Estúdio
   de software") tornavam a coluna 3px mais alta e, alinhadas pelo fundo,
   levantavam os retângulos — a Midnight Media e a Cultura Transbordada
   ficavam visivelmente acima das vizinhas.
   Em subgrid as três faixas (sub · pilar · área) são as MESMAS linhas
   para todas as colunas, e a coluna sem sub-marca ocupa as duas
   primeiras. O alinhamento deixa de depender do texto da legenda ou do
   arredondamento do aspect-ratio. */
@supports (grid-template-rows: subgrid) {
    .nl-fund-cols {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 8px;
    }
    .nl-fund-col { display: grid; grid-template-rows: subgrid; grid-row: 1 / 4; }
    .nl-fund-col:not(.com-sub) .nl-fund-main { grid-row: 1 / 3; aspect-ratio: auto; }
    .nl-fund-area { grid-row: 3; }
}

/* véu + máscara do mosaico: vêm do componente (shared mosaic.css) */

/* a fila das marcas na base do hero */
.nl-marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem 2.6rem; }
.nl-marcas a { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); transition: color 0.3s; }
.nl-marcas a:hover { color: #fff; }
.nl-marcas a .normal-case { text-transform: none; }

/* ── a lista dos pilares ──────────────────────────────────────────
   Linhas, não grelha: a ordem é a ordem de foco e uma grelha dilui ordem.
   Desenhada do NLPILLARS pelo pages/index.js. */
/* TODOS DO MESMO TAMANHO (revisão do João): metades iguais e altura fixa,
   em vez do 5fr/4fr alternado que fazia cada card diferente do vizinho. */
/* o mínimo fica ACIMA do card com mais conteúdo (o Synapse, 372px com a
   frase da sub-marca): assim todos trancam na mesma altura em vez de cada
   um crescer com o seu texto */
.nl-pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; min-height: 390px; }
.nl-pillar.clicavel { cursor: pointer; }
.nl-pillar + .nl-pillar { margin-top: 2rem; }
.nl-pillar.invertido .nl-pillar-txt { order: 2; }
.nl-pillar-txt { padding: 3rem clamp(1.5rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.nl-pillar-img { position: relative; min-height: 390px; }
.nl-pillar-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.nl-pillar-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5, 7, 13, 0.5), rgba(5, 7, 13, 0.05)); }
.nl-pillar.invertido .nl-pillar-img::after { background: linear-gradient(to left, rgba(5, 7, 13, 0.5), rgba(5, 7, 13, 0.05)); }
/* Vintedex ainda não tem material visual: o lado da imagem vai tipográfico */
.nl-pillar-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.09); }
/* sub-marca = frase integrada, não etiqueta (a pill "↳" foi rejeitada) */
.nl-pillar-sub { color: #6b7382; font-weight: 300; line-height: 1.6; margin-top: 0.9rem; font-size: 0.925rem; }
.nl-pillar-sub a { color: #e6e8ee; font-weight: 500; transition: color 0.3s; }
.nl-pillar-sub a:hover { color: #3b82f6; }
@media (max-width: 767px) {
    .nl-pillar, .nl-pillar.invertido { grid-template-columns: 1fr; }
    .nl-pillar.invertido .nl-pillar-txt { order: 0; }
    .nl-pillar-img { min-height: 200px; }
}

/* ── A GRELHA DO ECOSSISTEMA ────────────────────────────────────────
   Cinco cards não fecham numa grelha de três colunas: sobra um buraco na
   segunda fila, que foi o que sempre esteve mal nesta página. Em seis colunas
   fecha — dois cards de três em cima, três cards de dois em baixo. Abaixo dos
   1024px passa a duas colunas (com o último a ocupar as duas, para não ficar
   órfão) e abaixo dos 640px a uma. */
.eco-grelha { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5rem; }
.eco-grelha > .eco-card:nth-child(-n+2) { grid-column: span 3; }
.eco-grelha > .eco-card:nth-child(n+3) { grid-column: span 2; }

.eco-card {
    position: relative; overflow: hidden; padding: clamp(2.25rem, 3vw, 3rem) clamp(2.25rem, 3.2vw, 3.25rem);
    min-height: 420px; border-radius: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.5s ease;
}
.eco-card[data-href] { cursor: pointer; }
.eco-card:hover { border-color: rgba(59, 130, 246, 0.4); }
/* A ARTE, ancorada à direita dos dois cards largos e visível de verdade. A
   versão anterior punha a imagem atrás do texto inteiro a 11% de opacidade com
   véu por cima: não se via nada E o screenshot do site no Synapse sangrava
   letras por trás do copy. Agora é o padrão das faixas do index — imagem franca
   num painel, a esvair para o vidro do lado do texto. Os três cards estreitos
   não levam arte nenhuma: a hierarquia (2 com imagem, 3 tipográficos) é
   deliberada. */
.eco-card-arte {
    position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
    background-size: cover; background-position: center;
    -webkit-mask-image: linear-gradient(to left, black 55%, transparent);
    mask-image: linear-gradient(to left, black 55%, transparent);
    opacity: 0.85; transition: opacity 0.5s ease; pointer-events: none;
}
.eco-card:hover .eco-card-arte { opacity: 1; }
/* 36% e não mais: a banda esquerda da arte é transparente pela máscara, o texto
   pode entrar-lhe um pouco — e cada linha poupada aqui é altura que a grelha
   precisa num portátil de 720px */
.eco-card.com-arte .card-content { padding-right: 36%; }
/* nos cards estreitos a faixa recolhe e o texto cede-lhe menos espaço: a frase
   ganha mais uma ou duas linhas e o card cresce — a página já rola, pode */
.eco-grelha > .eco-card:nth-child(n+3) .eco-card-arte {
    width: 52%;
    -webkit-mask-image: linear-gradient(to left, black 40%, transparent);
    mask-image: linear-gradient(to left, black 40%, transparent);
}
.eco-grelha > .eco-card:nth-child(n+3) .card-content { padding-right: 26%; }
/* o topo da faixa escurece para o título e o logo assentarem em chão quieto,
   seja qual for a imagem (o mesmo truque do ::after das faixas do index) */
.eco-grelha > .eco-card:nth-child(n+3) .eco-card-arte::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(5, 7, 13, 0.9), transparent 45%);
}

@media (max-width: 639px) {
    .eco-card-arte { display: none; }
    .eco-grelha > .eco-card:nth-child(n+3) .card-content { padding-right: 0; }
    .eco-card.com-arte .card-content { padding-right: 0; }
}
.card-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.eco-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* NUNCA partir a meio da palavra: com `break-word` o MonuMonta saía "MONUMO /
   NTA" na coluna estreita. A palavra fica inteira e é o tamanho que cede. */
.project-title {
    overflow-wrap: normal; word-break: normal; line-height: 1.1;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem); font-weight: 800;
    text-transform: uppercase; letter-spacing: -0.04em; color: #fff;
}
.project-title.sem-partir { text-transform: none; }
/* Os três cards de baixo são mais estreitos e têm a mesma altura dos de cima:
   o nome e o texto acompanham. Sem isto o Synapse (frase + sub-marca em coluna
   estreita) ficava 6px acima da altura da caixa e a última linha era cortada. */
.eco-grelha > .eco-card:nth-child(n+3) .project-title { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.eco-grelha > .eco-card:nth-child(n+3) .eco-card-frase { font-size: 1.0625rem; line-height: 1.6; }
.eco-grelha > .eco-card:nth-child(n+3) .eco-sub { font-size: 0.9rem; margin-top: 0.9rem; }
/* O logo afasta-se mais da parede do que o texto (44px contra 34): está aos
   mesmos 34px geométricos, mas um logo largo e cheio de tinta (o puzzle da
   MonuMonta) LÊ-SE colado onde o texto lê-se folgado — a percepção ganha à
   régua ("o logo tá quase a bater na parede", João). */
.logo-img { max-height: 3rem; width: auto; object-fit: contain; flex: none; margin-right: 0.65rem; }

.eco-card-frase { color: #9ca3af; font-weight: 300; line-height: 1.625; font-size: 1.125rem; }
.eco-sub { color: #6b7382; font-weight: 300; line-height: 1.6; margin-top: 1rem; font-size: 0.925rem; }
.eco-sub a { color: #e6e8ee; font-weight: 500; transition: color 0.3s; position: relative; z-index: 2; }
.eco-sub a:hover { color: #3b82f6; }

.eco-card-pe {
    display: flex; align-items: center; justify-content: flex-start;
    padding-top: 2rem; margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0.6; transition: opacity 0.4s;
}
.eco-card:hover .eco-card-pe { opacity: 1; }
.eco-card-area, .eco-card-pe span {
    font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #a8b0bf;
}

@media (max-width: 1023px) {
    .eco-grelha { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
    .eco-grelha > .eco-card:nth-child(-n+2), .eco-grelha > .eco-card:nth-child(n+3) { grid-column: span 1; }
    /* cinco em duas colunas deixa o último sozinho: ocupa a fila inteira */
    .eco-grelha > .eco-card:nth-child(5) { grid-column: span 2; min-height: 320px; }
}
@media (max-width: 639px) {
    .eco-grelha { grid-template-columns: 1fr; }
    .eco-grelha > .eco-card, .eco-grelha > .eco-card:nth-child(5) { grid-column: span 1; min-height: 0; }
}