/* ss2.css — grelhas/pills das páginas de works (social-strings.html, synapse.html,
   projeto-social-*.html). Os cards em si são o componente global NL.cards
   (.nlc-card, shared/css/cards.css → nl-shared.css). */

.ss-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ss-pill { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.55rem 1.3rem; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9ca3af; background: transparent; cursor: pointer; transition: all 0.3s; }
.ss-pill:hover { border-color: rgba(59, 130, 246, 0.5); color: #fff; }
.ss-pill.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }

/* grelha de 3 colunas (desce a 2 e 1); cards largos ocupam 2 colunas.
   Fluxo `row` (não dense): a ordem vem já empacotada pelo SS2UI.mosaic. */
.ss-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .ss-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ss-grid { grid-template-columns: repeat(3, 1fr); } }
.ss-grid .nlc-card { --nlc-radius: 1.25rem; }
.ss-grid .nlc-card, .print-strip .nlc-card {
    transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.35s ease;
}
.nlc-card[hidden] { display: none; }

@media (min-width: 640px) {
    .ss-grid .nlc-card.wide { grid-column: span 2; }
}

/* transição suave ao filtrar */
.ss-grid.fading .nlc-card { opacity: 0; transform: scale(0.97); }

/* entrada/saída de cards no "Ver mais" / "Ver menos" */
.nlc-card.enter { opacity: 0; transform: translateY(14px); }

.print-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; }
.print-strip .nlc-card { --nlc-radius: 1rem; aspect-ratio: 3 / 4; }