/* UNIÓN , layout for the visit page only. Phase 1 owns this file.
   LAYOUT ONLY and IN TOKENS ONLY: no hex, no font name, no easing, no duration.
   Nothing here may change how an included component looks. */

/* ------------------------------------------------------------ FOLD 1, HEAD --
   Asymmetric on purpose, and the asymmetry runs the other way from every other
   hero on the site: the FIGURE takes the wide left column and the sentence the
   narrow right one. Not a centred hero and not two equal halves.
   ---------------------------------------------------------------------------- */
/* THE "28" IS THE OBJECT OF THIS FOLD, not a figure beside the headline.
   The hero ground is yellow now (every page used to open on the same coral,
   which made the site read as a template), and yellow's job here is to carry
   one enormous number: the single fact the whole page is about. So the figure
   takes the WIDE track and the headline and copy take the narrow one, which is
   the reverse of every other hero on the site , that reversal is the point.
   Black type only, which yellow requires and which .g-yellow already sets. */
/* START, not end. Bottom-aligning both columns hung the number off the foot of
   the taller headline column and left the top two thirds of the fold as dead
   yellow. The number leads, so it starts where the fold starts. */
.vh{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--s7) var(--s8);align-items:start}
/* the FIGURE comes first in the reading order as well as taking the wide
   track: given the right-hand column it still had the width but the eye met
   the headline first, which is the thing it is meant to dwarf */
.vh__say{min-width:0;order:2}
.vh__fig{min-width:0;order:1;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s3);padding-bottom:var(--s2);
  border-top:var(--rule-heavy) solid var(--ink);padding-top:var(--s5)}
/* The number FILLS its track. --size-mega tops out at 220px, which on a 754px
   column left two thirds of the fold as dead yellow: a big number in a big
   empty box is not a dominant object, it is a small object with space round
   it. Sized off the column instead, so "28" is as tall as the track is wide
   allows and the fold is the number. */
.vh__n{font-size:58cqw;line-height:.76;
  font-weight:900;font-stretch:var(--wdth-condensed);letter-spacing:-.04em;
  display:block;
  /* a condensed 900 at this size clips its own cap height against a .76 line
     box, the same fix .park-fig__n and .rooms__h carry */
  padding-top:.04em;overflow:visible}
.vh__fig{container-type:inline-size}
.vh__u{font-size:var(--size-small);line-height:1.35;max-width:22ch;
  text-transform:uppercase;letter-spacing:var(--track-micro);font-weight:700}

/* ---------------------------------------------------------- FOLD 2, TRAVEL --
   The switcher is the object; the pack's fixed rail figures sit beside it as a
   printed table, narrower, so the two do not compete for the same attention.
   ---------------------------------------------------------------------------- */
/* THE SWITCHER TRACK IS SIZED OFF THE COMPONENT'S OWN BREAKPOINT, NOT A RATIO.
   V-travel's inner .v-travel__body is a two-column grid down to 760px, and its
   body is set to 86% of the track. At the old 1.6fr/1fr split the switcher got
   ~810px, so the body was ~700px and still two-column: the Drop-off mode, which
   has the longest heading of the five, ran its title onto its own fact list.
   The gate caught it at 1440 on that mode only, which is exactly what a track
   sitting a few px the wrong side of a breakpoint looks like.
   So the track is given a floor well clear of that edge (the body needs ~760px,
   so the track needs ~880px) and the rail table takes what is left. The split
   still reads as unequal, which was the design intent; it is simply no longer
   a ratio that lands the component on its own breakpoint. */
.vt{display:grid;grid-template-columns:minmax(min(100%,880px),1.7fr) minmax(0,1fr);
  gap:var(--s7);align-items:start;margin-top:var(--s7)}
.vt__switch,.vt__rail{min-width:0}
.vt__rail{border-top:var(--rule-heavy) solid var(--ink);padding-top:var(--s4)}
.vt__rail-h{font-size:var(--size-small);text-transform:uppercase;font-weight:900;
  letter-spacing:var(--track-micro);margin:0 0 var(--s4)}
/* THE TIMETABLE, AND THE COLLISION IT FIXES.
   table-layout:fixed with a declared width on the number column is the whole
   fix: the old table let a nowrap --size-title cell size itself, so on a narrow
   track it grew past its own column and landed on the switcher panel. Now the
   figures column is 7ch of tabular figures and cannot grow at all, whatever the
   track does. The station name wraps instead, which is the correct thing to
   give way. */
.vt__table{width:100%;border-collapse:collapse;table-layout:fixed}
.vt__cap{caption-side:top;text-align:left;font-size:var(--size-micro);
  line-height:1.4;margin:0 0 var(--s3);max-width:34ch}
.vt__table th,.vt__table td{text-align:left;padding:var(--s3) 0;
  border-bottom:var(--rule) solid var(--ink);vertical-align:baseline}
.vt__table thead th{font-size:var(--size-micro);text-transform:uppercase;
  letter-spacing:var(--track-micro);font-weight:900;opacity:.7;
  border-bottom:var(--rule-heavy) solid var(--ink);padding-bottom:var(--s2)}
.vt__table tbody th{font-size:var(--size-body);font-weight:700;
  /* the name gives way, not the figure: it wraps inside its own column */
  overflow-wrap:anywhere}
/* the figures column: declared width, tabular figures, read DOWN */
/* `7ch` resolved against the HEADER cell's 11px micro type, about 50px, and the
   tracked capital "JOURNEY" needs 74: it was cut to 67 on the phone. The column
   is sized off the title size the figures are set in, which clears both. */
.vt__num{width:calc(var(--size-title) * 4.4);text-align:right}
.vt__table td.vt__num{white-space:nowrap;font-variant-numeric:tabular-nums}
.vt__table td.vt__num b{font-size:var(--size-title);line-height:1.05;
  font-weight:900;font-stretch:var(--wdth-condensed);
  font-variant-numeric:tabular-nums}
.vt__table td.vt__num i{font-style:normal;font-size:var(--size-micro);
  margin-left:var(--s1);opacity:.7}
.vt__note{font-size:var(--size-micro);line-height:1.4;margin:var(--s4) 0 0;
  max-width:36ch}

/* ------------------------------------------------------------- FOLD 3, AIR --
   Two lists that are deliberately NOT equal: private is two rows and leads,
   commercial is five and follows. A 2x2 grid of matching cards was the thing
   to avoid here.
   ---------------------------------------------------------------------------- */
.va{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:var(--s8);align-items:start}
.va__say,.va__lists{min-width:0}
.va__lists{display:grid;gap:var(--s7)}
.va__h{font-size:var(--size-small);text-transform:uppercase;font-weight:900;
  letter-spacing:var(--track-micro);margin:0 0 var(--s4);
  padding-bottom:var(--s2);border-bottom:var(--rule-heavy) solid currentColor}
.va__dl{margin:0;display:grid;gap:0}
.va__dl > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s5);padding:var(--s3) 0;
  border-bottom:var(--rule) solid currentColor}
.va__dl dt{font-size:var(--size-body);font-weight:700;min-width:0}
.va__dl dd{margin:0;text-align:right;white-space:nowrap}
.va__dl dd b{display:block;font-size:var(--size-title);font-weight:900;
  font-stretch:var(--wdth-condensed);line-height:var(--lh-title)}
.va__dl dd span{display:block;font-size:var(--size-micro);opacity:.75}
/* the private pair leads, so its rows are bigger */
.va__list--lead .va__dl dd b{font-size:var(--size-head);line-height:var(--lh-head)}
.va__list--lead .va__dl dt{font-size:var(--size-title)}

/* ---------------------------------------------------------- FOLD 5, THE MAP --
   One object, not two. V-facility already draws the whole plan with its filter
   over it, so the fold is that single component with air above it.
   ---------------------------------------------------------------------------- */
.vm{margin-top:var(--s7);min-width:0}

/* ------------------------------------- THE LEAD SITS TO ITS OWN MEASURE --
   THE WASTED SPACE, AND WHAT IT ACTUALLY WAS.
   The gate reported 310-326px of empty ground in #map, #stations and #gates at
   1440. None of it was padding: it was a standfirst paragraph set across the
   full 1328px track, which at --size-lead is two short lines with a third of
   the fold's width of bare ground beside them, and then a full-width object
   under it. A line of text 1328px long is also simply unreadable: the eye
   loses the line on the way back.
   Holding the lead to a real measure does both jobs at once. The ground to its
   right stops reading as a hole because the paragraph now has an obvious edge,
   and the fold loses the height the over-long line was costing it.
   ---------------------------------------------------------------------------- */
#map .s__lead,#gates .s__lead,#travel .s__lead,#onsite .s__lead{max-width:52ch}

/* --------------------------------------------------------- FOLD 6, THE RIG --
   V-rig draws one pole with three flags hanging off it at different drops, so
   it needs HEIGHT rather than width and it must not be cropped: the longest
   cloth is 244px below its own halyard drop. The block gives it room and
   nothing else. No overflow is introduced anywhere on the way down to it.
   ---------------------------------------------------------------------------- */
.vg{margin-top:var(--s7);min-width:0;overflow:visible}
@media (max-width:860px){
  /* AT 390 THE THIRD FLAG WAS CUT, and the cut was real, not a scroll window.
     .v-rig__rig is overflow:auto, so the rig scrolls sideways when it is wider
     than its track. Three flags on one pole need more than a 358px column, so
     the third cloth (the longest, at 244px) sat past the right edge and the
     gate read "Gate 3" and "Accessible gate" as clipped. It was.
     The rig is given the full width of the screen instead of the gutter-inset
     column. The gutter is restored as SCROLL PADDING on the rig's own scroller
     rather than as padding on the block: padding on the block would simply hand
     the width straight back, which is what a first attempt did, and the third
     flag was cut exactly as before (measured: block 390px, rig still 358px with
     a 482px scrollWidth).
     The rig keeps its own overflow:auto, which is the component's decision and
     not ours to override. What changes is that it now has 390px to scroll in
     rather than 358px, and it starts at the gutter so the first flag lines up
     with the type above it. */
  .vg{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
  .vg .v-rig__rig{padding-left:var(--gutter);padding-right:var(--gutter);
    scroll-padding-left:var(--gutter)}
}

/* ------------------------------------------------------- FOLD 7, THE BLADES --
   N-blades is a post with six blades swinging off it, and a swing is a rotation
   about the fixing, so the blades sweep OUTSIDE their own resting box. The
   block must therefore never clip: no overflow, and real air to the side so a
   blade at the end of its swing is still inside the fold.
   ---------------------------------------------------------------------------- */
/* and air on the RIGHT: at 1280 the right-hand blades' points rested 4px past
   the screen edge, because the block ran to the gutter and a blade's arrowhead
   sits outboard of its own box */
.vb{min-width:0;overflow:visible;padding:var(--s2) var(--s5) var(--s2) 0}
@media (max-width:860px){
  /* the post goes under the sentence on a phone and takes the full column, with
     the same air: at 390 a swinging blade has the least room to spare */
  .vb{margin-top:var(--s6)}
}

/* -------------------------------------------------------- FOLD 7, ON SITE --
   Four routes onward as a list of rules, not a row of cards. Each one is a
   thumb pad in its own right.
   ---------------------------------------------------------------------------- */
/* the list now sits UNDER the pill in the say column (the blades take the other
   track), so it needs the air the grid gap used to give it */
.vo{list-style:none;margin:var(--s6) 0 0;padding:0;min-width:0}
.vo__i{border-top:var(--rule) solid var(--ink)}
.vo__i:last-child{border-bottom:var(--rule) solid var(--ink)}
.vo__i a{display:flex;flex-direction:column;gap:var(--s1);
  padding:var(--s4) 0;min-height:var(--tap-min);justify-content:center;
  text-decoration:none;color:inherit}
.vo__i a b{font-size:var(--size-title);line-height:var(--lh-title);font-weight:900;
  font-stretch:var(--wdth-condensed)}
.vo__i a span{font-size:var(--size-micro);text-transform:uppercase;
  letter-spacing:var(--track-micro);opacity:.75}

/* ====================================================== 390, ITS OWN LAYOUT ==
   Not the desktop narrower. The hero figure moves ABOVE the sentence, because
   on a phone the number is the first thing worth seeing and there is no column
   to put it beside. Every pair of columns becomes one, and the air lists lose
   their size difference because at this width it only makes the small one hard
   to read.
   ============================================================================ */
@media (max-width:860px){
  .vh{grid-template-columns:1fr;gap:var(--s6);align-items:start}
  /* on the phone the number still leads: it is the fold's object at every
     width, and it is the first thing the first screen should say */
  .vh__fig{order:-1;border-top:0;padding-top:0}
  .vh__say{order:2}
  .vh__u{max-width:28ch}
  .vt,.va{grid-template-columns:1fr;gap:var(--s6)}
  .vt__rail{order:-1}
  .va__list--lead .va__dl dd b{font-size:var(--size-title)}
  .va__list--lead .va__dl dt{font-size:var(--size-body)}
}
@media (max-width:640px){
  /* The "28" is the object of this fold at EVERY width, and this block used to
     drop it to --size-display, which resolves to 44px on a 390 screen: a
     36px-wide number as the dominant thing on the first screen, which it
     plainly was not. Measured, not guessed. It stays sized against its own
     column, which is full width here, so the number fills the phone the way it
     fills the desktop track. */
  .vh__n{font-size:52cqw;line-height:.78}
  .va__dl > div{flex-direction:column;align-items:flex-start;gap:var(--s1)}
  .va__dl dd{text-align:left}
  .va__dl dd b,.va__dl dd span{display:inline}
  .va__dl dd span{margin-left:var(--s2)}
  .vt__table th,.vt__table td{font-size:var(--size-body)}
  .vt__table td{font-size:var(--size-title)}
}


/* OVERLAPS THE GATE FOUND (and Louis saw). A .76 line box lets the "28" hang
   below its own box and land on the caption under it; the air list's time sat
   on its distance for the same reason. Each takes a line box that holds its own
   glyphs, and the thing under it takes a real gap. */
.vh__n{line-height:.9;margin-bottom:.13em}
.vh__u{display:block}
.va__dl dd b{line-height:1.05}
.va__dl dd span{margin-top:var(--s1)}
@media (max-width:640px){.vh__n{line-height:.9}}

/* ==========================================================================
   THE VISIT HERO, RE-PROPORTIONED (measured 21 Sep: the fold was 1,028px tall on
   a 720px screen and 1,329 on a 1080px one, at every width).
   Two causes, both in the column split. The figure had the WIDE track but "28"
   in the condensed cut is only ~0.9em wide, so it filled half its column and
   left the rest bare; and the headline had the NARROW track, so at mega size it
   broke into five lines and pushed the sentence and both actions off the first
   screen. The tracks swap weight: the figure gets a column it actually fills,
   the headline gets the room to set in three lines one size down.
   ========================================================================== */
@media (min-width:861px){
  .vh{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);align-items:center}
  /* by the column's WIDTH, and never taller than the screen can carry: on a
     short laptop window the width-only size pushed both actions off screen one */
  .vh__n{font-size:min(98cqw,50svh)}
  /* the headline is the say column's tallest thing, so it is what decides
     whether the actions make the first screen: the system's display size, and
     never more than the window's height can carry in three lines */
  .vh__say .s__h{font-size:min(var(--size-display),12svh);margin-bottom:var(--s5);text-wrap:balance}
  .vh__say .hero__sub{margin-top:0}
  #visit-head{padding-block:var(--s7) var(--s8)}
}

@media (min-width:861px) and (max-height:820px){
  #visit-head{padding-block:var(--s5) var(--s6);min-height:0}
  .vh__say .s__h{margin-bottom:var(--s4)}
}

/* THE FINGERPOST NEEDS ABOUT 640px TO HANG ITS BLADES BOTH WAYS. In the flipped
   two-column lead it gets that from ~1240 up; between 861 and 1240 the column
   was narrower than the post and the right-hand blades ran off the screen (53px
   at 1100, a width the suite never tested). Below 1240 the words go above and
   the post takes the whole measure. */
@media (max-width:1240px){
  #onsite .grid-lead--flip{grid-template-columns:minmax(0,1fr)}
  /* centred, with air BOTH sides: left-hanging blades reach outboard of the
     block too, and hard against the gutter they ran 28px off the left edge */
  #onsite .vb{max-width:720px;margin-inline:auto;padding-inline:var(--s7)}
}

/* THE RAIL TABLE at 861 to 1100: beside the switcher it was pushed past the right
   edge (966..1063 on a 960 screen). Under 1100 it goes above the switcher, as it
   already does on the phone. */
@media (max-width:1100px){
  .vt{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .vt__rail{order:-1;max-width:560px}
}
/* the fingerpost's side air is for the wide layouts; on a phone the block is the
   column and the extra padding pushed it 7px past a 360 screen */
@media (max-width:860px){#onsite .vb{padding-inline:0;max-width:100%}}