/* ============================================================
   O que a gente resolve — quatro cards de vidro claro sobre o camaleão
   em degradê, como o GlassCard do Design System: o vidro sempre em cima
   de algo, e aqui esse algo é a própria marca.
   ============================================================ */

.problems {
    isolation: isolate;
    overflow: clip;
}

.problems__stage { position: relative; }

/* Atrás dos cards, deslocado pra direita: nos cards da esquerda ele quase
   não passa, e o vidro desfocando a marca aparece só onde há o que
   desfocar. */
.problems__cam {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: clamp(300px, 70vw, 640px);
    transform: translate(-28%, -50%);
}

.problems__list {
    display: grid;
    gap: var(--space-4);
}

/* Texto pequeno em roxo vai no tom profundo: onde o camaleão passa por
   trás, o vidro fica lilás e o #5452FE cai pra 3.4:1. O --brand-deep
   segura 5.6:1 ali e 8:1 no branco. */
.problems__item {
    --accent-ink: var(--brand-deep);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.problems__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.problems__num {
    font-size: var(--fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-ink);
}

.problems__tag { color: var(--accent-ink); }

.problems__problem {
    max-width: 16ch;
    font-family: var(--font-title);
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--ink);
}

.problems__answer {
    max-width: 42ch;
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--ink-soft);
}

/* O link encosta no pé do card: lado a lado, os quatro terminam na mesma
   linha mesmo com respostas de tamanhos diferentes. */
.problems__link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--accent-ink);
}

.problems__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--space-3);
    margin-top: clamp(2rem, 5vw, 3rem);
    font-size: var(--fs-md);
    color: var(--ink-soft);
}
.problems__more .link-arrow { color: var(--brand); }

@media (min-width: 720px) {
    .problems__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .problems__list { gap: var(--space-6); }
}