/* ========================================= */
/* RESPONSIVIDADE (MEDIA QUERIES)            */
/* ========================================= */

/* Telas Grandes (Laptop Médio/Grande) */
@media (max-width: 1320px) {
    .container-lg {
        max-width: 1200px;
    }

    .hero-content {
        padding: 0;
    }

    .header-nav {
        padding: 0;
    }
}

/* Telas Médias (Laptop Pequeno / Tablet Horizontal) */
@media (max-width: 1200px) {
    .title {
        font-size: 40px;
    }

    .about-content {
        padding-right: 0;
    }

    .services-row {
        justify-content: center;
    }

    /* .project-box max-width removido */

    .about,
    .projects,
    .contact {
        padding: 80px 0;
    }
}

/* Tablet (Portrait) - Ajustes de Layout */
@media (max-width: 977px) {
    .title {
        font-size: 36px;
    }

    /* Hero: Mantém lado a lado, mas ajusta imagem */
    .hero-img {
        justify-content: center;
        align-items: center;
        display: flex;
        width: auto;
        margin: 0;
    }

    .about-social-list {
        display: block;
    }

    .about-row {
        grid-template-columns: 1fr;
    }

    .about-row {
        row-gap: 50px;
        margin-bottom: 50px;
    }

    .nav-list {
        display: none;
    }

    .nav-btn {
        display: block;
    }

    /* Menu Mobile Fullscreen */
    .nav.open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        background: #fff;
        z-index: 10000;
    }

    .nav.open .nav-list {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #fff;
        z-index: 10001;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 48px;
        font-weight: 500;
        padding: 0;
        margin: 0;
    }

    .nav-link {
        color: #565a5b;
    }

    .nav-link.active {
        color: #0c1618;
    }

    .nav-btn {
        display: flex; /* exibe o botão de menu (hambúrguer/close) em telas pequenas */
        position: fixed; /* conforme seu layout, para que o botão flutue sobre a página */
        top: 36px; /* ajuste conforme seu design */
        right: 30px;
        z-index: 11000;
    }

    .nav.open .nav-btn {
        position: fixed;
    }

    .header-nav {
        margin-bottom: 0;
    }

    .hero {
        padding-top: 160px;
    }

    .social-links-row {
        column-gap: 17px;
        margin: 30px 0 30px;
    }

    .btn {
        font-size: 11px;
        padding: 0 20px;
    }
    .skill {
        max-width: 460px;
        margin-inline: auto;
    }
    .services-row {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        row-gap: 50px;
    }

    .service-card-img {
        height: 40px;
    }

    /* .project-box max-width removido para permitir que o JS controle a largura */
    .project-box {
        width: 100%;
    }

    .about,
    .projects,
    .contact {
        padding: 5rem 0;
    }

    .title {
        margin-bottom: 30px;
    }
}

/* Breakpoint Personalizado: Hero empilha (Imagem topo, texto baixo) */
@media (max-width: 862px) {
    .hero-row {
        flex-direction: column;
        row-gap: 30px;
    }
    .hero-content {
        text-align: center;
        align-items: center;
        margin: 0 auto;
        max-width: 100%;
    }

    .hero-heading,
    .hero-heading-subtitle {
        text-align: center;
        margin: 0 auto;
    }

    .social-links-row {
        justify-content: center;
    }

    .hero-content .social-links-row {
        justify-content: center;
    }
}

/* Mobile (Pequeno) */
@media (max-width: 720px) {
    /* .project-box max-width controlado via JS/Layout */
}

@media (max-width: 406px) {
    .hero-img {
        flex: 1 1 100%;
    }

    .hero-img img {
        width: 200px;
        height: 200px;
    }
}

/* Mobile (1 slide) */
@media screen and (max-width: 720px) {
    .carousel-track {
        gap: 0; /* Remove gap para mobile, já que é 1 por vez */
    }
    .carousel-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Responsividade do Carrossel (Controlada via CSS) */

/* Tablet (2 slides) */
@media screen and (min-width: 721px) {
    .carousel-track {
        gap: 10px; /* Gap menor para tablet */
    }
    .carousel-slide {
        /* (100% - 1 gap de 10px) / 2 */
        flex: 0 0 calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }
}

/* Desktop (3 slides) */
@media screen and (min-width: 978px) {
    .carousel-track {
        gap: 20px; /* Gap padrão para desktop */
    }
    .carousel-slide {
        /* (100% - 2 gaps de 20px) / 3 */
        flex: 0 0 calc((100% - 40px) / 3);
        max-width: calc((100% - 40px) / 3);
    }
}

/* Desloca imagem somente em telas maiores */

@media (max-width: 977px) {
    .carousel-track {
        gap: 10px; /* exemplo: fica 10px entre slides em telas até 977px */
    }
}