/* tournaments: the map and the year rail stay at the side while the list scrolls past */
.journey{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,4vw,56px);align-items:start}
.journey__side{position:sticky;top:96px;height:min(calc(100vh - 130px),780px);min-height:380px;display:grid;grid-template-columns:auto 1fr;gap:14px}
.map{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(182,222,200,.2);background:rgba(7,15,11,.6);min-height:0}

/* year rail: one stop per year on a line that fills as the list scrolls. A year in which he travelled is a button
   with the flags of that year; the year being read is a solid pill. --stop is the height of one stop. */
.rail{--stop:32px;position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.rail::before{content:"";position:absolute;left:13px;top:calc(var(--stop)/2);bottom:calc(var(--stop)/2);width:2px;border-radius:1px;background:var(--line)}
.rail__fill{position:absolute;left:13px;top:calc(var(--stop)/2);width:2px;border-radius:1px;height:calc((100% - var(--stop))*var(--f,0));background:linear-gradient(var(--em),var(--mint));box-shadow:0 0 12px var(--em)}
.yr{position:relative;z-index:1;display:flex;align-items:center;gap:9px;height:var(--stop);padding:0 12px 0 0;border-radius:99px;transition:background .3s,box-shadow .3s}
.yr i{width:10px;height:10px;margin-left:9px;border-radius:50%;background:var(--bg);border:1px solid var(--mint);transition:.35s var(--ease);flex:none}
.yr.has i{width:16px;height:16px;margin-left:6px;border:2px solid var(--em)}
.yr b{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;color:#fff}
.yr .flag{font-size:.92rem}
.yr.done i{background:var(--em);border-color:var(--em)}
button.yr:hover,button.yr:focus-visible{background:rgba(16,201,139,.2);box-shadow:inset 0 0 0 1px var(--em)}
button.yr:hover i{transform:scale(1.2)}
.yr.cur{background:var(--em);box-shadow:0 0 22px rgba(16,201,139,.5)}
.yr.cur b{color:var(--ink);font-weight:600}
.yr.cur i{background:#fff;border-color:#fff}

/* The list. It opens with origin -> base, a block as tall as the distance between the pinned map's top (96px)
   and the reading line (half the window), and it ends with the room the last row needs to reach that line
   while the map is still pinned: so every tournament is active with the whole map in view. */
.trips{list-style:none;margin:0;padding:0 0 calc(39.5vh - 34px)}
.trip-open{display:flex;align-items:center;gap:clamp(12px,2vw,22px);min-height:calc(50vh - 96px);padding:14px;border-bottom:1px solid rgba(182,222,200,.16)}
.trip-open span{display:inline-flex;align-items:center;gap:.6em}
.trip-open .flag{font-size:1.5rem}
.trip-open b{font-weight:500;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em;color:#fff}
.trip-open i{flex:1;max-width:160px;height:1px;background:linear-gradient(90deg,var(--mint),var(--em));position:relative}
.trip-open i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--em);border-right:1px solid var(--em);transform:rotate(45deg)}
/* one row per tournament: year | name over flag and place | age group */
.trip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"y n g" "y w g";gap:8px clamp(14px,2vw,26px);align-items:center;align-content:center;min-height:21vh;padding:14px;border-bottom:1px solid rgba(182,222,200,.16);border-left:2px solid transparent;transition:background .4s,border-color .4s,padding .4s var(--ease);cursor:pointer}
.trip.on,.trip.hot,.trip:focus-visible{background:linear-gradient(90deg,rgba(16,201,139,.16),transparent 80%);border-left-color:var(--em);padding-left:24px}
.trip time{grid-area:y;font-family:var(--mono);font-size:1rem;font-weight:500;letter-spacing:.04em;color:var(--mint)}
.trip b{grid-area:n;align-self:end;font-weight:500;font-size:clamp(1.2rem,2vw,1.6rem);letter-spacing:-.02em;line-height:1.15;color:#fff}
.trip__where{grid-area:w;align-self:start;display:inline-flex;align-items:center;gap:.7em;font-size:1.02rem}
.trip__where .flag{font-size:1.2rem;transform-origin:left center;transition:transform .45s var(--ease)}
.trip.on .flag,.trip.hot .flag{transform:scale(1.3)}
.trip__where span{transition:transform .45s var(--ease)}
.trip.on .trip__where span,.trip.hot .trip__where span{transform:translateX(.45em)}
.trip__grp{grid-area:g;padding:.4em .9em;border-radius:99px;border:1px solid rgba(182,222,200,.45);font-size:.88rem;font-weight:500;white-space:nowrap;transition:background .4s,color .4s,border-color .4s}
.trip.on .trip__grp{background:var(--mint);color:var(--ink);border-color:transparent}

/* placeholder map (map/none.js) */
.map-list{list-style:none;margin:0;padding:18px;display:grid;gap:8px;align-content:center;height:100%}
.map-list li{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(182,222,200,.2);transition:.3s}
.map-list li b{font-weight:500;color:#fff}
.map-list li.is-visited{border-color:var(--em)}
.map-list li.is-active,.map-list li.is-hover{background:var(--em);border-color:var(--em);color:var(--ink)}
.map-list li.is-active b,.map-list li.is-hover b{color:var(--ink)}

@media (max-width:1100px){.yr .flag{display:none}}
/* narrow screens: the map stays pinned on top and the list scrolls under it (see NARROW in tournaments.js) */
@media (max-width:900px){
  .journey{grid-template-columns:1fr}
  .journey__side{top:70px;z-index:2;height:38vh;min-height:230px;grid-template-columns:1fr;padding-bottom:10px;background:var(--bg)}
  .rail{display:none}
  .trips{padding-bottom:0}
  .trip-open{min-height:calc(38vh - 80px)}
  .trip{min-height:0;padding:18px 12px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"y n" "y w" "y g"}
  .trip__grp{justify-self:start}
}