/**
 * Core Changelog Block Styles
 */

.wp-block-surge-blocks-core-changelog {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: relative;
    /* Default dark theme aesthetic if no background set */
    color: inherit;
    padding-bottom: 2rem; /* Space for the line to extend */
    
    /* Default active color fallback if not set via attributes */
    --surge-active-color: currentColor;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
    .wp-block-surge-blocks-core-changelog {
        flex-direction: column;
        gap: 1rem;
        padding-left: 2rem; /* Make room for timeline on left */
    }
}

/* --- Date Column --- */
.surge-changelog__date-col {
    flex: 0 0 140px;
    text-align: right;
    padding-top: 0.25rem; /* Align with dot/title */
}

@media (max-width: 768px) {
    .surge-changelog__date-col {
        flex: 0 0 auto;
        text-align: left;
    }
}

.surge-changelog__date-badge {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 0.25em 0.75em;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
}

/* --- Timeline Column --- */
.surge-changelog__timeline-col {
    position: relative;
    flex: 0 0 20px;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .surge-changelog__timeline-col {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 20px;
    }
}

/* The Vertical Line Container */
.surge-changelog__line {
    position: absolute;
    top: 10px;
    bottom: -42px;
    width: 2px;
    /* Container is transparent, pseudo-elements handle the color */
    background-color: transparent;
}

/* The Track (Inactive State - Faint) */
.surge-changelog__line::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: currentColor;
    opacity: 0.15; /* Faint track always visible */
    transform: scaleY(1);
}

/* The Fill (Active State - Full Color) */
.surge-changelog__line::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: var(--surge-active-color);
    opacity: 1;
    transform-origin: top;
    /* Controlled by JS via CSS variable */
    transform: scaleY(var(--line-progress, 0));
    /* No transition for immediate scroll response */
    transition: none;
    will-change: transform;
}

/* The Dot */
.surge-changelog__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--surge-active-color);
    position: absolute;
    top: 13px; /* Align center with title text approx */
    z-index: 2;
    transform: scale(0); /* Hidden initially */
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

/* Glow effect using pseudo-element to handle opacity with currentColor */
.surge-changelog__dot::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background-color: var(--surge-active-color);
    opacity: 0.2;
    z-index: -1;
}

/* --- Content Column --- */
.surge-changelog__content-col {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
    padding-top: 0.1rem;
}

.surge-changelog__version {
    margin: 0.2rem 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.surge-changelog__details {
    font-size: 1rem;
    opacity: 0.9;
}

/* InnerBlocks spacing fixes */
.surge-changelog__details > *:first-child {
    margin-top: 0;
}
.surge-changelog__details > *:last-child {
    margin-bottom: 0;
}

/* --- Animation States (Triggered by JS) --- */
.surge-changelog__dot.is-active {
    transform: scale(1);
    opacity: 1;
}

/* Editor Specific Overrides to ensure visibility while editing */
.editor-styles-wrapper .surge-changelog__line::before,
.editor-styles-wrapper .surge-changelog__line::after {
    transform: scaleY(1) !important;
    opacity: 1 !important;
}

.editor-styles-wrapper .surge-changelog__line::before {
    opacity: 0.15 !important; /* Keep track faint in editor */
}

.editor-styles-wrapper .surge-changelog__dot {
    transform: none !important;
    opacity: 1 !important;
}