/* =========================================
   RESPONSIVO PARA HOME + BUSCA + COLABORADORES
   ========================================= */

/* -----------------------------------------
   1024px - Tablets e notebooks pequenos
----------------------------------------- */
@media (max-width: 1024px) {

    .searchBox h1 {
        font-size: 2rem;
    }

    .searchBox span {
        font-size: 0.95rem;
    }

    .searchBox .search-field {
        flex-direction: column;
    }

    .searchBox input,
    .searchBox button {
        width: 100%;
    }

    /* ----- COLABORADORES - CARROSSEL ----- */
    .carousel-track {
        gap: 16px;
    }

    .carousel-btn {
        padding: 8px 12px;
        font-size: 20px;
    }
}

/* -----------------------------------------
   768px - Mobile médio
----------------------------------------- */
@media (max-width: 768px) {

    /* ----- HOME SECTION ----- */
    .searchBox h1 {
        font-size: 1.7rem;
    }

    .searchBox span {
        font-size: 0.9rem;
    }

    .searchBox .search-field {
        flex-direction: column;
        gap: 0.6rem;
    }

    .searchBox input {
        height: 48px;
        font-size: 0.95rem;
    }

    .searchBox button {
        height: 48px;
        font-size: 1rem;
    }

    /* ----- COLABORADORES LISTA / CARROSSEL ----- */
    .carousel-btn {
        display: none;
        /* no mobile navega no dedo */
    }

    .carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 10px 4px;
    }



    .colaborador-card h3 {
        font-size: 1.1rem;
    }

    .colaborador-card .cidade,
    .colaborador-card .tipo {
        font-size: 0.85rem;
    }
}

/* -----------------------------------------
   480px - Mobile pequeno
----------------------------------------- */
@media (max-width: 480px) {

    .searchBox h1 {
        font-size: 1.4rem;
    }

    .searchBox span {
        font-size: 0.85rem;
    }

    .colaborador-card {
        min-width: 160px;
        padding: 10px;
    }

    .colaborador-card .avatar img {
        width: 70px;
        height: 70px;
    }
}