/* ================================
   GRID SYSTEM
================================ */
.ts-list-items.grid-mode {
    display: grid;
    gap: 20px;
}

/* fallback */
.ts-list-items:not(.grid-mode) {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ts-list-items.grid-mode {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* important */
}

/* ================================
   ITEM
================================ */
.ts-list-container{position:relative;}
.ts-list-item {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;  
    max-width: 100%;
	overflow: visible;
}
.ts-list-item-divider {
    width: 100%;
	height:2px;
	background:#f4f4f4;
}
.ts-list-item h4 {margin-bottom:0; font-size:16px;}
.ts-list-item-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.ts-list-container .ts-list-item-divider:last-child
{
display:none;
}
/* ================================
   INNER
================================ */
.ts-list-item-inner {
    display: flex;
align-items: center;
    gap: 15px;
    width: 100%;
    position: relative;
    z-index: 3;
}

/* ================================
   HORIZONTAL
================================ */
.ts-list-item.layout-horizontal .ts-list-item-inner {
    flex-direction: row;
    align-items: center;
}

/* ================================
   VERTICAL
================================ */
.ts-list-item.layout-vertical .ts-list-item-inner {
    flex-direction: row;
    align-items: center;
}
/* =====================================
   FORCE LIST (VERTICAL MODE)
===================================== */
.ts-list.layout-vertical {
    display: flex !important;
    flex-direction: column;
}

/* kill grid columns */
.ts-list.layout-vertical {
    grid-template-columns: none !important;
}
/* ================================
   MOBILE FORCE VERTICAL
================================ */
@media (max-width: 767px) {
    .ts-list.mobile-vertical .ts-list-item .ts-list-item-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

/* ================================
   MEDIA
================================ */
.elementor-editor-active .ts-list-item-media {
    will-change: width, height;
    transform: translateZ(0);
}
.ts-list-item-media
 {
	align-items: center;
    justify-content: center;
    display: flex;
	transform: translate(var(--ts-item-x, 0px),var(--ts-item-y, 0px));
}
.ts-list-item-icon-inner {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
	align-items: center;
    justify-content: center;
    display: flex;
}
.ts-list-item.media-left .ts-list-item-inner {
    gap: var(--ts-gap);
}

.ts-list-item.media-right .ts-list-item-inner {
    gap: var(--ts-gap);
}
.ts-list-item-badge {    white-space: nowrap;}
/* ================================
   IMAGE FIX
================================ */
.ts-list-item-media {	
	align-items: center;
	transition: transform 0.2s ease-in-out;
}

.ts-list-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ================================
   CONTENT
================================ */
.ts-list-item-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* ================================
    BADGE SYSTEM
================================ */

/* INLINE (default) */
.ts-list.badge-inline .ts-badge {
    margin-left: auto;
}

/* ABSOLUTE PILL (🔥 your UI) */
.ts-list.badge-absolute .ts-list-item {
    padding-right: 100px; /* space for badge */
}

.ts-list.badge-absolute .ts-badge {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

/* vertical layout badge */
.ts-list.badge-absolute .layout-vertical .ts-badge {
    top: 20px;
    transform: none;
}

/* ================================
   ARROW
================================ */
.ts-arrow {
    display: flex;
    align-items: center;
    transition: 0.3s;
}

/* right */
.ts-list-item.arrow-right .ts-arrow {
    margin-left: 10px;
}

/* left */
.ts-list-item.arrow-left .ts-arrow {
    order: -1;
    margin-right: auto;
}

/* hover */
.ts-list-item:hover .ts-arrow {
    transform: translateX(6px);
}

.ts-list-item.arrow-left:hover .ts-arrow {
    transform: translateX(-6px);
}

/* ================================
   CARD STYLE (optional polish)
================================ */
.ts-list.grid-mode .ts-list-item {
    padding: 20px;
    border-radius: 12px;
    background: #fff;
}

/* ================================
   MEDIA POSITION (FIXED)
================================ */
.ts-list-item.layout-vertical.media-right .ts-list-item-inner,
.ts-list-item.layout-horizontal.media-right .ts-list-item-inner
 {
flex-direction: row-reverse;
}
.ts-list-item.layout-vertical.media-right .ts-list-item-inner .ts-list-item-content,
.ts-list-item.layout-horizontal.media-right .ts-list-item-inner .ts-list-item-content {
    text-align: right;
}
/* ================================
   VERTICAL ALIGNMENT (ITEM LEVEL)
================================ */

/* works for horizontal layout */
.ts-list-item.layout-horizontal.v-align-flex-start .ts-list-item-inner {
    align-items: flex-start;
}

.ts-list-item.layout-horizontal.v-align-center .ts-list-item-inner {
    align-items: center;
}

.ts-list-item.layout-horizontal.v-align-flex-end .ts-list-item-inner {
    align-items: flex-end;
}
/* ================================
   KEEP FLEX DIRECTION CLEAN
================================ */

/* horizontal layout */
.ts-list-item.layout-horizontal .ts-list-item-inner {
    display: flex;
    flex-direction: row; /* NEVER change this */
    align-items: center;
}

/* vertical layout */
.ts-list-item.layout-vertical .ts-list-item-inner {
    display: flex;
    flex-direction: row;
}

.ts-list-item.media-left .ts-list-item-media {
    margin-right: var(--media-gap);
}

.ts-list-item.media-right .ts-list-item-media {
    margin-left: var(--media-gap);
}
/* GRID MODE */
.ts-list-items.grid-mode.is-equal-height {
    display: grid;
}

/* make items stretch */
.ts-list-items.is-equal-height .ts-list-item {
    height: 100%;
    display: flex;
}

/* inner should fill */
.ts-list-items.is-equal-height .ts-list-item-inner {
    flex: 1;
    display: flex;
}