/* ===== OTIMIZAÇÃO RESPONSIVA PARA PÁGINAS DE SERVIÇOS ===== */

/* Seções de detalhe de serviço */
@media (max-width: 767px) {
    .service-detail-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-detail-text,
    .service-detail-image {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }

    .service-detail-text {
        overflow: visible !important;
    }

    .service-detail-image {
        overflow: visible !important;
    }

    /* Imagens de serviços responsivas */
    .service-detail-image .image-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        gap: 3px !important;
    }

    .service-detail-image .image-placeholder img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .service-detail-image .image-placeholder svg {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1;
    }

    .service-detail-image .image-placeholder p {
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        font-size: 13px !important;
        text-align: center;
        width: 100% !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        visibility: visible !important;
        display: block !important;
        z-index: 2;
    }
}

/* Phones pequenos - até 580px */
@media (max-width: 580px) {
    .service-detail {
        padding: 2.5rem 0 !important;
    }

    .service-detail-content {
        gap: 1.5rem !important;
    }

    .section-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .service-description {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .service-features {
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .feature-item {
        gap: 0.75rem !important;
    }

    .feature-item svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
    }

    .feature-item span {
        font-size: 0.9rem !important;
    }

    .service-detail-image .image-placeholder {
        aspect-ratio: 16 / 10 !important;
        border-radius: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .service-detail-image .image-placeholder img {
        aspect-ratio: 16 / 10 !important;
        border-radius: 10px !important;
    }
}

/* Phones pequenos-médios - 581px a 650px */
@media (max-width: 650px) and (min-width: 581px) {
    .service-detail-image .image-placeholder {
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
    }

    .service-detail-image .image-placeholder img {
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
    }

    .section-title {
        font-size: 1.75rem !important;
    }

    .service-description {
        font-size: 1rem !important;
    }
}

/* Tablets pequenos - 651px a 767px */
@media (max-width: 767px) and (min-width: 651px) {
    .service-detail-content {
        grid-template-columns: 1fr !important;
    }

    .service-detail-image .image-placeholder {
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    }

    .service-detail-image .image-placeholder img {
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
    }

    .section-title {
        font-size: 2rem !important;
    }

    .service-description {
        font-size: 1.125rem !important;
    }
}

/* Ordenação alternada de serviços em mobile */
@media (max-width: 767px) {
    .service-detail:nth-child(even) .service-detail-content {
        flex-direction: column !important;
    }

    .service-detail-image {
        order: -1 !important;
    }

    .service-detail-alt .service-detail-image {
        order: 0 !important;
    }
}

/* Garantir que seção não oculte conteúdo */
.service-detail {
    overflow: visible !important;
}

.service-detail-content {
    overflow: visible !important;
}

.service-detail-text {
    overflow: visible !important;
}

.service-detail-image {
    overflow: visible !important;
}

/* Seção de serviços adicionais */
@media (max-width: 767px) {
    .additional-services-grid {
        grid-template-columns: 1fr !important;
    }

    .additional-service-card {
        width: 100% !important;
        padding: 1.5rem !important;
    }

    .additional-service-card h3 {
        font-size: 1.25rem !important;
    }

    .additional-service-card p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .additional-service-card {
        padding: 1.25rem !important;
    }

    .additional-service-icon {
        font-size: 2.5rem !important;
    }

    .additional-service-card h3 {
        font-size: 1.1rem !important;
    }

    .additional-service-card p {
        font-size: 0.875rem !important;
    }
}

/* Text visibility for service page */
@media (max-width: 767px) {
    .section-tag {
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .service-description {
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .service-features {
        width: 100% !important;
        overflow: visible !important;
    }

    .feature-item {
        width: 100% !important;
        overflow: visible !important;
    }

    .feature-item span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
}