/* events.css — Figma "Frame 1621508699" (1920 × 1110) */

.eventsSection {
  background: linear-gradient(
    to top,
    rgba(247, 241, 231, 0) 17.76%,
    rgba(247, 241, 231, 0.5) 77.71%,
    var(--cream) 104.07%
  );
}

.eventsSection__stage {
  height: calc(1110 * var(--s));
  padding-top: calc(60 * var(--s));
}

.eventsSection__title {
  white-space: nowrap;
}

.eventsSection__tabs {
  margin-top: calc(60 * var(--s));
}

.eventsCard {
  position: relative;
  width: calc(1395 * var(--s));
  height: calc(750 * var(--s));
  margin-top: calc(40 * var(--s));
  margin-left: calc(263 * var(--s));
  border-radius: calc(40 * var(--s));
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 calc(22 * var(--s)) calc(60 * var(--s)) rgba(255, 0, 0, 0.07),
    0 calc(8.12 * var(--s)) calc(22.549 * var(--s)) rgba(255, 0, 0, 0.05),
    0 calc(5.457 * var(--s)) calc(14.008 * var(--s)) rgba(255, 0, 0, 0.04),
    0 calc(2.929 * var(--s)) calc(7.127 * var(--s)) rgba(255, 0, 0, 0.03);
}

.eventsCard__map {
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(40 * var(--s));
  width: calc(648 * var(--s));
  height: calc(670 * var(--s));
  border-radius: calc(20 * var(--s));
  overflow: hidden;
  cursor: pointer;
}

.eventsCard__map > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.eventsCard__map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.eventsCard__expand {
  position: absolute;
  z-index: 1;
  left: calc(519 * var(--s));
  top: calc(532 * var(--s));
  width: calc(100 * var(--s));
  height: calc(100 * var(--s));
  padding: calc(30 * var(--s));
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 calc(2.601 * var(--s)) calc(4.966 * var(--s)) rgba(0, 0, 0, 0.29),
    0 calc(1.495 * var(--s)) calc(2.853 * var(--s)) rgba(0, 0, 0, 0.23),
    0 calc(0.658 * var(--s)) calc(1.256 * var(--s)) rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease;
}

.eventsCard__expand:hover {
  transform: scale(1.06);
}

.eventsCard__expand img {
  width: 100%;
  height: 100%;
}

.eventsCard__distance {
  position: absolute;
  left: calc(748 * var(--s));
  top: calc(40 * var(--s));
  font-size: calc(48 * var(--s));
  font-weight: 900;
  line-height: normal;
  letter-spacing: calc(-1.92 * var(--s));
  text-transform: uppercase;
  white-space: nowrap;
}

.eventsCard__stats {
  position: absolute;
  left: calc(748 * var(--s));
  top: calc(138 * var(--s));
  display: grid;
  grid-template-columns: repeat(2, calc(293.5 * var(--s)));
  column-gap: calc(20 * var(--s));
  row-gap: calc(20 * var(--s));
}

.eventsCard__stat {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--s));
  height: calc(107 * var(--s));
  padding: calc(19 * var(--s)) calc(12 * var(--s)) 0;
  border-radius: calc(10 * var(--s));
  background: var(--cream);
  white-space: nowrap;
}

.eventsCard__stat[hidden] {
  display: none;
}

.eventsCard__stat--wide {
  padding-left: calc(20 * var(--s));
}

.eventsCard__statLabel {
  font-size: calc(18 * var(--s));
  line-height: 1.5;
  letter-spacing: calc(0.36 * var(--s));
  color: var(--ink-soft);
}

.eventsCard__statValue {
  font-size: calc(32 * var(--s));
  font-weight: 600;
  line-height: 1.5;
}

.eventsCard__inclusionsTitle {
  position: absolute;
  left: calc(748 * var(--s));
  top: calc(434 * var(--s));
  font-size: calc(20 * var(--s));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.eventsCard__inclusions {
  position: absolute;
  left: calc(712 * var(--s));
  width: calc(643 * var(--s));
  display: flex;
  align-items: center;
}

.eventsCard__inclusions--four {
  top: calc(479 * var(--s));
  gap: 1px;
}

.eventsCard__inclusions--three {
  top: calc(606 * var(--s));
}

.eventsCard__inclusion {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--s));
  font-size: calc(22 * var(--s));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  border-right: max(0.5px, calc(0.5 * var(--s))) solid rgba(0, 0, 0, 0.5);
}

.eventsCard__inclusion[hidden] {
  display: none;
}

.eventsCard__inclusion:last-child {
  border-right: 0;
}

.eventsCard__inclusions--three.is-short {
  width: calc(643 * 2 / 3 * var(--s));
}

.eventsCard__inclusions--three .eventsCard__inclusion:nth-child(2) {
  height: calc(93 * var(--s));
  border-right-width: var(--line);
}

.eventsCard__inclusions--three.is-short .eventsCard__inclusion:nth-child(2) {
  border-right: 0;
}

.eventsCard__divider {
  position: absolute;
  left: calc(746 * var(--s));
  top: calc(593 * var(--s));
  width: calc(579 * var(--s));
  height: var(--line);
  background: rgba(0, 0, 0, 0.5);
}

.eventsCard__icon {
  position: relative;
  display: block;
  height: calc(44 * var(--s));
  flex-shrink: 0;
}

.eventsCard__icon img {
  position: absolute;
  max-width: none;
}

.eventsCard__icon--bib { width: calc(34 * var(--s)); }
.eventsCard__icon--bib img { inset: 0; width: 100%; height: 100%; }

.eventsCard__icon--tshirt { width: calc(52 * var(--s)); }
.eventsCard__icon--tshirt img { left: 3.35%; top: 9.18%; width: 94.01%; height: 90.82%; }

.eventsCard__icon--medal { width: calc(44 * var(--s)); }
.eventsCard__icon--medal img { inset: 0; width: 100%; height: 100%; }

.eventsCard__icon--tetrapack { width: calc(44 * var(--s)); }
.eventsCard__icon--tetrapack img { left: 21.98%; top: 0.57%; width: 56.05%; height: 98.47%; }

.eventsCard__icon--bag { width: calc(40 * var(--s)); height: calc(40 * var(--s)); }
.eventsCard__icon--bag img { inset: 0; width: 100%; height: 100%; }

.eventsCard__icon--refresh { width: calc(41 * var(--s)); }
.eventsCard__refreshFood { left: 35.34%; top: 0; width: 52.52%; height: 97.4%; }
.eventsCard__refreshCup { left: 0.61%; top: 52.27%; width: 46.33%; height: 45.45%; transform: scaleX(-1); }

.eventsCard__icon--certificate { width: calc(44 * var(--s)); }
.eventsCard__icon--certificate img { left: 0; top: 13.33%; width: 100%; height: 86.67%; }

/* ---------- Tablet & mobile ---------- */
@media (max-width: 1023px) {
  .eventsSection__stage {
    height: auto;
    padding-block: 24px;
  }

  .eventsSection__title {
    white-space: normal;
  }

  .eventsSection__tabs {
    margin-top: 28px;
  }

  .eventsCard {
    width: 100%;
    height: auto;
    margin: 28px 0 0;
    padding: clamp(16px, 3vw, 32px);
    border-radius: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 32px);
  }

  .eventsCard__map,
  .eventsCard__distance,
  .eventsCard__stats,
  .eventsCard__inclusionsTitle,
  .eventsCard__inclusions,
  .eventsCard__divider,
  .eventsCard__expand {
    position: relative;
    left: auto;
    top: auto;
  }

  .eventsCard__map {
    width: 100%;
    height: auto;
    aspect-ratio: 648 / 670;
    border-radius: 16px;
  }

  .eventsCard__expand {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: auto;
    top: auto;
    width: 64px;
    height: 64px;
    padding: 18px;
  }

  .eventsCard__info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .eventsCard__distance {
    font-size: clamp(32px, 5vw, 44px);
    letter-spacing: -0.04em;
  }

  .eventsCard__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .eventsCard__stat,
  .eventsCard__stat--wide {
    height: auto;
    padding: 14px 14px 12px;
    gap: 4px;
  }

  .eventsCard__statLabel {
    font-size: clamp(12px, 1.7vw, 15px);
  }

  .eventsCard__statValue {
    font-size: clamp(20px, 3vw, 28px);
  }

  .eventsCard__inclusionsTitle {
    margin-top: 8px;
    font-size: clamp(15px, 2vw, 18px);
  }

  .eventsCard__inclusions {
    width: 100%;
    align-items: stretch;
  }

  .eventsCard__inclusions--three.is-short {
    width: 100%;
  }

  .eventsCard__inclusion {
    gap: 12px;
    font-size: clamp(13px, 1.9vw, 18px);
  }

  .eventsCard__inclusions--three .eventsCard__inclusion:nth-child(2) {
    height: auto;
  }

  .eventsCard__divider {
    width: 100%;
  }

  .eventsCard__icon { height: 36px; }
  .eventsCard__icon--bib { width: 28px; }
  .eventsCard__icon--tshirt { width: 43px; }
  .eventsCard__icon--medal,
  .eventsCard__icon--tetrapack,
  .eventsCard__icon--certificate { width: 36px; }
  .eventsCard__icon--bag { width: 33px; height: 33px; }
  .eventsCard__icon--refresh { width: 34px; }
}

@media (max-width: 768px) {
  .eventsCard {
    grid-template-columns: 1fr;
  }

  .eventsCard__map {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 450px) {
  .eventsCard__inclusion {
    white-space: normal;
    text-align: center;
  }
}

/* ---------- Route map lightbox ---------- */
.routeLightbox {
  width: min(540px, calc(100vw - 32px));
  height: min(92vh, 960px);
  max-width: calc(100vw - 32px);
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.routeLightbox::backdrop {
  background: rgba(20, 8, 8, 0.72);
}

.routeLightbox__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
  background: #fff;
}

.routeLightbox__stage.is-zoomed {
  cursor: grab;
}

.routeLightbox__stage.is-zoomed:active {
  cursor: grabbing;
}

.routeLightbox__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.routeLightbox__close,
.routeLightbox__zoom button {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #2b0c0c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.routeLightbox__close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
}

.routeLightbox__close::before,
.routeLightbox__close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  background: #2b0c0c;
}

.routeLightbox__close::before {
  transform: rotate(45deg);
}

.routeLightbox__close::after {
  transform: rotate(-45deg);
}

.routeLightbox__zoom {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routeLightbox__zoom button {
  position: static;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}

.routeLightbox__close:hover,
.routeLightbox__zoom button:hover {
  background: #fff3f3;
}