/* ── Reset & Box Model ── */
.sitsel-tl-wrapper,
.sitsel-tl-wrapper *,
.sitsel-tl-wrapper *::before,
.sitsel-tl-wrapper *::after {
    box-sizing: border-box;
}

/* ── CSS Custom Properties ── */
.sitsel-tl-wrapper {
    --tl-gap:       40px;
    --tl-line-fill: 0%;
    /* custom property holds the current fill colour so that we can
       reuse it in other selectors without having to duplicate the
       control logic. */
    position: relative;
    width: 100%;
}

/* when JavaScript adds the class as items are passed we use the
   variable above to colour the border; themes can also style the dot
   itself using the existing dot_active_color control. */
.sitsel-change-border-color {
    border-color: var(--tl-line-fill-color) !important;
}

/* ═══════════════════════════════════════════════════
   CONNECTOR LINE
   ═══════════════════════════════════════════════════ */
   .sitsel-tl-item {
    position: relative;
    z-index: 1;
}
.sitsel-tl-wrapper.has-line .sitsel-tl-line {
    position: absolute;
    z-index: 0;
}
.sitsel-tl-wrapper.has-line .sitsel-tl-line::before {
    content: '';
    position: absolute;
    transition: width .2s ease-out, height .2s ease-out;
}

/* Vertical layouts */
.sitsel-tl-zig-zag.has-line .sitsel-tl-line,
.sitsel-tl-line-left.has-line .sitsel-tl-line,
.sitsel-tl-line-right.has-line .sitsel-tl-line {
    top: 0;
    bottom: 0;
    width: var( --tl-line-width );
}
.sitsel-tl-zig-zag.has-line .sitsel-tl-line::before,
.sitsel-tl-line-left.has-line .sitsel-tl-line::before,
.sitsel-tl-line-right.has-line .sitsel-tl-line::before {
    top: 0;
    left: 0;
    right: 0;
    height: var( --tl-line-fill );
}

/* Line positions */
.sitsel-tl-zig-zag.has-line .sitsel-tl-line    { left: 50%; transform: translateX( -50% ); }
.sitsel-tl-line-left.has-line .sitsel-tl-line   { left: calc( var( --tl-dot-size ) / 2 ); }
.sitsel-tl-line-right.has-line .sitsel-tl-line  { right: calc( var( --tl-dot-size ) / 2 ); }

/* Horizontal / Carousel */
.sitsel-tl-horizontal.has-line .sitsel-tl-line,
.sitsel-tl-line-top-carousel.has-line .sitsel-tl-line {
    left: 0;
    right: 0;
    height: var( --tl-line-width );
    width: var( --tl-carousel-line-width, 100% ) !important;
}
.sitsel-tl-horizontal.has-line .sitsel-tl-line        { top: 50%; transform: translateY( -50% ); }
.sitsel-tl-line-top-carousel.has-line .sitsel-tl-line { top: 0; }

.sitsel-tl-horizontal.has-line .sitsel-tl-line::before,
.sitsel-tl-line-top-carousel.has-line .sitsel-tl-line::before {
    top: 0;
    left: 0;
    bottom: 0;
    width: var( --tl-line-fill ); /* driven by JS scrollLeft ratio */
}

/* ═══════════════════════════════════════════════════
   DOT / ICON
   ═══════════════════════════════════════════════════ */
.sitsel-tline-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    flex-shrink: 0;
    transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.sitsel-tline-dot svg {
    flex-shrink: 0;
}
.sitsel-tline-dot--active {
    box-shadow: 0 0 12px rgba( 0, 115, 170, .6 );
}

/* ═══════════════════════════════════════════════════
   EXTRA DATE LABEL
   ═══════════════════════════════════════════════════ */
.sitsel-tl-extra-label {
    display: inline-block;
    font-size: .8em;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════ */
.sitsel-tl-item.sitsel-tl-anim-fade        { opacity: 0; transition: opacity var( --anim-dur, .6s ) ease; }
.sitsel-tl-item.sitsel-tl-anim-slide-up    { opacity: 0; transform: translateY( 30px );  transition: opacity var( --anim-dur, .6s ) ease, transform var( --anim-dur, .6s ) ease; }
.sitsel-tl-item.sitsel-tl-anim-slide-left  { opacity: 0; transform: translateX( 30px );  transition: opacity var( --anim-dur, .6s ) ease, transform var( --anim-dur, .6s ) ease; }
.sitsel-tl-item.sitsel-tl-anim-slide-right { opacity: 0; transform: translateX( -30px ); transition: opacity var( --anim-dur, .6s ) ease, transform var( --anim-dur, .6s ) ease; }
.sitsel-tl-item.sitsel-tl-anim-zoom        { opacity: 0; transform: scale( .9 );         transition: opacity var( --anim-dur, .6s ) ease, transform var( --anim-dur, .6s ) ease; }
.sitsel-tl-item.sitsel-tl-visible          { opacity: 1 !important; transform: none !important; }

/* Respect user accessibility preference */
@media ( prefers-reduced-motion: reduce ) {
    .sitsel-tl-item[class*="sitsel-tl-anim-"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .sitsel-tl-wrapper.has-line .sitsel-tl-line::before { transition: none; }
}

/* ═══════════════════════════════════════════════════
   ITEMS CONTAINER
   ═══════════════════════════════════════════════════ */
.sitsel-tl-items {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
     z-index: 1;
}

/* ─────────────────────────────────────────
   ZIG-ZAG (default desktop layout)
   ───────────────────────────────────────── */
.sitsel-tl-zig-zag .sitsel-tl-items,
.sitsel-tl-zig-zag .sitsel-tl-group {
    display: flex;
    flex-direction: column;
    gap: var( --tl-gap );
}
.sitsel-tl-zig-zag .sitsel-tl-item {
    position: relative;
    width: 50%;
    padding-right: calc( var( --tl-dot-size ) / 2 + 24px );
}
.sitsel-tl-zig-zag .sitsel-tl-item--right {
    align-self: flex-end;
    padding-right: 0;
    padding-left: calc( var( --tl-dot-size ) / 2 + 24px );
}
.sitsel-tl-zig-zag .sitsel-tl-item--left .sitsel-tline-dot {
    right: calc( -1 * var( --tl-dot-size ) / 2 );
    top: 24px;
}
.sitsel-tl-zig-zag .sitsel-tl-item--right .sitsel-tline-dot {
    left: calc( -1 * var( --tl-dot-size ) / 2 );
    top: 24px;
}

/* ─────────────────────────────────────────
   LINE LEFT
   ───────────────────────────────────────── */
.sitsel-tl-line-left .sitsel-tl-items {
    display: flex;
    flex-direction: column;
    gap: var( --tl-gap );
    padding-left: calc( var( --tl-dot-size ) + 32px );
}
.sitsel-tl-line-left .sitsel-tl-item { position: relative; }
.sitsel-tl-line-left .sitsel-tline-dot {
    left: calc( -1 * ( var( --tl-dot-size ) + 32px ) );
    top: 20px;
}

/* ─────────────────────────────────────────
   LINE RIGHT
   ───────────────────────────────────────── */
.sitsel-tl-line-right .sitsel-tl-items {
    display: flex;
    flex-direction: column;
    gap: var( --tl-gap );
    padding-right: calc( var( --tl-dot-size ) + 32px );
}
.sitsel-tl-line-right .sitsel-tl-item { position: relative; }
.sitsel-tl-line-right .sitsel-tline-dot {
    right: calc( -1 * ( var( --tl-dot-size ) + 32px ) );
    top: 20px;
}

/* ─────────────────────────────────────────
   HORIZONTAL (side-scroll)
   ───────────────────────────────────────── */
.sitsel-tl-horizontal .sitsel-tl-items {
    display: flex;
    flex-direction: row;
    gap: var( --tl-gap );
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    touch-action: pan-x;
}
.sitsel-tl-horizontal .sitsel-tl-item {
    flex: 0 0 260px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sitsel-tl-horizontal .sitsel-tline-dot {
    position: relative;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.sitsel-tl-horizontal .sitsel-tl-card { width: 100%; }

/* ─────────────────────────────────────────
   LINE TOP CAROUSEL
   ───────────────────────────────────────── */
.sitsel-tl-line-top-carousel .sitsel-tl-items {
    display: flex;
    flex-direction: row;
    gap: var( --tl-gap );
    overflow-x: auto;
    padding-top: calc( var( --tl-dot-size ) + 10px );
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    touch-action: pan-x;
}
.sitsel-tl-line-top-carousel .sitsel-tl-item {
    flex: 0 0 33%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sitsel-tl-line-top-carousel .sitsel-tline-dot {
    position: absolute;
    top: calc( -1 * ( var( --tl-dot-size ) / 2 ) - 23px );
    left: 50%;
    transform: translateX( -50% );
    flex-shrink: 0;
}
.sitsel-tl-line-top-carousel .sitsel-tl-card { width: 100%; }

/* ═══════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════ */
.sitsel-tl-card {
    position: relative;
    z-index: 1;
    width: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
    will-change: transform;
}
.sitsel-tl-card:hover {
    box-shadow: 0 8px 24px rgba( 0, 0, 0, .1 );
    transform: translateY( -3px );
}

/* ─── Thumbnail ─── */
.sitsel-tl-thumbnail {
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: inherit;
}
.sitsel-tl-thumbnail img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .35s ease;
}
.sitsel-tl-thumbnail img:hover { transform: scale( 1.03 ); }

/* ─── Title ─── */
.sitsel-tl-title {
    margin: 0 0 8px;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.4;
}
.sitsel-tl-title a {
    text-decoration: none;
    color: inherit;
    transition: color .2s ease;
}
.sitsel-tl-title a:hover { color: var( --tl-dot-bg ); }

/* ─── Excerpt ─── */
.sitsel-tl-excerpt {
    margin: 0 0 12px;
    font-size: .9em;
    line-height: 1.6;
    color: #555;
}

/* ─── Meta ─── */
.sitsel-tl-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82em;
    color: #888;
    margin: 0 0 8px;
}
.sitsel-tl-date::before   { content: '📅 '; }
.sitsel-tl-author::before { content: '✍️ '; }
.sitsel-tl-categories,
.sitsel-tl-tags {
    display: block;
    font-size: .8em;
    color: #888;
    margin-bottom: 8px;
}

/* ─── Button ─── */
.sitsel-tl-readmore { margin-top: 12px; }
.sitsel-tl-btn {
    display: inline-block;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
    cursor: pointer;
}

/* ─── Group label ─── */
.sitsel-tl-group-label {
    display: block;
    font-weight: 700;
    font-size: 1.1em;
    margin-bottom: 20px;
    padding: 6px 16px;
    background: #f0f0f0;
    border-radius: 4px;
    color: #333;
    z-index: 1;
    text-align: center;
}

/* ─── No posts ─── */
.sitsel-tl-no-posts {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════ */
.sitsel-tl-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.sitsel-tl-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.sitsel-tl-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.sitsel-tl-pagination .page-numbers li{border: 1px solid #ddd; border-radius: 4px; overflow:hidden;}
.sitsel-tl-pagination .page-numbers.dots    { border-color: transparent; background: transparent; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
.sitsel-tl-line-top-carousel.has-line .sitsel-tl-line {
    transform: translateY( 50% );
    top: calc( var( --tl-dot-size ) / 2 );
}

/* ── Tablet (769px – 1024px) ── */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
    .sitsel-tl-zig-zag .sitsel-tl-item {
        width: 55%;
    }
    .sitsel-tl-horizontal .sitsel-tl-item,
    .sitsel-tl-line-top-carousel .sitsel-tl-item {
        flex: 0 0 230px;
    }
}

/* ── Mobile (≤ 768px) ── */
@media ( max-width: 768px ) {

    /* Zig-zag collapses to single-column left-line layout */
    .sitsel-tl-zig-zag .sitsel-tl-item,
    .sitsel-tl-zig-zag .sitsel-tl-item--right {
        width: 100%;
        padding-left: calc( var( --tl-dot-size ) + 20px );
        padding-right: 0;
        align-self: flex-start;
    }
    .sitsel-tl-zig-zag.has-line .sitsel-tl-line {
        left: calc((var(--tl-dot-size) + 20px) / 2);
        transform: none;
    }
    .sitsel-tl-zig-zag .sitsel-tl-item--left .sitsel-tline-dot,
    .sitsel-tl-zig-zag .sitsel-tl-item--right .sitsel-tline-dot {
        left: calc((var(--tl-dot-size) + 20px) / 2);
        right: auto;
        top: 16px;
        transform: translateX(-50%);
    }
    .sitsel-tl-wrapper { --tl-gap: 28px; }

    .sitsel-tl-pagination ul { gap: 4px; }
    
}

/* ── Small mobile (≤ 480px) ── */
@media ( max-width: 480px ) {
    .sitsel-tl-horizontal .sitsel-tl-item,
    .sitsel-tl-line-top-carousel .sitsel-tl-item {
        flex: 0 0 80%;
    }
    .sitsel-tl-wrapper { --tl-gap: 20px; }
}

/* ═══════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════ */
@media print {
    .sitsel-tl-wrapper { --tl-line-fill: 100% !important; }
    .sitsel-tl-card { break-inside: avoid; box-shadow: none !important; }
    .sitsel-tline-dot--active { box-shadow: none !important; }
    .sitsel-tl-horizontal .sitsel-tl-items,
    .sitsel-tl-line-top-carousel .sitsel-tl-items {
        flex-wrap: wrap;
        overflow: visible;
    }
    .sitsel-tl-pagination { display: none; }
}