/* ===== v3 SEASONS — "Путь сезона" ===== */

.seasons {
  position: relative;
  padding-top: clamp(68px, 10vh, 119px);
  padding-bottom: clamp(68px, 10vh, 119px);
  text-align: center;
}

/* gradient blobs — orange top-right + purple bottom-left, 100vw */
.seasons::before {
  content: '';
  position: absolute;
  top: 0; bottom: 50%;
  left: 50%; transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background: radial-gradient(660px 480px at 85% 35%, rgba(255, 122, 69, 0.22), transparent 65%);
  pointer-events: none;
}
.seasons::after {
  content: '';
  position: absolute;
  top: 45%; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  background: radial-gradient(620px 460px at 12% 70%, rgba(155, 95, 223, 0.22), transparent 65%);
  pointer-events: none;
}

/* ===== HEAD ===== */
.seasons__head { max-width: 697px; margin: 0 auto; }

.seasons__chips {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.seasons__chips .chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding-left: 12px;
}
.seasons__chips .chip svg { flex-shrink: 0; }

.seasons__title { margin-bottom: 20px; }
.seasons__lead { margin: 0 auto 37px; max-width: 493px; }

.seasons__eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 48px;
}
.seasons__eyebrow span {
  display: inline-block;
  width: clamp(41px, 8vw, 82px);
  height: 1px;
  background: var(--grad);
}

/* ===== TRAIL ===== */
.seasons__trail {
  position: relative;
  width: 100%;
  height: 48px;
  margin: 0 auto 0;
  max-width: 935px;
}
.seasons__trail-line {
  position: absolute;
  top: 12px; left: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.seasons__trail-line-mask {
  position: absolute;
  top: 10px; right: 0;
  width: 100%; height: 5px;
  background: var(--paper);
  transform-origin: right center;
  transform: scaleX(1);
  transition: transform 1.1s cubic-bezier(.5,0,.2,1);
}
.is-revealed .seasons__trail-line-mask { transform: scaleX(0); }

.seasons__dot {
  position: absolute;
  top: 5px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--grad);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(28,34,54,.06), 0 5px 14px -5px rgba(233,74,161,.55);
  transform: scale(0);
  transition: transform .5s cubic-bezier(.5,0,.2,1), box-shadow .3s;
  cursor: pointer;
}
.seasons__dot--1 { left: 16.66%; transform-origin: center; }
.seasons__dot--2 { left: 50%;    margin-left: -9px; }
.seasons__dot--3 { left: 83.33%; }
.is-revealed .seasons__dot--1 { transform: scale(1); transition-delay: .4s; }
.is-revealed .seasons__dot--2 { transform: scale(1); transition-delay: .55s; }
.is-revealed .seasons__dot--3 { transform: scale(1); transition-delay: .7s; }

.seasons__dot.is-active {
  box-shadow:
    0 0 0 5px rgba(233,74,161,.18),
    0 0 19px 3px rgba(233,74,161,.45),
    0 5px 14px -5px rgba(233,74,161,.55);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(233,74,161,.18), 0 0 19px 3px rgba(233,74,161,.45), 0 5px 14px -5px rgba(233,74,161,.55); }
  50%      { box-shadow: 0 0 0 9px rgba(233,74,161,.10), 0 0 26px 5px rgba(233,74,161,.55), 0 5px 14px -5px rgba(233,74,161,.55); }
}

.seasons__drop {
  position: absolute;
  top: 19px;
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, rgba(233,74,161,.45), rgba(155,95,223,0));
  opacity: 0;
  transition: opacity .4s, height .4s;
}
.seasons__drop--1 { left: calc(16.66% + 9px); }
.seasons__drop--2 { left: 50%; margin-left: -0.5px; }
.seasons__drop--3 { left: calc(83.33% + 9px); }
.is-revealed .seasons__drop { opacity: 1; }
.seasons__drop.is-active { background: linear-gradient(to bottom, rgba(233,74,161,.85), rgba(155,95,223,.35)); }

/* ===== CARDS ===== */
.seasons__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(15px, 2vw, 24px);
  margin-top: 0;
  max-width: 935px;
  margin-left: auto; margin-right: auto;
  align-items: stretch;
}

.month-card {
  position: relative;
  background: #f7e6dd;
  border: 1px solid rgba(28, 34, 54, 0.07);
  border-radius: var(--radius-lg);
  padding: 19px 22px 26px;
  box-shadow: 0 19px 37px -20px rgba(28, 34, 54, 0.22), 0 3px 9px -3px rgba(28, 34, 54, 0.06);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s cubic-bezier(.5,0,.2,1),
    transform .45s cubic-bezier(.5,0,.2,1),
    box-shadow .45s ease,
    background-color .45s ease,
    border-color .45s ease;
}
.month-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
  padding: 2px;
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.is-revealed .month-card { opacity: 1; transform: translateY(0); }
.month-card:focus { outline: none; }
.month-card:focus-visible { outline: 2px solid var(--g2); outline-offset: 4px; }
.is-revealed .month-card:nth-child(1) { transition-delay: .65s, .65s, 0s, 0s; }
.is-revealed .month-card:nth-child(2) { transition-delay: .8s,  .8s,  0s, 0s; }
.is-revealed .month-card:nth-child(3) { transition-delay: .95s, .95s, 0s, 0s; }

.month-card:hover { transform: translateY(-6px); }
.is-revealed .month-card:hover { transform: translateY(-6px); }

.month-card__glyph {
  width: 100%;
  margin: 0 0 10px;
  display: block;
  line-height: 0;
}
.month-card__glyph img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.month-card__pill {
  display: inline-block;
  padding: 6px 19px;
  border-radius: var(--radius-pill);
  background: var(--grad);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 12px;
  box-shadow: 0 7px 15px -9px rgba(233,74,161,.55);
}

.month-card__title {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}

.month-card__text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 17px;
  max-width: 204px;
}

.month-card__metric {
  margin-top: auto;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  background: var(--grad-soft);
  border: 1px solid rgba(233,74,161,.18);
  color: var(--ink);
  font-size: 12px; font-weight: 600;
}

/* Active card — gradient border (через ::after) + lift + glow */
.month-card--active {
  background-color: rgba(255, 255, 255, 0.94);
  border-color: transparent;
  transform: translateY(-14px);
  box-shadow:
    0 20px 43px -19px rgba(233,74,161,.45),
    0 7px 19px -10px rgba(155,95,223,.30);
}
.month-card--active::after { opacity: 1; }
.is-revealed .month-card--active { transform: translateY(-14px); }
.month-card--active:hover { transform: translateY(-20px); }
.is-revealed .month-card--active:hover { transform: translateY(-20px); }

/* ===== CAPTION + CTA ===== */
.seasons__caption {
  margin: 48px 0 24px;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: var(--ink-soft);
}
.seasons__caption em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.seasons__cta { display: flex; justify-content: center; }

/* ===== ARROWS (mobile only) =====
   Визуал кнопки — единый .slider-arrow в shared.css.
   Здесь только обёртка и её позиционирование. */
.seasons__arrows {
  display: none;
  justify-content: center;
  gap: 18px;
  margin: 20px auto 0;
}

/* ===== RESPONSIVE — mobile carousel ===== */
@media (max-width: 880px) {
  .seasons__trail { display: none; }
  .seasons__eyebrow { margin-bottom: 28px; }

  /* horizontal scroll-snap carousel */
  .seasons__cards {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    max-width: none;
    margin: 0 calc(50% - 50vw);    /* break out of section padding */
    padding: 28px 12vw 16px;        /* peek = 12vw on each side */
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12vw;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .seasons__cards::-webkit-scrollbar { display: none; }

  .month-card {
    flex: 0 0 76vw;
    max-width: 340px;
    scroll-snap-align: center;
  }

  /* On mobile, no vertical lift — keep all cards same baseline.
     Active card distinguished only by gradient border (::after) + bg + glow. */
  .month-card,
  .month-card--active,
  .is-revealed .month-card,
  .is-revealed .month-card--active { transform: none; }
  .month-card:hover,
  .is-revealed .month-card:hover,
  .month-card--active:hover,
  .is-revealed .month-card--active:hover { transform: none; }

  .seasons__arrows { display: inline-flex; }
}