/* Grid que muestra 3 imágenes en desktop */
.dtb-instagram-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.dtb-instagram-post {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 calc(33.333% - 11px);
    min-width: 0;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;              /* cuadrado estable en navegadores modernos */
    min-height: 0;
}

.dtb-instagram-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Contenedor interno: sustituimos padding-bottom por aspect-ratio */
.dtb-instagram-thumb {
    width: 100%;
    padding-bottom: 0 !important;
    flex: 1 1 auto;
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    display: block;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.dtb-instagram-thumb img {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
}

.dtb-instagram-post:hover .dtb-instagram-thumb img {
    transform: scale(1.05);
}

.dtb-instagram-error,
.dtb-instagram-empty {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .dtb-instagram-post {
        aspect-ratio: auto;
        position: relative;
    }
    .dtb-instagram-thumb {
        aspect-ratio: auto;
        position: relative;
        padding-bottom: 100% !important;
    }
    .dtb-instagram-thumb img {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
    }
}

/* Ajustes tablet (mantener 3 columnas, fuerza altura consistente) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .dtb-instagram-feed {
        gap: 12px;
    }
    
    .dtb-instagram-post {
        flex: 1 1 calc(33.333% - 8px);
        aspect-ratio: 1 / 1;
    }
}

/* Mobile: una columna, asegurar que refluye tras cambios de orientación */
@media screen and (max-width: 767px) {
    .dtb-instagram-feed {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        height: auto !important;
    }
    .dtb-instagram-post {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 0;
    }
    .dtb-instagram-thumb {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: 100%;
        padding: 0 !important;
    }
    .dtb-instagram-thumb img {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Fallback (solo si navegador no soporta aspect-ratio) */
@supports not (aspect-ratio: 1 / 1) {
    @media screen and (max-width: 767px) {
        .dtb-instagram-post { position: relative; }
        .dtb-instagram-thumb { position: relative; padding-bottom: 100% !important; }
        .dtb-instagram-thumb img { position: absolute; top:0; left:0; width:100%; height:100%; }
    }
}

/* Suavizar cambios al redimensionar */
.dtb-instagram-post,
.dtb-instagram-thumb,
.dtb-instagram-thumb img {
    transition: aspect-ratio 0.2s linear, height 0.2s linear;
}