/**
 * Elementor Widgets — Estilos complementarios (Dark Corkboard Theme)
 * Se aplican SOLO cuando Elementor está activo.
 * v3.0 — With AOS + Museum Grid + Picasso-style animations
 */

/* ── Grid de columnas configurable desde widgets ── */
.portfolio-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.portfolio-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.portfolio-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

.press-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.press-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.press-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

.services-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.services-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.services-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ── Elementor compatibility: evitar conflictos ── */
.elementor-widget-fa_hero .hero,
.elementor-widget-fa_bio .section,
.elementor-widget-fa_timeline .section,
.elementor-widget-fa_portfolio .section,
.elementor-widget-fa_hemeroteca .section,
.elementor-widget-fa_hemeroteca .hemeroteca-section,
.elementor-widget-fa_servicios .section,
.elementor-widget-fa_contacto .section-dark {
    margin: 0;
}

/* Elementor sections ya manejan padding, evitar doble */
.elementor-section .section {
    padding-left: 0;
    padding-right: 0;
}

/* ── Si se usa Elementor Canvas (sin header/footer del tema) ── */
.elementor-template-canvas .hero {
    padding-top: 0;
}

/* ── Overrides para el editor de Elementor ── */
.elementor-editor-active .fa-animate {
    opacity: 1 !important;
    transform: none !important;
}
.elementor-editor-active [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}
.elementor-editor-active .card--hidden {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Masonry column overrides for Elementor widget ── */
.hm-cols-2 { columns: 2 !important; }
.hm-cols-3 { columns: 3 !important; }
.hm-cols-4 { columns: 4 !important; }

/* ── Museum Grid inside Elementor ── */
.elementor-widget .museum-grid {
    width: 100%;
}
.elementor-widget .museum-card-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

/* ── AOS inside Elementor — ensure proper rendering ── */
.elementor-section [data-aos] {
    transition-property: transform, opacity;
}

/* ── Responsive para columnas configurables ── */
@media (max-width: 1024px) {
    .portfolio-cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
    .press-cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
    .services-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .hm-cols-4 { columns: 3 !important; }
}

@media (max-width: 768px) {
    .portfolio-cols-3,
    .portfolio-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .press-cols-3,
    .press-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .services-cols-2,
    .services-cols-3,
    .services-cols-4 { grid-template-columns: 1fr !important; }
    .hm-cols-3,
    .hm-cols-4 { columns: 2 !important; }
}

@media (max-width: 480px) {
    .portfolio-cols-2,
    .portfolio-cols-3,
    .portfolio-cols-4 { grid-template-columns: 1fr !important; }
    .press-cols-2,
    .press-cols-3,
    .press-cols-4 { grid-template-columns: 1fr !important; }
    .hm-masonry,
    .hm-cols-2,
    .hm-cols-3,
    .hm-cols-4 { columns: 1 !important; }
}

/* Elementor sections ya manejan padding, evitar doble */
.elementor-section .section {
    padding-left: 0;
    padding-right: 0;
}

/* ── Si se usa Elementor Canvas (sin header/footer del tema) ── */
.elementor-template-canvas .hero {
    padding-top: 0;
}

/* ── Overrides para el editor de Elementor ── */
.elementor-editor-active .fa-animate {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Masonry column overrides for Elementor widget ── */
.hm-cols-2 { columns: 2 !important; }
.hm-cols-3 { columns: 3 !important; }
.hm-cols-4 { columns: 4 !important; }

/* ── Responsive para columnas configurables ── */
@media (max-width: 1024px) {
    .portfolio-cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
    .press-cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
    .services-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .hm-cols-4 { columns: 3 !important; }
}

@media (max-width: 768px) {
    .portfolio-cols-3,
    .portfolio-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .press-cols-3,
    .press-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .services-cols-2,
    .services-cols-3,
    .services-cols-4 { grid-template-columns: 1fr !important; }
    .hm-cols-3,
    .hm-cols-4 { columns: 2 !important; }
}

@media (max-width: 480px) {
    .portfolio-cols-2,
    .portfolio-cols-3,
    .portfolio-cols-4 { grid-template-columns: 1fr !important; }
    .press-cols-2,
    .press-cols-3,
    .press-cols-4 { grid-template-columns: 1fr !important; }
    .hm-masonry,
    .hm-cols-2,
    .hm-cols-3,
    .hm-cols-4 { columns: 1 !important; }
}