/**
 * Block: Pasos con Imagen — Styles
 */

/* 1. Bloque principal (mobile-first) */
.holnix-pasos-con-imagen {
    padding: var(--wp--preset--spacing--large) 0;
    /*
     * Fallback: el color real lo pone el style="" inline en pasos-con-imagen.php
     * (campo ACF background_color, color picker, default #000211) porque es
     * un valor editable por instancia del bloque, no un token fijo del tema.
     * Esta regla solo cubre el caso remoto de que el campo no devuelva nada.
     */
    background-color: var(--wp--preset--color--background, #000211);
}

/*
 * El bloque se marca como align full, pero .alignfull (style.css) por sí solo
 * no rompe el padding horizontal de .theme-container (56px/16px o 56px/64px),
 * así que el fondo oscuro quedaría inset en vez de ocupar todo el ancho del
 * viewport. Se fuerza el bleed edge-to-edge igual que hace publisher-metadata.css.
 */
.entry-content > .holnix-pasos-con-imagen,
.site-content > .holnix-pasos-con-imagen {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/*
 * Título y fila de pasos (agrupada en un core/group) viven en una única zona
 * <InnerBlocks /> — ACF no admite más de una por bloque. En el editor, ACF
 * envuelve ese contenido en .acf-innerblocks-container; se anula como caja
 * (display: contents) para que sus hijos sean flex items directos de
 * .container, igual que en el front-end (donde ese wrapper no existe).
 */
.holnix-pasos-con-imagen__container {
    display: flex;
    flex-direction: column;
    row-gap: var(--wp--preset--spacing--medium);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--wp--preset--spacing--small);
}

.holnix-pasos-con-imagen__container > .acf-innerblocks-container {
    display: contents;
}

.wp-block-heading.holnix-pasos-con-imagen__title {
    margin: 0;
    /* 7.8rem: valor literal de Figma, sin token equivalente en la escala de spacing del proyecto. */
    margin-bottom: 7.8rem;
    font-family: var(--wp--preset--font-family--inter);
    /*
     * Desktop/H3 Bold (Figma): 36px en desktop — var(--wp--preset--font-size--large)
     * es el token de este tamaño en la escala del proyecto, fluido de 28px
     * (mobile) a 36px (desktop, min-width 1024px) en vez de un valor fijo.
     */
    font-size: var(--wp--preset--font-size--large);
    font-weight: 700;
    line-height: normal;
    text-align: center;
    /*
     * !important: Gutenberg genera clases de color con !important
     * (ej. .has-text-dark-color { color: ... !important; }) cuando se elige
     * un color manualmente desde el panel del bloque. Este bloque tiene fondo
     * oscuro fijo, así que el título siempre debe leerse claro.
     */
    color: var(--wp--preset--color--white) !important;
}

/*
 * Grid en vez de flex-wrap: en mobile/tablet 1 sola columna (pasos en
 * columna, ver media queries de abajo); en desktop (1200px+) pasa a
 * "repeat(5, 1fr)", donde cada fila admite como máximo 5 pasos y el 6°
 * (hasta el máximo de 8, ver assets/js/editor/pasos-con-imagen-steps-limit.js)
 * cae siempre a una fila nueva, sin depender de cuánto midan los pasos
 * anteriores.
 */
.holnix-pasos-con-imagen__steps {
    display: grid;
    grid-template-columns: 1fr;
    /*
     * Sin efecto mientras las columnas sean 1fr (ocupan todo el ancho), pero
     * habilita el centrado de grupo de las reglas :has() de abajo cuando esas
     * columnas se acotan a un ancho fijo (menos pasos que el máximo por fila).
     */
    justify-content: center;
    gap: var(--wp--preset--spacing--large);
    width: 100%;
    /*
     * Anula el margen por defecto que Gutenberg aplica a los hijos de un
     * contenedor .is-layout-flow — el espaciado entre pasos ya lo da el gap.
     */
    margin-block-start: 0 !important;
}

/*
 * Sin "gap" a propósito: el título y el párrafo necesitan un espacio propio
 * de 8px entre ellos, distinto del espacio (medium) entre el círculo y el
 * título, o entre el párrafo y el botón secundario opcional — un "gap" de
 * flexbox es uniforme entre todos los hijos, así que el espaciado entre cada
 * par de elementos se controla con margin-bottom en el elemento que abre ese
 * espacio (.item-visual, .item-title) en vez de con gap acá.
 */
.holnix-pasos-con-imagen__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*
 * En el front, .holnix-pasos-con-imagen__item (el div raíz de la plantilla
 * del item) es el hijo directo de .holnix-pasos-con-imagen__steps. En el
 * editor, ACF (bloque genérico, sin edit.js propio) envuelve ese mismo div
 * un nivel más adentro en .wp-block-holnix-pasos-con-imagen-item — ese
 * wrapper es el hijo directo real ahí. Gutenberg aplica el margen por
 * defecto de .is-layout-flow (margin-block-start: 1.5rem, con excepción de
 * :first-child) sobre el hijo directo en cada contexto, así que hay que
 * anularlo en ambos o el item 1 queda más arriba que el resto solo en admin
 * (ver [[holnix-acf-repeater-items-margin-reset]]).
 */
.holnix-pasos-con-imagen__steps > :is(.holnix-pasos-con-imagen__item, .wp-block-holnix-pasos-con-imagen-item) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/*
 * Envoltorio circular de 160x160 (imagen o ícono, ver pasos-con-imagen-item.php).
 * El tamaño real vive acá — .holnix-pasos-con-imagen__item-img de abajo pasa
 * a ser 100% de este contenedor — porque la opción "Relieve" en degradado
 * (ver más abajo) necesita pintar su color de fondo en un elemento propio,
 * no en el <img>: un <img> no puede mostrar texto/gradiente detrás de sí
 * mismo recortado en anillo salvo con box-shadow, que solo admite color
 * plano, no degradados.
 */
.holnix-pasos-con-imagen__item-visual {
    position: relative;
    /*
     * isolation: isolate crea un stacking context propio (sin depender de
     * z-index en un ancestro) para que el z-index: -1 del ::before de abajo
     * quede contenido acá mismo — así el anillo siempre pinta detrás del
     * <img>/ícono de este paso puntual, nunca detrás de contenido de otro
     * paso o de la sección.
     */
    isolation: isolate;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
     * Separación fija entre el círculo (imagen/ícono) y el título del paso.
     * margin-bottom (no padding-bottom): este contenedor ya tiene un alto
     * fijo de 160px con box-sizing: border-box — un padding-bottom acá
     * comería ese alto por dentro, achicando y descentrando el círculo en
     * vez de solo agregar espacio afuera.
     */
    margin-bottom: var(--wp--preset--spacing--medium);
}

/*
 * Opción "Relieve" del paso (campos ACF relieve/relieve_color/relieve_width):
 * el anillo vive en un ::before propio, no como background directo del
 * wrapper — si pintáramos el color/degradado como background de .item-visual,
 * con un ícono de fondo transparente (.item-img--icon) se vería el
 * color/degradado detrás de TODO el círculo en vez de solo en el borde (bug
 * real: pasaba con cualquier ícono sin fondo opaco propio). El ::before se
 * recorta con mask-image a una dona (radial-gradient transparente en el
 * centro, opaco en el borde) — así el anillo se dibuja solo en el borde sin
 * importar la opacidad del contenido de adentro. El padding en .item-visual
 * (con box-sizing: border-box, para no crecer más allá de 160x160) achica el
 * <img>/ícono real, dejando ese espacio libre para que se vea el anillo.
 * --holnix-pci-relieve-width: grosor elegido en el campo range (0.5px a
 * 2px), seteado inline por paso en pasos-con-imagen-item.php — el fallback
 * de 1px acá solo aplica si por lo que sea no llegó el inline style.
 */
.holnix-pasos-con-imagen__item-visual--relieve {
    padding: var(--holnix-pci-relieve-width, 1px);
}

.holnix-pasos-con-imagen__item-visual--relieve::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    /*
     * "Pluma" (feather) de 1px entre los dos stops del gradiente: sin ella,
     * los dos colores caen exactamente en el mismo punto (transición dura),
     * y el navegador rasteriza ese borde interno de la dona sin antialiasing
     * — se ve pixelado/escalonado, sobre todo con el anillo fino (1-5px). Con
     * la pluma, el borde interno queda con una transición suave de 1px y el
     * círculo se ve limpio sin necesidad de un SVG.
     */
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - var(--holnix-pci-relieve-width, 1px) - 1px), #000 calc(100% - var(--holnix-pci-relieve-width, 1px)));
    mask-image: radial-gradient(farthest-side, transparent calc(100% - var(--holnix-pci-relieve-width, 1px) - 1px), #000 calc(100% - var(--holnix-pci-relieve-width, 1px)));
}

.holnix-pasos-con-imagen__item-visual--relieve-white::before {
    background-color: var(--wp--preset--color--white);
}

.holnix-pasos-con-imagen__item-visual--relieve-gradient::before {
    background: var(--wp--preset--gradient--holnix-brand);
}

.holnix-pasos-con-imagen__item-img {
    flex-shrink: 0;
    width: 100%;
    /*
     * !important: .entry-content img (style.css) fija "height: auto" con
     * mayor especificidad que esta clase sola (suma el selector de elemento
     * "img"), así que sin !important el alto termina siguiendo el
     * aspect-ratio real de la imagen subida — el óvalo reportado en vez del
     * círculo. Se fuerza el 100% del contenedor (160x160, o menos si hay
     * padding de relieve) sin importar qué tan grande, chica o apaisada sea
     * la imagen que suba el editor.
     */
    height: 100% !important;
    border-radius: 50%;
    object-fit: cover;
    /*
     * El bloque tiene fondo oscuro fijo; si la imagen del paso trae zonas
     * transparentes (ej. PNG/SVG con fondo transparente), se verían del color
     * oscuro de la sección. Se fuerza un fondo blanco detrás para que esas
     * zonas transparentes siempre se lean sobre blanco.
     */
    background-color: var(--wp--preset--color--white);
    /*
     * Con "Tipo de contenido" = Ícono, esta misma clase se aplica a un <span>
     * contenedor (no al <img>, ver pasos-con-imagen-item.php) para poder
     * fijar el ícono interno a 42x42 sin afectar el tamaño del círculo. En un
     * <img> (caso Imagen) display/align/justify no tienen efecto — un <img>
     * es un elemento reemplazado sin hijos — así que definirlos acá es
     * inofensivo para ese caso y evita repetir la regla dos veces.
     */
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Paso con "Tipo de contenido" = Ícono (ver pasos-con-imagen-item.php): el
 * círculo (este <span>) no necesita el fondo blanco de arriba (pensado para
 * tapar zonas transparentes de una foto) — un ícono con fondo transparente
 * debe leerse transparente sobre el fondo oscuro de la sección, no forzado a
 * blanco. El tamaño del ícono en sí (42x42) lo define
 * .holnix-pasos-con-imagen__item-icon-img más abajo, no esta clase.
 */
.holnix-pasos-con-imagen__item-img--icon {
    background-color: transparent;
}

/*
 * El <img> real dentro del círculo cuando el tipo es Ícono: tamaño fijo de
 * 42x42 sin importar qué tan grande sea el archivo subido — el contenedor
 * (.holnix-pasos-con-imagen__item-img--icon) no se achica ni se agranda,
 * solo el ícono interno cambia de tamaño.
 */
.holnix-pasos-con-imagen__item-icon-img {
    display: block;
    flex-shrink: 0;
    /* !important: mismo motivo que .holnix-pasos-con-imagen__item-img — .entry-content img (style.css) pisaría el alto con "height: auto". */
    width: 42px !important;
    height: 42px !important;
    object-fit: contain;
}

.wp-block-heading.holnix-pasos-con-imagen__item-title {
    margin: 0;
    /* Separación fija hacia el párrafo de abajo — ver nota en .holnix-pasos-con-imagen__item sobre por qué no se usa gap acá. */
    margin-bottom: var(--wp--preset--spacing--x-small);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
    text-align: center;
    color: var(--wp--preset--color--white) !important;
}

.holnix-pasos-con-imagen__item-text {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--body-large);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    color: var(--wp--preset--color--white) !important;
}

/*
 * Botón secundario (opcional): el editor lo agrega a mano vía InnerBlocks
 * (core/buttons > core/button.secondary-btn, ver pasos-con-imagen-item.php)
 * solo en los pasos que lo necesiten — no forma parte de la plantilla por
 * defecto. .secondary-btn ya trae su propio estilo completo (assets/css/header.css);
 * acá solo se centra dentro de la tarjeta y se pisa el margen que Gutenberg
 * suma por defecto (.is-layout-flow) por el espaciado propio del bloque
 * (medium, igual que entre el círculo y el título — ver .holnix-pasos-con-imagen__item).
 */
.holnix-pasos-con-imagen__item .wp-block-buttons {
    justify-content: center;
    margin-block-start: var(--wp--preset--spacing--medium) !important;
}

/*
 * 4. Responsive: en columna (1 paso por fila) en mobile y tablet — recién en
 * desktop (1200px+) los pasos pasan a fila horizontal. En tablet se acota el
 * ancho del item y se centra, para que no se estire a todo el ancho del
 * bloque estando en una sola columna.
 */
@media (min-width: 768px) {
    .holnix-pasos-con-imagen__item {
        max-width: 260px;
        margin: 0 auto;
    }
}

/*
 * En desktop, 5 columnas fijas: el salto de línea ocurre siempre después del
 * 5° paso (el 6°, 9°... van a una fila nueva).
 *
 * Breakpoint en 1200px, no 1024px: con el máximo de 5 pasos, el círculo fijo
 * de 160px (.item-visual, flex-shrink: 0) no puede achicarse por debajo de
 * ese ancho aunque la columna del grid sea 1fr — así que el ancho mínimo real
 * de la fila es 5×160px + 4×gap (extra-large, 4rem/64px) ≈ 1056px, más el
 * padding del container (small, 1rem por lado) ≈ 1088px. Entre 1024px y ese
 * punto, los círculos se superponían (5 columnas más angostas que su propio
 * contenido). 1200px deja margen de sobra por encima del mínimo real.
 */
@media (min-width: 1200px) {
    .holnix-pasos-con-imagen__steps {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--wp--preset--spacing--extra-large);
    }

    /*
     * En desktop el item crece más que en tablet (260px): se acota a 364px,
     * ancho propio de este breakpoint, así que el auto-fit de abajo también
     * usa 364px (no los 260px de tablet) para que el ancho real del item
     * coincida con el que usan las columnas al centrar filas incompletas.
     */
    .holnix-pasos-con-imagen__item {
        max-width: 364px;
    }

    /*
     * Con 1-3 pasos (bien por debajo del máximo de 5), las columnas 1fr los
     * estirarían a todo el ancho del bloque en vez de dejarlos en su tamaño
     * natural (364px) centrados como grupo. Se detecta la cantidad exacta de
     * pasos con :has() + :nth-child(N):last-child (sin JS) y se fija ese
     * mismo número de columnas explícitamente — NO "repeat(auto-fit, ...)":
     * auto-fit calcula cuántas columnas de 364px entran en el ancho
     * disponible, así que con 3 pasos en un viewport de ~1200-1428px (donde
     * 3×364px + gaps no entra pero 2 sí) el 3° paso caía solo a una fila
     * nueva en vez de compartir fila con los otros 2. Con "repeat(N, ...)"
     * fijo, minmax(0, 364px) permite que las N columnas se achiquen para
     * entrar en una sola fila en vez de wrappear.
     */
    .holnix-pasos-con-imagen__steps:has(> :is(.holnix-pasos-con-imagen__item, .wp-block-holnix-pasos-con-imagen-item):only-child) {
        grid-template-columns: minmax(0, 364px);
    }

    .holnix-pasos-con-imagen__steps:has(> :is(.holnix-pasos-con-imagen__item, .wp-block-holnix-pasos-con-imagen-item):nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 364px));
    }

    .holnix-pasos-con-imagen__steps:has(> :is(.holnix-pasos-con-imagen__item, .wp-block-holnix-pasos-con-imagen-item):nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 364px));
    }

    /*
     * Con 4 pasos (uno menos que el máximo de 5), en vez de centrarlos con
     * ancho fijo como el caso de 1-3, se reparten en 4 columnas iguales que
     * llenan todo el ancho de la fila — el item se agranda/achica según haga
     * falta para ocupar su 1/4 de fila, así que se anula el max-width fijo de
     * 364px (pensado para las 5 columnas del caso completo).
     */
    .holnix-pasos-con-imagen__steps:has(> :is(.holnix-pasos-con-imagen__item, .wp-block-holnix-pasos-con-imagen-item):nth-child(4):last-child) {
        grid-template-columns: repeat(4, 1fr);
    }

    /*
     * Sin ">" a propósito (descendiente, no hijo directo): en el editor
     * .holnix-pasos-con-imagen__item vive un nivel más adentro del
     * .wp-block-... (ver nota arriba), así que un combinador ">" acá no lo
     * alcanzaría en admin.
     */
    .holnix-pasos-con-imagen__steps:has(> :is(.holnix-pasos-con-imagen__item, .wp-block-holnix-pasos-con-imagen-item):nth-child(4):last-child) .holnix-pasos-con-imagen__item {
        max-width: none;
    }
}