/* ============================================================
   Swazi24 Trending Stories v1.1 – trending.css
   Two layouts: horizontal (5-col top bar) + vertical (sidebar)
   ============================================================ */

/* ---- CSS Variables / Wrapper ---- */
.s24t-wrapper {
    --s24-red:    #cc0000;
    --s24-dark:   #111111;
    --s24-mid:    #555555;
    --s24-light:  #f5f5f5;
    --s24-border: #e2e2e2;
    --s24-font:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --s24-radius: 4px;

    font-family: var(--s24-font);
    color: var(--s24-dark);
    background: #fff;
    border-top: 3px solid var(--s24-red);
    padding: 14px 20px 16px;
    position: relative;
    box-sizing: border-box;
}

/* ---- Header ---- */
.s24t-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.s24t-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--s24-dark);
    white-space: nowrap;
}

/* ---- Period tabs ---- */
.s24t-tabs {
    display: flex;
    gap: 3px;
}

.s24t-tab {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid var(--s24-border);
    background: #fff;
    color: var(--s24-mid);
    cursor: pointer;
    border-radius: var(--s24-radius);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.5;
}
.s24t-tab:hover  { background: var(--s24-light); border-color: #ccc; }
.s24t-tab.active { background: var(--s24-red); border-color: var(--s24-red); color: #fff; }

/* ---- Loading dots ---- */
.s24t-loading {
    display: none;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    gap: 5px;
    align-items: center;
}
.s24t-wrapper.is-fetching .s24t-loading { display: flex; }
.s24t-list.is-loading { opacity: 0.35; pointer-events: none; transition: opacity 0.2s; }

.s24t-loading span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--s24-red);
    animation: s24bounce 0.8s infinite ease-in-out both;
}
.s24t-loading span:nth-child(2) { animation-delay: 0.15s; }
.s24t-loading span:nth-child(3) { animation-delay: 0.30s; }
@keyframes s24bounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1;   }
}

/* ---- Empty state ---- */
.s24t-empty {
    color: var(--s24-mid);
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
    grid-column: 1 / -1;
}

/* ============================================================
   HORIZONTAL LAYOUT (default – 5-column top bar)
   ============================================================ */
.s24t-layout-horizontal .s24t-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.s24t-item--horizontal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s24t-item--horizontal .s24t-thumb-link {
    display: block;
    overflow: hidden;
    border-radius: var(--s24-radius);
    aspect-ratio: 3 / 2;
    background: var(--s24-light);
}

.s24t-item--horizontal .s24t-thumb {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.s24t-item--horizontal .s24t-thumb-link:hover .s24t-thumb { transform: scale(1.05); }

.s24t-item--horizontal .s24t-rank { font-size: 26px; font-weight: 900; color: #d0d0d0; }

/* ---- Responsive horizontal ---- */
@media (max-width: 1024px) {
    .s24t-layout-horizontal .s24t-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .s24t-layout-horizontal .s24t-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
    .s24t-layout-horizontal .s24t-list { grid-template-columns: 1fr; }
}

/* ============================================================
   VERTICAL LAYOUT (sidebar – stacked cards with full-width image)
   ============================================================ */
.s24t-layout-vertical .s24t-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.s24t-item--vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--s24-border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.s24t-item--vertical:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Full-width image */
.s24t-item--vertical .s24t-thumb-link {
    display: block;
    overflow: hidden;
    border-radius: var(--s24-radius);
    aspect-ratio: 16 / 9;
    background: var(--s24-light);
    margin-bottom: 10px;
}

.s24t-item--vertical .s24t-thumb {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.s24t-item--vertical .s24t-thumb-link:hover .s24t-thumb { transform: scale(1.04); }

.s24t-item--vertical .s24t-thumb--placeholder {
    background: #ddd;
    width: 100%; height: 100%;
}

/* Meta area */
.s24t-item--vertical .s24t-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Rank + title row */
.s24t-item--vertical .s24t-rank-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.s24t-item--vertical .s24t-rank {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #d8d8d8;
    flex-shrink: 0;
    margin-top: 2px;
    min-width: 22px;
}

/* Date */
.s24t-date {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    display: block;
}

/* ============================================================
   SHARED: category pill, title
   ============================================================ */
.s24t-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--s24-red);
    text-decoration: none;
    margin-bottom: 2px;
}
.s24t-cat:hover { text-decoration: underline; }

.s24t-title {
    margin: 0; padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}
.s24t-title a { color: var(--s24-dark); text-decoration: none; }
.s24t-title a:hover { color: var(--s24-red); }