/* equipo-actions – frontend.css v2 */

.equipo-actions-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ── Grid: columnas y filas via CSS custom properties ── */
.ea-grid {
    display: grid;
    grid-template-columns: repeat(var(--ea-cols-d, 5), 1fr);
    grid-template-rows:    repeat(var(--ea-rows-d, 3), 1fr);
    gap: 4px;
    width: 100%;
}

@media (max-width: 1023px) {
    .ea-grid {
        grid-template-columns: repeat(var(--ea-cols-t, 3), 1fr);
        grid-template-rows:    repeat(var(--ea-rows-t, 3), 1fr);
    }
}

@media (max-width: 599px) {
    .ea-grid {
        grid-template-columns: repeat(var(--ea-cols-m, 2), 1fr);
        grid-template-rows:    repeat(var(--ea-rows-m, 4), 1fr);
    }
}

/* ── Celdas ── */
.ea-cell {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #0d2a4a;
}

.ea-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.ea-cell:hover img {
    transform: scale(1.06);
}

/* ── Animaciones rotación ── */
.ea-cell.ea-fade-out img {
    animation: eaOut .35s ease forwards;
}
.ea-cell.ea-fade-in img {
    animation: eaIn .5s ease forwards;
}

@keyframes eaOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(.95); }
}
@keyframes eaIn {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

.ea-no-photos {
    color: #888;
    font-style: italic;
}