/* =========================================================
   /sobre/ — só o que o portal.css não tem: o topo com a arte
   ao lado, o texto corrido e o quadro da empresa. O resto da
   página usa classes do portal (section-tag, about-photo,
   origin-art, roblox-*, tags, final-cta).
========================================================= */

.sobre-topo {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    align-items: center;

    gap: 70px;
}


.sobre-topo h1 {
    font-size:
        clamp(2.3rem, 5.2vw, 4.3rem);

    letter-spacing: -.025em;
}


.sobre-abertura {
    max-width: 620px;

    margin-top: 22px;

    color: var(--text-soft);

    font-size: 1.12rem;
}


.sobre-topo .about-photo-wrapper {
    width: 100%;

    justify-self: end;
}


.sobre-topo .origin-art {
    min-height: 380px;
}



/* TEXTO CORRIDO */

.sobre-texto {
    max-width: 730px;
}


.sobre-texto p {
    margin-top: 17px;

    color: var(--text-soft);

    font-size: 1.05rem;
}


.sobre-texto p a {
    color: var(--cyan);

    font-weight: 800;

    text-decoration: underline;
    text-underline-offset: 3px;
}



/* QUADRO DA EMPRESA */

.sobre-empresa {
    display: grid;

    grid-template-columns:
        max-content 1fr;

    gap: 12px 26px;

    max-width: 560px;

    margin-top: 28px;
    padding: 22px 24px;

    background:
        rgba(255,255,255,.035);

    border:
        2px solid rgba(255,255,255,.09);

    border-radius: 18px;
}


.sobre-empresa dt {
    color: var(--text-muted);

    font-size: .74rem;
    font-weight: 900;

    letter-spacing: .1em;
    text-transform: uppercase;

    line-height: 1.9;
}


.sobre-empresa dd {
    font-weight: 700;

    overflow-wrap: anywhere;
}


.sobre-empresa a {
    color: var(--cyan);
}



/* SITUAÇÕES — três cartões numa coluna, com o mesmo selo dos cards
   do catálogo (status-live / status-dev). */

.sobre-situacoes {
    grid-template-columns: 1fr;
}


.sobre-situacoes .roblox-card {
    min-height: 0;
}


.sobre-situacoes .roblox-card:nth-child(n) {
    transform: none;
}


.sobre-situacoes .game-meta {
    margin: 0 0 10px;
}


/* Os cartões ficam dentro de um .roblox-copy (para a legenda acima deles
   herdar o estilo de texto), e o .roblox-copy p dá margin-bottom: 28px. */
.sobre-situacoes .roblox-card p {
    margin-bottom: 0;

    font-size: .92rem;
}



@media (max-width: 1000px) {

    .sobre-topo {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .sobre-topo .about-photo-wrapper {
        max-width: 500px;

        justify-self: start;
    }

}



@media (max-width: 680px) {

    .sobre-topo .origin-art {
        min-height: 280px;
    }


    .sobre-empresa {
        grid-template-columns: 1fr;

        gap: 2px;
    }


    .sobre-empresa dd + dt {
        margin-top: 10px;
    }

}