/**
 * Bulma Timeline Styles
 * Based on bulma-timeline extension by Wikiki
 * Adapted with CSS custom properties for WordPress block customization
 */

/* CSS Custom Properties for customization */
.timeline {
    --timeline-marker-size: 12px;
    --timeline-marker-icon-size: 24px;
    --timeline-marker-border-size: 1px;
    --timeline-marker-color: var(--bulma-grey-lighter, #dbdbdb);
    --timeline-line-color: var(--bulma-grey-lighter, #dbdbdb);
    --timeline-line-width: 2px;
    --timeline-content-padding: 1em 0 0 2em;
    --timeline-rtl-content-padding: 1em 2em 0 0;
    --timeline-icon-size: 0.75rem;
    --timeline-header-width: 4em;
    --timeline-item-padding-left: 2em;
    --timeline-item-padding-bottom: 2em;
}

/* Main timeline container */
.timeline {
    display: flex;
    flex-direction: column;
}

/* Timeline header (section dividers) */
.timeline .timeline-header {
    width: var(--timeline-header-width);
    min-width: var(--timeline-header-width);
    max-width: calc(var(--timeline-header-width) * 2);
    word-wrap: normal;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Timeline item */
.timeline .timeline-item {
    display: flex;
    position: relative;
    margin-left: var(--timeline-item-padding-left);
    padding-bottom: var(--timeline-item-padding-bottom);
}

/* Timeline line (vertical connector) */
.timeline .timeline-item::before {
    content: "";
    background-color: var(--timeline-line-color);
    display: block;
    width: var(--timeline-line-width);
    height: 100%;
    position: absolute;
    left: calc(var(--timeline-line-width) * -0.5);
    top: 0;
}

/* Timeline marker (dot) */
.timeline .timeline-item .timeline-marker {
    position: absolute;
    background: var(--timeline-marker-color);
    border: var(--timeline-marker-border-size) solid var(--timeline-marker-color);
    border-radius: 100%;
    content: "";
    display: block;
    height: var(--timeline-marker-size);
    width: var(--timeline-marker-size);
    transform: translateX(-50%);
    top: 1.2rem;
}

/* Marker with image */
.timeline .timeline-item .timeline-marker.is-image {
    background: var(--timeline-marker-color);
    border: var(--timeline-marker-border-size) solid var(--timeline-marker-color);
    border-radius: 100%;
    display: block;
    overflow: hidden;
}

/* Image size variants */
.timeline .timeline-item .timeline-marker.is-image.is-16x16 { height: 16px; width: 16px; }
.timeline .timeline-item .timeline-marker.is-image.is-24x24 { height: 24px; width: 24px; }
.timeline .timeline-item .timeline-marker.is-image.is-32x32 { height: 32px; width: 32px; }
.timeline .timeline-item .timeline-marker.is-image.is-48x48 { height: 48px; width: 48px; }
.timeline .timeline-item .timeline-marker.is-image.is-64x64 { height: 64px; width: 64px; }
.timeline .timeline-item .timeline-marker.is-image.is-96x96 { height: 96px; width: 96px; }
.timeline .timeline-item .timeline-marker.is-image.is-128x128 { height: 128px; width: 128px; }

.timeline .timeline-item .timeline-marker.is-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Marker with icon */
.timeline .timeline-item .timeline-marker.is-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--timeline-marker-icon-size);
    width: var(--timeline-marker-icon-size);
    background: var(--timeline-marker-color);
    border: var(--timeline-marker-border-size) solid var(--timeline-marker-color);
    border-radius: 100%;
    padding: 0.5rem;
}

.timeline .timeline-item .timeline-marker.is-icon > * {
    font-size: var(--timeline-icon-size) !important;
}

/* Outlined marker variant */
.timeline .timeline-item .timeline-marker.is-outlined {
    background: white;
}

.timeline .timeline-item .timeline-marker.is-outlined .image {
    background: white;
}

.timeline .timeline-item .timeline-marker.is-outlined.is-icon {
    background: white;
}

.timeline .timeline-item .timeline-marker.is-outlined.is-icon > * {
    color: var(--timeline-marker-color);
}

/* Color variants for markers */
.timeline .timeline-item .timeline-marker.is-primary {
    background-color: var(--bulma-primary, #00d1b2) !important;
    border-color: var(--bulma-primary, #00d1b2) !important;
}
.timeline .timeline-item .timeline-marker.is-primary.is-icon > * {
    color: white !important;
}
.timeline .timeline-item .timeline-marker.is-primary.is-outlined {
    background-color: white !important;
    border-color: var(--bulma-primary, #00d1b2) !important;
}
.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon > * {
    color: var(--bulma-primary, #00d1b2) !important;
}

.timeline .timeline-item .timeline-marker.is-info {
    background-color: var(--bulma-info, #3298dc) !important;
    border-color: var(--bulma-info, #3298dc) !important;
}
.timeline .timeline-item .timeline-marker.is-info.is-icon > * {
    color: white !important;
}
.timeline .timeline-item .timeline-marker.is-info.is-outlined {
    background-color: white !important;
    border-color: var(--bulma-info, #3298dc) !important;
}
.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon > * {
    color: var(--bulma-info, #3298dc) !important;
}

.timeline .timeline-item .timeline-marker.is-success {
    background-color: var(--bulma-success, #48c774) !important;
    border-color: var(--bulma-success, #48c774) !important;
}
.timeline .timeline-item .timeline-marker.is-success.is-icon > * {
    color: white !important;
}
.timeline .timeline-item .timeline-marker.is-success.is-outlined {
    background-color: white !important;
    border-color: var(--bulma-success, #48c774) !important;
}
.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon > * {
    color: var(--bulma-success, #48c774) !important;
}

.timeline .timeline-item .timeline-marker.is-warning {
    background-color: var(--bulma-warning, #ffdd57) !important;
    border-color: var(--bulma-warning, #ffdd57) !important;
}
.timeline .timeline-item .timeline-marker.is-warning.is-icon > * {
    color: rgba(0, 0, 0, 0.7) !important;
}
.timeline .timeline-item .timeline-marker.is-warning.is-outlined {
    background-color: white !important;
    border-color: var(--bulma-warning, #ffdd57) !important;
}
.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon > * {
    color: var(--bulma-warning, #ffdd57) !important;
}

.timeline .timeline-item .timeline-marker.is-danger {
    background-color: var(--bulma-danger, #f14668) !important;
    border-color: var(--bulma-danger, #f14668) !important;
}
.timeline .timeline-item .timeline-marker.is-danger.is-icon > * {
    color: white !important;
}
.timeline .timeline-item .timeline-marker.is-danger.is-outlined {
    background-color: white !important;
    border-color: var(--bulma-danger, #f14668) !important;
}
.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon > * {
    color: var(--bulma-danger, #f14668) !important;
}

/* Color variants for timeline item lines */
.timeline .timeline-item.is-primary::before {
    background-color: var(--bulma-primary, #00d1b2);
}
.timeline .timeline-item.is-info::before {
    background-color: var(--bulma-info, #3298dc);
}
.timeline .timeline-item.is-success::before {
    background-color: var(--bulma-success, #48c774);
}
.timeline .timeline-item.is-warning::before {
    background-color: var(--bulma-warning, #ffdd57);
}
.timeline .timeline-item.is-danger::before {
    background-color: var(--bulma-danger, #f14668);
}

/* Timeline content */
.timeline .timeline-item .timeline-content {
    padding: var(--timeline-content-padding);
}

.timeline .timeline-item .timeline-content .heading {
    font-weight: 600;
}

/* Centered layout */
.timeline.is-centered .timeline-header {
    display: flex;
    width: 100%;
    align-self: center;
}

.timeline.is-centered .timeline-item {
    width: 50%;
    align-self: flex-end;
    flex-direction: row;
}

.timeline.is-centered .timeline-item:nth-of-type(2n) {
    align-self: flex-start;
    flex-direction: row-reverse;
    margin-left: 0;
    margin-right: var(--timeline-item-padding-left);
}

.timeline.is-centered .timeline-item:nth-of-type(2n)::before {
    right: calc(var(--timeline-line-width) * -0.5);
    left: auto;
}

.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker {
    transform: translateX(50%);
}

.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-content {
    padding: var(--timeline-rtl-content-padding);
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-basis: 100%;
}

.timeline.is-centered .timeline-item:nth-of-type(2n+1)::before {
    content: "";
    background-color: var(--timeline-line-color);
    display: block;
    width: var(--timeline-line-width);
    height: 100%;
    position: absolute;
    top: 0;
}

/* No headers variant (clean line endings) */
.timeline.no-headers .timeline-item.is-first::before {
    height: calc(100% - 1.2rem);
    top: 1.2rem;
}

.timeline.no-headers .timeline-item.is-last::before {
    height: 1.2rem;
}

/* ============================================
   EDITOR-SPECIFIC STYLES
   Account for WordPress block editor wrappers
   ============================================ */

/* Editor: Timeline container */
.wp-block-ironlight-bulma-timeline .timeline {
    display: flex;
    flex-direction: column;
}

/* Editor: Handle inner block wrappers for items */
.wp-block-ironlight-bulma-timeline .block-editor-inner-blocks .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
}

/* Editor: Timeline item within block list */
.wp-block-ironlight-bulma-timeline .block-editor-block-list__layout > .wp-block {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Editor: Centered layout adjustments */
.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n) .timeline-item {
    flex-direction: row-reverse;
    margin-left: 0;
    margin-right: var(--timeline-item-padding-left);
}

.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n) .timeline-item::before {
    right: calc(var(--timeline-line-width) * -0.5);
    left: auto;
}

.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n) .timeline-marker {
    transform: translateX(50%);
}

.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n) .timeline-content {
    padding: var(--timeline-rtl-content-padding);
    text-align: right;
}

.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n+1) .timeline-item {
    align-self: flex-end;
}

/* Editor: Ensure proper width for centered items */
.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block {
    width: 50%;
}

.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n) {
    align-self: flex-start;
}

.wp-block-ironlight-bulma-timeline .timeline.is-centered .block-editor-block-list__layout > .wp-block:nth-of-type(2n+1) {
    align-self: flex-end;
}

/* Marker size variants */
.timeline .timeline-marker.is-small {
    --timeline-marker-size: 8px;
    --timeline-marker-icon-size: 18px;
}

.timeline .timeline-marker.is-medium {
    --timeline-marker-size: 16px;
    --timeline-marker-icon-size: 32px;
}

.timeline .timeline-marker.is-large {
    --timeline-marker-size: 20px;
    --timeline-marker-icon-size: 40px;
}