/* ==========================================================================
   Viva Scroll v1.1 – Frontend Styles  |  AADISOFT
   ========================================================================== */

.viva-scroll-wrap {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  line-height: 1.5;
  background: var(--vs-bg, transparent);
}

.viva-scroll-wrap * { box-sizing: border-box; }

/* ── Vertical mode ─────────────────────────────────────── */
.viva-scroll-wrap.vs-mode-vertical {
  height: var(--vs-height, 300px);
}

.viva-scroll-wrap.vs-mode-vertical .vs-track {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.viva-scroll-wrap.vs-mode-vertical .vs-track-inner {
  display: flex;
  flex-direction: column;
  gap: var(--vs-gap, 10px);
  width: 100%;
  flex-shrink: 0;
}

.viva-scroll-wrap.vs-mode-vertical .vs-track-inner-clone {
  margin-top: var(--vs-gap, 10px);
}

/* ── Horizontal mode ───────────────────────────────────── */
.viva-scroll-wrap.vs-mode-horizontal { width: 100%; }

.viva-scroll-wrap.vs-mode-horizontal .vs-track {
  display: flex;
  width: max-content;
}

.viva-scroll-wrap.vs-mode-horizontal .vs-track-inner {
  display: flex;
  flex-direction: row;
  gap: var(--vs-gap, 10px);
  flex-shrink: 0;
  padding-right: var(--vs-gap, 10px);
}

.viva-scroll-wrap.vs-mode-horizontal .vs-item {
  width: var(--vs-item-width, 250px);
  flex-shrink: 0;
}

/* ── Scroll animations ─────────────────────────────────── */
.vs-anim-vertical-up   { animation: vs-scroll-up   var(--vs-speed, 30s) linear infinite; }
.vs-anim-vertical-down { animation: vs-scroll-down var(--vs-speed, 30s) linear infinite; }
.vs-anim-horizontal-left  { animation: vs-scroll-left  var(--vs-speed, 30s) linear infinite; }
.vs-anim-horizontal-right { animation: vs-scroll-right var(--vs-speed, 30s) linear infinite; }

@keyframes vs-scroll-up    { 0% { transform: translateY(0); }    100% { transform: translateY(-50%); } }
@keyframes vs-scroll-down  { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); }    }
@keyframes vs-scroll-left  { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes vs-scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); }    }

/* ── Pause on hover / click ────────────────────────────── */
.viva-scroll-wrap.vs-pause-hover:hover .vs-track,
.viva-scroll-wrap .vs-track.vs-paused {
  animation-play-state: paused;
}

/* ── Items ─────────────────────────────────────────────── */
.vs-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--vs-pad-top,10px) var(--vs-pad-right,10px)
           var(--vs-pad-bottom,10px) var(--vs-pad-left,10px);
}

.viva-scroll-wrap.vs-mode-vertical .vs-item {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

/* ── Image ─────────────────────────────────────────────── */
.vs-item-image { flex-shrink: 0; }

.vs-item-image img,
.vs-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  max-width: 120px;
  object-fit: cover;
}

.viva-scroll-wrap.vs-mode-horizontal .vs-thumb { max-width: 100%; }

/* ── Text container ────────────────────────────────────── */
.vs-item-text { flex: 1; min-width: 0; overflow: hidden; }

/* ── Title typography ──────────────────────────────────── */
.vs-item-title {
  font-family: var(--vs-title-font-family, inherit);
  font-size:   var(--vs-title-font-size, 16px);
  font-weight: var(--vs-title-font-weight, 600);
  color:       var(--vs-title-color, #222);
  font-style:  var(--vs-title-style, normal);
  margin-bottom: 3px;
  overflow-wrap: break-word;
}

.vs-item-title a {
  color: inherit;
  text-decoration: none;
  transition: opacity .15s;
}

.vs-item-title a:hover { text-decoration: underline; opacity: .85; }

/* ── Date typography ───────────────────────────────────── */
.vs-item-date {
  font-family: var(--vs-date-font-family, inherit);
  font-size:   var(--vs-date-font-size, 12px);
  font-weight: var(--vs-date-font-weight, 400);
  color:       var(--vs-date-color, #777);
  font-style:  var(--vs-date-style, normal);
  margin-bottom: 3px;
}

/* ── Content / excerpt typography ─────────────────────── */
.vs-item-excerpt,
.vs-item-content {
  font-family: var(--vs-content-font-family, inherit);
  font-size:   var(--vs-content-font-size, 14px);
  font-weight: var(--vs-content-font-weight, 400);
  color:       var(--vs-content-color, #444);
  font-style:  var(--vs-content-style, normal);
  overflow-wrap: break-word;
}

.vs-item-content img { max-width: 100%; height: auto; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .viva-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .viva-scroll-wrap.vs-mode-horizontal .vs-item {
    width: 72vw !important;
    max-width: 300px;
  }

  .viva-scroll-wrap.vs-mode-vertical {
    height: auto;
    max-height: 85vh;
  }

  .vs-item-image img,
  .vs-thumb { max-width: 80px; }
}

@media (max-width: 480px) {
  .vs-item-image img,
  .vs-thumb { max-width: 64px; }
}

/* ── Accessibility: reduced motion ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vs-track { animation: none !important; }
}