/**
 * Brutal Blocks: Timeline Universal Styles
 * Bugfixes: Overflow removed, Z-indexes fixed, proper Flex expansion for lines.
 */

.brutal-timeline-wrapper {
    --tl-accent: #6366f1;
    --tl-spine-width: 2px;
    --tl-dot-size: 40px;
    --tl-gap: clamp(1.5rem, 4cqi, 2.5rem);
    --tl-card-radius: clamp(6px, 1.5cqi, 12px);
    --line-progress: 0;

    container-type: inline-size;
    width: 100%;
    margin: 0 auto;
    /* OVERFLOW HIDDEN REMOVED - This was cutting off the shadows! */
    color: inherit;
    background-color: var(--wp--preset--color--background, transparent);
    box-sizing: border-box;
}

/* Base track */
.brutal-timeline__track {
    position: relative;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   VERTICAL LAYOUT
   ========================================================================== */
.brutal-timeline-wrapper.layout-vertical {
    padding: 1rem; /* Breathing room so shadows aren't cut by Gutenberg constraints */
}

.brutal-timeline-wrapper.layout-vertical .brutal-timeline__track {
    display: flex;
    flex-direction: column;
    gap: var(--tl-gap);
    padding-left: calc(var(--tl-dot-size) / 2 + 20px);
}

.brutal-timeline-wrapper.layout-vertical .brutal-timeline__track::before {
    content: '';
    position: absolute;
    left: calc(var(--tl-dot-size) / 2);
    top: calc(var(--tl-dot-size) / 2);
    height: calc(100% - var(--tl-dot-size));
    width: var(--tl-spine-width);
    background: color-mix(in srgb, var(--tl-accent) 22%, transparent);
    border-radius: 999px;
    z-index: 1; /* Fixes overlapping */
}

.brutal-timeline-wrapper.layout-vertical.has-animation .brutal-timeline__track::after {
    content: '';
    position: absolute;
    left: calc(var(--tl-dot-size) / 2);
    top: calc(var(--tl-dot-size) / 2);
    height: calc(100% - var(--tl-dot-size));
    width: var(--tl-spine-width);
    background: var(--tl-accent);
    border-radius: 999px;
    transform-origin: top center;
    transform: scaleY(var(--line-progress));
    z-index: 2; /* Sits above the baseline, but below the dot */
}

.brutal-timeline-wrapper.layout-vertical .brutal-timeline__item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    position: relative;
    max-width: 100%; /* Prevents breaking container width */
    z-index: 10; /* FIX: Crea un contexto de apilamiento para que el item entero esté POR ENCIMA de la línea */
}

.brutal-timeline-wrapper.layout-vertical .brutal-timeline__dot {
    position: absolute;
    left: calc(-1 * (var(--tl-dot-size) / 2 + 20px));
    top: 0;
}

/* ==========================================================================
   HORIZONTAL LAYOUT (PRO)
   ========================================================================== */
.brutal-timeline-wrapper.layout-horizontal {
    /* Moved scroll from Track to Wrapper so the line can expand fully */
    overflow-x: auto;
    overflow-y: visible; /* Prevents shadow clipping */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem 0 3rem 0; /* Extra bottom padding for shadow/hover states */
}

.brutal-timeline-wrapper.layout-horizontal::-webkit-scrollbar {
    display: none;
}

.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: max-content; /* THIS is what fixes the line not going to the end */
    min-width: 100%;
    padding-top: calc(var(--tl-dot-size) + 1rem);
    gap: 0;
    position: relative;
}

.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__track::before {
    content: '';
    position: absolute;
    top: calc(var(--tl-dot-size) / 2);
    left: 0;
    right: 0; /* Now stretches perfectly to the max-content width */
    height: var(--tl-spine-width);
    background: color-mix(in srgb, var(--tl-accent) 22%, transparent);
    z-index: 1;
}

.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__item {
    flex: 0 0 clamp(240px, 30cqi, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: center;
    position: relative;
    padding: 0 1.5rem;
}

.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__dot {
    margin-bottom: 1.25rem;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__card {
    width: 100%;
    text-align: center;
    border-left: none;
    border-top: 3px solid var(--tl-accent);
}

/* ==========================================================================
   DOT & CARD
   ========================================================================== */
.brutal-timeline__dot {
    width: var(--tl-dot-size);
    height: var(--tl-dot-size);
    min-width: var(--tl-dot-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 0 4px var(--wp--preset--color--background, #fff), 0 0 0 6px color-mix(in srgb, var(--tl-accent) 35%, transparent);
    flex-shrink: 0;
    z-index: 10; /* FIX: Guarantees it stays above the spine lines */
}

.brutal-timeline__card {
    background: var(--wp--preset--color--background, #fff);
    border-radius: var(--tl-card-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.06);
    padding: clamp(1rem, 3cqi, 1.5rem);
    flex: 1;
    position: relative;
    border-left: 3px solid var(--tl-accent);
    transition: box-shadow 0.3s ease;
    box-sizing: border-box;
    width: 100%; /* Safety guard against flex overflows */
}

.brutal-timeline__title { margin: 0 0 0.5rem; font-size: clamp(1rem, 2.5cqi, 1.15rem); font-weight: 700; }
.brutal-timeline__content { margin: 0; font-size: clamp(0.875rem, 2cqi, 0.95rem); line-height: 1.65; opacity: 0.85; }
.brutal-timeline__content p { margin: 0 0 0.5em 0; }
.brutal-timeline__content p:last-child { margin: 0; }

.brutal-timeline__date {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--tl-accent) 12%, transparent);
    color: var(--tl-accent);
}

/* ==========================================================================
   ANIMATIONS (BUGFIXED)
   ========================================================================== */

/* --- 1. BLUR REVEAL (NUEVA ANIMACIÓN CINEMÁTICA) --- */
.brutal-timeline-wrapper.anim-blur-reveal .tl-will-animate {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(30px) scale(0.95);
    transition: 
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), 
        opacity 0.6s ease var(--reveal-delay, 0ms);
}

.brutal-timeline-wrapper.layout-vertical.anim-blur-reveal .tl-will-animate:nth-child(odd) {
    transform: translateX(-30px) scale(0.95);
}

.brutal-timeline-wrapper.anim-blur-reveal .tl-will-animate.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) scale(1);
}

/* --- 2. FADE UP --- */
.brutal-timeline-wrapper.anim-fade-up .tl-will-animate {
    opacity: 0; transform: translateY(36px); transition: all 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}
.brutal-timeline-wrapper.anim-fade-up .tl-will-animate.is-visible { opacity: 1; transform: translateY(0); }

/* --- 3. SLIDE IN --- */
.brutal-timeline-wrapper.anim-slide-in .tl-will-animate {
    opacity: 0; transform: translateX(-50px); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--reveal-delay, 0ms);
}
.brutal-timeline-wrapper.layout-vertical.anim-slide-in .tl-will-animate:nth-child(even) { transform: translateX(50px); }
.brutal-timeline-wrapper.layout-horizontal.anim-slide-in .tl-will-animate { transform: translateY(40px); }
.brutal-timeline-wrapper.anim-slide-in .tl-will-animate.is-visible { opacity: 1; transform: translate(0, 0); }

/* --- 4. SCALE UP --- */
.brutal-timeline-wrapper.anim-scale-up .tl-will-animate {
    opacity: 0; transform: scale(0.85); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0ms);
}
.brutal-timeline-wrapper.anim-scale-up .tl-will-animate.is-visible { opacity: 1; transform: scale(1); }

.brutal-timeline-wrapper.has-animation .tl-will-animate .brutal-timeline__dot {
    transform: scale(0); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--reveal-delay, 0ms) + 80ms);
}
.brutal-timeline-wrapper.has-animation .tl-will-animate.is-visible .brutal-timeline__dot { transform: scale(1); }

/* Horizontal Highlight */
.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__item.is-active .brutal-timeline__dot {
    box-shadow: 0 0 0 4px var(--wp--preset--color--background, #fff), 0 0 0 8px color-mix(in srgb, var(--tl-accent) 55%, transparent);
    transform: scale(1.12);
}
.brutal-timeline-wrapper.layout-horizontal .brutal-timeline__item.is-active .brutal-timeline__card {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--tl-accent) 18%, transparent);
}

/* Editor Safeties */
.brutal-timeline--editor .tl-will-animate, .brutal-timeline--editor .tl-will-animate.is-visible { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.brutal-timeline--editor .brutal-timeline__dot { transform: scale(1) !important; transition: none !important; }