/* ============================================================
   components.css — Дахин ашиглагдах component стиль
   Activity Carousel — index.html-д хэрэглэнэ
   ============================================================ */

/* ============================================================
   ACTIVITY CAROUSEL
   ============================================================ */
.scout-activities { margin-bottom: var(--space-20); }

.act-carousel-wrapper {
  position: relative;
  height: 430px;
  overflow: hidden;
  padding-top: 24px;
}
.act-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.act-card {
  width: 240px; height: 360px;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid rgba(29,67,130,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}
.act-card--active .act-body { background: #0d1f3c; }
.act-card--active .act-name { color: var(--color-accent); }
.act-card--active .act-desc { color: rgba(255,255,255,0.7); }

.act-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}
.act-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,31,60,0.6) 0%, rgba(13,31,60,0.1) 40%, transparent 65%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Carousel card background images */
.act-card:nth-child(1) .act-img { background-image: url('/img/home/carousel/heer.jpg'); background-position: center top; }
.act-card:nth-child(2) .act-img { background-image: url('/img/home/carousel/oluulaa_alhaj_bna.jpg'); }
.act-card:nth-child(3) .act-img { background-image: url('/img/home/carousel/shagnal.jpg'); }
.act-card:nth-child(4) .act-img { background-image: url('/img/home/carousel/temdegt.jpg'); }
.act-card:nth-child(5) .act-img { background-image: url('/img/home/carousel/buh.jpg'); }
.act-card:nth-child(6) .act-img { background-image: url('/img/home/carousel/gadaad_scout.jpg'); }

.act-icon {
  position: absolute; bottom: 12px; left: 12px;
  width: 38px; height: 38px;
  background: var(--color-accent);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  z-index: 3; flex-shrink: 0;
}
.act-icon svg { width: 17px; height: 17px; stroke: #0d1f3c; fill: none; }

.act-body {
  padding: var(--space-4) var(--space-5);
  background: #ffffff; flex: 1;
}
.act-name {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: #0d1f3c;
  margin-bottom: var(--space-2); line-height: 1.3;
}
.act-desc {
  font-size: 0.78rem; font-weight: var(--weight-medium);
  line-height: 1.55; color: rgba(17,46,80,0.7);
}

.act-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); position: relative; z-index: 20; }
.act-dot  { width: 8px; height: 8px; border-radius: var(--radius-full); background: rgba(29,67,130,0.2); transition: background var(--transition-slow), transform var(--transition-slow); }
.act-dot--active { background: var(--color-primary); transform: scale(1.3); }