/* ==============================
   VB Announcements Carousel CSS
   ============================== */

/* Theme-ish variables (adjust per site if desired) */
:root {
  --vb-annc-title: var(--e-global-color-secondary, #38B6FF);
  --vb-annc-text:  #333;
  --vb-annc-card-bg: #fff;
  --vb-annc-border: #eee;
  --vb-annc-shadow: rgba(197,33,132,0.18); /* accent 2 tint */
  --vb-annc-gap: 16px;
  --vb-annc-btn-bg: var(--e-global-color-primary, #38B6FF);
  --vb-annc-btn-text: #fff;
}

/* Wrapper + track */
.vb-annc-wrap { position: relative; overflow: hidden; width: 100%; }
.vb-annc-track {
  display: flex;
  gap: var(--vb-annc-gap);
  transition: transform .4s ease;
}

/* Card sizing — uniform heights */
.vb-annc-card {
  flex: 0 0 280px;            /* desktop width */
  max-width: 280px;
  background: var(--vb-annc-card-bg);
  border: 1px solid var(--vb-annc-border);
  border-radius: 12px;
  padding: 16px 16px 18px;
  box-shadow: 0 10px 20px var(--vb-annc-shadow);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 230px;
}

.vb-annc-title {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--vb-annc-title);
}

.vb-annc-date {
  font-size: .9rem;
  color: #6b7280;  /* subtle gray */
  margin: 0 0 8px;
}

.vb-annc-body {
  color: var(--vb-annc-text);
  font-size: .95rem;
}

/* Optional button (only rendered if link provided) */
.vb-annc-btn {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--vb-annc-btn-bg);
  color: var(--vb-annc-btn-text);
  text-decoration: none;
  font-size: .9rem;
}

/* Responsive sizing */
@media (max-width: 1024px) {
  .vb-annc-card { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 640px) {
  .vb-annc-card { flex: 0 0 100%; max-width: 100%; }
}

/* No arrow buttons rendered — nothing to hide */