/* ============================================================
   Causes Carousel — Theme-inheriting CSS
   Used by [charity_causes_carousel]
   ============================================================ */

.cdc-wrap {
  --cdc-primary:   #1a3a54;
  --cdc-accent:    #e8a020;
  --cdc-border:    color-mix(in srgb, currentColor 12%, transparent);
  --cdc-bg:        color-mix(in srgb, currentColor 4%, transparent);
  --cdc-card-bg:   Canvas;
  --cdc-muted:     color-mix(in srgb, currentColor 55%, transparent);
  --cdc-radius:    14px;
  --cdc-gutter:    .7em;
  --cdc-base:      3;              /* set inline per shortcode 'visible' attribute */
  --cdc-visible:   var(--cdc-base);
  font-family: inherit;
  color: inherit;
  font-size: clamp(14px, 1em, 18px);
  position: relative;
  width: 100%;
  max-width: 78em;                 /* wide enough to comfortably fit multiple cards */
  margin: 0 auto;
}
.cdc-wrap * { box-sizing: border-box; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .cdc-wrap { --cdc-border: rgba(0,0,0,.12); --cdc-bg: rgba(0,0,0,.03); --cdc-muted: rgba(0,0,0,.55); }
}

/* Scale the visible count down on smaller screens, capped by whatever the
   shortcode requested (--cdc-base) so 'visible=2' never grows back to 3. */
@media (max-width: 900px) {
  .cdc-wrap { --cdc-visible: min(2, var(--cdc-base)); }
}
@media (max-width: 640px) {
  .cdc-wrap { --cdc-visible: 1; }
}

.cdc-empty {
  text-align: center;
  padding: 2em;
  color: var(--cdc-muted);
  font-size: .95em;
}

/* ── Viewport / track (N slides visible at once) ────────── */
.cdc-viewport-outer {
  position: relative;
}
.cdc-viewport {
  overflow: hidden;
  border-radius: var(--cdc-radius);
}
.cdc-track {
  display: flex;
  margin: 0 calc(var(--cdc-gutter) * -1);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.cdc-slide {
  flex: 0 0 calc(100% / var(--cdc-visible));
  min-width: 0;
  padding: 0 var(--cdc-gutter);
}

/* ── Card ────────────────────────────────────────────────── */
.cdc-card {
  background: var(--cdc-card-bg);
  border: 1px solid var(--cdc-border);
  border-radius: var(--cdc-radius);
  box-shadow: 0 4px 20px rgba(26,58,84,.10);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.cdc-thumb-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cdc-bg);
}
.cdc-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cdc-body {
  padding: 1.5em 1.75em 1.75em;
}
.cdc-title {
  font-size: 1.3em;
  font-weight: 800;
  color: var(--cdc-primary);
  margin: 0 0 .5em;
  font-family: inherit;
}
.cdc-desc {
  font-size: .95em;
  line-height: 1.6;
  color: inherit;
  opacity: .85;
  margin: 0 0 1.1em;
}

/* ── Progress ────────────────────────────────────────────── */
.cdc-progress-wrap { margin-bottom: 1.2em; }
.cdc-progress-bar {
  height: .5em;
  background: var(--cdc-border);
  border-radius: 99px;
  overflow: hidden;
}
.cdc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cdc-primary), var(--cdc-accent));
  border-radius: 99px;
  transition: width .6s ease;
}
.cdc-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .78em;
  color: var(--cdc-muted);
  margin-top: .4em;
}

/* ── Actions ─────────────────────────────────────────────── */
.cdc-actions {
  display: flex;
  gap: .75em;
  flex-wrap: wrap;
}
.cdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7em 1.4em;
  border-radius: 8px;
  font-size: .92em;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: all .2s ease;
  font-family: inherit;
}
.cdc-btn-primary {
  background: linear-gradient(135deg, var(--cdc-primary), #235070);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,58,84,.28);
}
.cdc-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.cdc-btn-outline {
  background: transparent;
  border-color: var(--cdc-border);
  color: inherit;
}
.cdc-btn-outline:hover { border-color: var(--cdc-primary); color: var(--cdc-primary); }

/* ── Nav arrows (centered on .cdc-viewport-outer, unaffected by dots below) ── */
.cdc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: var(--cdc-card-bg);
  border: 1px solid var(--cdc-border);
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--cdc-primary);
  transition: all .18s;
  z-index: 2;
}
.cdc-nav svg { width: 1.1em; height: 1.1em; }
.cdc-nav:hover { background: var(--cdc-primary); color: #fff; border-color: var(--cdc-primary); }
.cdc-nav-prev { left: -1.3em; }
.cdc-nav-next { right: -1.3em; }

/* ── Dots ────────────────────────────────────────────────── */
.cdc-dots {
  display: flex;
  justify-content: center;
  gap: .5em;
  margin-top: 1.1em;
}
.cdc-dot {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--cdc-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .2s;
}
.cdc-dot.active {
  background: var(--cdc-primary);
  width: 1.6em;
  border-radius: 99px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .cdc-body { padding: 1.2em 1.3em 1.4em; }
  .cdc-title { font-size: 1.1em; }
  .cdc-desc { font-size: .88em; }
  .cdc-nav { width: 2.2em; height: 2.2em; }
  .cdc-nav-prev { left: .5em; }
  .cdc-nav-next { right: .5em; }
  .cdc-btn { padding: .6em 1.1em; font-size: .86em; }
}