/* SZMG activiteiten-widget — "activiteiten binnenkort"-carousel. Gescoped onder .szmg-act,
   themebaar via --szmg-*-variabelen (standaard = SZMG navy/teal). Look = de SZMG-demo. */

.szmg-act {
  --szmg-primary: #1B2D78;
  --szmg-accent: #00B4CC;
  --szmg-accent-dk: #0097AD;
  --szmg-line: #e8eaf0;
  --szmg-text: #475569;
  --szmg-text-sm: #64748b;
  --szmg-font: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: block;
  font-family: var(--szmg-font);
  box-sizing: border-box;
}
.szmg-act *, .szmg-act *::before, .szmg-act *::after { box-sizing: border-box; }

.szmg-act-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.szmg-act-h-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--szmg-primary); }
.szmg-act-h-title svg { stroke: var(--szmg-primary); flex-shrink: 0; }
.szmg-act-more { border: none; background: none; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--szmg-accent); }
.szmg-act-more:hover { color: var(--szmg-accent-dk); }

.szmg-act-wrap { position: relative; }
.szmg-act-carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
.szmg-act-carousel::-webkit-scrollbar { display: none; }

.szmg-act-card { flex: 0 0 calc(25% - 10.5px); min-width: 200px; padding: 0; background: #fff; border: 1.5px solid var(--szmg-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(16,24,40,.08); scroll-snap-align: start; cursor: pointer; text-align: left; font-family: inherit; transition: transform .18s, box-shadow .18s; }
.szmg-act-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(16,24,40,.13); }
.szmg-act-img { position: relative; height: 150px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.szmg-act-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.szmg-act-grad { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.szmg-act-ic { font-size: 3rem; opacity: .35; }
.szmg-act-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 6px 9px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); border-radius: 8px; text-align: center; color: #fff; line-height: 1.1; }
.szmg-act-day { font-size: 1.4rem; font-weight: 800; }
.szmg-act-mon { font-size: .62rem; font-weight: 700; text-transform: uppercase; opacity: .9; }
.szmg-act-time { font-size: .7rem; font-weight: 600; opacity: .85; margin-top: 2px; }
.szmg-act-body { padding: 12px 13px 11px; }
.szmg-act-title { margin-bottom: 5px; font-size: .85rem; font-weight: 700; color: var(--szmg-primary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.szmg-act-desc { margin-bottom: 9px; font-size: .74rem; color: var(--szmg-text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.szmg-act-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.szmg-act-loc { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: .71rem; color: var(--szmg-text-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.szmg-act-fav { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--szmg-line); border-radius: 50%; background: none; cursor: pointer; font-size: .8rem; color: var(--szmg-text-sm); transition: .15s; }
.szmg-act-fav:hover, .szmg-act-fav.on { border-color: #DC2626; color: #DC2626; }

.szmg-act-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--szmg-line); border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px rgba(16,24,40,.1); z-index: 2; font-size: 1rem; color: var(--szmg-primary); transition: .15s; }
.szmg-act-nav:hover { border-color: var(--szmg-primary); box-shadow: 0 6px 16px rgba(16,24,40,.14); }
.szmg-act-nav.prev { left: -17px; }
.szmg-act-nav.next { right: -17px; }

.szmg-act-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.szmg-act-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--szmg-line); cursor: pointer; transition: background .2s; }
.szmg-act-dot.active { background: var(--szmg-primary); }

@media (max-width: 900px) { .szmg-act-card { flex-basis: calc(50% - 7px); } .szmg-act-nav { display: none; } }
@media (max-width: 560px) { .szmg-act-card { flex-basis: 82%; } }