/* ==========================================================================
   SIX CAMPAIGN TYPES — THE SLIDING RAIL
   Applied from the compact-layout lab (/gads-six-y2-v5.html, "V5 Horizontal
   Explorer"), picked on 2026-08-30.

   The six cards, their words, their colours and their drawings are untouched.
   This file changes one thing: the three-column grid becomes one rail that
   travels sideways — three whole cards and a slice of the fourth on a desktop,
   one whole card and a slice of the next on a phone.

   Loaded AFTER gsvc.css, so its #gsvc-six rules out-rank the section's own
   .sv-grid rules at every width, including inside media queries.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · the drawings, so they survive a frame that is not square
   The scene inside .cv is sized from `4.4cqw` of its well and the well is a
   square, so height and width scale together. The phone step below makes the
   well 4:3; without this the drawing would keep its square-sized type in a
   short box and spill out of the bottom.

   `min(4.4cqw,4.4cqh)` IS `4.4cqw` while the well is square, so the desktop
   rail is pixel-identical to what the page already had. Shorten the well and
   the whole composition scales down proportionally — nothing is redrawn.

   The width cap is the second half of the same problem: most of each scene is
   em-driven, but two pieces are width-driven — YouTube's 16:9 plate and the
   article mock behind the Display banner — and those do not shrink when the
   type does. Past about 1.4:1 they push the scene's bottom out of the well.
   So the scene is allowed to be at most 1.38 times as wide as it is tall and
   is centred; the well carries the same flat tint the scene is painted on, so
   the strips either side are invisible, and the hairline grid is bled back
   out over them.
   -------------------------------------------------------------------------- */
#gsvc-six .sc-pic .cv-well{ container-type:size; background:var(--hs); }
#gsvc-six .sc-pic .cv{
  --bar: max(0px, (100cqw - 138cqh) / 2);
  inset:0 var(--bar);
  font-size:clamp(9px, min(4.4cqw, 4.4cqh), 23px); }
#gsvc-six .sc-pic .cv::before,
#gsvc-six .sc-pic .cv::after{ inset:0 calc(-1 * var(--bar)); }

/* --------------------------------------------------------------------------
   1 · the rail
   Two rules keep the ends honest:
     · the scroller is exactly the width of the container and carries no
       horizontal padding, so card one is flush with the left edge at rest and
       card six is flush with the right edge at the end — there is never an
       uncovered strip at either end
     · the vertical padding that gives the cards' hover shadow room is added
       with a matching negative margin, so the rail occupies no more height
       than the cards do and nothing below it moves
   -------------------------------------------------------------------------- */
.y5{ position:relative; margin-top:clamp(16px,1.8vw,24px); }

#gsvc-six{ display:flex; align-items:stretch; margin-top:0;
  --y5-gap:20px; --y5-peek:132px;
  gap:var(--y5-gap);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:0;
  padding-block:10px 22px; margin-block:-10px -12px;
  scrollbar-width:none; -ms-overflow-style:none; }
#gsvc-six::-webkit-scrollbar{ display:none; }

#gsvc-six .sc{
  flex:0 0 calc((100% - 3*var(--y5-gap) - var(--y5-peek)) / 3);
  scroll-snap-align:start; scroll-snap-stop:always; border-radius:19px; }

/* the card is a little narrower than the grid's was, so the type comes down
   with it — the picture keeps its square */
#gsvc-six .sc-pic .cv-well{ aspect-ratio:1/1; }
#gsvc-six .sc-txt{ padding:18px 20px 18px; }
#gsvc-six .sc-name{ font-size:clamp(19px,1.65vw,23px); }
#gsvc-six .sc-line{ margin-top:8px; font-size:14.4px; line-height:1.46; }
#gsvc-six .sc-foot{ margin-top:14px; padding-top:13px; }
#gsvc-six .sm-01{ padding:13px 18px 14px; }
#gsvc-six .sm-rail{ gap:6px; }
#gsvc-six .sm-stop b{ font-size:10.1px; letter-spacing:-.02em; }

/* ---------- 2 · the ends: no fade at all --------------------------------- */
/* Removed 2026-09-09. The rail used to wash 26px of white over each end so the
   peeking card dissolved rather than stopped. It read as a smudge on the card,
   not as "there is more" — the peek, the counter and the arrows already say
   that. Cards now end on their own edge, sharp, at both ends.
   `.at-start` / `.at-end` are still set by gsvc-rail.js; they drive the arrow
   buttons' disabled state, so nothing else has to change. */

/* ---------- 3 · the controls, in the heading row so no card is covered ---- */
.y5-ctl{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.y5-count{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4); }
.y5-nav{ display:grid; place-items:center; width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line-b); background:#fff; color:var(--navy);
  box-shadow:0 1px 2px rgba(15,27,61,.06);
  transition:background .18s ease, border-color .18s ease, color .18s ease,
             opacity .18s ease, transform .18s ease; }
.y5-nav svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.3;
  stroke-linecap:round; stroke-linejoin:round; }
.y5-nav:hover{ background:#EAF1FE; border-color:var(--g-blue); color:var(--g-blue); }
.y5-nav:active{ transform:scale(.94); }
.y5-nav[disabled]{ opacity:.32; pointer-events:none; }

/* ---------- 4 · how far along the rail is -------------------------------- */
.y5-bar{ position:relative; height:4px; margin-top:14px; border-radius:99px;
  background:#E3E8F1; overflow:hidden; }
.y5-bar i{ position:absolute; top:0; bottom:0; left:0; border-radius:99px;
  background:var(--brand); transition:left .2s ease, width .2s ease; }

@media (max-width:1200px){
  #gsvc-six{ --y5-gap:18px; --y5-peek:104px; }
  #gsvc-six .sc{ flex:0 0 calc((100% - 2*var(--y5-gap) - var(--y5-peek)) / 2); }
}
@media (max-width:700px){
  #gsvc-six{ --y5-gap:12px; --y5-peek:44px;
    padding-block:8px 18px; margin-block:-8px -10px; }
  #gsvc-six .sc{ flex:0 0 calc(100% - var(--y5-gap) - var(--y5-peek)); }
  #gsvc-six .sc-pic .cv-well{ aspect-ratio:4/3; }
  #gsvc-six .sc-txt{ padding:15px 16px 16px; }
  #gsvc-six .sc-name{ font-size:20px; }
  .y5-ctl{ margin-left:0; width:100%; }
  .y5-nav{ display:none; }
  .y5-count{ margin-left:auto; }
}
@media (prefers-reduced-motion:reduce){ #gsvc-six{ scroll-behavior:auto; } }