/* ================================================
   Post Scroller Banner — psb.css
   ================================================ */

/* ---- Banner Container ---- */
.psb-banner {
    position: relative;
    display: block;
    overflow: hidden;
    width: var(--psb-width, 100%);
    max-width: 100%;
    height: var(--psb-height, 60px);
    background: var(--psb-bg, #222);
    color: var(--psb-color, #fff);
    font-size: var(--psb-font-size, 16px);
    box-sizing: border-box;
    line-height: 1;
}

/* ==============================================
   TICKER MODE
   ============================================== */

.psb-ticker-track {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.psb-ticker-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: psb-ticker-left; /* default; JS/class overrides */
}

.psb-ticker-item {
    display: inline-flex;
    align-items: center;
    height: var(--psb-height, 60px);
    flex-shrink: 0;
}

/* Keyframes — each travels exactly 50% (one copy of the duplicated content) */
@keyframes psb-ticker-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes psb-ticker-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }
@keyframes psb-ticker-up    { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes psb-ticker-down  { from { transform: translateY(-50%); } to { transform: translateY(0);    } }

.psb-transition-ticker.psb-dir-left  .psb-ticker-inner { animation-name: psb-ticker-left;  }
.psb-transition-ticker.psb-dir-right .psb-ticker-inner { animation-name: psb-ticker-right; }
.psb-transition-ticker.psb-dir-up    .psb-ticker-inner { animation-name: psb-ticker-up;    flex-direction: column; }
.psb-transition-ticker.psb-dir-down  .psb-ticker-inner { animation-name: psb-ticker-down;  flex-direction: column; }

.psb-banner[data-pause="1"].psb-transition-ticker:hover .psb-ticker-inner {
    animation-play-state: paused;
}

/* ==============================================
   SLIDE / FADE MODE
   ============================================== */

.psb-slider {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.psb-slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
    box-sizing: border-box;
}

.psb-slide.psb-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0) !important;
}

/* Off-screen starting positions */
.psb-transition-slide                    .psb-slide { transform: translateX(100%);  }
.psb-transition-slide.psb-dir-right      .psb-slide { transform: translateX(-100%); }
.psb-transition-slide.psb-dir-up         .psb-slide { transform: translateY(100%);  }
.psb-transition-slide.psb-dir-down       .psb-slide { transform: translateY(-100%); }
.psb-transition-fade                     .psb-slide { transform: none; }

/* Nav buttons */
.psb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.35);
    color: #fff;
    border: none;
    padding: 4px 10px;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    z-index: 10;
    transition: background .2s;
}
.psb-nav:hover { background: rgba(0,0,0,.6); }
.psb-prev { left: 6px; }
.psb-next { right: 6px; }

/* ==============================================
   SHARED ITEM STYLES
   ============================================== */

.psb-item-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--psb-color, #fff);
    text-decoration: none;
    white-space: nowrap;
    padding: 0 16px;
    height: var(--psb-height, 60px);
    box-sizing: border-box;
    flex-shrink: 0;
}

.psb-item-link:hover .psb-title {
    text-decoration: underline;
}

.psb-item-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Thumbnail */
.psb-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width:  calc(var(--psb-height, 60px) - 20px);
    height: calc(var(--psb-height, 60px) - 20px);
    min-width: 20px; min-height: 20px;
    max-width: 44px; max-height: 44px;
    border-radius: 4px;
    overflow: hidden;
}
.psb-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Emoji icon */
.psb-thumb-emoji {
    font-size: clamp(14px, calc(var(--psb-height, 60px) * 0.38), 26px);
    overflow: visible;
}

/* Custom image icon */
.psb-thumb-custom-img img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 4px;
}

/* Dashicon */
.psb-thumb-dashicon {
    font-size: clamp(14px, calc(var(--psb-height, 60px) * 0.38), 26px);
    color: var(--psb-color, #fff);
}

/* Text pieces */
.psb-cat-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
}
.psb-title   { font-weight: 600; white-space: nowrap; }
.psb-date,
.psb-author  { opacity: .75; font-size: .85em; white-space: nowrap; flex-shrink: 0; }
.psb-excerpt { opacity: .7;  font-size: .85em; font-style: italic; white-space: nowrap; flex-shrink: 0; }
.psb-sep     { margin: 0 12px; opacity: .4; flex-shrink: 0; }

/* ==============================================
   Responsive
   ============================================== */
@media (max-width: 600px) {
    .psb-excerpt { display: none; }
    .psb-nav     { display: none; }
}