/* =========================================================
   Screen 03 — «Маршрут после разбора» (dark, photographic route)
   ========================================================= */

.s03 {
  --s03-h: clamp(720px, 62.5vw, 900px);
  --s03-pt: clamp(48px, 4.6vw, 66px);
  --s03-pb: clamp(32px, 3vw, 44px);
  min-height: var(--s03-h);
  padding: var(--s03-pt) 0 var(--s03-pb);
  background: #08080a;
  color: #fff;
}
.s03__scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.s03__scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.s03__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 36% at 74% 52%, rgba(8, 8, 10, .76) 0%, rgba(8, 8, 10, .42) 65%, rgba(8, 8, 10, 0) 100%),
    linear-gradient(90deg, rgba(7, 7, 9, .86) 0%, rgba(7, 7, 9, .50) 32%, rgba(7, 7, 9, .08) 58%, rgba(7, 7, 9, .38) 100%),
    linear-gradient(180deg, rgba(7, 7, 9, .96) 0%, rgba(7, 7, 9, .78) 35%, rgba(7, 7, 9, .22) 100%);
  pointer-events: none;
}

.s03__inner {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: calc(var(--s03-h) - var(--s03-pt) - var(--s03-pb));
  grid-template-columns: minmax(0, clamp(360px, 30vw, 440px)) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head"
    "origin routes"
    "close close";
  column-gap: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .75);
}

/* — head — */
.s03__head { grid-area: head; margin-bottom: clamp(20px, 2vw, 28px); }
.s03__title {
  margin: clamp(20px, 2.1vw, 30px) 0 clamp(14px, 1.5vw, 22px);
  max-width: 14em;
  font-size: clamp(34px, 3.75vw, 54px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: #f8f7f3;
}
.s03__lead { max-width: 820px; font-size: clamp(16px, .55vw + 12px, 20px); }

/* — origin: label + CTA + note — */
.s03__origin { grid-area: origin; align-self: center; }
.s03__step {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #ff263a;
}
.s03__origin .cta { text-shadow: none; }
.s03__origin-note { margin-top: 22px; font-size: clamp(16px, .4vw + 12px, 18px); color: rgba(255, 255, 255, .72); }

/* — destinations — */
.s03__routes {
  grid-area: routes;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(30px, 4.4vw, 64px);
  margin: 0;
  padding: 0 0 0 clamp(90px, 30vw - 102px, 330px);
  list-style: none;
}
.route { position: relative; padding-left: 41px; }
.route__link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.route__kicker {
  margin: 0 0 8px;
  font-size: clamp(12px, .3vw + 10px, 14px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ff263a;
}
.route__title {
  position: relative;
  margin: 0 0 8px;
  font-size: clamp(23px, 2.08vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.route__title::before {
  content: "";
  position: absolute;
  left: -41px;
  top: calc(.575em - 7px);
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2.6px solid var(--red-bright);
  border-radius: 50%;
  background: #0b0b0d;
  box-shadow: 0 0 14px 7px rgba(242, 33, 53, .16);
  transition: box-shadow .18s ease, transform .18s ease;
}
.route__title::after {
  content: "";
  position: absolute;
  left: -37px;
  top: calc(.575em - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-bright);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4);
}
.route__desc {
  margin: 0;
  font-size: clamp(16px, .4vw + 12px, 18px);
  line-height: 1.45;
  color: rgba(255, 255, 255, .76);
  text-wrap: pretty;
}
.route__link:hover .route__title::before,
.route__link:focus-visible .route__title::before {
  box-shadow: 0 0 18px 9px rgba(242, 33, 53, .30);
  transform: scale(1.12);
}
.route__link:hover .route__title::after,
.route__link:focus-visible .route__title::after { transform: scale(1); }
.route__link:focus-visible .route__title { text-decoration: underline; text-decoration-color: rgba(255, 38, 58, .8); text-underline-offset: 4px; }

/* — closing — */
.s03__close { grid-area: close; align-self: end; margin: clamp(32px, 3vw, 44px) 0 0; }
.s03__close strong { display: block; font-size: clamp(17px, .9vw + 9px, 22px); font-weight: 700; line-height: 1.3; }
.s03__close > span { display: block; margin-top: 6px; font-size: clamp(16px, .5vw + 12px, 19px); color: rgba(255, 255, 255, .72); }

/* — measured route overlay (drawn by js/page.js) — */
.s03__lines {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.s03__trunk { fill: none; stroke: var(--red-bright); stroke-width: 4; stroke-linecap: round; }
.s03__junction { fill: var(--red-bright); }
.s03__branch {
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .54;
  transition: opacity .18s ease, stroke-width .18s ease;
}
.s03:has(.route:nth-of-type(1) .route__link:is(:hover, :focus-visible)) .s03__branch[data-i="1"],
.s03:has(.route:nth-of-type(2) .route__link:is(:hover, :focus-visible)) .s03__branch[data-i="2"],
.s03:has(.route:nth-of-type(3) .route__link:is(:hover, :focus-visible)) .s03__branch[data-i="3"] {
  opacity: 1;
  stroke-width: 3;
}

/* =========================================================
   Stacked states: vertical rail
   ========================================================= */
@media (max-width: 899px) {
  .s03 { min-height: 0; padding: clamp(40px, 6vw, 56px) 0 clamp(40px, 5vw, 56px); }
  .s03__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "origin" "routes" "close";
  }
  .s03__head { margin-bottom: 28px; }
  .s03__title { font-size: clamp(34px, 6vw, 46px); }
  .s03__origin { max-width: 440px; }
  .s03__origin-note { display: none; }
  .s03__routes {
    padding: 38px 0 0 11px;
    gap: clamp(30px, 5vw, 44px);
    max-width: 560px;
  }
  .route { padding-left: 25px; }
  .route__title::before { left: -25px; }
  .route__title::after { left: -21px; }
  .s03__close { margin-top: clamp(40px, 7vw, 64px); }
}

@media (max-width: 599px) {
  .s03 { padding: 32px 0 40px; }
  .s03__title { margin: 16px 0 14px; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; }
  .s03__lead { font-size: 16px; }
  .s03__head { margin-bottom: 26px; }
  .s03__step { font-size: 12px; margin-bottom: 8px; }
  .s03__routes { padding-top: 46px; gap: 34px; }
  .route__kicker { font-size: 12px; margin-bottom: 6px; }
  .route__title { font-size: 23px; margin-bottom: 6px; }
  .route__title::before { width: 12px; height: 12px; top: calc(.575em - 6px); border-width: 2.2px; left: -24px; }
  .route__title::after { width: 5px; height: 5px; top: calc(.575em - 2.5px); left: -20.5px; }
  .route__desc { font-size: 16px; }
  .s03__close { margin-top: 52px; }
  .s03__close strong { font-size: 17px; }
  .s03__close span { font-size: 16px; }
}