/*
 * Feed Instagram — Alpixi
 * Toutes les valeurs pilotables sont des custom properties, surchargées soit par
 * le widget Elementor (via selectors sur {{WRAPPER}}), soit par les attributs du
 * shortcode (style inline sur le conteneur).
 *
 * Les valeurs par défaut reproduisent le rendu historique du plugin (grille
 * auto-fill 150px, carré, radius 8px) pour ne rien casser sur les sites qui
 * utilisent le shortcode sans attributs.
 */

.instagram-feed {
    display: grid;
    grid-template-columns: var(--mfi-grid, repeat(auto-fill, minmax(150px, 1fr)));
    gap: var(--mfi-gap, 10px);
}

.instagram-post {
    position: relative;
    display: block;
    aspect-ratio: var(--mfi-ratio, 1);
    overflow: hidden;
    border-radius: var(--mfi-radius, 8px);
}

.instagram-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--mfi-hover-duration, 0.3s) ease;
}

.instagram-post:hover img {
    transform: scale(var(--mfi-hover-scale, 1.05));
}

.instagram-icon {
    position: absolute;
    top: var(--mfi-icon-offset, 8px);
    right: var(--mfi-icon-offset, 8px);
    color: var(--mfi-icon-color, #fff);
    padding: var(--mfi-icon-padding, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: var(--mfi-icon-shadow, drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)));
    pointer-events: none;
}

.instagram-icon svg {
    display: block;
    width: var(--mfi-icon-size, 20px);
    height: var(--mfi-icon-size, 20px);
}

.instagram-feed--no-icons .instagram-icon {
    display: none;
}

/*
 * ATTENTION — ne jamais redéfinir ici les custom properties ci-dessus pour la
 * classe .instagram-feed--elementor.
 *
 * Le widget les écrit sur {{WRAPPER}} (.elementor-element-xxx), de même
 * spécificité (0,1,0) que .instagram-feed--elementor. Or cette feuille est
 * imprimée APRÈS le CSS généré par Elementor (les styles déclarés en
 * get_style_depends() sont enqueued au rendu, donc en pied de page) : toute
 * déclaration ici l'emporterait et figerait les contrôles du widget.
 *
 * Ce n'est de toute façon pas nécessaire : les valeurs de repli des `var()`
 * ci-dessus ne s'appliquent que si la propriété n'est définie nulle part.
 * Dès qu'Elementor la pose sur le wrapper, elle est héritée et le repli est
 * ignoré — sans le moindre conflit de spécificité.
 *
 * La classe reste posée sur le conteneur comme point d'accroche éventuel.
 */