/* «С чего начать» (доска-змейка). Mobile-first: 360 → 768 → 1024 → 1280. */

.route {
  --num: 44px;
  --ill: 56px;
  --pad-l: 12px;
  --link: 8px;
  --overlap: 8px;
  --gap-x: 20px;
  --gap-y: 20px;
  background: var(--apple);
  color: var(--ink);
}

.route__lead {
  margin: 14px 0 28px;
  max-width: 52ch;
  color: var(--ink);
  text-wrap: pretty;
}

.route__board {
  position: relative;
  display: grid;
  gap: var(--gap-y) var(--gap-x);
  margin: 0;
  padding: 0;
  list-style: none;
}

.route__board > li {
  position: relative;
  min-width: 0;
}

.route__board > li::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: var(--ink);
  pointer-events: none;
}

.route__cell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--num) var(--ill) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px 14px 10px var(--pad-l);
  background: var(--white);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.route__board > li:nth-child(4n + 2) .route__cell {
  background: var(--honey);
}

.route__board > li:nth-child(4n + 3) .route__cell {
  background: var(--paper);
}

.route__board > li:nth-child(4n + 4) .route__cell {
  background: var(--rose);
}

.route__cell:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
}

.route__cell:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.route__num {
  display: grid;
  place-items: center;
  width: var(--num);
  height: var(--num);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--honey);
  color: var(--ink);
  font: 900 18px/1 var(--f-text);
  box-shadow: 2px 2px 0 var(--ink);
}

.route__ill {
  width: var(--ill);
  height: var(--ill);
}

.route__label {
  min-width: 0;
  font: 800 15px/1.25 var(--f-text);
}

/* Мобилка: вертикальная дорожка сквозь центры номеров, сегмент на li. */
@media (max-width: 767px) {
  .route__board > li:not(:last-child)::after {
    left: calc(var(--line) + var(--pad-l) + (var(--num) - var(--link)) / 2);
    top: calc(100% - var(--overlap));
    width: var(--link);
    height: calc(var(--gap-y) + (2 * var(--overlap)));
  }
}

@media (min-width: 768px) {
  .route {
    --gap-x: 28px;
    --gap-y: 18px;
  }

  .route__board {
    grid-template-columns: 1fr 1fr;
  }

  .route__board > li:nth-child(odd)::after {
    left: calc(100% - var(--overlap));
    top: calc(50% - (var(--link) / 2));
    width: calc(var(--gap-x) + (2 * var(--overlap)));
    height: var(--link);
  }
}

/* 768–819: длинные подписи в одну строку, низ карточек общий. */
@media (min-width: 768px) and (max-width: 819px) {
  .route {
    --ill: 48px;
    --pad-l: 10px;
  }

  .route__cell {
    gap: 8px;
    padding-right: 10px;
  }

  .route__label {
    font-size: 14px;
  }
}

@media (min-width: 1024px) {
  .route {
    --gap-x: 32px;
    --gap-y: 40px;
    --num: 40px;
  }

  .route__board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 18px;
  }

  .route__board > li::after {
    content: none;
  }

  .route__board > li:nth-child(-n + 3)::after,
  .route__board > li:nth-child(4)::after,
  .route__board > li:nth-child(n + 5):nth-child(-n + 7)::after {
    content: "";
  }

  .route__board > li:nth-child(-n + 3)::after {
    left: calc(100% - var(--overlap));
    top: calc(50% - (var(--link) / 2));
    width: calc(var(--gap-x) + (2 * var(--overlap)));
    height: var(--link);
  }

  .route__board > li:nth-child(4)::after {
    left: calc(50% - (var(--link) / 2));
    top: calc(100% - var(--overlap));
    width: var(--link);
    height: calc(var(--gap-y) + (2 * var(--overlap)));
  }

  .route__board > li:nth-child(5)::after,
  .route__board > li:nth-child(6)::after,
  .route__board > li:nth-child(7)::after {
    right: calc(100% - var(--overlap));
    left: auto;
    top: calc(50% - (var(--link) / 2));
    width: calc(var(--gap-x) + (2 * var(--overlap)));
    height: var(--link);
  }

  .route__board > li:nth-child(5) {
    grid-area: 2 / 4;
  }

  .route__board > li:nth-child(6) {
    grid-area: 2 / 3;
  }

  .route__board > li:nth-child(7) {
    grid-area: 2 / 2;
  }

  .route__board > li:nth-child(8) {
    grid-area: 2 / 1;
  }

  .route__cell {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 8px;
    min-height: 188px;
    padding: 36px 12px 16px;
    text-align: center;
  }

  .route__num {
    position: absolute;
    top: -16px;
    left: 14px;
    font-size: 16px;
  }

  .route__ill {
    width: 84px;
    height: 84px;
    margin-top: 6px;
  }

  /* Холст 512², чернила по высоте: мармелад 191px, меренга 298px. Scale выравнивает рисунок со слотом, не залезая на номер и подпись. */
  .route__ill[src$="marmalade.png"] {
    transform: scale(1.9);
  }

  .route__ill[src$="meringue.png"] {
    transform: scale(1.32);
  }
}

/* 1024–1279: подписи 1 и 3 в одну строку, низы ряда ровные. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .route {
    --gap-x: 20px;
  }

  .route__board > li {
    display: flex;
  }

  .route__cell {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 196px;
    padding: 32px 8px 14px;
  }

  .route__label {
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  .route__cell {
    min-height: 196px;
  }

  .route__label {
    font-size: 16px;
  }
}