/**
 * Componente Procesos — SEAFORMEC
 *
 * Clase base:
 * .sf-process
 *
 * Elementos:
 * .sf-process__intro
 * .sf-process__timeline
 * .sf-process__step
 * .sf-process__marker
 * .sf-process__content
 *
 * Variantes de paso:
 * .sf-process__step--top
 * .sf-process__step--bottom
 *
 * Variante de componente:
 * .sf-process--left
 *   Alinea a la izquierda el H2 y el texto introductorio,
 *   manteniendo intacto el timeline y su responsive.
 */


/* ==========================================================
   Contenedor general
   ========================================================== */

.sf-process {
        padding: 64px 48px;
}

/* Encabezado e introducción del componente */
.sf-process > h2 {
        text-align: center;
}

.sf-process__intro {
        width: 100%;
        max-width: 1180px;
        margin-inline: auto;
        text-align: center;
}


/* ==========================================================
   Variante — encabezado alineado a la izquierda
   ========================================================== */

/*
 * Variante utilizada en las páginas de servicio individual.
 * H2 e introducción comparten el mismo ancho y borde izquierdo
 * que el timeline.
 *
 * !important es necesario porque el layout constrained de
 * Gutenberg centra automáticamente los hijos directos.
 */
.sf-process.sf-process--left > h2,
.sf-process.sf-process--left > .sf-process__intro {
    width: 100% !important;
    max-width: 1320px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: left !important;
}


/* ==========================================================
   Timeline escritorio
   ========================================================== */

.sf-process__timeline {
        --sf-process-axis: 160px;
        --sf-process-padding-y: 32px;

        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px;

        width: 100%;
        max-width: 1180px;
        min-height: 360px;

        margin: 64px auto 0;
        padding: var(--sf-process-padding-y) 24px;

		
        background: #fff;
        border: 1px solid var(--wp--preset--color--light-gray);
        border-radius: 0;
        box-shadow: 0 4px 10px rgb(0 0 0 / 12%);
}

/*
 * Gutenberg añade separación vertical entre bloques hermanos.
 * En el timeline todos los pasos deben arrancar exactamente
 * desde la misma coordenada vertical.
 */
.sf-process__timeline > .sf-process__step {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
}

/* Línea horizontal principal.
 * Se suma el padding superior del timeline porque los pasos
 * comienzan dentro de su caja de contenido.
 */
.sf-process__timeline::before {
        content: "";
        position: absolute;
        top: calc(var(--sf-process-axis) + var(--sf-process-padding-y));
        left: 1%;
        right: 1%;
        height: 1px;
        background: #000;
        transform: translateY(-50%);
        z-index: 0;
}


/* ==========================================================
   Paso
   ========================================================== */

.sf-process__step {
        position: relative;
        min-height: 320px;
        text-align: center;
}

/* Punto pequeño sobre la línea horizontal */
.sf-process__step::after {
        content: "";
        position: absolute;
        top: var(--sf-process-axis);
        left: 50%;
        width: 10px;
        height: 10px;
        background: #fff;
        border: 2px solid var(--wp--preset--color--seaformec-yellow);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
	}


/* ==========================================================
   Marcador
   ========================================================== */

.sf-process__marker {
        position: absolute;
        left: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 80px;
        height: 80px;
        margin: 0;
        padding: 0 !important;

        background: #000;
        border: 3px solid var(--wp--preset--color--seaformec-yellow);
        border-radius: 50%;

        transform: translateX(-50%);
        z-index: 4;

        transition:
                transform 180ms ease,
                box-shadow 180ms ease;
}

.sf-process__marker img {
        display: block;
        width: 36px;
        height: 36px;
        max-width: 36px;
        object-fit: contain;
}


/* ==========================================================
   Hover y accesibilidad de movimiento
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
        .sf-process__marker:hover {
                transform: translateX(-50%) scale(1.08);
                box-shadow: 0 6px 16px rgb(0 0 0 / 18%);
        }
}

@media (prefers-reduced-motion: reduce) {
        .sf-process__marker {
                transition: none;
        }

        .sf-process__marker:hover {
                transform: translateX(-50%);
        }
}


/* ==========================================================
   Conector vertical
   ========================================================== */

.sf-process__step::before {
        content: "";
        position: absolute;
        left: 50%;
        width: 1px;
        background: var(--wp--preset--color--seaformec-yellow);
        transform: translateX(-50%);
        z-index: 1;
}


/* ==========================================================
   Paso superior
   Marcador arriba / contenido debajo
   ========================================================== */

.sf-process__step--top .sf-process__marker {
        top: calc(var(--sf-process-axis) - 128px);
        bottom: auto;
        background: #000;
        border-color: var(--wp--preset--color--seaformec-yellow);
}

/* Línea entre marcador superior y timeline */
.sf-process__step--top::before {
        top: calc(var(--sf-process-axis) - 48px);
        height: 48px;
}

/* Contenido bajo la línea */
.sf-process__step--top .sf-process__content {
        position: absolute;
        top: calc(var(--sf-process-axis) + 28px);
        bottom: auto;
        left: 0;
        width: 100%;
}


/* ==========================================================
   Paso inferior
   Contenido arriba / marcador abajo
   ========================================================== */

.sf-process__step--bottom .sf-process__marker {
        top: calc(var(--sf-process-axis) + 48px);
		 bottom: auto;
        background: var(--wp--preset--color--seaformec-yellow);
        border-color: #000;
}

/* Línea entre timeline y marcador inferior */
.sf-process__step--bottom::before {
        top: var(--sf-process-axis);
        height: 48px;
}

/* Contenido sobre la línea */
.sf-process__step--bottom .sf-process__content {
        position: absolute;
        top: auto;
        bottom: calc(50% + 28px);
        left: 0;
        width: 100%;
}


/* ==========================================================
   Contenido de cada paso
   ========================================================== */

.sf-process__content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-inline: 12px;
}

.sf-process__content h4,
.sf-process__content p {
        margin: 0;
}

.sf-process__content p {
        max-width: 190px;
        margin-inline: auto;
}


/* ==========================================================
   Responsive — timeline vertical
   ========================================================== */

@media (max-width: 1100px) {
        .sf-process {
                padding-block: 48px;
        }
}  

@media (max-width: 781px) {
        .sf-process {
                padding: 48px 24px;
        }

        .sf-process__intro {
                max-width: none;
                text-align: left;
        }

		
        .sf-process__timeline {
                display: block;
                min-height: 0;
                margin-top: 48px;
                padding: 32px 24px;
        }

        /* Línea vertical principal:
         * 24px de padding lateral + 40px (mitad del marcador de 80px).
         */
        .sf-process__timeline::before {
                top: 32px;
                bottom: 32px;
                left: 64px;
                right: auto;
                width: 1px;
                height: auto;
                transform: none;
        }

        .sf-process__step {
                display: grid;
                grid-template-columns: 80px minmax(0, 1fr);
                gap: 24px;

                min-height: 0;
                margin-bottom: 40px;

                text-align: left;
        }

        .sf-process__step:last-child {
                margin-bottom: 0;
        }

        /*
         * En móvil desaparecen los conectores individuales
         * y el punto de la línea horizontal.
         */
        .sf-process__step::before,
        .sf-process__step::after {
                display: none;
        }

        /*
         * Todos los marcadores vuelven al flujo normal.
         * Top y bottom dejan de tener significado visual.
         */
        .sf-process__marker,
        .sf-process__step--top .sf-process__marker,
        .sf-process__step--bottom .sf-process__marker {
                position: relative;
                top: auto;
                right: auto;
                bottom: auto;
                left: auto;

				
                grid-column: 1;
                grid-row: 1;

                margin: 0;
                transform: none;
        }

        .sf-process__content,
        .sf-process__step--top .sf-process__content,
        .sf-process__step--bottom .sf-process__content {
                position: static;

                grid-column: 2;
                grid-row: 1;

                width: auto;
                padding: 0;
        }

        .sf-process__content p {
                max-width: none;
                margin-inline: 0;
        }
}

@media (max-width: 600px) {
        .sf-process {
                padding: 32px 24px;
        }
}

/* Hover específico para el layout móvil/tablet */
@media (max-width: 781px) and (hover: hover) and (pointer: fine) {
        .sf-process__marker:hover {
                transform: scale(1.08);
        }
}