/**
 * Trabajamos en Red Block Styles
 * Sección con título, descripción y grid de logos de entidades colaboradoras
 * Basado en Figma: node 561-14453
 */

/* ==========================================================================
   Section Container
   ========================================================================== */

.menudos-trabajamos-red {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 64px;
    background-color: var(--wp--preset--color--white, #FFFFFF);
    border-bottom: 1px solid var(--wp--preset--color--light-gray, #F4F4F4);
    overflow: clip;
    width: 100%;
}

/* ==========================================================================
   Decorative Ellipse
   ========================================================================== */

.trabajamos-red__ellipse {
    position: absolute;
    top: -589px;
    left: -304px;
    width: 703px;
    height: 703px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--brand-blue, #3A91CF);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Inner Layout (Two Columns)
   ========================================================================== */

.trabajamos-red__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 64px;
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1400px);
    margin: 0 auto;
}

/* ==========================================================================
   Text Content (Left Column)
   ========================================================================== */

.trabajamos-red__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
    flex-shrink: 0;
}

.trabajamos-red__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--large, 36px);
    font-weight: 700;
    line-height: 1.21;
    color: var(--wp--preset--color--text-dark, #333333);
}

.trabajamos-red__description {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
    font-size: var(--wp--preset--font-size--body-large, 18px);
    font-weight: 500;
    line-height: 1.21;
    color: var(--wp--preset--color--secondary, #787878);
}

/* ==========================================================================
   Logos Grid (Right Column)
   ========================================================================== */

.trabajamos-red__logos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.trabajamos-red__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    padding: 10px;
    background-color: var(--wp--preset--color--white, #FFFFFF);
}

.trabajamos-red__logo-img {
    max-width: 120px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* filter: grayscale(100%);
    opacity: 0.7; */
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* .trabajamos-red__logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
} */

/* ==========================================================================
   Full Width Alignment
   ========================================================================== */

.menudos-trabajamos-red.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.menudos-trabajamos-red.alignwide {
    width: calc(100% + 100px);
    max-width: 1400px;
    margin-left: -50px;
    margin-right: -50px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet landscape (1024px) */
@media (max-width: 1024px) {
    .menudos-trabajamos-red {
        padding: var(--wp--preset--spacing--extra-large) 32px;
    }

    .trabajamos-red__inner {
        gap: 40px;
    }

    .trabajamos-red__content {
        max-width: none;
        flex: 1;
    }

    .trabajamos-red__logos-grid {
        flex: 1;
    }

    .trabajamos-red__logo-item {
        height: 80px;
    }

    .trabajamos-red__logo-img {
        max-width: 100px;
        max-height: 60px;
    }
}

/* Tablet portrait (768px) */
@media (max-width: 768px) {
    .menudos-trabajamos-red {
        padding: var(--wp--preset--spacing--extra-large) var(--wp--preset--spacing--small);
    }

    .trabajamos-red__inner {
        flex-direction: column;
        gap: var(--wp--preset--spacing--medium);
    }

    .trabajamos-red__content {
        width: 100%;
        max-width: 100%;
        gap: 16px;
        text-align: center;
    }

    .trabajamos-red__title {
        font-size: var(--wp--preset--font-size--large);
    }

    .trabajamos-red__description {
        font-size: var(--wp--preset--font-size--normal);
    }

    .trabajamos-red__logos-grid {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .trabajamos-red__logo-item {
        height: 70px;
        padding: 8px;
    }

    .trabajamos-red__logo-img {
        max-width: 80px;
        max-height: 50px;
    }

    .trabajamos-red__ellipse {
        width: 400px;
        height: 400px;
        top: -300px;
        left: -200px;
    }
}

/* Mobile (480px) */
@media (max-width: 480px) {
    .menudos-trabajamos-red {
        padding: var(--wp--preset--spacing--large) 12px;
    }

    .trabajamos-red__content {
        gap: 12px;
    }

    .trabajamos-red__title {
        font-size: var(--wp--preset--font-size--large);
    }

    .trabajamos-red__logos-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .trabajamos-red__logo-item {
        height: 60px;
        padding: 6px;
    }

    .trabajamos-red__logo-img {
        max-width: 70px;
        max-height: 40px;
    }
}

/* ==========================================================================
   Editor Styles
   ========================================================================== */

.is-admin .menudos-trabajamos-red,
.block-editor-block-list__block .menudos-trabajamos-red {
    min-height: 200px;
}