/* ============================================================
   SKILLS
   ============================================================ */
.skills {
    width: 100%;
    height: auto;
    background-color: var(--laranja);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-bottom: 4rem;
}

/* Branco sobre este laranja dava 2.9:1 e reprovava no WCAG.
   Preto sobre o mesmo laranja dá 7:1, sem trocar nenhuma cor da paleta. */
.skills .secao-titulo {
    color: var(--preto);
}

.skills .skills-nota {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    max-width: 40rem;
    padding: 0 1.5rem;
    color: var(--preto);
    opacity: 0.8;
}

.skills .skills-cat {
    text-align: center;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--preto);
    padding-top: 2.5rem;
    /* Faixa clara atrás do título para separar as categorias */
    border-bottom: solid 4px var(--preto);
}

.card-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    padding: 2.5rem 1.5rem;
}

.card-skill-f,
.card-skill-b,
.card-skill-d,
.card-skill-o {
    height: 190px;
    width: 190px;
    padding: 1rem;
    background-color: var(--roxo);
    border: solid 3px var(--verde);
    box-shadow: var(--sombra-dura);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    cursor: default;
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out,
                background-color 0.4s ease-in-out, border-color 0.4s ease-in-out;
}

.card-skill-f h4,
.card-skill-b h4,
.card-skill-d h4,
.card-skill-o h4 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--preto);
}

.card-skill-f p,
.card-skill-b p,
.card-skill-d p,
.card-skill-o p {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--preto);
    /* Escondido só onde existe hover de verdade; ver bloco (hover: none) abaixo */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}

/* :focus-within faz o card funcionar também por teclado */
.card-skill-f:hover,  .card-skill-f:focus-within,
.card-skill-b:hover,  .card-skill-b:focus-within,
.card-skill-d:hover,  .card-skill-d:focus-within,
.card-skill-o:hover,  .card-skill-o:focus-within {
    transform: scale(1.35);
    z-index: 5;
    background-color: var(--verde);
    border-color: var(--roxo);
    box-shadow: 15px 15px 0px -1px var(--branco), var(--sombra-suave);
}

.card-skill-f:hover p,  .card-skill-f:focus-within p,
.card-skill-b:hover p,  .card-skill-b:focus-within p,
.card-skill-d:hover p,  .card-skill-d:focus-within p,
.card-skill-o:hover p,  .card-skill-o:focus-within p {
    max-height: 9rem;
    opacity: 1;
}

/* ============================================================
   TOQUE — sem hover, o texto não pode ficar escondido.
   Aqui os cards mostram nome e contexto ao mesmo tempo.
   ============================================================ */
@media (hover: none) {
    .card-skill-f,
    .card-skill-b,
    .card-skill-d,
    .card-skill-o {
        height: auto;
        min-height: 150px;
        width: 100%;
        max-width: 22rem;
        justify-content: flex-start;
        padding: 1.2rem;
    }

    .card-skill-f p,
    .card-skill-b p,
    .card-skill-d p,
    .card-skill-o p {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }

    /* Sem o salto de escala: no toque isso só atrapalha */
    .card-skill-f:hover,  .card-skill-f:focus-within,
    .card-skill-b:hover,  .card-skill-b:focus-within,
    .card-skill-d:hover,  .card-skill-d:focus-within,
    .card-skill-o:hover,  .card-skill-o:focus-within {
        transform: none;
        background-color: var(--roxo);
        border-color: var(--verde);
        box-shadow: var(--sombra-dura);
    }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .skills {
        padding-bottom: 2.5rem;
    }

    .card-container {
        gap: 1.2rem;
        padding: 1.5rem 1rem;
    }

    .card-skill-f,
    .card-skill-b,
    .card-skill-d,
    .card-skill-o {
        min-height: 0;
        box-shadow: 6px 6px 0px -1px var(--preto);
    }

    .card-skill-f h4,
    .card-skill-b h4,
    .card-skill-d h4,
    .card-skill-o h4 {
        font-size: 1rem;
    }
}