/* ===== OTIMIZAÇÃO RESPONSIVA DE IMAGENS MOBILE ===== */

/* Extra small mobile (phones muito pequenos) - até 480px */
@media (max-width: 480px) {
    .about-main-image {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .about-main-image .image-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        border-radius: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        overflow: visible !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        gap: 2px !important;
        min-height: auto !important;
    }

    .about-main-image .image-placeholder img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        object-position: center !important;
        position: relative !important;
        border-radius: 10px !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-main-image .image-placeholder svg {
        width: 40px !important;
        height: 40px !important;
        color: #9aa4ad !important;
        z-index: 1;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .about-main-image .image-placeholder p {
        margin-top: 3px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        color: #6b7780 !important;
        font-weight: 600;
        z-index: 2;
        position: relative !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;
    }

    /* Garantir que a section não oculta o texto */
    .about-preview {
        overflow: visible !important;
    }

    .about-preview-content {
        overflow: visible !important;
    }

    .about-main-image {
        overflow: visible !important;
    }
}

/* Phones pequenos - 481px a 580px */
@media (max-width: 580px) and (min-width: 481px) {
    .about-main-image {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .about-main-image .image-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 10 !important;
        border-radius: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !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;
        min-height: auto !important;
    }

    .about-main-image .image-placeholder img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-main-image .image-placeholder svg {
        width: 45px !important;
        height: 45px !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .about-main-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;
    }

    /* Garantir visibilidade */
    .about-preview {
        overflow: visible !important;
    }

    .about-preview-content {
        overflow: visible !important;
    }

    .about-main-image {
        overflow: visible !important;
    }
}

/* Small mobile (phones pequenos) - 581px a 650px */
@media (max-width: 650px) and (min-width: 581px) {
    .about-main-image .image-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
        padding: 0 !important;
        margin: 0 !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;
        min-height: auto !important;
    }

    .about-main-image .image-placeholder img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
        position: relative !important;
        margin: 0 !important;
    }

    .about-main-image .image-placeholder svg {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .about-main-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;
    }

    /* Garantir visibilidade */
    .about-preview {
        overflow: visible !important;
    }

    .about-preview-content {
        overflow: visible !important;
    }

    .about-main-image {
        overflow: visible !important;
    }
}

/* Medium mobile (tablets pequenos) - 651px a 767px */
@media (max-width: 767px) and (min-width: 651px) {
    .about-main-image .image-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: transparent !important;
        gap: 4px !important;
        min-height: auto !important;
    }

    .about-main-image .image-placeholder img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        display: block !important;
        position: relative !important;
        margin: 0 !important;
    }

    .about-main-image .image-placeholder svg {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .about-main-image .image-placeholder p {
        margin-top: 5px !important;
        margin-bottom: 0 !important;
        font-size: 14px !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;
    }

    /* Garantir visibilidade */
    .about-preview {
        overflow: visible !important;
    }

    .about-preview-content {
        overflow: visible !important;
    }

    .about-main-image {
        overflow: visible !important;
    }
}

/* Garantir que as imagens nunca quebrem o layout */
.about-main-image,
.about-main-image .image-placeholder,
.about-main-image .image-placeholder img {
    box-sizing: border-box;
}

/* Fallback para imagens que não carregam */
.about-main-image .image-placeholder img:not([src]),
.about-main-image .image-placeholder img[src=""] {
    display: none !important;
}

/* Mostrar SVG fallback apenas quando imagem não existe */
.about-main-image .image-placeholder:not(:has(img[src]:not([src=""]))) svg,
.about-main-image .image-placeholder:not(:has(img[src]:not([src=""]))) p {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Texto de fallback responsivo */
@media (max-width: 480px) {
    .about-main-image .image-placeholder p {
        text-align: center;
        word-wrap: break-word;
    }
}