/* 
 * CSS Responsive para Imágenes Optimizadas - PageSpeed
 * Soluciona problemas de dimensiones de imágenes para pantallas HD
 */

/* Icono Post - Dimensiones responsivas optimizadas para PageSpeed */
.post-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    /* Usar la imagen de 33x33 como base para mejor calidad */
    image-rendering: auto;
    object-fit: contain;
}

/* Para pantallas de alta densidad (Retina) */
@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 1.5dppx),
       (min-resolution: 144dpi) {
    .post-icon {
        width: 22px;
        height: 22px;
        /* La imagen 24x24 se escala mejor en pantallas HD */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Para pantallas 2x (muy alta densidad) */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx),
       (min-resolution: 192dpi) {
    .post-icon {
        width: 22px;
        height: 22px;
        /* Mantener dimensiones visuales pero mejorar calidad */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Para pantallas muy grandes o alta resolución donde PageSpeed sugiere 33x33 */
@media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2),
       (min-width: 1200px) and (min-resolution: 2dppx) {
    .small-footer .post-icon {
        width: 24px;
        height: 24px;
        /* Tamaño ligeramente mayor en pantallas grandes HD */
    }
}

/* Optimización general para iconos pequeños */
.post-icon,
.small-footer img {
    /* Mejorar renderizado de imágenes pequeñas */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    
    /* Evitar blur en escalado */
    -ms-interpolation-mode: nearest-neighbor;
    
    /* Accesibilidad */
    object-fit: contain;
}

/* Responsive para móviles */
@media (max-width: 480px) {
    .post-icon {
        width: 20px;
        height: 20px;
    }
}

/* Para tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .post-icon {
        width: 22px;
        height: 22px;
    }
}

/* Para desktop */
@media (min-width: 769px) {
    .post-icon {
        width: 22px;
        height: 22px;
    }
}

/* Hover effects para mejor UX */
.postAd-btn:hover .post-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Optimización para pantallas de ultra alta densidad (3x) */
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 3dppx) {
    .post-icon {
        /* En estas pantallas, usar el tamaño sugerido por PageSpeed */
        width: 22px;
        height: 22px;
        /* La imagen 24x24 debería verse perfecta */
        image-rendering: auto;
    }
}