/* ============================================================
   ULTRAKIT TIMELINE HORIZONTAL — Premium
   7 Card Styles · Alternating Above/Below · Node Shapes
   Drag-scroll · 3 Entry Animations · Line Styles
   ============================================================ */

.ultrakit-tlh-wrapper {
    --ultrakit-tlh-accent:  #6c5ce7;
    --ultrakit-tlh-arrow:   #ffffff;
    --ultrakit-tlh-node-sz: 42px;
    --ultrakit-tlh-gap:     24px;
    width: 100%;
}

/* ============================================================
   SCROLL CONTAINER
   ============================================================ */
.ultrakit-tlh-scroll {
    width: 100%;
    position: relative;
}
.ultrakit-tlh-scroll.is-scrollable {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ultrakit-tlh-accent) #f0f0f0;
    padding-bottom: 6px;
    cursor: grab;
}
.ultrakit-tlh-scroll.is-scrollable:active { cursor: grabbing; }
.ultrakit-tlh-scroll.is-scrollable::-webkit-scrollbar { height: 4px; }
.ultrakit-tlh-scroll.is-scrollable::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 2px; }
.ultrakit-tlh-scroll.is-scrollable::-webkit-scrollbar-thumb { background: var(--ultrakit-tlh-accent); border-radius: 2px; opacity: 0.5; }

/* ============================================================
   AXIS (horizontal line running the full width)
   ============================================================ */
.ultrakit-tlh-axis {
    position: absolute;
    left: 0;
    right: 0;
    /* vertically centred — JS sets exact top after render */
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}
.ultrakit-tlh-line {
    width: 100%;
    height: 2px;
    background: #e0e0f0;
}

/* ============================================================
   TRACK
   ============================================================ */
.ultrakit-tlh-track {
    display: flex;
    align-items: stretch;
    position: relative;
    z-index: 1;
    width: max-content;
    min-width: 100%;
    padding: 0 24px;
    gap: 0;
}

/* ============================================================
   ITEM
   ============================================================ */
.ultrakit-tlh-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 220px;
    flex: 1;
    position: relative;
}

/* Layout: card above has card → node → spacer */
/* Layout: card below has spacer → node → card */
.ultrakit-tlh-item.card-above { flex-direction: column; }
.ultrakit-tlh-item.card-below { flex-direction: column-reverse; }

.ultrakit-tlh-card-wrap { width: 100%; padding: 0 12px 16px; box-sizing: border-box; }
.ultrakit-tlh-item.card-below .ultrakit-tlh-card-wrap { padding: 16px 12px 0; }

.ultrakit-tlh-spacer { flex: 1; min-height: 20px; }

/* ============================================================
   NODE
   ============================================================ */
.ultrakit-tlh-node-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.ultrakit-tlh-node {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ultrakit-tlh-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 5px rgba(108,92,231,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 2;
}
.ultrakit-tlh-node i, .ultrakit-tlh-node svg {
    font-size: 16px; width: 16px; height: 16px;
    color: #fff; fill: #fff;
}
.ultrakit-tlh-item:hover .ultrakit-tlh-node {
    transform: scale(1.18);
    box-shadow: 0 0 0 8px rgba(108,92,231,0.18);
}
.ultrakit-tlh-item.is-highlighted .ultrakit-tlh-node {
    box-shadow: 0 0 0 6px rgba(108,92,231,0.22), 0 0 18px rgba(108,92,231,0.3);
}

/* Node shapes */
.ultrakit-tlh-node-square  .ultrakit-tlh-node { border-radius: 8px; }
.ultrakit-tlh-node-diamond .ultrakit-tlh-node { border-radius: 4px; transform: rotate(45deg); }
.ultrakit-tlh-node-diamond .ultrakit-tlh-node i,
.ultrakit-tlh-node-diamond .ultrakit-tlh-node svg { transform: rotate(-45deg); }
.ultrakit-tlh-node-diamond .ultrakit-tlh-item:hover .ultrakit-tlh-node { transform: rotate(45deg) scale(1.18); }
.ultrakit-tlh-node-hexagon .ultrakit-tlh-node {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ============================================================
   LINE STYLES
   ============================================================ */
.ultrakit-tlh-line-dashed  .ultrakit-tlh-line { background: repeating-linear-gradient(to right, var(--ultrakit-tlh-accent) 0px, var(--ultrakit-tlh-accent) 8px, transparent 8px, transparent 16px); }
.ultrakit-tlh-line-dotted  .ultrakit-tlh-line { background: repeating-linear-gradient(to right, var(--ultrakit-tlh-accent) 0px, var(--ultrakit-tlh-accent) 3px, transparent 3px, transparent 9px); }
.ultrakit-tlh-line-gradient .ultrakit-tlh-line { background: linear-gradient(to right, transparent, var(--ultrakit-tlh-accent), transparent); }

/* ============================================================
   CARD
   ============================================================ */
.ultrakit-tlh-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    overflow: hidden;
}
.ultrakit-tlh-card:hover { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(0,0,0,0.12); }
.ultrakit-tlh-item.is-highlighted .ultrakit-tlh-card { box-shadow: 0 6px 28px rgba(108,92,231,0.2); }

/* Card image */
.ultrakit-tlh-card-img { margin: -20px -20px 14px; overflow: hidden; border-radius: 12px 12px 0 0; }
.ultrakit-tlh-card-img img { width: 100%; height: 120px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ultrakit-tlh-card:hover .ultrakit-tlh-card-img img { transform: scale(1.06); }

/* Date */
.ultrakit-tlh-date {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ultrakit-tlh-accent);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Badge */
.ultrakit-tlh-badge {
    float: right;
    margin-left: 8px;
    display: inline-block;
    padding: 2px 8px;
    background: var(--ultrakit-tlh-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

/* Title */
.ultrakit-tlh-title {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 2px 0 6px;
    line-height: 1.35;
}

/* Content */
.ultrakit-tlh-content {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ---- Card Arrow pointing at node ---- */
.ultrakit-tlh-card-arrow {
    position: absolute;
    width: 0; height: 0;
    border: 8px solid transparent;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}
/* arrow points DOWN for card-above (arrow at bottom of card) */
.ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow {
    bottom: -8px;
    border-top-color: #ffffff;
    border-bottom: none;
}
/* arrow points UP for card-below */
.ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow {
    top: -8px;
    border-bottom-color: #ffffff;
    border-top: none;
}

/* ============================================================
   CARD STYLES
   ============================================================ */

/* Style 2: Soft Tinted */
.ultrakit-tlh-style-2 .ultrakit-tlh-card { background: #f5f4ff; box-shadow: none; border: 1px solid #ede9ff; }
.ultrakit-tlh-style-2 .ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow { border-top-color: #f5f4ff; }
.ultrakit-tlh-style-2 .ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow { border-bottom-color: #f5f4ff; }

/* Style 3: Dark Night */
.ultrakit-tlh-style-3 .ultrakit-tlh-card { background: #1a1a2e; box-shadow: 0 6px 28px rgba(0,0,0,0.35); }
.ultrakit-tlh-style-3 .ultrakit-tlh-title   { color: #ffffff !important; }
.ultrakit-tlh-style-3 .ultrakit-tlh-content { color: #8888aa !important; }
.ultrakit-tlh-style-3 .ultrakit-tlh-date    { color: #a29bfe !important; }
.ultrakit-tlh-style-3 .ultrakit-tlh-line    { background: rgba(255,255,255,0.1) !important; }
.ultrakit-tlh-style-3 .ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow { border-top-color: #1a1a2e; }
.ultrakit-tlh-style-3 .ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow { border-bottom-color: #1a1a2e; }

/* Style 4: Glassmorphism */
.ultrakit-tlh-style-4 .ultrakit-tlh-card {
    background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.ultrakit-tlh-style-4 .ultrakit-tlh-title   { color: #ffffff !important; }
.ultrakit-tlh-style-4 .ultrakit-tlh-content { color: rgba(255,255,255,0.7) !important; }
.ultrakit-tlh-style-4 .ultrakit-tlh-date    { color: rgba(255,255,255,0.6) !important; }
.ultrakit-tlh-style-4 .ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow { border-top-color: rgba(255,255,255,0.15); }
.ultrakit-tlh-style-4 .ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow { border-bottom-color: rgba(255,255,255,0.15); }

/* Style 5: Gradient Accent Header band */
.ultrakit-tlh-card-band {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ultrakit-tlh-accent), #a29bfe);
    border-radius: 12px 12px 0 0;
}
.ultrakit-tlh-style-5 .ultrakit-tlh-card-band { display: block; }
.ultrakit-tlh-style-5 .ultrakit-tlh-card-body { padding-top: 4px; }

/* Style 6: Neumorphic */
.ultrakit-tlh-style-6 .ultrakit-tlh-card {
    background: #e8eaf0;
    box-shadow: 6px 6px 14px #c8cad0, -4px -4px 10px #ffffff;
    border-radius: 14px !important;
}
.ultrakit-tlh-style-6 .ultrakit-tlh-card:hover { box-shadow: 8px 8px 18px #c0c2c8, -3px -3px 8px #ffffff; transform: none; }
.ultrakit-tlh-style-6 .ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow { border-top-color: #e8eaf0; }
.ultrakit-tlh-style-6 .ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow { border-bottom-color: #e8eaf0; }

/* Style 7: Outlined */
.ultrakit-tlh-style-7 .ultrakit-tlh-card {
    background: transparent;
    border: 2px solid var(--ultrakit-tlh-accent);
    box-shadow: none;
}
.ultrakit-tlh-style-7 .ultrakit-tlh-card:hover { background: rgba(108,92,231,0.04); box-shadow: 0 4px 18px rgba(108,92,231,0.1); }
.ultrakit-tlh-style-7 .ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow { border-top-color: var(--ultrakit-tlh-accent); }
.ultrakit-tlh-style-7 .ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow { border-bottom-color: var(--ultrakit-tlh-accent); }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.ultrakit-tlh-anim-item {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.ultrakit-tlh-anim-item.anim-fade-up { transform: translateY(20px); }
.ultrakit-tlh-anim-item.anim-zoom    { transform: scale(0.93); }
.ultrakit-tlh-anim-item.anim-fade    { }
.ultrakit-tlh-anim-item.is-visible   { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE — stack vertically on mobile
   ============================================================ */
@media (max-width: 600px) {
    .ultrakit-tlh-track {
        flex-direction: column;
        width: 100%;
        min-width: unset;
        padding: 0;
        gap: 24px;
    }
    .ultrakit-tlh-item {
        flex-direction: row !important;
        min-width: unset;
        width: 100%;
        align-items: stretch;
    }
    .ultrakit-tlh-card-wrap  { padding: 0 0 0 16px; flex: 1; }
    .ultrakit-tlh-node-wrap  { flex-direction: column; width: var(--ultrakit-tlh-node-sz, 42px); }
    .ultrakit-tlh-spacer     { display: none; }
    .ultrakit-tlh-axis       { display: none; }

    /* Arrow left for horizontal mobile stack */
    .ultrakit-tlh-item.card-above .ultrakit-tlh-card-arrow,
    .ultrakit-tlh-item.card-below .ultrakit-tlh-card-arrow {
        top: 16px; bottom: auto; left: -8px; right: auto;
        transform: none;
        border: 8px solid transparent;
        border-right-color: #ffffff;
        border-top: none; border-bottom: none;
    }
    .ultrakit-tlh-style-2 .ultrakit-tlh-card-arrow { border-right-color: #f5f4ff !important; }
    .ultrakit-tlh-style-3 .ultrakit-tlh-card-arrow { border-right-color: #1a1a2e !important; }
    .ultrakit-tlh-style-6 .ultrakit-tlh-card-arrow { border-right-color: #e8eaf0 !important; }
    .ultrakit-tlh-style-7 .ultrakit-tlh-card-arrow { border-right-color: var(--ultrakit-tlh-accent) !important; }

    .ultrakit-tlh-scroll.is-scrollable { overflow-x: visible; cursor: auto; }
}