/* ============================= */
/* CONTENEDOR PRINCIPAL          */
/* ============================= */

.hajs-accordion {
    display: flex;
    width: 100%;
    height: var(--hajs-height, 60vh);
    overflow: hidden;

    --closed-item-width: 120px;
}

/* ============================= */
/* ITEMS DEL ACORDEÓN            */
/* ============================= */

.hajs-item {
    position: relative;
    flex: 1;
    overflow: hidden;
    cursor: pointer;

    transition: flex-basis 1.2s cubic-bezier(.4, 0, .2, 1);

    border-right: 1px solid rgba(255, 255, 255, 0.2);

    contain: layout paint;
    will-change: flex-basis;
    transform: translateZ(0);
}

.hajs-item:last-child {
    border-right: none;
}

.hajs-item--active {
    flex-basis: 60%;
}

/* ============================= */
/* LADO (icono + meta rotado)    */
/* ============================= */

.hajs-icon-top {
    position: absolute;
    top: 20px;
    right: 20px;
    line-height: 1;
    z-index: 30;
    transition: transform .4s ease, color .4s ease;
}

.hajs-icon-top i   { transition: color .4s ease; }
.hajs-icon-top svg { transition: fill  .4s ease; }

.hajs-item--active .hajs-icon-top {
    transform: rotate(180deg);
}

.hajs-meta-rotated {
    position: absolute;
    right: 20px;
    bottom: 40px;

    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 6px;

    line-height: 1;
    z-index: 30;
}

.hajs-title-vertical,
.hajs-secondary-vertical {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    line-height: 1;
    transition: color .4s ease;
}

/* ============================= */
/* COLUMNAS                      */
/* ============================= */

.hajs-columns {
    display: flex;
    width: 100%;
    height: 100%;
    padding-right: var(--closed-item-width);
    box-sizing: border-box;
    align-items: stretch;
    min-width: 0;
}

/* En horizontal, columns-inner hereda el flex del padre */
.hajs-columns-inner {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
}

/* ============================= */
/* COLUMNA CONTENIDO             */
/* ============================= */

.hajs-col-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 40px 80px 40px 40px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    box-sizing: border-box;

    /* Aparece con retraso: espera a que el ítem esté casi abierto */
    transition: opacity .35s ease .95s, transform .35s ease .95s;
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.hajs-item:not(.hajs-item--active) .hajs-col-content {
    opacity: 0;
    transform: translate3d(-12px, 0, 0);
    pointer-events: none;
    /* Al cerrar: desaparece rápido, sin retraso */
    transition: opacity .2s ease 0s, transform .2s ease 0s;
}

/* ============================= */
/* TEXTOS                        */
/* ============================= */

.hajs-subtitle    { margin: 0 0 20px; }
.hajs-description { margin-bottom: 20px; }

/* ============================= */
/* BOTÓN                         */
/* ============================= */

.hajs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    text-decoration: none;
    transition: color .3s ease, background-color .3s ease,
                border-color .3s ease, box-shadow .3s ease;
}

/* ============================= */
/* COLUMNA IMAGEN                */
/* ============================= */

.hajs-col-image {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    height: 100%;
    overflow: hidden;

    transition: transform .9s cubic-bezier(.4, 0, .2, 1),
                opacity .5s ease;
    backface-visibility: hidden;
    transform: translateZ(0);
    min-width: 0;
}

.hajs-item:not(.hajs-item--active) .hajs-col-image {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
    pointer-events: none;
}

.hajs-col-image picture {
    display: flex;
    height: 100%;
    min-width: 0;
}

/* ============================= */
/* IMAGEN                        */
/* ============================= */

.hajs-accordion .hajs-col-image img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: cover;
    display: block;
    flex-shrink: 0;

    transition: transform 1.2s cubic-bezier(.4, 0, .2, 1),
                opacity .6s ease;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.08);
}

.hajs-item--active .hajs-col-image img {
    transform: translateZ(0) scale(1.03);
}


/* ============================================================ */
/* MODO VERTICAL (inyectado por PHP según breakpoint del widget)*/
/* ============================================================ */

.hajs-accordion.hajs-vertical {

    flex-direction: column;
    height: auto;
    overflow: visible;
}

/* Cada ítem: altura automática, sin transición horizontal */
.hajs-accordion.hajs-vertical .hajs-item {
    flex: none;
    width: 100%;
    overflow: hidden;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    contain: none;
    will-change: auto;
    transition: none;
}

.hajs-accordion.hajs-vertical .hajs-item:last-child {
    border-bottom: none;
}

/* Cabecera clickable: número + título horizontal + icono de toggle */
.hajs-accordion.hajs-vertical .hajs-side {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 18px 60px 18px 20px; /* espacio para el icono */
    cursor: pointer;
    min-height: 60px;
}

/* El icono del usuario actúa como indicador de toggle:
   visible, posicionado a la derecha, rota al abrir      */
.hajs-accordion.hajs-vertical .hajs-icon-top {
    display: flex;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .35s ease;
}

.hajs-accordion.hajs-vertical .hajs-item--open .hajs-icon-top {
    transform: translateY(-50%) rotate(180deg);
}

/* Número y título: horizontal, no rotados */
.hajs-accordion.hajs-vertical .hajs-meta-rotated {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    bottom: auto;
    right: auto;
}

.hajs-accordion.hajs-vertical .hajs-title-vertical,
.hajs-accordion.hajs-vertical .hajs-secondary-vertical {
    writing-mode: horizontal-tb;
    transform: none;
    text-orientation: mixed;
    display: inline;
}

/* Panel expandible: grid en columns, inner es el que crece */
.hajs-accordion.hajs-vertical .hajs-columns {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
    padding-right: 0;
    height: auto;
    width: 100%;
    overflow: hidden;
}

.hajs-accordion.hajs-vertical .hajs-item--open .hajs-columns {
    grid-template-rows: 1fr;
}

/* columns-inner: min-height 0 es imprescindible para el truco */
.hajs-accordion.hajs-vertical .hajs-columns-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* En vertical, los colores activos se aplican con --open.
   Solo neutralizamos el color de HOVER del ítem --active
   que no está abierto; el color normal base se mantiene. */

/* Imagen arriba, contenido debajo */
.hajs-accordion.hajs-vertical .hajs-col-image  { order: 1; }
.hajs-accordion.hajs-vertical .hajs-col-content { order: 2; }

/* Imagen: ancho completo con márgenes laterales iguales a la cabecera */
.hajs-accordion.hajs-vertical .hajs-col-image {
    order: 1;
    flex: none;
    width: calc(100% - 40px);
    height: auto !important;
    max-height: none;
    margin: 0 20px;
    overflow: hidden;
    transform: none !important;
    opacity: 1 !important;
    transition: none;
    pointer-events: auto;
    display: block;
}

.hajs-accordion.hajs-vertical .hajs-col-image picture {
    display: block;
    width: 100%;
    height: auto;
}

.hajs-accordion.hajs-vertical .hajs-col-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
    transform: none !important;
}

/* Contenido: sin animación de desplazamiento */
.hajs-accordion.hajs-vertical .hajs-col-content {
    flex: none;
    width: 100%;
    padding: 24px 20px 28px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    justify-content: flex-start;
    transition: none;
}

/* Reset de estados activos del modo horizontal que no aplican */
.hajs-accordion.hajs-vertical .hajs-item--active {
    flex-basis: auto;
}

.hajs-accordion.hajs-vertical .hajs-item:not(.hajs-item--open) .hajs-col-content,
.hajs-accordion.hajs-vertical .hajs-item:not(.hajs-item--open) .hajs-col-image {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
}