/* SEO / SEM service pages (inc/route-pages.php, template-parts/route-page.php).
   The Gallery in the Dark (DESIGN.md): near-black floor, glass and hairline, one peach
   lamp. The lamp here is the crawler (or the visitor) walking the map, and the stop of
   the route the section below is talking about. Approved comp:
   .impeccable/mocks/decision/seo-1.png. */

/* ---------- Hero: copy left, the map right ---------- */
.route-hero {
  padding: 4rem 0 6rem;
}

/* Top-aligned: the map starts under the header, the copy a step lower, as in the comp,
   whichever column is taller (the Ukrainian and Russian leads run longer). */
.route-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: 0 clamp(3.2rem, 4vw, 6.4rem);
  align-items: start;
}

.route-hero__copy {
  container-type: inline-size;
  padding-top: clamp(2rem, 6vw, 9rem);
}

.route-hero__title {
  margin: 0 0 3.2rem;
  color: #fff;
  font-weight: 500;
  font-size: clamp(4.2rem, calc(1.6rem + 4.1vw), 8.4rem);
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.144rem;
}

/* One long word (UA/RU "SEO-оптимізація") sized to its column, never broken. */
.route-hero__title--long {
  font-size: clamp(3.4rem, 9.6cqi, 6.4rem);
}

.route-nowrap {
  white-space: nowrap;
}

/* Under a long-word H1 the section titles step down, so the H1 stays at least 1.25x
   the H2 below it (the comp's focal step). */
.page-route--long-title .route-section-title {
  font-size: clamp(2.6rem, calc(1.2rem + 2vw), 4.4rem);
}

/* The full width of its column: the copy column beside the map, the whole content area
   on the industry pages (owner, 23.10.2026). */
.route-hero__lead {
  margin: 0 0 4.8rem;
  font-size: clamp(2rem, calc(0.8rem + 1.6vw), 3.2rem);
  line-height: 1.3;
  text-wrap: pretty;
  color: #989898;
}

/* ---------- The map (inline SVG; route.js walks it) ---------- */
.route-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: "DM Sans", sans-serif;
}

.route-map__svg--narrow {
  display: none;
}

.route-map__note {
  margin: 1.6rem 0 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #989898;
}

.route-map__svg--narrow .route-node__label {
  font-size: 12.5px;
}

.route-link {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1.2;
  transition: stroke 0.5s ease;
}

.route-link.is-done {
  stroke: rgba(255, 255, 255, 0.34);
}

.route-link.is-active {
  stroke: #e5b080;
}

.route-node {
  transition: filter 0.5s ease;
}

.route-node__box {
  fill: rgba(255, 255, 255, 0.025);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
  transition: fill 0.5s ease, stroke 0.5s ease;
}

.route-node__label {
  font-size: 15px;
  font-weight: 500;
  fill: #7b8188;
  transition: fill 0.5s ease;
}

.route-node__tick {
  font-size: 12px;
  fill: #d9d9d9;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.route-node__mark {
  fill: none;
  stroke: #d9d9d9;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-node__icon {
  fill: none;
  stroke: #7b8188;
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.5s ease;
}

.route-node.is-on {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
}

.route-node.is-on .route-node__box {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.5);
}

.route-node.is-on .route-node__label {
  fill: #fff;
}

.route-node.is-on .route-node__icon {
  stroke: #fff;
}

.route-node.is-on .route-node__tick {
  opacity: 1;
}

/* SEM pieces: badges, CTA bars and the request node light white like every reached
   node; the lamp stays with the walker (DESIGN.md, The Lamp Walks Rule). */
.route-node__badge {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.16);
  transition: fill 0.5s ease, stroke 0.5s ease;
}

.route-node__badge-text {
  font-size: 11px;
  font-weight: 500;
  fill: #7b8188;
  text-anchor: middle;
  transition: fill 0.5s ease;
}

.route-node.is-on .route-node__badge {
  fill: rgba(255, 255, 255, 0.1);
  stroke: rgba(255, 255, 255, 0.4);
}

.route-node.is-on .route-node__badge-text {
  fill: #fff;
}

.route-node__dot {
  fill: rgba(255, 255, 255, 0.22);
}

.route-node__line {
  fill: rgba(255, 255, 255, 0.08);
  transition: fill 0.5s ease;
}

.route-node.is-on .route-node__line {
  fill: rgba(255, 255, 255, 0.16);
}

.route-node__line--cta {
  fill: rgba(255, 255, 255, 0.12);
}

.route-node.is-on .route-node__line--cta {
  fill: rgba(255, 255, 255, 0.32);
}

.route-crawler {
  transition: opacity 0.4s ease;
}

.route-crawler.is-hidden {
  opacity: 0;
}

.route-crawler__halo {
  fill: rgba(229, 176, 128, 0.22);
}

.route-crawler__core {
  fill: #e5b080;
  filter: drop-shadow(0 0 6px rgba(229, 176, 128, 0.85));
}

/* ---------- The route: three stops on one line ---------- */
.route-stops-section {
  padding-bottom: 12rem;
}

.route-section-title {
  margin: 0 0 5.6rem;
  font-weight: 500;
  font-size: clamp(3.2rem, calc(1.2rem + 3vw), 5.6rem);
  line-height: 1.1;
  letter-spacing: -0.05rem;
  color: #fff;
  text-wrap: balance;
}

.route-stops {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 35fr) minmax(0, 24fr);
  margin: 0;
  padding: 5.6rem 0 0 7%;
  list-style: none;
}

/* The line runs from the first dot's centre (7%) to the last one's (76%); the peach
   copy of it grows over it as the stops light (route.js adds .is-run). */
.route-stops::before,
.route-stops::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: calc(7% + 1.2rem);
  width: 69%;
  height: 0.1rem;
  background: rgba(255, 255, 255, 0.2);
}

.route-stops::after {
  background: #e5b080;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s ease;
}

.route-stops.is-run::after {
  transform: scaleX(1);
}

.route-stop {
  position: relative;
  padding-right: 3.2rem;
}

.route-stop__dot {
  position: absolute;
  top: -5.6rem;
  left: 0;
  z-index: 1;
  width: 2.4rem;
  height: 2.4rem;
  border: 0.2rem solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: #0b0d0f;
  transition: border-color 0.5s ease, background 0.5s ease;
}

/* Lit: a peach ring around a peach core, like the comp's first stop. */
.route-stop.is-lit .route-stop__dot {
  border-color: #e5b080;
  background: radial-gradient(circle, #e5b080 0 32%, #0b0d0f 38%);
  box-shadow: 0 0 0 0.6rem rgba(229, 176, 128, 0.16);
}

.route-stop__title {
  margin: 0 0 0.8rem;
  font-weight: 500;
  font-size: clamp(2rem, calc(1.4rem + 0.5vw), 2.2rem);
  line-height: 1.2;
  color: #fff;
}

.route-stop__hint {
  margin: 0 0 2.4rem;
  font-size: clamp(1.6rem, calc(1.2rem + 0.4vw), 1.8rem);
  line-height: 1.3;
  color: #989898;
}

.route-stop__text {
  max-width: 38rem;
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.5;
  color: #989898;
}

/* ---------- Related work ---------- */
.route-work {
  padding-bottom: 8rem;
}

/* Cases first (owner, 23.10.2026): the route follows the grid with 12rem between them,
   and the Q&A after it brings its own 12rem. */
.route-work + .route-stops-section {
  padding-top: 4rem;
  padding-bottom: 0;
}

.route-work .page-lead {
  margin-bottom: 6.4rem;
}

/* ---------- Narrower screens ---------- */
/* Up to 1199px (landscape tablets included) the map goes under the copy: side by side
   at 1024 it shrank to ~540px and its labels to ~10px. */
@media (max-width: 1199px) {
  .route-hero {
    padding-bottom: 8rem;
  }

  .route-hero__visual {
    max-width: 76rem;
  }

  .route-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-hero__copy {
    padding-top: 0;
  }

  .route-map {
    margin-top: 5.6rem;
  }
}

@media (max-width: 767px) {
  .route-stops {
    --indent: 4.8rem;
    grid-template-columns: minmax(0, 1fr);
    gap: 4rem 0;
    padding: 0 0 0 var(--indent);
  }

  .route-stop {
    padding-right: 0;
  }

  /* One column: each stop draws its own leg of the line down to the next dot. */
  .route-stops::before,
  .route-stops::after {
    display: none;
  }

  .route-stop__dot {
    top: 0;
    left: calc(-1 * var(--indent));
  }

  .route-stop:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.4rem;
    bottom: -4rem;
    left: calc(1.15rem - var(--indent));
    width: 0.1rem;
    background: rgba(255, 255, 255, 0.2);
    transition: background-color 0.5s ease;
  }

  /* Peach only while the route runs (route.js); the frozen moment keeps it grey. */
  .route-stops.is-run .route-stop.is-lit:not(:last-child)::before {
    background: #e5b080;
  }

  .route-stop__hint {
    margin-bottom: 1.6rem;
  }
}

@media (max-width: 575px) {
  .route-map__svg--wide {
    display: none;
  }

  .route-map__svg--narrow {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-stops::after,
  .route-stop__dot,
  .route-link,
  .route-node,
  .route-node__box,
  .route-node__label,
  .route-node__tick {
    transition: none;
  }
}