/**
 * Heartbit Attributes Anywhere – Features Frontend CSS
 */

/* ============================================================
   Contenedor principal
   ============================================================ */
.hbaa-features {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ============================================================
   Track y inner
   ============================================================ */
.hbaa-features__track {
    overflow: hidden;
    width: 100%;
}

.hbaa-features__inner {
    display: flex;
    gap: 20px;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* ============================================================
   Items — calc() descuenta los gaps para que todos tengan
   exactamente el mismo ancho. Gap entre N items = N-1 gaps.
   Desktop: 5 items, 4 gaps de 20px → (100% - 4*20px) / 5
   ============================================================ */
.hbaa-features__item {
    flex: 0 0 calc( ( 100% - 80px ) / 5 );
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

/* ============================================================
   Imagen — ancho total de la columna, proporción natural
   ============================================================ */
.hbaa-features__img {
    width: 100%;
    overflow: hidden;
    margin-bottom: 14px;
    display: block;
}

.hbaa-features__img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.hbaa-features__img--empty {
    background: #f0f0f1;
    border: 1px dashed #ccc;
}

/* ============================================================
   Título h4 (valor del atributo)
   ============================================================ */
.hbaa-features__name {
    font-size: var( --hbaa-title-size, 15px );
    font-weight: 600;
    color: var( --hbaa-title-color, #1d2327 );
    margin: 0 0 6px;
    padding: 0;
    line-height: 1.3;
}

/* ============================================================
   Descripción p
   ============================================================ */
.hbaa-features__desc {
    font-size: var( --hbaa-desc-size, 13px );
    color: var( --hbaa-desc-color, #666 );
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Flechas del carrusel
   ============================================================ */
.hbaa-features__arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
    background: var( --hbaa-arrow-bg, #ffffff );
    border: 1px solid #ddd;
    border-radius: 50%;
    width: var( --hbaa-arrow-size, 36px );
    height: var( --hbaa-arrow-size, 36px );
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    color: var( --hbaa-arrow-color, #333333 );
}

.hbaa-features__arrow:hover {
    background: #1d2327;
    color: #fff;
    border-color: #1d2327;
}

.hbaa-features__arrow--prev { left: 0; }
.hbaa-features__arrow--next { right: 0; }

.hbaa-features__arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media ( max-width: 1024px ) {
    /* Tablet: 4 items, 3 gaps de 20px → (100% - 60px) / 4 */
    .hbaa-features__item {
        flex: 0 0 calc( ( 100% - 60px ) / 4 );
    }
}

@media ( max-width: 600px ) {
    /* Móvil: 2 items, 1 gap de 20px → (100% - 20px) / 2 */
    .hbaa-features__item {
        flex: 0 0 calc( ( 100% - 20px ) / 2 );
    }
}