/*
  Bloque "Serveis amb lateral (hover)" (spora/serveis-hover) — estilos front + editor.

  Variables (las publica render.php en el wrapper; el editor, en useBlockProps):
    --sh-accent            color destacado (rótulo, título en hover, panel)
    --sh-text              color de los títulos en reposo
    --sh-includes          color de las líneas «inclou» del panel
    --sh-includes-opacity  su opacidad (0-1): aparte, porque el selector de
                           color del editor no lleva canal alfa
    --sh-title-size(-t/-m) tamaño de los títulos: escritorio / tablet / móvil
    --sh-title-transform   uppercase | none (títulos)
    --sh-label-transform   uppercase | none (rótulo)
    --sh-label-gap         separación rótulo -> lista
    --sh-side-gap          separación lista <-> columnas laterales
    --sh-panel-w           ancho máximo del panel lateral
    --sh-dur               duración de las transiciones
    --sh-y                 (view.js) desplazamiento vertical de cada panel

  ESTRUCTURA (escritorio): grid de 3 columnas [lateral izq | lista | lateral
  der]. Las laterales son 1fr y la lista mide lo que su título más largo, así
  que el panel nunca se monta encima de los títulos. Dentro de cada lateral los
  paneles se apilan en la MISMA celda: la columna mide lo que el panel más
  alto (sin view.js, p. ej. en el editor, ninguno se sale del bloque).

  El FONDO no se declara a propósito: hereda el de la página.
*/

.spora-sh {
    --sh-ease: cubic-bezier(0.22, 1, 0.36, 1);
    box-sizing: border-box;
    width: 100%;
}

.spora-sh * {
    box-sizing: border-box;
}

/* El tema y Astra ponen márgenes, viñetas y sangría a ul/li/p: aquí no. */
.spora-sh ul,
.spora-sh li,
.spora-sh p {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.spora-sh__stage {
    position: relative; /* offsetParent de filas y columnas (view.js mide con offsetTop) */
    display: grid;
    /* TÍTULOS LARGOS (07/10/2026, mismo arreglo que en
       spora/servei-acordio-empresa): con la columna central en `auto` un
       título inmenso aplastaba los laterales hasta dejar el panel a una
       palabra por línea. Cada lateral tiene reservado su ancho (el del panel,
       o el 26% del bloque si no cabe) y la central crece como mucho hasta lo
       que sobra: si un título no cabe, se parte en varias líneas. */
    --sh-side-min: min(var(--sh-panel-w, 320px), 26%);
    grid-template-columns:
        minmax(0, 1fr)
        fit-content(calc(100% - 2 * (var(--sh-side-min) + var(--sh-side-gap, 40px))))
        minmax(0, 1fr);
    column-gap: var(--sh-side-gap, 40px);
    align-items: stretch;
    /* Referencia de ancho (100cqi) para la franja de hover de cada fila (ver
       «Hover a todo el ancho» más abajo). */
    container-type: inline-size;
}

/* --- Columna central: rótulo + lista ------------------------------------ */

.spora-sh__center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: center;
}

.spora-sh .spora-sh__label {
    margin: 0 0 var(--sh-label-gap, 32px) !important;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: var(--sh-label-transform, uppercase);
    color: var(--sh-accent, #FFEB36);
}

.spora-sh__item {
    display: block;
}

/* Disparador: <a> si el servei tiene enlace, <span role=button> si no. */
.spora-sh .spora-sh__trigger {
    display: inline-grid;
    max-width: 100%;
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.spora-sh .spora-sh__trigger:focus-visible {
    outline: 1px dotted var(--sh-accent, #FFEB36);
    outline-offset: 6px;
}

/* Las dos versiones del título, apiladas en la misma celda y fundidas por
   opacidad (Geist y STK no se pueden interpolar). La celda mide lo que la
   más ancha, así que el cambio no empuja nada. */
.spora-sh__name {
    grid-area: 1 / 1;
    justify-self: center;
    /* Entre 922 y ~1350px el título a 62 se come las laterales y el panel
       queda en una columna de 150px: se reduce con el ancho de pantalla. */
    font-size: min(var(--sh-title-size, 62px), 4.6vw);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: var(--sh-title-transform, uppercase);
    overflow-wrap: break-word;
    transition: opacity var(--sh-dur, 450ms) var(--sh-ease);
}

.spora-sh__name--base {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: var(--sh-text, #FFFFFF);
}

.spora-sh__name--hover {
    /* Alias de solo peso 300: garantiza la Light Italic real (ver
       astra_child_font_faces_css en functions.php). */
    font-family: 'STK Bureau Serif Light', 'STK Bureau Serif', Georgia, serif;
    font-weight: 300;
    font-style: italic;
    color: var(--sh-accent, #FFEB36);
    opacity: 0;
}

.spora-sh__item.is-active .spora-sh__name--base {
    opacity: 0;
}

.spora-sh__item.is-active .spora-sh__name--hover {
    opacity: 1;
}

/* --- Columnas laterales y paneles --------------------------------------- */

.spora-sh__side {
    grid-row: 1;
    min-width: 0;
    display: grid;
    align-items: center; /* sin view.js (editor): panel centrado en vertical */
}

.spora-sh__side--left {
    grid-column: 1;
}

.spora-sh__side--right {
    grid-column: 3;
}

.spora-sh__panel {
    grid-area: 1 / 1;
    justify-self: center;
    width: 100%;
    max-width: var(--sh-panel-w, 320px);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Al irse: fundido más corto, y visibility se apaga al final. */
    transition:
        opacity calc(var(--sh-dur, 450ms) * 0.6) ease,
        visibility 0s linear calc(var(--sh-dur, 450ms) * 0.6);
}

/* Con view.js: cada panel se alinea arriba y se desplaza hasta la altura de
   su fila (--sh-y), aunque sobresalga del bloque. Se usa la
   propiedad `translate` para no pelear con el `transform` de la entrada. */
.spora-sh.is-ready .spora-sh__side {
    align-items: start;
}

.spora-sh.is-ready .spora-sh__panel {
    translate: 0 var(--sh-y, 0px);
}

.spora-sh__panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--sh-dur, 450ms) ease, visibility 0s;
}

/* HOVER A TODO EL ANCHO (petición del cliente, 07/10/2026; lo mismo que en
   spora/servei-acordio-empresa): el activador no es solo el texto del título
   sino toda la franja de su fila, de borde a borde del bloque.
   · Es un ::before invisible del DISPARADOR, posicionado contra la fila (el
     <li>): view.js lo recibe como un pointerenter de la fila sin cambios, y
     si el servei tiene enlace toda la franja enlaza.
   · Las filas van seguidas (sin hueco), así que la franja mide justo la fila.
   · La lista está centrada en el bloque: basta centrar la franja en la fila y
     darle el ancho del escenario (100cqi).
   · Las laterales van por encima (z-index), pero en el front (.is-ready) no
     reciben el ratón: la franja funciona también por detrás del panel. */
@media (min-width: 922px) {
    .spora-sh__item {
        position: relative;
    }

    .spora-sh .spora-sh__trigger::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100cqi;
        transform: translateX(-50%);
    }

    .spora-sh__side {
        position: relative;
        z-index: 1;
    }

    .spora-sh.is-ready .spora-sh__side,
    .spora-sh.is-ready .spora-sh__panel.is-active {
        pointer-events: none;
    }

    /* La animación de aparición (reveal) deja en cada fila revelada un
       `clip-path: inset(0)` que recortaría la franja al ancho del texto. Se
       sustituye por un recorte que llega hasta los bordes del bloque (y no por
       `none`, que no se puede animar y rompería el modo cortina). */
    html.spora-reveal-anim .spora-sh [data-spora-reveal].is-revealed .spora-sh__item.spora-reveal-item {
        clip-path: inset(0 -50cqi);
    }
}

/* Entrada escalonada del contenido del panel. */
.spora-sh__panel > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity calc(var(--sh-dur, 450ms) * 0.6) ease,
        transform var(--sh-dur, 450ms) var(--sh-ease);
}

.spora-sh__panel.is-active > * {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--sh-dur, 450ms) ease,
        transform calc(var(--sh-dur, 450ms) * 1.4) var(--sh-ease);
}

.spora-sh__panel.is-active > :nth-child(2) { transition-delay: 70ms; }
.spora-sh__panel.is-active > :nth-child(3) { transition-delay: 140ms; }

.spora-sh .spora-sh__panel-title,
.spora-sh .spora-sh__panel-desc {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--sh-accent, #FFEB36);
}

.spora-sh .spora-sh__panel-title {
    font-weight: 600;
    margin: 0 0 18px !important;
}

.spora-sh .spora-sh__panel-desc {
    font-weight: 300;
    margin: 0 0 20px !important;
}

.spora-sh .spora-sh__panel > :last-child {
    margin-bottom: 0 !important;
}

.spora-sh .spora-sh__panel-includes li {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--sh-includes, #FFFFFF);
    /* Va en el <li> y no en el <ul>: la opacidad del <ul> (hijo directo del
       panel) la anima la entrada escalonada y la pisaría. */
    opacity: var(--sh-includes-opacity, 0.66);
}

.spora-sh .spora-sh__panel-includes li::before {
    content: "/ ";
}

/* --- Tablet / móvil: las laterales bajan bajo la lista ------------------
   Las dos columnas comparten la celda de la 2ª fila (y sus paneles, la misma
   sub-celda): la zona mide lo que el panel más alto y cambiar de servei no
   mueve nada. view.js activa el 1r servei de entrada en este modo. */

@media (max-width: 921px) {
    .spora-sh__stage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }

    .spora-sh__center {
        grid-column: 1;
    }

    .spora-sh__side,
    .spora-sh__side--left,
    .spora-sh__side--right {
        grid-column: 1;
        grid-row: 2;
        align-items: start;
    }

    .spora-sh.is-ready .spora-sh__panel {
        translate: none;
    }

    .spora-sh__name {
        font-size: var(--sh-title-size-t, 46px);
    }
}

@media (max-width: 544px) {
    .spora-sh__name {
        font-size: var(--sh-title-size-m, 30px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spora-sh__name,
    .spora-sh__panel,
    .spora-sh__panel > * {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }
}