/* ---------------------------------------------------------------------------
 * Sliding rail — shared by every "latest entries" card block.
 *
 * Blog insights blocks and the service pages' destination planning block are
 * driven by a reference picker and fall back to the six newest entries. Three
 * cards keep the normal 3-up grid; once a block holds more than three the grid
 * turns into a horizontal track, three stay in view and the round arrows slide
 * it one card at a time (wrapping at the ends), like the home page carousels.
 * ------------------------------------------------------------------------- */
.vg-rail{position:relative}
.vg-rail-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;min-width:0}
.vg-rail-track>*{min-width:0}
.vg-rail--carousel .vg-rail-track{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.vg-rail--carousel .vg-rail-track::-webkit-scrollbar{width:0;height:0}
.vg-rail--carousel .vg-rail-track>*{flex:0 0 calc((100% - 48px)/3);min-width:0;scroll-snap-align:start}
.vg-rail-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid #cfdde9;
  border-radius:50%;
  background:#fff;
  color:var(--vg-navy);
  font:inherit;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(4,24,46,.14);
  transition:background .2s,color .2s,border-color .2s;
}
.vg-rail-arrow:hover{background:var(--vg-red);border-color:var(--vg-red);color:#fff}
.vg-rail-arrow:focus-visible{outline:2px solid var(--vg-red);outline-offset:2px}
.vg-rail-arrow[data-rail-dir="prev"]{left:-22px}
.vg-rail-arrow[data-rail-dir="next"]{right:-22px}
@media(max-width:1200px){
  .vg-rail-arrow[data-rail-dir="prev"]{left:-12px}
  .vg-rail-arrow[data-rail-dir="next"]{right:-12px}
}
/* Below the desktop grid three cards no longer fit, so the track drops to two
   up and then to one. The arrows stay in play — they simply leave the card
   edges (where they would sit off-screen or cover the artwork) and become a
   centred pair underneath the track, which is where a thumb expects them. */
@media(max-width:900px){
  .vg-rail-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .vg-rail--carousel{padding-bottom:56px}
  .vg-rail--carousel .vg-rail-track{gap:14px}
  .vg-rail--carousel .vg-rail-track>*{flex-basis:calc((100% - 14px)/2)}
  .vg-rail-arrow{top:auto;bottom:0;transform:none;width:42px;height:42px;font-size:18px}
  .vg-rail-arrow[data-rail-dir="prev"]{left:calc(50% - 50px);right:auto}
  .vg-rail-arrow[data-rail-dir="next"]{right:calc(50% - 50px);left:auto}
}
@media(max-width:640px){
  .vg-rail-track{grid-template-columns:1fr}
  .vg-rail--carousel .vg-rail-track>*{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .vg-rail--carousel .vg-rail-track{scroll-behavior:auto}
}