/**
 * SEAFORMEC — Página: Quiénes somos
 * Archivo: assets/css/pages/quienes-somos.css
 *
 * Este fichero contiene únicamente estilos de composición
 * específicos de la página "Quiénes somos".
 *
 * Sin estilos para la seccion "qué hacemos"
 *
 * Los componentes reutilizables mantienen sus estilos propios
 * (tabs.css, stats.css, banner.css, cta.css, cards.css, what-we-do.css, etc.).
 *
 * Breakpoints del proyecto:
 * - Escritorio: > 1100px
 * - Tablet:     <= 1100px
 * - Móvil:      <= 600px
 * - Móvil XS:   <= 380px
 */


/* ==========================================================
   1. MARCO DE ACTUACIÓN
   ========================================================== */

.sf-framework {
    display: grid !important;
    grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
    align-items: center;

    width: min(1320px, calc(100% - 64px)) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;

    gap: 24px !important;
    box-sizing: border-box;
}

.sf-framework__title,
.sf-framework__content {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    flex-basis: auto !important;
    margin: 0 !important;
}

.sf-framework__title h2 {
    margin-block: 0;
}


/* ==========================================================
   2. ESTRUCTURA ORGANIZATIVA
   ========================================================== */

.sf-organization {
    padding-block: 64px !important;
    box-sizing: border-box;
}

.sf-organization_container {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

.sf-organization_container > :first-child {
    margin-block-start: 0 !important;
}

.sf-organization_container > :last-child {
    margin-block-end: 0 !important;
}

.sf-organization_institutions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;
    margin-block: 48px !important;
    padding-inline: 0 !important;

    gap: 40px !important;
    box-sizing: border-box;
}

.sf-organization_institution {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    text-align: center;
    box-sizing: border-box;
}

.sf-organization_institution .wp-block-image {
    margin: 0 0 16px !important;
}

.sf-organization_institution .wp-block-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.sf-organization_institution p {
    margin-block: 0 !important;
}


/* ==========================================================
   3. EQUIPO SEAFORMEC
   ========================================================== */

.sf-team {
    padding-block: 72px !important;
    box-sizing: border-box;
}

.sf-team_container {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

.sf-team_container > :first-child {
    margin-block-start: 0 !important;
}

.sf-team_container > :last-child {
    margin-block-end: 0 !important;
}

.sf-team_intro {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: center;

    width: 100% !important;
    max-width: none !important;
    margin-block: 40px 56px !important;

    gap: 40px !important;
    box-sizing: border-box;
}

.sf-team_intro > .wp-block-column,
.sf-team_intro-text,
.sf-team_intro-media {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-basis: auto !important;
}

.sf-team_intro-text,
.sf-team_intro-media {
    align-self: center;
}

.sf-team_intro-text > :first-child {
    margin-block-start: 0 !important;
}

.sf-team_intro-text > :last-child {
    margin-block-end: 0 !important;
}

.sf-team_intro-media .wp-block-image {
    margin: 0 !important;
}

.sf-team_intro-media .wp-block-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.sf-team_people {
    width: 100% !important;
    max-width: none !important;
    padding: 40px !important;
    box-sizing: border-box;
}

.sf-team_grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;

    gap: 32px !important;
    box-sizing: border-box;
}

.sf-team_grid > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}


/* ==========================================================
   4. NUESTRA TRAYECTORIA
   ========================================================== */

/*
 * El grupo exterior es una Pila.
 * El gap vertical entre título, texto, botones y estadísticas
 * se controla desde Gutenberg.
 */
.sf-trajectory {
    padding-block: 72px 64px !important;
    box-sizing: border-box;
}

.sf-trajectory_container {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;

    text-align: center;
    box-sizing: border-box;
}

.sf-trajectory_container > :first-child {
    margin-block-start: 0 !important;
}

.sf-trajectory_container > :last-child {
    margin-block-end: 0 !important;
}

.sf-trajectory_container > p {
    max-width: 820px;
    margin-inline: auto !important;
}


/* Botonera */
.sf-trajectory_actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    flex-wrap: wrap;

    gap: 24px !important;
    margin-block: 0 !important;
}

.sf-trajectory_actions .wp-block-button {
    width: 170px;
    margin: 0 !important;
}

.sf-trajectory_actions .wp-block-button__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}


/* Variante del componente Estadísticas dentro de Trayectoria */
.sf-trajectory .sf-stats-title {
    display: none !important;
}

.sf-trajectory .sf-stats-section {
    margin-block: 0 !important;
    padding-block: 0 !important;
    min-height: 0 !important;
}

.sf-trajectory .sf-stats-grid {
    margin-block: 0 !important;
    padding-block: 0 !important;
}

.sf-trajectory .sf-stats-section > :last-child,
.sf-trajectory .sf-stats-grid > :last-child {
    margin-block-end: 0 !important;
}


/* ==========================================================
   TABLET — <= 1100px
   ========================================================== */

@media (max-width: 1100px) {

    /* Marco de actuación */
    .sf-framework {
        grid-template-columns: 1fr;
        width: calc(100% - 48px) !important;
        max-width: none !important;
    }

    .sf-framework__title,
    .sf-framework__content {
        width: 100% !important;
        max-width: none !important;
    }


    /* Estructura organizativa */
    .sf-organization {
        padding-block: 56px !important;
    }

    .sf-organization_container {
        width: calc(100% - 48px) !important;
        max-width: none !important;
    }

    .sf-organization_institutions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-block: 40px !important;
        gap: 32px !important;
    }

    /* Equipo */
    .sf-team {
        padding-block: 64px !important;
    }

    .sf-team_container {
        width: calc(100% - 48px) !important;
        max-width: none !important;
    }

    .sf-team_intro {
        grid-template-columns: 1fr !important;
        margin-block: 32px 48px !important;
        gap: 32px !important;
    }

    .sf-team_intro > .wp-block-column,
    .sf-team_intro-text,
    .sf-team_intro-media {
        width: 100% !important;
        max-width: none !important;
    }

    .sf-team_intro-media .wp-block-image img {
        width: 100%;
        max-height: 420px;
        object-fit: cover;
    }

    .sf-team_people {
        padding: 32px !important;
    }

    .sf-team_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
    }

    /* Trayectoria */
    .sf-trajectory {
        padding-block: 64px !important;
    }

    .sf-trajectory_container {
        width: calc(100% - 48px) !important;
        max-width: none !important;
    }
}


/* ==========================================================
   MÓVIL — <= 600px
   ========================================================== */

@media (max-width: 600px) {

    /* Marco de actuación */
    .sf-framework {
        width: calc(100% - 32px) !important;
    }


    /* Estructura organizativa */
    .sf-organization {
        padding-block: 48px !important;
    }

    .sf-organization_container {
        width: calc(100% - 32px) !important;
    }

    .sf-organization_institutions {
        grid-template-columns: 1fr !important;
        margin-block: 32px !important;
        gap: 28px !important;
    }

    /* Equipo */
    .sf-team {
        padding-block: 48px !important;
    }

    .sf-team_container {
        width: calc(100% - 32px) !important;
    }

    .sf-team_intro {
        margin-block: 28px 36px !important;
        gap: 24px !important;
    }

    .sf-team_intro-media .wp-block-image img {
        max-height: none;
    }

    .sf-team_people {
        padding: 20px !important;
    }

    .sf-team_grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Trayectoria */
    .sf-trajectory {
        padding-block: 48px !important;
    }

    .sf-trajectory_container {
        width: calc(100% - 32px) !important;
    }

    .sf-trajectory_actions {
        gap: 16px !important;
    }

    .sf-trajectory_actions .wp-block-button {
        width: min(100%, 220px);
    }
}


/* ==========================================================
   MÓVIL PEQUEÑO — <= 380px
   ========================================================== */

@media (max-width: 380px) {

    .sf-framework,
    .sf-organization_container,
    .sf-team_container,
    .sf-trajectory_container {
        width: calc(100% - 24px) !important;
    }

    .sf-team_people {
        padding: 16px !important;
    }
}