/* ============================================================
   ULTRAKIT TIMELINE VERTICAL — Premium
   8 Card Styles · 4 Layouts · 4 Node Shapes
   Connector Line Styles · Scroll Animations · Highlighted
   ============================================================ */

.ultrakit-tl-wrapper {
    --ultrakit-tl-accent:       #6c5ce7;
    --ultrakit-tl-arrow-color:  #ffffff;
    --ultrakit-tl-node-size:    44px;
    --ultrakit-tl-line-w:       2px;
    --ultrakit-tl-gap:          28px;
    width: 100%;
    position: relative;
}

/* ============================================================
   ITEM BASE
   ============================================================ */
.ultrakit-tl-item {
    display: grid;
    align-items: flex-start;
    position: relative;
    margin-bottom: 0;
}

/* ============================================================
   CONNECTOR COLUMN
   ============================================================ */
.ultrakit-tl-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* Connector line segments */
.ultrakit-tl-line {
    flex: 1;
    width: 2px;
    min-height: 20px;
    background: #e0e0f0;
}

/* Hide top line for first item, bottom line for last item */
.ultrakit-tl-item:first-child .ultrakit-tl-line:first-child { visibility: hidden; }
.ultrakit-tl-item:last-child  .ultrakit-tl-line-bottom      { visibility: hidden; }

/* ============================================================
   NODE
   ============================================================ */
.ultrakit-tl-node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ultrakit-tl-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 5px rgba(108,92,231,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ultrakit-tl-node i, .ultrakit-tl-node svg {
    font-size: 18px; width: 18px; height: 18px;
    color: #ffffff; fill: #ffffff;
}
.ultrakit-tl-item:hover .ultrakit-tl-node {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(108,92,231,0.15);
}

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

/* ============================================================
   CONNECTOR LINE STYLES
   ============================================================ */
.ultrakit-tl-line-dashed  .ultrakit-tl-line { background: repeating-linear-gradient(to bottom, var(--ultrakit-tl-accent) 0px, var(--ultrakit-tl-accent) 6px, transparent 6px, transparent 12px); }
.ultrakit-tl-line-dotted  .ultrakit-tl-line { background: repeating-linear-gradient(to bottom, var(--ultrakit-tl-accent) 0px, var(--ultrakit-tl-accent) 3px, transparent 3px, transparent 9px); }
.ultrakit-tl-line-gradient .ultrakit-tl-line { background: linear-gradient(to bottom, var(--ultrakit-tl-accent), #e0e0f0); }

/* ============================================================
   CARD
   ============================================================ */
.ultrakit-tl-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px 26px;
    position: relative;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    box-sizing: border-box;
}
.ultrakit-tl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(0,0,0,0.11);
}

/* Card image */
.ultrakit-tl-card-image { margin: -24px -26px 18px; overflow: hidden; }
.ultrakit-tl-card-image img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ultrakit-tl-card:hover .ultrakit-tl-card-image img { transform: scale(1.04); }

/* ---- Arrow (triangle pointing toward node) ---- */
.ultrakit-tl-arrow {
    position: absolute;
    top: 22px;
    width: 0; height: 0;
    border: 9px solid transparent;
    z-index: 1;
}

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

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

/* ---- Title ---- */
.ultrakit-tl-title {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.35;
}

/* ---- Content ---- */
.ultrakit-tl-content {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}
.ultrakit-tl-content p { margin: 0; }

/* ---- Highlighted ---- */
.ultrakit-tl-item.tl-highlighted .ultrakit-tl-node {
    box-shadow: 0 0 0 6px rgba(108,92,231,0.2), 0 0 20px rgba(108,92,231,0.25);
}
.ultrakit-tl-card.is-highlighted {
    box-shadow: 0 6px 32px rgba(108,92,231,0.2) !important;
}

/* ============================================================
   LAYOUTS
   ============================================================ */

/* ---- ALTERNATING ---- */
.ultrakit-tl-layout-alternating .ultrakit-tl-item {
    grid-template-columns: 1fr var(--ultrakit-tl-node-size, 44px) 1fr;
    gap: var(--ultrakit-tl-gap, 28px);
    align-items: stretch;
}
/* Left items: card left, empty right */
.ultrakit-tl-layout-alternating .tl-side-left  { grid-template-areas: "card connector empty"; }
.ultrakit-tl-layout-alternating .tl-side-right { grid-template-areas: "empty connector card"; }

.ultrakit-tl-layout-alternating .ultrakit-tl-connector { grid-area: connector; }
.ultrakit-tl-layout-alternating .ultrakit-tl-card      { grid-area: card; align-self: flex-start; }
.ultrakit-tl-layout-alternating .ultrakit-tl-date-outside { grid-area: empty; display: flex; align-items: center; justify-content: center; padding-top: 22px; }

/* Arrows */
.ultrakit-tl-layout-alternating .tl-side-left  .ultrakit-tl-arrow { right: -9px; border-left-color: #ffffff; }
.ultrakit-tl-layout-alternating .tl-side-right .ultrakit-tl-arrow { left: -9px;  border-right-color: #ffffff; }

/* ---- ALL LEFT ---- */
.ultrakit-tl-layout-left .ultrakit-tl-item {
    grid-template-columns: var(--ultrakit-tl-node-size, 44px) 1fr;
    gap: var(--ultrakit-tl-gap, 28px);
    align-items: stretch;
    grid-template-areas: "connector card";
}
.ultrakit-tl-layout-left .ultrakit-tl-connector { grid-area: connector; }
.ultrakit-tl-layout-left .ultrakit-tl-card      { grid-area: card; align-self: flex-start; }
.ultrakit-tl-layout-left .ultrakit-tl-date-outside { display: none; }
.ultrakit-tl-layout-left .ultrakit-tl-arrow { left: -9px; border-right-color: #ffffff; }

/* ---- ALL RIGHT ---- */
.ultrakit-tl-layout-right .ultrakit-tl-item {
    grid-template-columns: 1fr var(--ultrakit-tl-node-size, 44px);
    gap: var(--ultrakit-tl-gap, 28px);
    align-items: stretch;
    grid-template-areas: "card connector";
}
.ultrakit-tl-layout-right .ultrakit-tl-connector { grid-area: connector; }
.ultrakit-tl-layout-right .ultrakit-tl-card      { grid-area: card; align-self: flex-start; }
.ultrakit-tl-layout-right .ultrakit-tl-date-outside { display: none; }
.ultrakit-tl-layout-right .ultrakit-tl-arrow { right: -9px; border-left-color: #ffffff; }

/* ---- CENTERED ---- */
.ultrakit-tl-layout-centered .ultrakit-tl-item {
    grid-template-columns: var(--ultrakit-tl-node-size, 44px) 1fr;
    gap: var(--ultrakit-tl-gap, 28px);
    align-items: stretch;
    grid-template-areas: "connector card";
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.ultrakit-tl-layout-centered .ultrakit-tl-connector { grid-area: connector; }
.ultrakit-tl-layout-centered .ultrakit-tl-card      { grid-area: card; align-self: flex-start; }
.ultrakit-tl-layout-centered .ultrakit-tl-date-outside { display: none; }
.ultrakit-tl-layout-centered .ultrakit-tl-arrow { left: -9px; border-right-color: #ffffff; }

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

/* Style 2: Soft Tinted */
.ultrakit-tl-style-2 .ultrakit-tl-card { background: #f5f4ff; box-shadow: none; border: 1px solid #ede9ff; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-2 .tl-side-left  .ultrakit-tl-arrow { border-left-color:  #f5f4ff; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-2 .tl-side-right .ultrakit-tl-arrow { border-right-color: #f5f4ff; }
.ultrakit-tl-layout-left.ultrakit-tl-style-2   .ultrakit-tl-arrow { border-right-color: #f5f4ff; }
.ultrakit-tl-layout-right.ultrakit-tl-style-2  .ultrakit-tl-arrow { border-left-color:  #f5f4ff; }
.ultrakit-tl-layout-centered.ultrakit-tl-style-2 .ultrakit-tl-arrow { border-right-color: #f5f4ff; }

/* Style 3: Dark */
.ultrakit-tl-style-3 .ultrakit-tl-card { background: #1a1a2e; box-shadow: 0 6px 28px rgba(0,0,0,0.35); }
.ultrakit-tl-style-3 .ultrakit-tl-title   { color: #ffffff !important; }
.ultrakit-tl-style-3 .ultrakit-tl-content { color: #8888aa !important; }
.ultrakit-tl-style-3 .ultrakit-tl-date    { color: #a29bfe !important; }
.ultrakit-tl-style-3 .ultrakit-tl-line    { background: rgba(255,255,255,0.1) !important; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-3 .tl-side-left  .ultrakit-tl-arrow { border-left-color:  #1a1a2e; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-3 .tl-side-right .ultrakit-tl-arrow { border-right-color: #1a1a2e; }
.ultrakit-tl-layout-left.ultrakit-tl-style-3   .ultrakit-tl-arrow { border-right-color: #1a1a2e; }
.ultrakit-tl-layout-right.ultrakit-tl-style-3  .ultrakit-tl-arrow { border-left-color:  #1a1a2e; }
.ultrakit-tl-layout-centered.ultrakit-tl-style-3 .ultrakit-tl-arrow { border-right-color: #1a1a2e; }

/* Style 4: Glassmorphism */
.ultrakit-tl-style-4 .ultrakit-tl-card {
    background: rgba(255,255,255,0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.ultrakit-tl-style-4 .ultrakit-tl-title   { color: #ffffff !important; }
.ultrakit-tl-style-4 .ultrakit-tl-content { color: rgba(255,255,255,0.7) !important; }
.ultrakit-tl-style-4 .ultrakit-tl-date    { color: rgba(255,255,255,0.6) !important; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-4 .tl-side-left  .ultrakit-tl-arrow { border-left-color:  rgba(255,255,255,0.14); }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-4 .tl-side-right .ultrakit-tl-arrow { border-right-color: rgba(255,255,255,0.14); }
.ultrakit-tl-layout-left.ultrakit-tl-style-4   .ultrakit-tl-arrow { border-right-color: rgba(255,255,255,0.14); }
.ultrakit-tl-layout-right.ultrakit-tl-style-4  .ultrakit-tl-arrow { border-left-color:  rgba(255,255,255,0.14); }
.ultrakit-tl-layout-centered.ultrakit-tl-style-4 .ultrakit-tl-arrow { border-right-color: rgba(255,255,255,0.14); }

/* Style 5: Left Accent Border */
.ultrakit-tl-style-5 .ultrakit-tl-card {
    border-left: 4px solid var(--ultrakit-tl-accent);
    border-radius: 0 14px 14px 0;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}

/* Style 6: Gradient Header */
.ultrakit-tl-style-6 .ultrakit-tl-card { overflow: hidden; }
.ultrakit-tl-card-header-band {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--ultrakit-tl-accent), #a29bfe);
}
.ultrakit-tl-style-6 .ultrakit-tl-card-header-band { display: block; }

/* Style 7: Neumorphic */
.ultrakit-tl-style-7 .ultrakit-tl-card {
    background: #e8eaf0;
    box-shadow: 8px 8px 18px #c8cad0, -6px -6px 14px #ffffff;
    border-radius: 16px !important;
}
.ultrakit-tl-style-7 .ultrakit-tl-card:hover { box-shadow: 10px 10px 22px #c0c2c8, -4px -4px 10px #ffffff; transform: none; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-7 .tl-side-left  .ultrakit-tl-arrow { border-left-color:  #e8eaf0; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-7 .tl-side-right .ultrakit-tl-arrow { border-right-color: #e8eaf0; }
.ultrakit-tl-layout-left.ultrakit-tl-style-7   .ultrakit-tl-arrow { border-right-color: #e8eaf0; }
.ultrakit-tl-layout-right.ultrakit-tl-style-7  .ultrakit-tl-arrow { border-left-color:  #e8eaf0; }
.ultrakit-tl-layout-centered.ultrakit-tl-style-7 .ultrakit-tl-arrow { border-right-color: #e8eaf0; }

/* Style 8: Outlined */
.ultrakit-tl-style-8 .ultrakit-tl-card {
    background: transparent;
    border: 2px solid var(--ultrakit-tl-accent);
    box-shadow: none;
}
.ultrakit-tl-style-8 .ultrakit-tl-card:hover { background: rgba(108,92,231,0.04); box-shadow: 0 4px 20px rgba(108,92,231,0.12); }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-8 .tl-side-left  .ultrakit-tl-arrow { border-left-color:  transparent; }
.ultrakit-tl-layout-alternating.ultrakit-tl-style-8 .tl-side-right .ultrakit-tl-arrow { border-right-color: transparent; }
.ultrakit-tl-layout-left.ultrakit-tl-style-8   .ultrakit-tl-arrow { border-right-color: transparent; }
.ultrakit-tl-layout-right.ultrakit-tl-style-8  .ultrakit-tl-arrow { border-left-color:  transparent; }
.ultrakit-tl-layout-centered.ultrakit-tl-style-8 .ultrakit-tl-arrow { border-right-color: transparent; }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.ultrakit-tl-anim-item {
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.ultrakit-tl-anim-item.anim-fade-up   { transform: translateY(28px); }
.ultrakit-tl-anim-item.anim-fade-side.tl-side-left,
.ultrakit-tl-anim-item.anim-fade-side.tl-side-center { transform: translateX(-24px); }
.ultrakit-tl-anim-item.anim-fade-side.tl-side-right  { transform: translateX(24px); }
.ultrakit-tl-anim-item.anim-zoom      { transform: scale(0.94); }
.ultrakit-tl-anim-item.anim-fade      { }

.ultrakit-tl-anim-item.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   OUTSIDE DATE COLUMN
   ============================================================ */
.ultrakit-tl-date-outside {
    display: flex;
    align-items: flex-start;
    padding-top: 22px;
    justify-content: center;
}
.ultrakit-tl-date-outside .ultrakit-tl-date {
    text-align: center;
    font-size: 13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    /* Force left layout on mobile */
    .ultrakit-tl-layout-alternating .ultrakit-tl-item,
    .ultrakit-tl-layout-right .ultrakit-tl-item {
        grid-template-columns: 36px 1fr !important;
        grid-template-areas: "connector card" !important;
    }
    .ultrakit-tl-layout-alternating .tl-side-left  .ultrakit-tl-arrow,
    .ultrakit-tl-layout-alternating .tl-side-right .ultrakit-tl-arrow,
    .ultrakit-tl-layout-right .ultrakit-tl-arrow { left: -9px; right: auto; border: 9px solid transparent; border-right-color: #ffffff; border-left-color: transparent; }
    .ultrakit-tl-layout-alternating .ultrakit-tl-date-outside { display: none; }
    .ultrakit-tl-node { width: 36px !important; height: 36px !important; }
    .ultrakit-tl-card { padding: 18px 18px !important; }
}