.activities {
  padding: 80px;
}

.activities__inner {
  --activities-card-h: 413px;
  position: relative;
  /* kart eni kontent eninə (cqw) görə hesablanır, bax .activities__card */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px; /* başlıq sətri → kartlar (istifadəçinin istəyi ilə 32 → 48px, bütün ölçülərdə) */
}

.activities__header {
  display: flex;
  align-items: center;
  gap: 34px;
  width: 100%;
}

.activities__eyebrow {
  flex: 1;
  color: #2386c8;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 20px;
  line-height: 120%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.activities__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.activities__arrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 5px;
  border: 1px solid #0f2942;
  border-radius: 9999px;
  background: none;
  color: #0f2942;
  cursor: pointer;
  flex-shrink: 0;
}

.activities__arrow svg {
  width: 30px;
  height: 30px;
}

.activities__arrow:disabled {
  border-color: #99a1af;
  color: #99a1af;
  cursor: not-allowed;
}

.activities__track {
  display: flex;
  gap: 24px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* sonuncu kart sona çatanda sağ kənara yapışmasın */
  padding-right: var(--page-pad-x);
}

.activities__track::-webkit-scrollbar {
  display: none;
}

/* Figma "Rectangle 23": ekranın sağ kənarında sabit (scroll olmayan) 52px-lik zolaq,
   kart hündürlüyündə, #F5F5F5, progressive blur (bir kənarda 100, digərində 0) —
   100px blur rəngi geniş sahəyə yaydığı üçün kartın üzərində yalnız yüngül ağımtıl duman
   qalır (bərk rəng deyil). Bunu şəffaflığı 0 → 0.35 olan gradientlə təkrarlayırıq. */
.activities__inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52px;
  height: var(--activities-card-h);
  background: linear-gradient(to right, rgba(245, 245, 245, 0), rgba(245, 245, 245, 0.35));
  pointer-events: none;
  z-index: 1;
}

.activities__card {
  position: relative;
  /* Figma: 410.67px = (1280 − 2×24) / 3. Kontent eni = min(1280, inner − pad-x) */
  flex: 0 0 max(300px, calc((min(1280px, 100cqw - var(--page-pad-x)) - 48px) / 3));
  height: var(--activities-card-h);
  border-radius: 24px;
  overflow: hidden;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg);
}

.activities__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0.08deg, rgba(0, 0, 0, 0.8) 17.65%, rgba(0, 0, 0, 0.2) var(--activities-grad-stop), rgba(0, 0, 0, 0) 113.57%);
  transition: --activities-grad-stop 0.5s ease;
}

/* Hover (Figma "State=Hover"): şəkil 413 → 464px böyüyür (scale 1.1235, kənarlar
   overflow:hidden ilə kəsilir) və gradientin 0.2 nöqtəsi 65.61% → 89.13%-ə qalxır
   (qaranlıq hissə yuxarı uzanır). Şəkil zoom olsun deyə ::before kartın fonunu
   (inline background-image) miras alır; gradient dəyişəni @property ilə animasiya olunur. */
@property --activities-grad-stop {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 65.61%;
}

.activities__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.5s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .activities__card:hover::before {
    transform: scale(1.1235);
  }

  .activities__card:hover::after {
    --activities-grad-stop: 89.13%;
  }
}

.activities__card-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activities__card-date {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: #fff;
}

.activities__card-title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 18px;
  line-height: 150%;
  color: #fff;
}

@media (max-width: 960px) {
  .activities {
    padding: 60px 24px 80px;
  }

  .activities__inner {
    --activities-card-h: 320px;
  }
}

/* Figma mobil (390px) dizaynı — başlıq sətri və ox düymələri */
@media (max-width: 600px) {
  .activities {
    padding: 60px 20px;
  }

  .activities__header {
    gap: 40px;
  }

  .activities__eyebrow {
    font-size: 16px;
    line-height: 20px;
    color: #2386c8;
  }

  .activities__nav {
    gap: 16px;
  }

  .activities__arrow {
    width: 32px;
    height: 32px;
    padding: 4px;
    border-color: #0f2942;
    color: #0f2942;
  }

  .activities__arrow svg {
    width: 18px;
    height: 18px;
  }

  .activities__arrow:disabled {
    border-color: #99a1af;
    color: #99a1af;
  }

  /* Kart: 350×~346px (Figma) — ekranda bir kart görünür */
  .activities__card {
    flex: 0 0 100%;
    height: 346px;
  }

  .activities__track {
    padding-right: 0;
  }

  .activities__inner::after {
    display: none;
  }

  .activities__card-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
    gap: 10px;
  }

  .activities__card-date {
    font-size: 14px;
  }

  .activities__card-title {
    font-size: 16px;
  }
}