/* =============================================================================
   Modern Carousel Slider — Public CSS
   Version: 1.0.3 | Build: 2025-04-12
   Author: Vishnu | www.wrvishnu.com | info@wrvishnu.com
   ============================================================================= */

:root {
  --mcs-radius:       10px;
  --mcs-shadow:       0 2px 12px rgba(0,0,0,.08);
  --mcs-shadow-hover: 0 6px 24px rgba(0,0,0,.14);
  --mcs-transition:   all .22s cubic-bezier(.4,0,.2,1);
  --mcs-arrow-bg:     rgba(0,0,0,.55);
  --mcs-arrow-size:   38px;
  --mcs-dot-active:   #2271b1;
  --mcs-gap-small:    12px;
  --mcs-gap-medium:   20px;
  --mcs-gap-large:    32px;
  --mcs-cta-bg:       #2271b1;
  --mcs-cta-color:    #fff;
  --mcs-cta-radius:   6px;
}

/* ── Grid ──────────────────────────────────────────────────────────────────── */
.mcs-grid {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--mcs-gap-medium);
  width:      100%;
  box-sizing: border-box;
}
.mcs-gap-small { gap: var(--mcs-gap-small); }
.mcs-gap-large { gap: var(--mcs-gap-large); }

/* ── Widget card ───────────────────────────────────────────────────────────── */
/*
 * overflow:visible  — so the rounded info bar below the stage is never clipped.
 * The STAGE itself clips images with overflow:hidden.
 * The border/shadow/radius wraps both stage + info bar via a transparent wrapper approach:
 * we apply border and shadow to the widget, and use border-radius on
 * stage-top and info-bar-bottom corners only.
 */
.mcs-widget {
  display:        flex;
  flex-direction: column;
  overflow:       visible;
  background:     transparent;
  border-radius:  var(--mcs-radius);
  box-shadow:     var(--mcs-shadow);
  transition:     var(--mcs-transition);
  flex:           1 1 300px;
  max-width:      100%;
  box-sizing:     border-box;
  /* Outer border drawn via inner elements to avoid clipping info bar */
}
.mcs-widget:hover { box-shadow: var(--mcs-shadow-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .mcs-widget:hover { transform: none; } }

/* Card size presets — set max-width per card */
.mcs-widget-sm   { max-width: 280px; }
.mcs-widget-md   { max-width: 380px; }
.mcs-widget-lg   { max-width: 520px; }
.mcs-widget-xl   { max-width: 720px; }
.mcs-widget-full { max-width: 100%;  }

.mcs-cols-1 .mcs-widget { margin-left: auto; margin-right: auto; }

/* ── Above-image text ──────────────────────────────────────────────────────── */
.mcs-title {
  font-size:     15px;
  font-weight:   700;
  color:         #1a1a1a;
  padding:       12px 14px 8px;
  margin:        0;
  line-height:   1.3;
  background:    #fff;
  border:        1px solid #e8e8e8;
  border-bottom: none;
  border-radius: var(--mcs-radius) var(--mcs-radius) 0 0;
}
/* When title is the first child before stage */
.mcs-widget .mcs-title + .mcs-stage { border-top-left-radius: 0; border-top-right-radius: 0; }

.mcs-cats { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 14px; background: #fff; border: 1px solid #e8e8e8; border-top: none; border-bottom: none; }
.mcs-cat  { display: inline-block; padding: 2px 8px; border-radius: 20px; background: #e8f0f8; color: #135e96; font-size: 11px; font-weight: 600; }
.mcs-desc { font-size: 12px; color: #666; padding: 4px 14px 8px; margin: 0; line-height: 1.5; background: #fff; border: 1px solid #e8e8e8; border-top: none; border-bottom: none; }

/* ── Stage (image area) ────────────────────────────────────────────────────── */
/*
 * Key fix: stage uses aspect-ratio for height, overflow:hidden for images.
 * Track is display:flex with width:100% and height:100% — this works because
 * the stage HAS an explicit height (from aspect-ratio).
 * DO NOT use position:absolute on track — that removes the stage from flow.
 */
.mcs-stage {
  position:      relative;
  background:    #1a1a1a;
  overflow:      hidden;        /* clips images only */
  outline:       none;
  cursor:        grab;
  display:       block;
  width:         100%;
  flex-shrink:   0;
  /* Border on stage sides */
  border:        1px solid #e8e8e8;
  border-top:    none;
  border-bottom: none;
}
.mcs-stage:active       { cursor: grabbing; }
.mcs-stage:focus-visible { outline: 3px solid #2271b1; outline-offset: 2px; }

/* When stage is the FIRST element (no title above) — round top corners */
.mcs-widget > .mcs-stage:first-child { border-top: 1px solid #e8e8e8; border-radius: var(--mcs-radius) var(--mcs-radius) 0 0; }

/* When stage is followed by dots but NO info bar — round bottom */
.mcs-widget > .mcs-stage:last-child  { border-bottom: 1px solid #e8e8e8; border-radius: 0 0 var(--mcs-radius) var(--mcs-radius); }

/* Aspect ratios — define stage HEIGHT via aspect-ratio */
.mcs-ratio-16-9 { aspect-ratio: 16 / 9; }
.mcs-ratio-4-3  { aspect-ratio: 4  / 3; }
.mcs-ratio-4-5  { aspect-ratio: 4  / 5; }
.mcs-ratio-1-1  { aspect-ratio: 1  / 1; }
.mcs-ratio-3-2  { aspect-ratio: 3  / 2; }
.mcs-ratio-21-9 { aspect-ratio: 21 / 9; }

/* Height presets — override aspect-ratio with a fixed height */
.mcs-height-xs  { aspect-ratio: unset; height: 180px; }
.mcs-height-sm  { aspect-ratio: unset; height: 260px; }
.mcs-height-md  { aspect-ratio: unset; height: 360px; }
.mcs-height-lg  { aspect-ratio: unset; height: 480px; }
.mcs-height-xl  { aspect-ratio: unset; height: 600px; }

/* ── Track & slides ────────────────────────────────────────────────────────── */
.mcs-track {
  display:      flex;
  height:       100%;   /* fills stage height set by aspect-ratio or height preset */
  will-change:  transform;
  /* NO position:absolute — track stays in flow so stage retains its height */
}
.mcs-slide {
  flex-shrink:  0;
  width:        100%;
  height:       100%;
  position:     relative;
  overflow:     hidden;
}
.mcs-slide img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  max-width:       none !important;   /* override theme img max-width */
  max-height:      none !important;
}

/* ── Arrows ────────────────────────────────────────────────────────────────── */
.mcs-arrow {
  position:   absolute; top: 50%; transform: translateY(-50%);
  width:      var(--mcs-arrow-size); height: var(--mcs-arrow-size);
  border-radius: 50%; background: var(--mcs-arrow-bg);
  border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
  transition: background .15s, opacity .15s;
  opacity: 0; padding: 0;
  box-shadow: none !important;
  line-height: 1 !important;
}
.mcs-stage:hover .mcs-arrow { opacity: 1; }
.mcs-arrow:hover             { background: rgba(0,0,0,.82); }
.mcs-arrow:focus-visible     { opacity: 1; outline: 3px solid #fff; outline-offset: 2px; }
.mcs-arrow svg               { width: 18px; height: 18px; pointer-events: none; }
.mcs-arrow-prev              { left: 8px; }
.mcs-arrow-next              { right: 8px; }

/* ── Dots ──────────────────────────────────────────────────────────────────── */
.mcs-dots {
  display: flex; justify-content: center; gap: 6px;
  padding: 7px 0 5px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-bottom: none;
}
.mcs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d1d5db; border: none; cursor: pointer;
  padding: 0; transition: all .2s; flex-shrink: 0;
  box-shadow: none !important;
}
.mcs-dot.is-active     { background: var(--mcs-dot-active); width: 20px; border-radius: 4px; }
.mcs-dot:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }

/* ── Info bar ──────────────────────────────────────────────────────────────── */
/* title LEFT | CTA button/link RIGHT — always visible below the slider */
.mcs-info-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 14px 12px;
  background:      #fff;
  border:          1px solid #e8e8e8;
  border-top:      none;
  border-radius:   0 0 var(--mcs-radius) var(--mcs-radius);
  min-height:      46px;
  box-sizing:      border-box;
}
/* When there are NO dots, info bar sits directly below stage */
.mcs-bar-title {
  font-size:     13px;
  font-weight:   600;
  color:         #1a1a1a;
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  margin:        0;
}
.mcs-bar-cta-wrap { flex-shrink: 0; }

.mcs-bar-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  text-decoration: none;
  white-space:     nowrap;
  font-size:       13px;
  font-weight:     600;
  line-height:     1;
  transition:      all .18s;
  cursor:          pointer;
}
.mcs-bar-cta:focus-visible { outline: 2px solid #2271b1; outline-offset: 3px; }

.mcs-bar-cta-button {
  padding:       8px 18px;
  border-radius: var(--mcs-cta-radius);
  background:    var(--mcs-cta-bg);
  color:         var(--mcs-cta-color);
  border:        2px solid transparent;
}
.mcs-bar-cta-button:hover { background: #135e96; color: #fff; }

.mcs-bar-cta-link {
  color:          #2271b1;
  padding-bottom: 2px;
  border-bottom:  2px solid rgba(34,113,177,.3);
}
.mcs-bar-cta-link:hover { border-bottom-color: #2271b1; color: #135e96; }
.mcs-bar-cta-link svg   { width: 14px; height: 14px; }

/* ── Drag & motion ─────────────────────────────────────────────────────────── */
.mcs-track.is-dragging { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mcs-widget:hover      { transform: none; }
  .mcs-track             { transition: none !important; }
  .mcs-bar-cta-button:hover { transform: none; box-shadow: none; }
}