﻿/* ===== CLASSES UTILITÁRIAS ===== */
.botaoMobile {
    display: none;
}

.cursorPointer {
    cursor: pointer;
}

/* ===== COMPONENTES PRINCIPAIS ===== */

/* Card Body */
.card-body {
    padding: 35px 20px 5px 20px;
}

/* Banner Home */
.divBannerHome {
    position: absolute;
    z-index: 1000;
    width: 100%;
    margin-top: 350px;
}

.divBannerHomeTitulo {
    font-size: 50px;
    line-height: 1;
}

.divBannerHomeTexto {
    font-weight: normal;
    font-size: 27px;
}

.divBannerHomeSeparacao {
    margin-top: 26px;
}

/* Seção de Serviços */
.divServicoComFundo {
    margin-top: -8px;
    background-image: url('../../custom/images/home/bg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Fundo Cinza */
.fundoCinza hr {
    border: 0.1px solid #7FADC1;
    width: 40%;
    margin: auto;
    margin-bottom: 80px;
}

/* ===== GRID DE PROJETOS ===== */
.projects-grid {
    display: grid;
    gap: 30px;
    margin-bottom: 2rem;
}

.project-item figure {
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 8px;
}

.project-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-item:hover img {
    transform: scale(1.05);
}

/* Detalhes dos Projetos */
.project-details {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white !important;
}

    .project-details .post-title a {
        color: #fff !important;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .project-details .post-category {
        color: #fff !important;
        font-size: 0.9rem;
        opacity: 0.9;
        margin-top: 0.3rem;
    }

/* Link de Zoom */
.item-link {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #333;
    text-decoration: none;
}

.project-item:hover .item-link {
    opacity: 1;
}

.item-link i {
    font-size: 1.2rem;
}

/* ===== TÍTULOS RESPONSIVOS ===== */
.responsive-title .desktop-break {
    display: block;
}

.responsive-title .mobile-break {
    display: none;
    font-weight: 400;
}

/* ===== MEDIA QUERIES ===== */

/* Desktop - Telas grandes (1000px+) */
@media (min-width: 1000px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet (768px - 999px) */
@media (min-width: 768px) and (max-width: 999px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile - Telas pequenas (max-width: 768px) */
@media (max-width: 768px) {
    /* Vídeo */
    video {
        height: 45vh;
        clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
    }

    /* Botões */
    .botaoMobile {
        display: block;
    }

    .botaoDesktop {
        display: none;
    }

    .col figure img {        
        max-height: 50px !important;
        max-width: 70px;         
    }

    /* Seção de Serviços */
    .divServicos {
        clip-path: polygon(0 1%, 100% 0, 100% 100%, 0 100%);
        margin-top: -60px;
    }

        .divServicos h2 {
            margin-bottom: .5rem !important;
        }

        .divServicos .row {
            margin-right: calc(-.5 * var(--bs-gutter-x));
            margin-left: calc(-.5 * var(--bs-gutter-x));
        }

    /* Grid de Projetos */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .project-item img {
        height: 180px;
    }

    .project-details {
        bottom: 5px;
        left: 0px;
        right: 15px;
    }

        .project-details .post-title a {
            font-size: 0.8rem;
        }

        .project-details .post-category {
            font-size: 0.7rem;
        }

    /* Texto e Cards */
    .divServicoComFundo .display-4 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 2rem !important;
    }

    .card-body p {
        font-size: 0.7rem !important;
    }

    .card-body h5 {
        font-size: 16px;
    }

    .item-inner .card {
        min-height: 250px !important;
    }

    .blockquote-details {
        margin-bottom: 1.5rem !important;
    }

    /* Fundo Cinza */
    .fundoCinza .display-4 {
        font-weight: 400;
    }

    .fundoCinza hr {
        margin-bottom: 30px;
    }

    /* Títulos Responsivos */
    .responsive-title .desktop-break {
        display: none;
    }

    .responsive-title .mobile-break {
        display: block;
    }

    .row .col {
        margin-top: 0.75rem !important;
    }

    .no-padding{
        padding: 0;
    }

    .col-lg-4 {
        padding: 0 10px !important;
    }

    .fundoCinza .col-md-6,
    .fundoCinza .col-xl-3 {
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        flex: none !important;
    }

    .fundoCinza .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .fundoCinza .display-4 {
        font-size: 1.3rem !important;
        margin-bottom: 25px !important;
    }
}

/* Telas muito pequenas (max-width: 480px) */
@media (max-width: 480px) {
    .project-item img {
        height: 150px;
    }

    .project-details .post-title a {
        font-size: 0.7rem;
    }

    .project-details .post-category {
        font-size: 0.6rem;
    }

    .projects-grid {
        gap: 10px;
    }
}
